From c0caee78c20d79207d4122db9ecf2524af429634 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sun, 16 Mar 2025 08:11:09 +0100
Subject: [PATCH] feat(frontend): Add DeleteModal

---
 legalconsenthub/components/DeleteModal.vue    | 25 +++++
 legalconsenthub/components/Login.vue          |  6 +-
 legalconsenthub/components/Register.vue       | 10 +-
 .../pages/application-forms/[id].vue          |  2 +-
 legalconsenthub/pages/create.vue              |  2 +-
 legalconsenthub/pages/index.vue               | 92 ++++++++++++++-----
 legalconsenthub/utils/date.ts                 | 10 ++
 7 files changed, 113 insertions(+), 34 deletions(-)
 create mode 100644 legalconsenthub/components/DeleteModal.vue
 create mode 100644 legalconsenthub/utils/date.ts

diff --git a/legalconsenthub/components/DeleteModal.vue b/legalconsenthub/components/DeleteModal.vue
new file mode 100644
index 0000000..8ac73f6
--- /dev/null
+++ b/legalconsenthub/components/DeleteModal.vue
@@ -0,0 +1,25 @@
+<template>
+  <UModal :open="isOpen" title="Mitbestimmungsantrag löschen" @update:open="$emit('update:isOpen', $event)">
+    <template #body>
+      Möchten Sie wirklich den Mitbestimmungsantrag <strong>{{ applicationFormToDelete.name }}</strong> löschen?
+    </template>
+    <template #footer>
+      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
+      <UButton label="Löschen" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto } from '~/.api-client'
+
+defineEmits<{
+  (e: 'delete', id: string): void
+  (e: 'update:isOpen', value: boolean): void
+}>()
+
+defineProps<{
+  applicationFormToDelete: ApplicationFormDto
+  isOpen: boolean
+}>()
+</script>
diff --git a/legalconsenthub/components/Login.vue b/legalconsenthub/components/Login.vue
index 858c5b9..62509ef 100644
--- a/legalconsenthub/components/Login.vue
+++ b/legalconsenthub/components/Login.vue
@@ -4,12 +4,12 @@
     <form @submit.prevent="handleLogin">
       <div class="form-group">
         <label for="email-login">Email:</label>
-        <input type="email" id="email-login" v-model="email" required />
+        <input id="email-login" v-model="email" type="email" required />
       </div>
 
       <div class="form-group">
         <label for="password-login">Passwort:</label>
-        <input type="password" id="password-login" v-model="password" required />
+        <input id="password-login" v-model="password" type="password" required />
       </div>
 
       <button type="submit">Login</button>
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
 const email = ref('')
diff --git a/legalconsenthub/components/Register.vue b/legalconsenthub/components/Register.vue
index 97c975e..c7c4d11 100644
--- a/legalconsenthub/components/Register.vue
+++ b/legalconsenthub/components/Register.vue
@@ -4,22 +4,22 @@
     <form @submit.prevent="handleRegister">
       <div class="form-group">
         <label for="username">Benutzername:</label>
-        <input type="text" id="username" v-model="username" required />
+        <input id="username" v-model="username" type="text" required />
       </div>
 
       <div class="form-group">
         <label for="email">Email:</label>
-        <input type="email" id="email" v-model="email" required />
+        <input id="email" v-model="email" type="email" required />
       </div>
 
       <div class="form-group">
         <label for="password">Passwort:</label>
-        <input type="password" id="password" v-model="password" required />
+        <input id="password" v-model="password" type="password" required />
       </div>
 
       <div class="form-group">
         <label for="confirmPassword">Passwort bestätigen:</label>
-        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
+        <input id="confirmPassword" v-model="confirmPassword" type="password" required />
       </div>
 
       <button type="submit">Registrieren</button>
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
 const username = ref('')
diff --git a/legalconsenthub/pages/application-forms/[id].vue b/legalconsenthub/pages/application-forms/[id].vue
index 8c34749..8a6ad41 100644
--- a/legalconsenthub/pages/application-forms/[id].vue
+++ b/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" />
diff --git a/legalconsenthub/pages/create.vue b/legalconsenthub/pages/create.vue
index 15ac200..ee0308a 100644
--- a/legalconsenthub/pages/create.vue
+++ b/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>
diff --git a/legalconsenthub/pages/index.vue b/legalconsenthub/pages/index.vue
index 3637db9..5b101c8 100644
--- a/legalconsenthub/pages/index.vue
+++ b/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>
diff --git a/legalconsenthub/utils/date.ts b/legalconsenthub/utils/date.ts
new file mode 100644
index 0000000..cbe902f
--- /dev/null
+++ b/legalconsenthub/utils/date.ts
@@ -0,0 +1,10 @@
+export function formatDate(date: Date): string {
+  return date.toLocaleString('de-DE', {
+    weekday: 'short',
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}