fix(frontend): Keep dirty state when switching sections

legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue

@@ -72,6 +72,16 @@ const { getApplicationFormById, updateApplicationForm } = useApplicationForm()
 const route = useRoute()
 const { user } = useAuth()
 
+definePageMeta({
+  // Prevent whole page from re-rendering when navigating between sections to keep state
+  key: (route) => `${route.params.id}`,
+})
+
+onMounted(() => {
+  const sectionIndex = parseInt(route.params.sectionIndex[0])
+  activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
+})
+
 const items = [
   [
     {
@@ -85,25 +95,12 @@ const items = [
 const stepper = useTemplateRef('stepper')
 const activeStepperItemIndex = ref<number>(0)
 
-const currentFormElementSection = computed<FormElementSectionDto>(() => {
-  return applicationForm.value?.formElementSections[activeStepperItemIndex.value]
-})
-
-watch(activeStepperItemIndex, async (newActiveStepperItem: number) => {
-  activeStepperItemIndex.value = newActiveStepperItem
-  await navigateTo(`/application-forms/${route.params.id}/${newActiveStepperItem}`)
-})
-
-watch(
-  () => route.path,
-  (_) => {
-    const sectionIndex = parseInt(route.params.sectionIndex[0])
-    activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
-  },
-  { immediate: true }
+const currentFormElementSection = computed<FormElementSectionDto>(
+  () => applicationForm.value?.formElementSections[activeStepperItemIndex.value]
 )
 
-const { data, error } = await useAsyncData<ApplicationFormDto>(async () => {
+const { data, error } = await useAsyncData<ApplicationFormDto>(`application-form-${route.params.id}`, async () => {
+  console.log('Fetching application form with ID:', route.params.id)
   return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
 })
 
@@ -111,14 +108,7 @@ if (error.value) {
   throw createError({ statusText: error.value.message })
 }
 
-const applicationForm = computed<ApplicationFormDto>({
-  get: () => data?.value as ApplicationFormDto,
-  set: (val: ApplicationFormDto) => {
-    if (val && data.value) {
-      data.value = val
-    }
-  }
-})
+const applicationForm = computed<ApplicationFormDto>(() => data?.value as ApplicationFormDto)
 
 const isReadOnly = computed(() => {
   return applicationForm.value?.createdBy.id !== user.value?.id
@@ -126,7 +116,7 @@ const isReadOnly = computed(() => {
 
 const stepperItems = computed(() => {
   const stepperItems: StepperItem[] = []
-  applicationForm.value.formElementSections.forEach((section: FormElementSectionDto, index: number, _) => {
+  applicationForm.value.formElementSections.forEach((section: FormElementSectionDto) => {
     stepperItems.push({
       title: section.shortTitle,
       description: section.description
@@ -141,9 +131,7 @@ async function navigateStepper(direction: 'forward' | 'backward') {
   } else {
     stepper.value?.prev()
   }
-  const targetSectionIndex =
-    direction === 'forward' ? activeStepperItemIndex.value + 1 : activeStepperItemIndex.value - 1
-  await navigateTo(`/application-forms/${route.params.id}/${targetSectionIndex}`)
+  await navigateTo(`/application-forms/${route.params.id}/${activeStepperItemIndex.value}`)
 }
 
 async function onSubmit() {