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

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>