feat(#4): Add versioning of application form

legalconsenthub/app/components/VersionHistory.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="space-y-4">
+    <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 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 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>
+            <div>
+              <div class="font-medium">{{ version.name }}</div>
+              <div class="text-sm text-gray-500">
+                {{ formatDate(new Date(version.createdAt)) }} · {{ version.createdBy.name }}
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <UBadge :color="getStatusColor(version.status)">
+              {{ getStatusLabel(version.status) }}
+            </UBadge>
+            <UButton
+              icon="i-lucide-undo-2"
+              size="sm"
+              color="neutral"
+              variant="outline"
+              label="Wiederherstellen"
+              @click="openRestoreModal(version)"
+            />
+          </div>
+        </div>
+      </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormVersionListItemDto, ApplicationFormStatus } from '~~/.api-client'
+import { formatDate } from '~/utils/date'
+
+const props = defineProps<{
+  applicationFormId: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'restored'): void
+}>()
+
+const { getVersions, restoreVersion } = useApplicationFormVersion()
+const toast = useToast()
+
+const versions = ref<ApplicationFormVersionListItemDto[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+const isRestoreModalOpen = ref(false)
+const selectedVersion = ref<ApplicationFormVersionListItemDto | null>(null)
+const restoring = ref(false)
+
+async function loadVersions() {
+  loading.value = true
+  error.value = null
+  try {
+    versions.value = await getVersions(props.applicationFormId)
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+    toast.add({
+      title: 'Fehler',
+      description: 'Versionen konnten nicht geladen werden',
+      color: 'error'
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+function openRestoreModal(version: ApplicationFormVersionListItemDto) {
+  selectedVersion.value = version
+  isRestoreModalOpen.value = true
+}
+
+async function handleRestore() {
+  if (!selectedVersion.value) return
+
+  restoring.value = true
+  try {
+    await restoreVersion(props.applicationFormId, selectedVersion.value.versionNumber)
+    toast.add({
+      title: 'Erfolg',
+      description: `Version v${selectedVersion.value.versionNumber} wurde wiederhergestellt`,
+      color: 'success'
+    })
+    isRestoreModalOpen.value = false
+    await loadVersions()
+    emit('restored')
+  } catch (e: unknown) {
+    toast.add({
+      title: 'Fehler',
+      description: 'Version konnte nicht wiederhergestellt werden',
+      color: 'error'
+    })
+  } finally {
+    restoring.value = false
+  }
+}
+
+function getStatusColor(status: ApplicationFormStatus): string {
+  switch (status) {
+    case 'DRAFT':
+      return 'gray'
+    case 'SUBMITTED':
+      return 'blue'
+    case 'IN_REVIEW':
+      return 'yellow'
+    case 'APPROVED':
+      return 'green'
+    case 'REJECTED':
+      return 'red'
+    default:
+      return 'gray'
+  }
+}
+
+function getStatusLabel(status: ApplicationFormStatus): string {
+  switch (status) {
+    case 'DRAFT':
+      return 'Entwurf'
+    case 'SUBMITTED':
+      return 'Eingereicht'
+    case 'IN_REVIEW':
+      return 'In Prüfung'
+    case 'APPROVED':
+      return 'Genehmigt'
+    case 'REJECTED':
+      return 'Abgelehnt'
+    default:
+      return status
+  }
+}
+
+onMounted(() => {
+  loadVersions()
+})
+</script>
+