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

2025-12-15 19:12:00 +01:00
parent 7bacff967e
commit 844ab8661c
47 changed files with 1283 additions and 511 deletions
--- a/legalconsenthub/app/pages/administration.vue
+++ b/legalconsenthub/app/pages/administration.vue
@@ -40,7 +40,8 @@
            <div>
              <h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
              <p class="text-sm text-muted mt-1">
-                {{ $t('templates.lastModified') }} {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
+                {{ $t('templates.lastModified') }}
+                {{ currentTemplate.modifiedAt ? formatDate(new Date(currentTemplate.modifiedAt)) : '-' }}
              </p>
            </div>
            <UBadge v-if="hasUnsavedChanges" :label="$t('templates.unsavedChanges')" color="warning" variant="subtle" />
@@ -206,17 +207,20 @@ async function saveTemplate() {

  try {
    const parsedData = JSON.parse(editorContent.value)
-    const dataWithDates = convertDates(parsedData) as ApplicationFormDto
+    const dataWithDates = convertDates(parsedData)

    if (currentTemplate.value?.id) {
-      currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
+      currentTemplate.value = await updateApplicationFormTemplate(
+        currentTemplate.value.id,
+        dataWithDates as ApplicationFormDto
+      )
      toast.add({
        title: $t('common.success'),
        description: $t('templates.updated'),
        color: 'success'
      })
    } else {
-      currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
+      currentTemplate.value = await createApplicationFormTemplate(dataWithDates as ApplicationFormDto)
      toast.add({
        title: $t('common.success'),
        description: $t('templates.created'),
--- a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
+++ b/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>
--- a/legalconsenthub/app/pages/application-forms/[id]/versions.vue
+++ b/legalconsenthub/app/pages/application-forms/[id]/versions.vue
@@ -16,7 +16,7 @@
    <template #body>
      <div class="p-6">
        <VersionHistory
-          v-if="applicationForm"
+          v-if="applicationForm?.id"
          :application-form-id="applicationForm.id"
          :current-form="applicationForm"
          @restored="handleRestored"
@@ -46,6 +46,9 @@ async function handleRestored() {
    description: $t('versions.restoredDescription'),
    color: 'success'
  })
+  if (!applicationForm.value?.id) {
+    return
+  }
  router.push(`/application-forms/${applicationForm.value.id}/0`)
 }
 </script>
--- a/legalconsenthub/app/pages/create.vue
+++ b/legalconsenthub/app/pages/create.vue
@@ -28,6 +28,7 @@
            @save="onSave"
            @submit="onSubmit"
            @add-input-form="handleAddInputForm"
+            @update:form-element-sections="handleFormElementSectionsUpdate"
          >
            <UFormField :label="$t('common.name')" class="mb-4">
              <UInput v-model="applicationFormTemplate.name" class="w-full" />
@@ -110,7 +111,7 @@ async function onSave() {

 async function onSubmit() {
  const applicationForm = await prepareAndCreateApplicationForm()
-  if (applicationForm) {
+  if (applicationForm?.id) {
    await submitApplicationForm(applicationForm.id)
    await navigateTo('/')
    toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
@@ -123,6 +124,12 @@ function handleAddInputForm() {
  // No action needed here
 }

+function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
+  if (applicationFormTemplate.value) {
+    applicationFormTemplate.value.formElementSections = sections
+  }
+}
+
 async function prepareAndCreateApplicationForm() {
  if (!applicationFormTemplate.value) {
    console.error('Application form data is undefined')
--- a/legalconsenthub/app/pages/index.vue
+++ b/legalconsenthub/app/pages/index.vue
@@ -49,9 +49,9 @@
      <div class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-4xl mx-auto p-4">
        <UCard
          v-for="(applicationFormElem, index) in applicationForms"
-          :key="applicationFormElem.id"
+          :key="applicationFormElem.id ?? index"
          class="cursor-pointer hover:ring-2 hover:ring-primary transition-all duration-200"
-          @click="navigateTo(`application-forms/${applicationFormElem.id}/0`)"
+          @click="openApplicationForm(applicationFormElem.id)"
        >
          <template #header>
            <div class="flex items-start justify-between gap-3">
@@ -63,6 +63,7 @@
              </div>
              <div class="flex items-center gap-2">
                <UBadge
+                  v-if="applicationFormElem.status"
                  :label="applicationFormElem.status"
                  :color="getStatusColor(applicationFormElem.status)"
                  variant="subtle"
@@ -87,8 +88,11 @@
              <UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
              <span class="text-muted">
                {{ $t('applicationForms.lastEditedBy') }}
-                <span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
-                {{ $t('common.on') }} {{ formatDate(applicationFormElem.modifiedAt) }}
+                <span class="font-medium text-highlighted">
+                  {{ applicationFormElem.lastModifiedBy?.name ?? '-' }}
+                </span>
+                {{ $t('common.on') }}
+                {{ applicationFormElem.modifiedAt ? formatDate(applicationFormElem.modifiedAt) : '-' }}
              </span>
            </div>

@@ -96,8 +100,11 @@
              <UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
              <span class="text-muted">
                {{ $t('applicationForms.createdBy') }}
-                <span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
-                {{ $t('common.on') }} {{ formatDate(applicationFormElem.createdAt) }}
+                <span class="font-medium text-highlighted">
+                  {{ applicationFormElem.createdBy?.name ?? '-' }}
+                </span>
+                {{ $t('common.on') }}
+                {{ applicationFormElem.createdAt ? formatDate(applicationFormElem.createdAt) : '-' }}
              </span>
            </div>
          </div>
@@ -177,6 +184,9 @@ const applicationForms = computed({
 })

 function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
+  if (!applicationForm.id) {
+    return []
+  }
  return [
    {
      label: $t('common.delete'),
@@ -206,4 +216,11 @@ async function deleteApplicationForm(applicationFormId: string) {
  )
  isDeleteModalOpen.value = false
 }
+
+function openApplicationForm(applicationFormId: string | null | undefined) {
+  if (!applicationFormId) {
+    return
+  }
+  navigateTo(`application-forms/${applicationFormId}/0`)
+}
 </script>