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>
-

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

@@ -15,7 +15,7 @@
 
     <template #body>
       <div class="p-6">
-        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" @restored="handleRestored" />
+        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" :current-form="applicationForm" @restored="handleRestored" />
       </div>
     </template>
   </UDashboardPanel>

legalconsenthub/app/utils/formDiff.ts

@@ -0,0 +1,163 @@
+import type {
+  ApplicationFormDto,
+  ApplicationFormSnapshotDto,
+  FormElementDto,
+  FormElementSnapshotDto,
+  FormOptionDto
+} from '~~/.api-client'
+import type { FormDiff, ElementModification, OptionChange, OptionModification } from '~~/types/formDiff'
+
+export function compareApplicationForms(
+  current: ApplicationFormDto,
+  versionSnapshot: ApplicationFormSnapshotDto
+): FormDiff {
+  const diff: FormDiff = {
+    elementsAdded: [],
+    elementsRemoved: [],
+    elementsModified: []
+  }
+
+  const currentElements = flattenFormElements(current)
+  const versionElements = flattenSnapshotElements(versionSnapshot)
+
+  const currentElementsMap = new Map(
+    currentElements.map((el, idx) => [
+      createElementKey(el.element, idx),
+      { element: el.element, index: idx, sectionTitle: el.sectionTitle }
+    ])
+  )
+  const versionElementsMap = new Map(
+    versionElements.map((el, idx) => [
+      createSnapshotElementKey(el.element, idx),
+      { element: el.element, index: idx, sectionTitle: el.sectionTitle }
+    ])
+  )
+
+  for (const [key, currentData] of currentElementsMap) {
+    if (!versionElementsMap.has(key)) {
+      diff.elementsAdded.push({
+        sectionTitle: currentData.sectionTitle,
+        title: currentData.element.title,
+        type: currentData.element.type,
+        position: currentData.index
+      })
+    } else {
+      const versionData = versionElementsMap.get(key)!
+      const modifications = compareElements(
+        currentData.element,
+        versionData.element,
+        currentData.sectionTitle,
+        currentData.index
+      )
+      if (modifications) {
+        diff.elementsModified.push(modifications)
+      }
+    }
+  }
+
+  for (const [key, versionData] of versionElementsMap) {
+    if (!currentElementsMap.has(key)) {
+      diff.elementsRemoved.push({
+        sectionTitle: versionData.sectionTitle,
+        title: versionData.element.title,
+        type: versionData.element.type,
+        position: versionData.index
+      })
+    }
+  }
+
+  return diff
+}
+
+function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormElementDto; sectionTitle: string }> {
+  const elements: Array<{ element: FormElementDto; sectionTitle: string }> = []
+  for (const section of form.formElementSections) {
+    for (const element of section.formElements) {
+      elements.push({ element, sectionTitle: section.title })
+    }
+  }
+  return elements
+}
+
+function flattenSnapshotElements(
+  snapshot: ApplicationFormSnapshotDto
+): Array<{ element: FormElementSnapshotDto; sectionTitle: string }> {
+  const elements: Array<{ element: FormElementSnapshotDto; sectionTitle: string }> = []
+  for (const section of snapshot.sections) {
+    for (const element of section.elements) {
+      elements.push({ element, sectionTitle: section.title })
+    }
+  }
+  return elements
+}
+
+function createElementKey(element: FormElementDto, index: number): string {
+  return `${index}-${element.type}-${element.title || 'untitled'}`
+}
+
+function createSnapshotElementKey(element: FormElementSnapshotDto, index: number): string {
+  return `${index}-${element.type}-${element.title || 'untitled'}`
+}
+
+function compareElements(
+  current: FormElementDto,
+  version: FormElementSnapshotDto,
+  sectionTitle: string,
+  position: number
+): ElementModification | null {
+  const optionsDiff = compareOptions(current.options, version.options)
+  
+  if (optionsDiff.added.length > 0 || optionsDiff.removed.length > 0 || optionsDiff.modified.length > 0) {
+    return {
+      sectionTitle,
+      position,
+      optionsAdded: optionsDiff.added,
+      optionsRemoved: optionsDiff.removed,
+      optionsModified: optionsDiff.modified
+    }
+  }
+
+  return null
+}
+
+function compareOptions(
+  currentOptions: FormOptionDto[],
+  versionOptions: FormOptionDto[]
+): { added: OptionChange[]; removed: OptionChange[]; modified: OptionModification[] } {
+  const result = {
+    added: [] as OptionChange[],
+    removed: [] as OptionChange[],
+    modified: [] as OptionModification[]
+  }
+
+  const currentMap = new Map(currentOptions.map((opt) => [opt.value, opt]))
+  const versionMap = new Map(versionOptions.map((opt) => [opt.value, opt]))
+
+  for (const [value, currentOpt] of currentMap) {
+    if (!versionMap.has(value)) {
+      result.added.push({
+        value: currentOpt.value,
+        label: currentOpt.label
+      })
+    } else {
+      const versionOpt = versionMap.get(value)!
+      if (currentOpt.label !== versionOpt.label) {
+        result.modified.push({
+          value,
+          labelChanged: { from: versionOpt.label, to: currentOpt.label }
+        })
+      }
+    }
+  }
+
+  for (const [value, versionOpt] of versionMap) {
+    if (!currentMap.has(value)) {
+      result.removed.push({
+        value: versionOpt.value,
+        label: versionOpt.label
+      })
+    }
+  }
+
+  return result
+}

legalconsenthub/types/formDiff.ts

@@ -0,0 +1,31 @@
+export interface FormDiff {
+  elementsAdded: ElementChange[]
+  elementsRemoved: ElementChange[]
+  elementsModified: ElementModification[]
+}
+
+export interface ElementChange {
+  sectionTitle: string
+  title: string | undefined
+  type: string
+  position: number
+}
+
+export interface ElementModification {
+  sectionTitle: string
+  position: number
+  optionsAdded: OptionChange[]
+  optionsRemoved: OptionChange[]
+  optionsModified: OptionModification[]
+}
+
+export interface OptionChange {
+  value: string
+  label: string
+}
+
+export interface OptionModification {
+  value: string
+  labelChanged: { from: string; to: string }
+}
+