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

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