fix(frontend): Keep dirty state when switching sections

legalconsenthub/pages/create.vue

@@ -26,7 +26,7 @@
             <UFormField label="Name">
               <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
             </UFormField>
-            <UStepper ref="stepper" v-model="activeStepperItem" :items="stepperItems" class="w-full" />
+            <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
             <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
               {{ currentFormElementSection.title }}
             </h1>
@@ -72,14 +72,14 @@ const { validateFormElements, getHighestComplianceStatus } = useApplicationFormV
 const { userDto, selectedOrganization } = useAuth()
 
 const stepper = useTemplateRef('stepper')
-const activeStepperItem = ref<number>(0)
+const activeStepperItemIndex = ref<number>(0)
 
-const currentFormElementSection = computed(() => {
-  return applicationFormTemplate.value?.formElementSections[activeStepperItem.value]
-})
+const currentFormElementSection = computed(
+  () => applicationFormTemplate.value?.formElementSections[activeStepperItemIndex.value]
+)
 
-watch(activeStepperItem, async (newActiveStepperItem: number) => {
-  activeStepperItem.value = newActiveStepperItem
+watch(activeStepperItemIndex, async (newActiveStepperItem: number) => {
+  activeStepperItemIndex.value = newActiveStepperItem
 })
 
 const { data, error } = await useAsyncData<PagedApplicationFormDto>(async () => {
@@ -113,15 +113,10 @@ async function navigateStepper(direction: 'forward' | 'backward') {
   }
 }
 
-const applicationFormTemplate = computed({
+const applicationFormTemplate = computed(
   // TODO: Don't select always the first item, allow user to select a template
-  get: () => data?.value?.content[0] ?? undefined,
-  set: (val) => {
-    if (val && data.value) {
-      data.value.content[0] = val
-    }
-  }
-})
+  () => data?.value?.content[0] ?? undefined
+)
 
 const formElements = computed({
   get: () => currentFormElementSection?.value?.formElements ?? [],