From 49b921fde2faa4f14119e0bce051c94ea4c93740 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Fri, 21 Nov 2025 11:46:30 +0100
Subject: [PATCH] feat(#8): Add administration.vue page for adding application
 form templates

---
 legalconsenthub/app/components/UserMenu.vue  |   2 +-
 legalconsenthub/app/pages/administration.vue | 286 +++++++++++++++++++
 legalconsenthub/package.json                 |   1 +
 legalconsenthub/pnpm-lock.yaml               |  60 ++++
 4 files changed, 348 insertions(+), 1 deletion(-)
 create mode 100644 legalconsenthub/app/pages/administration.vue

diff --git a/legalconsenthub/app/components/UserMenu.vue b/legalconsenthub/app/components/UserMenu.vue
index 32a0b2c..5902f26 100644
--- a/legalconsenthub/app/components/UserMenu.vue
+++ b/legalconsenthub/app/components/UserMenu.vue
@@ -86,7 +86,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
     },
     {
       label: 'Administration',
-      icon: 'i-lucide-user',
+      icon: 'i-lucide-shield',
       to: '/administration'
     },
     {
diff --git a/legalconsenthub/app/pages/administration.vue b/legalconsenthub/app/pages/administration.vue
new file mode 100644
index 0000000..5ce66f3
--- /dev/null
+++ b/legalconsenthub/app/pages/administration.vue
@@ -0,0 +1,286 @@
+<template>
+  <UDashboardPanel id="administration">
+    <template #header>
+      <UDashboardNavbar title="Administration - JSON Template Editor" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right>
+          <UButton
+            v-if="hasUnsavedChanges"
+            icon="i-lucide-rotate-ccw"
+            label="Zurücksetzen"
+            color="neutral"
+            variant="outline"
+            @click="resetEditor"
+          />
+          <UButton
+            icon="i-lucide-file-plus"
+            label="Neue Vorlage"
+            color="neutral"
+            variant="outline"
+            @click="createNewTemplate"
+          />
+          <UButton
+            icon="i-lucide-save"
+            label="Speichern"
+            :disabled="!hasUnsavedChanges || !isValidJson"
+            :loading="isSaving"
+            @click="saveTemplate"
+          />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4 w-full h-full p-4">
+        <UCard v-if="currentTemplate" class="mb-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
+              <p class="text-sm text-muted mt-1">
+                Zuletzt bearbeitet am {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
+              </p>
+            </div>
+            <UBadge v-if="hasUnsavedChanges" label="Ungespeicherte Änderungen" color="warning" variant="subtle" />
+          </div>
+        </UCard>
+
+        <UCard v-else class="mb-4">
+          <div class="text-center py-4">
+            <UIcon name="i-lucide-info" class="size-8 text-muted mx-auto mb-2" />
+            <p class="text-muted">Keine Vorlage gefunden. Erstellen Sie eine neue Vorlage.</p>
+          </div>
+        </UCard>
+
+        <UCard class="flex-1">
+          <div class="h-[800px] overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+            <vue-monaco-editor
+              v-model:value="editorContent"
+              language="json"
+              :options="editorOptions"
+              :theme="colorMode.value === 'dark' ? 'vs-dark' : 'vs'"
+              @change="onEditorChange"
+            />
+          </div>
+        </UCard>
+
+        <UAlert
+          v-if="!isValidJson"
+          color="error"
+          icon="i-lucide-alert-circle"
+          title="Ungültiges JSON"
+          description="Das JSON-Format ist ungültig. Bitte korrigieren Sie die Syntax."
+        />
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto } from '~~/.api-client'
+import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
+import { formatDate } from '~/utils/date'
+
+definePageMeta({
+  layout: 'default'
+})
+
+const toast = useToast()
+const colorMode = useColorMode()
+const { hasRole } = usePermissions()
+const { getAllApplicationFormTemplates, updateApplicationFormTemplate, createApplicationFormTemplate } =
+  await useApplicationFormTemplate()
+
+if (!hasRole('CHIEF_EXECUTIVE_OFFICER') && !hasRole('IT_DEPARTMENT')) {
+  await navigateTo('/')
+}
+
+const currentTemplate = ref<ApplicationFormDto | null>(null)
+const editorContent = ref<string>('')
+const originalJson = ref<string>('')
+const hasUnsavedChanges = ref(false)
+const isValidJson = ref(true)
+const isSaving = ref(false)
+
+const editorOptions = {
+  automaticLayout: true,
+  formatOnPaste: true,
+  formatOnType: true,
+  fontSize: 14,
+  lineNumbers: 'on',
+  scrollBeyondLastLine: false,
+  wordWrap: 'on',
+  wrappingStrategy: 'advanced',
+  bracketPairColorization: {
+    enabled: true
+  },
+  guides: {
+    bracketPairs: true,
+    indentation: true
+  },
+  suggest: {
+    showKeywords: true,
+    showSnippets: true
+  }
+}
+
+const { data: templatesData } = await useAsyncData('applicationFormTemplates', async () => {
+  return await getAllApplicationFormTemplates()
+})
+
+onMounted(() => {
+  if (templatesData.value?.content && templatesData.value.content.length > 0) {
+    const sortedTemplates = [...templatesData.value.content].sort((a, b) => {
+      const dateA = new Date(a.modifiedAt || 0).getTime()
+      const dateB = new Date(b.modifiedAt || 0).getTime()
+      return dateB - dateA
+    })
+
+    const latestTemplate = sortedTemplates[0]
+    if (latestTemplate) {
+      currentTemplate.value = latestTemplate
+      editorContent.value = JSON.stringify(currentTemplate.value, null, 2)
+      originalJson.value = editorContent.value
+    }
+  } else {
+    const emptyTemplate = {
+      name: '',
+      description: '',
+      status: 'DRAFT',
+      isTemplate: true,
+      organizationId: '',
+      sections: []
+    }
+    editorContent.value = JSON.stringify(emptyTemplate, null, 2)
+    originalJson.value = editorContent.value
+  }
+})
+
+function onEditorChange() {
+  try {
+    JSON.parse(editorContent.value)
+    isValidJson.value = true
+    hasUnsavedChanges.value = editorContent.value !== originalJson.value
+  } catch {
+    isValidJson.value = false
+    hasUnsavedChanges.value = true
+  }
+}
+
+function resetEditor() {
+  editorContent.value = originalJson.value
+  hasUnsavedChanges.value = false
+  isValidJson.value = true
+}
+
+function createNewTemplate() {
+  currentTemplate.value = null
+  const emptyTemplate = {
+    name: '',
+    description: '',
+    status: 'DRAFT',
+    isTemplate: true,
+    organizationId: '',
+    sections: []
+  }
+  editorContent.value = JSON.stringify(emptyTemplate, null, 2)
+  originalJson.value = editorContent.value
+  hasUnsavedChanges.value = true
+  isValidJson.value = true
+}
+
+async function saveTemplate() {
+  if (!isValidJson.value) {
+    toast.add({
+      title: 'Fehler',
+      description: 'Das JSON-Format ist ungültig.',
+      color: 'error'
+    })
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const parsedData = JSON.parse(editorContent.value)
+    const dataWithDates = convertDates(parsedData) as ApplicationFormDto
+
+    if (currentTemplate.value?.id) {
+      currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
+      toast.add({
+        title: 'Erfolg',
+        description: 'Vorlage erfolgreich aktualisiert.',
+        color: 'success'
+      })
+    } else {
+      currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
+      toast.add({
+        title: 'Erfolg',
+        description: 'Vorlage erfolgreich erstellt.',
+        color: 'success'
+      })
+    }
+
+    editorContent.value = JSON.stringify(currentTemplate.value, null, 2)
+    originalJson.value = editorContent.value
+    hasUnsavedChanges.value = false
+
+    await refreshNuxtData('applicationFormTemplates')
+  } catch (error) {
+    toast.add({
+      title: 'Fehler',
+      description: 'Fehler beim Speichern der Vorlage.',
+      color: 'error'
+    })
+    console.error('Error saving template:', error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  if (hasUnsavedChanges.value) {
+    const answer = window.confirm('Sie haben ungespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?')
+    if (answer) {
+      next()
+    } else {
+      next(false)
+    }
+  } else {
+    next()
+  }
+})
+
+function convertDates(obj: unknown): unknown {
+  if (obj === null || obj === undefined) return obj
+
+  if (typeof obj === 'string') {
+    const date = new Date(obj)
+    if (!isNaN(date.getTime()) && obj.includes('T') && (obj.includes('Z') || obj.includes('+'))) {
+      return date
+    }
+    return obj
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => convertDates(item))
+  }
+
+  if (typeof obj === 'object') {
+    const converted: Record<string, unknown> = {}
+    for (const key in obj as Record<string, unknown>) {
+      if (key === 'createdAt' || key === 'modifiedAt') {
+        const value = (obj as Record<string, unknown>)[key]
+        converted[key] = value ? new Date(value as string) : value
+      } else {
+        converted[key] = convertDates((obj as Record<string, unknown>)[key])
+      }
+    }
+    return converted
+  }
+
+  return obj
+}
+</script>
diff --git a/legalconsenthub/package.json b/legalconsenthub/package.json
index 184f465..46165f8 100644
--- a/legalconsenthub/package.json
+++ b/legalconsenthub/package.json
@@ -16,6 +16,7 @@
     "api:middleware:generate": "openapi-generator-cli generate -i ../api/legalconsenthub-middleware.yml -g typescript-fetch -o .api-client-middleware"
   },
   "dependencies": {
+    "@guolao/vue-monaco-editor": "^1.6.0",
     "@nuxt/ui": "^4.1.0",
     "@nuxtjs/i18n": "10.0.3",
     "@pinia/nuxt": "0.11.2",
diff --git a/legalconsenthub/pnpm-lock.yaml b/legalconsenthub/pnpm-lock.yaml
index fa7dd30..680d88b 100644
--- a/legalconsenthub/pnpm-lock.yaml
+++ b/legalconsenthub/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@guolao/vue-monaco-editor':
+        specifier: ^1.6.0
+        version: 1.6.0(monaco-editor@0.55.1)(vue@3.5.24(typescript@5.7.3))
       '@nuxt/ui':
         specifier: ^4.1.0
         version: 4.1.0(@babel/parser@7.28.5)(axios@1.7.9)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.2)(jwt-decode@4.0.0)(magicast@0.5.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.7.3)(vite@7.2.2(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.24(typescript@5.7.3)))(vue@3.5.24(typescript@5.7.3))(zod@4.1.12)
@@ -505,6 +508,16 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@guolao/vue-monaco-editor@1.6.0':
+    resolution: {integrity: sha512-w2IiJ6eJGGeuIgCK6EKZOAfhHTTUB5aZwslzwGbZ5e89Hb4avx6++GkLTW8p84Sng/arFMjLPPxSBI56cFudyQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.2
+      monaco-editor: '>=0.43.0'
+      vue: ^2.6.14 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -673,6 +686,9 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
+  '@monaco-editor/loader@1.7.0':
+    resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -1735,6 +1751,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
@@ -2703,6 +2722,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -3716,6 +3738,11 @@ packages:
   magicast@0.5.1:
     resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -3811,6 +3838,9 @@ packages:
   mocked-exports@0.1.1:
     resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
 
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   motion-dom@12.23.12:
     resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
 
@@ -4723,6 +4753,9 @@ packages:
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -5896,6 +5929,13 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@guolao/vue-monaco-editor@1.6.0(monaco-editor@0.55.1)(vue@3.5.24(typescript@5.7.3))':
+    dependencies:
+      '@monaco-editor/loader': 1.7.0
+      monaco-editor: 0.55.1
+      vue: 3.5.24(typescript@5.7.3)
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.7.3))
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -6091,6 +6131,10 @@ snapshots:
       json5: 2.2.3
       rollup: 4.53.1
 
+  '@monaco-editor/loader@1.7.0':
+    dependencies:
+      state-local: 1.0.7
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.7.0
@@ -7443,6 +7487,9 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/web-bluetooth@0.0.20': {}
 
   '@types/web-bluetooth@0.0.21': {}
@@ -8489,6 +8536,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -9568,6 +9619,8 @@ snapshots:
       '@babel/types': 7.28.5
       source-map-js: 1.2.1
 
+  marked@14.0.0: {}
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.0.28: {}
@@ -9642,6 +9695,11 @@ snapshots:
 
   mocked-exports@0.1.1: {}
 
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   motion-dom@12.23.12:
     dependencies:
       motion-utils: 12.23.6
@@ -10805,6 +10863,8 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
+  state-local@1.0.7: {}
+
   statuses@2.0.1: {}
 
   statuses@2.0.2: {}