feat(frontend): Add DeleteModal

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

@@ -19,7 +19,7 @@
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
         <UPageCard variant="subtle">
           <UForm class="space-y-4" :state="{}" @submit="onSubmit">
             <FormEngine v-if="applicationForm" v-model="applicationForm.formElements" />
@@ -62,6 +62,7 @@ const applicationForm = computed({
 async function onSubmit() {
   if (data?.value) {
     await updateApplicationForm(data.value.id, data.value)
+    await navigateTo('/')
   }
 }
 </script>

legalconsenthub/pages/create.vue

@@ -15,7 +15,7 @@
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
         <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
           {{ ampelStatusEmoji }}
         </UPageCard>

legalconsenthub/pages/index.vue

@@ -19,33 +19,57 @@
     </template>
 
     <template #body>
-      <UPageList>
-        <UPageCard
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
+        <div
           v-for="(applicationFormElem, index) in applicationForms"
-          :key="index"
-          variant="ghost"
-          :to="`application-forms/${applicationFormElem.id}`"
+          :key="applicationFormElem.id"
+          class="flex justify-between items-center p-4 bg-white rounded-lg shadow-md"
+          @click="navigateTo(`application-forms/${applicationFormElem.id}`)"
         >
-          <template #body>
-            <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>
+          <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>
+          <div>
+            <UPageLinks :links="getLinksForApplicationForm(applicationFormElem)" />
+          </div>
+        </div>
+      </div>
     </template>
+    <DeleteModal
+      v-if="isDeleteModalOpen && applicationFormNameToDelete"
+      v-model:is-open="isDeleteModalOpen"
+      :application-form-to-delete="applicationFormNameToDelete"
+      @delete="deleteApplicationForm($event)"
+    />
   </UDashboardPanel>
 </template>
 
 <script setup lang="ts">
-import type { PagedApplicationFormDto } from '~/.api-client'
-const { getAllApplicationForms } = useApplicationForm()
+import type { ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
+const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm()
+const route = useRoute()
+
+const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
+  return await getAllApplicationForms()
+})
+
+const isDeleteModalOpen = computed<boolean>({
+  get: () => 'delete' in route.query,
+  set: (isOpen: boolean) => {
+    if (isOpen) return
+    navigateTo({ path: route.path, query: {} })
+  }
+})
+
+const applicationFormNameToDelete = computed(() => {
+  return data?.value?.content.find((appForm) => appForm.id === route.query.id)
+})
 
 const items = [
   [
@@ -57,10 +81,6 @@ const items = [
   ]
 ]
 
-const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
-  return await getAllApplicationForms()
-})
-
 const applicationForms = computed({
   get: () => data?.value?.content ?? [],
   set: (val) => {
@@ -69,4 +89,28 @@ const applicationForms = computed({
     }
   }
 })
+
+function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
+  return [
+    {
+      label: 'Bearbeiten',
+      icon: 'i-lucide-file-pen',
+      to: `/application-forms/${applicationForm.id}`
+    },
+    {
+      label: 'Löschen',
+      icon: 'i-lucide-trash',
+      to: `?delete&id=${applicationForm.id}`
+    }
+  ]
+}
+
+async function deleteApplicationForm(applicationFormId: string) {
+  await deleteApplicationFormById(applicationFormId)
+  data.value?.content.splice(
+    data.value?.content.findIndex((appForm) => appForm.id === applicationFormId),
+    1
+  )
+  isDeleteModalOpen.value = false
+}
 </script>