feat(frontend,backend): Add application form name

legalconsenthub-backend/api/legalconsenthub.yml

@@ -675,6 +675,7 @@ components:
       type: object
       required:
         - id
+        - name
         - formElements
         - isTemplate
         - createdAt
@@ -683,6 +684,8 @@ components:
         id:
           type: string
           format: uuid
+        name:
+          type: string
         formElements:
           type: array
           items:
@@ -698,10 +701,13 @@ components:
 
     CreateApplicationFormDto:
       required:
+        - name
         - formElements
         - isTemplate
       type: object
       properties:
+        name:
+          type: string
         formElements:
           type: array
           items:

legalconsenthub-backend/src/main/kotlin/com/betriebsratkanzlei/legalconsenthub/application_form/ApplicationForm.kt

@@ -21,6 +21,9 @@ class ApplicationForm(
     @GeneratedValue
     var id: UUID? = null,
 
+    @Column(nullable = false)
+    var name: String = "",
+
     @OneToMany(mappedBy = "applicationForm", cascade = [CascadeType.ALL], orphanRemoval = true)
     var formElements: MutableList<FormElement> = mutableListOf(),
 

legalconsenthub-backend/src/main/kotlin/com/betriebsratkanzlei/legalconsenthub/application_form/ApplicationFormMapper.kt

@@ -10,6 +10,7 @@ class ApplicationFormMapper(private val formElementMapper: FormElementMapper) {
     fun toApplicationFormDto(applicationForm: ApplicationForm): ApplicationFormDto {
         return ApplicationFormDto(
             id = applicationForm.id ?: throw IllegalStateException("ApplicationForm ID must not be null!"),
+            name = applicationForm.name,
             formElements = applicationForm.formElements.map { formElementMapper.toFormElementDto(it) },
             isTemplate = applicationForm.isTemplate,
             createdAt = applicationForm.createdAt ?: LocalDateTime.now(),
@@ -20,6 +21,7 @@ class ApplicationFormMapper(private val formElementMapper: FormElementMapper) {
     fun toApplicationForm(applicationForm: ApplicationFormDto): ApplicationForm {
         return ApplicationForm(
             id = applicationForm.id,
+            name = applicationForm.name,
             formElements = applicationForm.formElements.map { formElementMapper.toFormElement(it) }.toMutableList(),
             isTemplate = applicationForm.isTemplate,
             createdAt = applicationForm.createdAt,
@@ -28,7 +30,10 @@ class ApplicationFormMapper(private val formElementMapper: FormElementMapper) {
     }
 
     fun toApplicationForm(createApplicationFormDto: CreateApplicationFormDto): ApplicationForm {
-        val applicationForm = ApplicationForm(isTemplate = createApplicationFormDto.isTemplate)
+        val applicationForm = ApplicationForm(
+            name = createApplicationFormDto.name,
+            isTemplate = createApplicationFormDto.isTemplate
+        )
         applicationForm.formElements = createApplicationFormDto.formElements
             .map { formElementMapper.toFormElement(it, applicationForm) }
             .toMutableList()

legalconsenthub-backend/src/main/resources/db/migrations/001-schema.sql

@@ -4,6 +4,7 @@ create table application_form
     created_at  timestamp(6) not null,
     modified_at timestamp(6) not null,
     id          uuid         not null,
+    name        varchar(255) not null,
     primary key (id)
 );
 

legalconsenthub/pages/create.vue

@@ -22,6 +22,9 @@
 
         <UPageCard variant="subtle">
           <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+            <UFormField label="Name">
+              <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
+            </UFormField>
             <FormEngine v-model="formElements" />
             <UButton type="submit">Submit</UButton>
           </UForm>
@@ -44,11 +47,20 @@ const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationFormTemplates()
 })
 
-const formElements = computed({
-  get: () => data?.value?.content[0].formElements ?? [],
+const applicationFormTemplate = computed({
+  get: () => data?.value?.content[0] ?? undefined,
   set: (val) => {
     if (val && data.value) {
-      data.value.content[0].formElements = val
+      data.value.content[0] = val
+    }
+  }
+})
+
+const formElements = computed({
+  get: () => applicationFormTemplate.value?.formElements ?? [],
+  set: (val) => {
+    if (val && applicationFormTemplate.value) {
+      applicationFormTemplate.value.formElements = val
     }
   }
 })
@@ -78,8 +90,8 @@ const ampelStatusEmoji = computed(() => {
 })
 
 async function onSubmit() {
-  if (data?.value?.content[0]) {
-    await createApplicationForm(data.value.content[0])
+  if (applicationFormTemplate.value) {
+    await createApplicationForm(applicationFormTemplate.value)
     await navigateTo('/')
   } else {
     console.error('Application form data is undefined')

legalconsenthub/pages/index.vue

@@ -27,8 +27,15 @@
           :to="`application-forms/${applicationFormElem.id}`"
         >
           <template #body>
-            #{{ index }} {{ applicationFormElem.id }} {{ applicationFormElem.createdAt }}
-            {{ applicationFormElem.isTemplate }}
+            <div>
+              <p class="font-medium text-(--ui-text-highlighted) text-base">
+                #{{ index }} {{ applicationFormElem.name }}
+              </p>
+              <p class="text-(--ui-text-muted) text-sm">
+                Zuletzt bearbeitet: {{ formatDate(applicationFormElem.modifiedAt) }}
+              </p>
+              <p class="text-(--ui-text-muted) text-sm">Erstellt: {{ formatDate(applicationFormElem.createdAt) }}</p>
+            </div>
           </template>
         </UPageCard>
       </UPageList>