major(fullstack): Add dynamic section spawning, removal of app. form create DTOs,

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

@@ -34,12 +34,13 @@
         <FormStepperWithNavigation
           :form-element-sections="applicationForm.formElementSections"
           :initial-section-index="sectionIndex"
-          :application-form-id="applicationForm.id"
+          :application-form-id="applicationForm.id ?? undefined"
           :disabled="isReadOnly"
           @save="onSave"
           @submit="onSubmit"
           @navigate="handleNavigate"
           @add-input-form="handleAddInputForm"
+          @update:form-element-sections="handleFormElementSectionsUpdate"
         />
       </div>
     </template>
@@ -87,7 +88,7 @@ const sectionIndex = computed(() => {
 })
 
 const isReadOnly = computed(() => {
-  return applicationForm.value?.createdBy.keycloakId !== user.value?.keycloakId
+  return applicationForm.value?.createdBy?.keycloakId !== user.value?.keycloakId
 })
 
 const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
@@ -115,7 +116,7 @@ watch(
 )
 
 async function onSave() {
-  if (applicationForm.value) {
+  if (applicationForm.value?.id) {
     const updated = await updateForm(applicationForm.value.id, applicationForm.value)
     if (updated) {
       updateApplicationForm(updated)
@@ -125,7 +126,7 @@ async function onSave() {
 }
 
 async function onSubmit() {
-  if (applicationForm.value) {
+  if (applicationForm.value?.id) {
     await submitApplicationForm(applicationForm.value.id)
     await navigateTo('/')
     toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
@@ -141,4 +142,10 @@ function handleAddInputForm(updatedForm: ApplicationFormDto | undefined) {
     updateApplicationForm(updatedForm)
   }
 }
+
+function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
+  if (applicationForm.value) {
+    applicationForm.value.formElementSections = sections
+  }
+}
 </script>