gremiumhub/legalconsenthub/app/components/VersionHistory.vue

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