feat(#4): Add comparison for versions, refactor version restoring

legalconsenthub/app/components/FormEngine.vue

@@ -94,6 +94,7 @@ function getDropdownItems(formElementId: string, formElementPosition: number): D
 }
 
 function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
+  console.log('Updating form options for element index:', formElementIndex, formOptions)
   const updatedModelValue = [...props.modelValue]
   updatedModelValue[formElementIndex] = { ...updatedModelValue[formElementIndex], options: formOptions }
   emit('update:modelValue', updatedModelValue)

legalconsenthub/app/components/RestoreVersionModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <UModal :open="open" title="Version wiederherstellen" @update:open="$emit('update:open', $event)">
+    <template #body>
+      <div class="space-y-2">
+        <p>
+          Möchten Sie Version <strong>v{{ versionNumber }}</strong> wirklich wiederherstellen?
+        </p>
+        <p class="text-sm text-gray-600">
+          Dies erstellt eine neue Version mit dem Inhalt der ausgewählten Version. Die aktuelle Version und alle
+          Änderungen bleiben in der Historie erhalten.
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+      <UButton label="Wiederherstellen" color="primary" :loading="loading" @click="$emit('confirm')" />
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  open: boolean
+  versionNumber: number
+  loading?: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm'): void
+}>()
+</script>

legalconsenthub/app/components/VersionComparisonModal.vue

@@ -0,0 +1,192 @@
+<template>
+  <UModal :open="open" title="Vergleich mit Version" @update:open="$emit('update:open', $event)">
+    <template #header>
+      <h3 class="text-lg font-semibold">Vergleich: Aktuelles Formular mit Version v{{ versionNumber }}</h3>
+    </template>
+
+    <template #body>
+      <div v-if="loading" class="flex justify-center py-8">
+        <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
+      </div>
+
+      <div v-else-if="error" class="text-red-500">Fehler beim Laden der Version: {{ error }}</div>
+
+      <div v-else-if="diff && hasChanges" class="space-y-6">
+        <div v-if="diff.elementsAdded.length > 0" class="space-y-2">
+          <h4 class="font-semibold text-success flex items-center gap-2">
+            <UIcon name="i-lucide-plus-circle" />
+            Hinzugefügte Elemente ({{ diff.elementsAdded.length }})
+          </h4>
+          <UCard v-for="(element, index) in diff.elementsAdded" :key="`added-${index}`" variant="subtle">
+            <div class="flex items-start gap-2">
+              <UBadge color="success" variant="subtle">+</UBadge>
+              <div class="flex-1">
+                <div class="font-medium">{{ element.title || 'Ohne Titel' }}</div>
+                <div class="text-sm text-gray-500">Typ: {{ element.type }} · Sektion: {{ element.sectionTitle }}</div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+
+        <div v-if="diff.elementsRemoved.length > 0" class="space-y-2">
+          <h4 class="font-semibold text-error flex items-center gap-2">
+            <UIcon name="i-lucide-minus-circle" />
+            Entfernte Elemente ({{ diff.elementsRemoved.length }})
+          </h4>
+          <UCard v-for="(element, index) in diff.elementsRemoved" :key="`removed-${index}`" variant="subtle">
+            <div class="flex items-start gap-2">
+              <UBadge color="error" variant="subtle">-</UBadge>
+              <div class="flex-1">
+                <div class="font-medium">{{ element.title || 'Ohne Titel' }}</div>
+                <div class="text-sm text-gray-500">Typ: {{ element.type }} · Sektion: {{ element.sectionTitle }}</div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+
+        <div v-if="diff.elementsModified.length > 0" class="space-y-2">
+          <h4 class="font-semibold text-warning flex items-center gap-2">
+            <UIcon name="i-lucide-pencil" />
+            Geänderte Elemente ({{ diff.elementsModified.length }})
+          </h4>
+          <UCard v-for="(element, index) in diff.elementsModified" :key="`modified-${index}`" variant="subtle">
+            <div class="space-y-2">
+              <div class="flex items-start gap-2">
+                <UBadge color="warning" variant="subtle">~</UBadge>
+                <div class="flex-1">
+                  <div class="font-medium">Element in {{ element.sectionTitle }}</div>
+
+                  <div
+                    v-if="
+                      element.optionsAdded.length > 0 ||
+                      element.optionsRemoved.length > 0 ||
+                      element.optionsModified.length > 0
+                    "
+                    class="mt-3 pl-4 border-l-2 border-gray-200 space-y-2"
+                  >
+                    <div v-if="element.optionsAdded.length > 0">
+                      <div class="text-sm font-medium text-success">
+                        Optionen hinzugefügt ({{ element.optionsAdded.length }}):
+                      </div>
+                      <div
+                        v-for="(option, optIdx) in element.optionsAdded"
+                        :key="`opt-add-${optIdx}`"
+                        class="text-sm text-gray-700 ml-2"
+                      >
+                        <UBadge color="success" size="xs" class="mr-1">+</UBadge>
+                        {{ option.label }} ({{ option.value }})
+                      </div>
+                    </div>
+
+                    <div v-if="element.optionsRemoved.length > 0">
+                      <div class="text-sm font-medium text-error">
+                        Optionen entfernt ({{ element.optionsRemoved.length }}):
+                      </div>
+                      <div
+                        v-for="(option, optIdx) in element.optionsRemoved"
+                        :key="`opt-rem-${optIdx}`"
+                        class="text-sm text-gray-700 ml-2"
+                      >
+                        <UBadge color="error" size="xs" class="mr-1">-</UBadge>
+                        {{ option.label }} ({{ option.value }})
+                      </div>
+                    </div>
+
+                    <div v-if="element.optionsModified.length > 0">
+                      <div class="text-sm font-medium text-warning">
+                        Optionen geändert ({{ element.optionsModified.length }}):
+                      </div>
+                      <div
+                        v-for="(option, optIdx) in element.optionsModified"
+                        :key="`opt-mod-${optIdx}`"
+                        class="text-sm text-gray-700 ml-2"
+                      >
+                        <div>
+                          <span class="font-medium">{{ option.value }}:</span>
+                          <span class="text-error line-through ml-1">{{ option.labelChanged.from }}</span>
+                          <UIcon name="i-lucide-arrow-right" class="mx-1 inline-block h-3 w-3" />
+                          <span class="text-success">{{ option.labelChanged.to }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-8 text-gray-500">Keine Unterschiede gefunden</div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <UButton label="Schließen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto, ApplicationFormVersionDto } from '~~/.api-client'
+import type { FormDiff } from '~~/types/formDiff'
+import { compareApplicationForms } from '~/utils/formDiff'
+
+const props = defineProps<{
+  open: boolean
+  currentForm: ApplicationFormDto
+  versionNumber: number
+  applicationFormId: string
+}>()
+
+defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const { getVersion } = useApplicationFormVersion()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const diff = ref<FormDiff | null>(null)
+const versionData = ref<ApplicationFormVersionDto | null>(null)
+
+const hasChanges = computed(() => {
+  if (!diff.value) return false
+  return (
+    diff.value.elementsAdded.length > 0 ||
+    diff.value.elementsRemoved.length > 0 ||
+    diff.value.elementsModified.length > 0
+  )
+})
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen && !versionData.value) {
+      await loadVersionAndCompare()
+    }
+  }
+)
+
+async function loadVersionAndCompare() {
+  loading.value = true
+  error.value = null
+  try {
+    versionData.value = await getVersion(props.applicationFormId, props.versionNumber)
+    diff.value = compareApplicationForms(props.currentForm, versionData.value.snapshot)
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.versionNumber,
+  () => {
+    versionData.value = null
+    diff.value = null
+  }
+)
+</script>

legalconsenthub/app/components/VersionHistory.vue

@@ -4,21 +4,15 @@
       <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
     </div>
 
-    <div v-else-if="error" class="text-red-500">
-      Fehler beim Laden der Versionen: {{ error }}
-    </div>
+    <div v-else-if="error" class="text-red-500">Fehler beim Laden der Versionen: {{ error }}</div>
 
-    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">
-      Keine Versionen verfügbar
-    </div>
+    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">Keine Versionen verfügbar</div>
 
     <div v-else class="space-y-3">
       <UCard v-for="version in versions" :key="version.id" class="hover:shadow-md transition-shadow">
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-4">
-            <UBadge variant="subtle" color="primary" class="font-semibold">
-              v{{ version.versionNumber }}
-            </UBadge>
+            <UBadge variant="subtle" color="primary" class="font-semibold"> v{{ version.versionNumber }} </UBadge>
             <div>
               <div class="font-medium">{{ version.name }}</div>
               <div class="text-sm text-gray-500">
@@ -30,6 +24,14 @@
             <UBadge :color="getStatusColor(version.status)">
               {{ getStatusLabel(version.status) }}
             </UBadge>
+            <UButton
+              icon="i-lucide-git-compare"
+              size="sm"
+              color="neutral"
+              variant="outline"
+              label="Vergleichen"
+              @click="openComparisonModal(version)"
+            />
             <UButton
               icon="i-lucide-undo-2"
               size="sm"
@@ -43,42 +45,29 @@
       </UCard>
     </div>
 
-    <UModal
-      :open="isRestoreModalOpen"
-      title="Version wiederherstellen"
-      @update:open="isRestoreModalOpen = $event"
-    >
-      <template #body>
-        <div class="space-y-2">
-          <p>
-            Möchten Sie Version <strong>v{{ selectedVersion?.versionNumber }}</strong> wirklich
-            wiederherstellen?
-          </p>
-          <p class="text-sm text-gray-600">
-            Dies erstellt eine neue Version mit dem Inhalt der ausgewählten Version. Die aktuelle
-            Version und alle Änderungen bleiben in der Historie erhalten.
-          </p>
-        </div>
-      </template>
-      <template #footer>
-        <UButton
-          label="Abbrechen"
-          color="neutral"
-          variant="outline"
-          @click="isRestoreModalOpen = false"
-        />
-        <UButton label="Wiederherstellen" color="primary" :loading="restoring" @click="handleRestore" />
-      </template>
-    </UModal>
+    <VersionComparisonModal
+      v-model:open="isComparisonModalOpen"
+      :current-form="currentForm"
+      :version-number="selectedVersion?.versionNumber ?? 0"
+      :application-form-id="applicationFormId"
+    />
+
+    <RestoreVersionModal
+      v-model:open="isRestoreModalOpen"
+      :version-number="selectedVersion?.versionNumber ?? 0"
+      :loading="restoring"
+      @confirm="handleRestore"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ApplicationFormVersionListItemDto, ApplicationFormStatus } from '~~/.api-client'
+import type { ApplicationFormDto, ApplicationFormVersionListItemDto, ApplicationFormStatus } from '~~/.api-client'
 import { formatDate } from '~/utils/date'
 
 const props = defineProps<{
   applicationFormId: string
+  currentForm: ApplicationFormDto
 }>()
 
 const emit = defineEmits<{
@@ -92,6 +81,7 @@ const versions = ref<ApplicationFormVersionListItemDto[]>([])
 const loading = ref(false)
 const error = ref<string | null>(null)
 const isRestoreModalOpen = ref(false)
+const isComparisonModalOpen = ref(false)
 const selectedVersion = ref<ApplicationFormVersionListItemDto | null>(null)
 const restoring = ref(false)
 
@@ -112,6 +102,11 @@ async function loadVersions() {
   }
 }
 
+function openComparisonModal(version: ApplicationFormVersionListItemDto) {
+  selectedVersion.value = version
+  isComparisonModalOpen.value = true
+}
+
 function openRestoreModal(version: ApplicationFormVersionListItemDto) {
   selectedVersion.value = version
   isRestoreModalOpen.value = true
@@ -131,7 +126,7 @@ async function handleRestore() {
     isRestoreModalOpen.value = false
     await loadVersions()
     emit('restored')
-  } catch (e: unknown) {
+  } catch {
     toast.add({
       title: 'Fehler',
       description: 'Version konnte nicht wiederhergestellt werden',
@@ -148,12 +143,12 @@ function getStatusColor(status: ApplicationFormStatus): string {
       return 'gray'
     case 'SUBMITTED':
       return 'blue'
-    case 'IN_REVIEW':
-      return 'yellow'
     case 'APPROVED':
       return 'green'
     case 'REJECTED':
       return 'red'
+    case 'SIGNED':
+      return 'primary'
     default:
       return 'gray'
   }
@@ -165,12 +160,12 @@ function getStatusLabel(status: ApplicationFormStatus): string {
       return 'Entwurf'
     case 'SUBMITTED':
       return 'Eingereicht'
-    case 'IN_REVIEW':
-      return 'In Prüfung'
     case 'APPROVED':
       return 'Genehmigt'
     case 'REJECTED':
       return 'Abgelehnt'
+    case 'SIGNED':
+      return 'Signiert'
     default:
       return status
   }
@@ -180,4 +175,3 @@ onMounted(() => {
   loadVersions()
 })
 </script>
-