feat(#4): Add versioning of application form

2025-11-08 10:15:04 +01:00
parent a8eca965dc
commit 59da40d6c0
17 changed files with 1095 additions and 124 deletions
--- a/legalconsenthub/app/components/TheForm.vue
+++ b/legalconsenthub/app/components/TheForm.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
+    <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
+    <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
+      {{ currentFormElementSection.title }}
+    </h1>
+    <UCard variant="subtle">
+      <FormEngine
+        v-if="applicationForm && currentFormElementSection?.formElements"
+        v-model="currentFormElementSection.formElements"
+        :application-form-id="applicationForm.id"
+        :disabled="isReadOnly"
+        @add:input-form="handleAddInputForm"
+      />
+      <div class="flex gap-2 justify-between mt-4">
+        <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="navigateStepper('backward')">
+          Prev
+        </UButton>
+
+        <UButton
+          v-if="stepper?.hasNext"
+          trailing-icon="i-lucide-arrow-right"
+          :disabled="!stepper?.hasNext"
+          @click="navigateStepper('forward')"
+        >
+          Next
+        </UButton>
+
+        <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
+          <UButton trailing-icon="i-lucide-save" :disabled="isReadOnly" variant="outline" @click="onSave">
+            Save
+          </UButton>
+          <UButton trailing-icon="i-lucide-send-horizontal" :disabled="isReadOnly" @click="onSubmit"> Submit </UButton>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto } from '~~/.api-client'
+import { useUserStore } from '~~/stores/useUserStore'
+
+const props = defineProps<{
+  applicationForm: ApplicationFormDto
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:applicationForm', updatedForm: ApplicationFormDto): void
+}>()
+
+const { updateApplicationForm, submitApplicationForm } = useApplicationForm()
+const route = useRoute()
+const userStore = useUserStore()
+const { user } = storeToRefs(userStore)
+
+const toast = useToast()
+
+const isReadOnly = computed(() => {
+  return props.applicationForm?.createdBy.keycloakId !== user.value?.keycloakId
+})
+
+const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
+  computed(() => props.applicationForm?.formElementSections),
+  {
+    onNavigate: async () => {
+      await navigateTo(`/application-forms/${route.params.id}/${activeStepperItemIndex.value}`)
+    }
+  }
+)
+
+const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, props.applicationForm?.id)
+
+async function handleAddInputForm(position: number) {
+  const updatedForm = await addInputFormToApplicationForm(position)
+  if (updatedForm) {
+    emit('update:applicationForm', updatedForm)
+  }
+}
+
+onMounted(() => {
+  const sectionIndexParam = route.params.sectionIndex
+  if (sectionIndexParam) {
+    const sectionIndex = parseInt(Array.isArray(sectionIndexParam) ? sectionIndexParam[0]! : sectionIndexParam)
+    activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
+  }
+})
+
+async function onSave() {
+  if (props.applicationForm) {
+    await updateApplicationForm(props.applicationForm.id, props.applicationForm)
+    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+  }
+}
+
+async function onSubmit() {
+  if (props.applicationForm) {
+    await submitApplicationForm(props.applicationForm.id)
+    await navigateTo('/')
+    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+  }
+}
+</script>
--- a/legalconsenthub/app/components/VersionHistory.vue
+++ b/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>
+
--- a/legalconsenthub/app/composables/applicationFormVersion/useApplicationFormVersion.ts
+++ b/legalconsenthub/app/composables/applicationFormVersion/useApplicationFormVersion.ts
@@ -0,0 +1,43 @@
+import type { ApplicationFormVersionDto, ApplicationFormVersionListItemDto, ApplicationFormDto } from '~~/.api-client'
+import { useApplicationFormVersionApi } from '~/composables'
+
+export function useApplicationFormVersion() {
+  const versionApi = useApplicationFormVersionApi()
+
+  async function getVersions(applicationFormId: string): Promise<ApplicationFormVersionListItemDto[]> {
+    try {
+      return await versionApi.getVersions(applicationFormId)
+    } catch (e: unknown) {
+      console.error(`Failed retrieving versions for application form ${applicationFormId}:`, e)
+      return Promise.reject(e)
+    }
+  }
+
+  async function getVersion(applicationFormId: string, versionNumber: number): Promise<ApplicationFormVersionDto> {
+    try {
+      return await versionApi.getVersion(applicationFormId, versionNumber)
+    } catch (e: unknown) {
+      console.error(`Failed retrieving version ${versionNumber} for application form ${applicationFormId}:`, e)
+      return Promise.reject(e)
+    }
+  }
+
+  async function restoreVersion(applicationFormId: string, versionNumber: number): Promise<ApplicationFormDto> {
+    if (!applicationFormId) {
+      return Promise.reject(new Error('Application form ID missing'))
+    }
+
+    try {
+      return await versionApi.restoreVersion(applicationFormId, versionNumber)
+    } catch (e: unknown) {
+      console.error(`Failed restoring version ${versionNumber} for application form ${applicationFormId}:`, e)
+      return Promise.reject(e)
+    }
+  }
+
+  return {
+    getVersions,
+    getVersion,
+    restoreVersion
+  }
+}
--- a/legalconsenthub/app/composables/applicationFormVersion/useApplicationFormVersionApi.ts
+++ b/legalconsenthub/app/composables/applicationFormVersion/useApplicationFormVersionApi.ts
@@ -0,0 +1,50 @@
+import {
+  ApplicationFormVersionApi,
+  Configuration,
+  type ApplicationFormVersionDto,
+  type ApplicationFormVersionListItemDto,
+  type ApplicationFormDto
+} from '~~/.api-client'
+import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
+import { wrappedFetchWrap } from '~/utils/wrappedFetch'
+
+export function useApplicationFormVersionApi() {
+  const appBaseUrl = useRuntimeConfig().app.baseURL
+  const { serverApiBasePath, clientProxyBasePath } = useRuntimeConfig().public
+
+  const basePath = withoutTrailingSlash(
+    cleanDoubleSlashes(
+      import.meta.client
+        ? appBaseUrl + clientProxyBasePath
+        : useRequestURL().origin + clientProxyBasePath + serverApiBasePath
+    )
+  )
+
+  const versionApiClient = new ApplicationFormVersionApi(
+    new Configuration({ basePath, fetchApi: wrappedFetchWrap(useRequestFetch()) })
+  )
+
+  async function getVersions(applicationFormId: string): Promise<ApplicationFormVersionListItemDto[]> {
+    return versionApiClient.getApplicationFormVersions({ id: applicationFormId })
+  }
+
+  async function getVersion(applicationFormId: string, versionNumber: number): Promise<ApplicationFormVersionDto> {
+    return versionApiClient.getApplicationFormVersion({
+      id: applicationFormId,
+      versionNumber
+    })
+  }
+
+  async function restoreVersion(applicationFormId: string, versionNumber: number): Promise<ApplicationFormDto> {
+    return versionApiClient.restoreApplicationFormVersion({
+      id: applicationFormId,
+      versionNumber
+    })
+  }
+
+  return {
+    getVersions,
+    getVersion,
+    restoreVersion
+  }
+}
--- a/legalconsenthub/app/composables/index.ts
+++ b/legalconsenthub/app/composables/index.ts
@@ -1,4 +1,7 @@
 export { useApplicationFormTemplate } from './applicationFormTemplate/useApplicationFormTemplate'
 export { useApplicationForm } from './applicationForm/useApplicationForm'
+export { useApplicationFormVersion } from './applicationFormVersion/useApplicationFormVersion'
+export { useApplicationFormVersionApi } from './applicationFormVersion/useApplicationFormVersionApi'
+export { useApplicationFormNavigation } from './useApplicationFormNavigation'
 export { useNotification } from './notification/useNotification'
 export { useNotificationApi } from './notification/useNotificationApi'
--- a/legalconsenthub/app/composables/useApplicationFormNavigation.ts
+++ b/legalconsenthub/app/composables/useApplicationFormNavigation.ts
@@ -0,0 +1,65 @@
+import type { ApplicationFormDto } from '~~/.api-client'
+
+export async function useApplicationFormNavigation(applicationFormId: string) {
+  const { getApplicationFormById } = useApplicationForm()
+
+  const { data, error, refresh } = await useAsyncData<ApplicationFormDto>(
+    `application-form-${applicationFormId}`,
+    async () => await getApplicationFormById(applicationFormId)
+  )
+
+  if (error.value) {
+    throw createError({ statusText: error.value.message })
+  }
+
+  const applicationForm = computed<ApplicationFormDto>(() => data?.value as ApplicationFormDto)
+
+  const navigationLinks = computed(() => [
+    [
+      {
+        label: 'Formular',
+        icon: 'i-lucide-file',
+        to: `/application-forms/${applicationForm.value.id}/0`,
+        exact: true
+      },
+      {
+        label: 'Versionen',
+        icon: 'i-lucide-file-clock',
+        to: `/application-forms/${applicationForm.value.id}/versions`,
+        exact: true
+      }
+    ],
+    [
+      {
+        label: 'PDF-Vorschau',
+        icon: 'i-lucide-file-text',
+        to: `/api/application-forms/${applicationForm.value.id}/pdf`,
+        target: '_blank'
+      }
+    ]
+  ])
+
+  const dropdownItems = [
+    [
+      {
+        label: 'Neuer Mitbestimmungsantrag',
+        icon: 'i-lucide-send',
+        to: '/create'
+      }
+    ]
+  ]
+
+  function updateApplicationForm(updatedForm: ApplicationFormDto) {
+    data.value = updatedForm
+  }
+
+  return {
+    applicationForm,
+    navigationLinks,
+    dropdownItems,
+    refresh,
+    updateApplicationForm,
+    error
+  }
+}
+
--- a/legalconsenthub/app/layouts/default.vue
+++ b/legalconsenthub/app/layouts/default.vue
@@ -36,7 +36,24 @@
 </template>

 <script setup lang="ts">
-const links = [[], []]
+const links = [
+  [
+    {
+      label: 'General',
+      icon: 'i-lucide-user',
+      to: '/settings',
+      exact: true
+    }
+  ],
+  [
+    {
+      label: 'General2',
+      icon: 'i-lucide-user',
+      to: '/settings',
+      exact: true
+    }
+  ]
+]
 const open = ref(false)

 const isNotificationsSlideoverOpen = ref(false)
--- a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
+++ b/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
@@ -14,143 +14,29 @@
      </UDashboardNavbar>

      <UDashboardToolbar>
-        <template #right>
-          <UButton
-            icon="i-lucide-file-text"
-            size="md"
-            color="primary"
-            variant="solid"
-            target="_blank"
-            :to="`/api/application-forms/${applicationForm.id}/pdf`"
-            >PDF Vorschau</UButton
-          >
-        </template>
+        <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
      </UDashboardToolbar>
    </template>

    <template #body>
-      <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
-        <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
-        <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
-          {{ currentFormElementSection.title }}
-        </h1>
-        <UCard variant="subtle">
-          <FormEngine
-            v-if="applicationForm && currentFormElementSection?.formElements"
-            v-model="currentFormElementSection.formElements"
-            :application-form-id="applicationForm.id"
-            :disabled="isReadOnly"
-            @add:input-form="handleAddInputForm"
-          />
-          <div class="flex gap-2 justify-between mt-4">
-            <UButton
-              leading-icon="i-lucide-arrow-left"
-              :disabled="!stepper?.hasPrev"
-              @click="navigateStepper('backward')"
-            >
-              Prev
-            </UButton>
-
-            <UButton
-              v-if="stepper?.hasNext"
-              trailing-icon="i-lucide-arrow-right"
-              :disabled="!stepper?.hasNext"
-              @click="navigateStepper('forward')"
-            >
-              Next
-            </UButton>
-
-            <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
-              <UButton trailing-icon="i-lucide-save" :disabled="isReadOnly" variant="outline" @click="onSave">
-                Save
-              </UButton>
-              <UButton trailing-icon="i-lucide-send-horizontal" :disabled="isReadOnly" @click="onSubmit">
-                Submit
-              </UButton>
-            </div>
-          </div>
-        </UCard>
-      </div>
+      <TheForm :application-form="applicationForm" @update:application-form="updateApplicationForm" />
    </template>
  </UDashboardPanel>
 </template>

 <script setup lang="ts">
-import type { ApplicationFormDto } from '~~/.api-client'
-import { useUserStore } from '~~/stores/useUserStore'
-
-const { getApplicationFormById, updateApplicationForm, submitApplicationForm } = useApplicationForm()
 const route = useRoute()
-const userStore = useUserStore()
-const { user } = storeToRefs(userStore)
-
-const toast = useToast()

 definePageMeta({
  // Prevent whole page from re-rendering when navigating between sections to keep state
  key: (route) => `${route.params.id}`
 })

-const items = [
-  [
-    {
-      label: 'Neuer Mitbestimmungsantrag',
-      icon: 'i-lucide-send',
-      to: '/create'
-    }
-  ]
-]
-
-const { data, error } = await useAsyncData<ApplicationFormDto>(`application-form-${route.params.id}`, async () => {
-  console.log('Fetching application form with ID:', route.params.id)
-  return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
-})
-
-if (error.value) {
-  throw createError({ statusText: error.value.message })
-}
-
-const applicationForm = computed<ApplicationFormDto>(() => data?.value as ApplicationFormDto)
-
-const isReadOnly = computed(() => {
-  return applicationForm.value?.createdBy.keycloakId !== user.value?.keycloakId
-})
-
-const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
-  computed(() => applicationForm.value?.formElementSections),
-  {
-    onNavigate: async () => {
-      await navigateTo(`/application-forms/${route.params.id}/${activeStepperItemIndex.value}`)
-    }
-  }
-)
-
-const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, applicationForm.value?.id)
-
-async function handleAddInputForm(position: number) {
-  const updatedForm = await addInputFormToApplicationForm(position)
-  if (updatedForm) {
-    data.value = updatedForm
-  }
-}
-
-onMounted(() => {
-  const sectionIndex = parseInt(route.params.sectionIndex[0])
-  activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
-})
-
-async function onSave() {
-  if (data?.value) {
-    await updateApplicationForm(data.value.id, data.value)
-    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
-  }
-}
-
-async function onSubmit() {
-  if (data?.value) {
-    await submitApplicationForm(data.value.id)
-    await navigateTo('/')
-    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
-  }
-}
+const applicationFormId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
+const {
+  applicationForm,
+  navigationLinks: links,
+  dropdownItems: items,
+  updateApplicationForm
+} = await useApplicationFormNavigation(applicationFormId!)
 </script>
--- a/legalconsenthub/app/pages/application-forms/[id]/versions.vue
+++ b/legalconsenthub/app/pages/application-forms/[id]/versions.vue
@@ -0,0 +1,45 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <UDashboardPanel id="versions">
+    <template #header>
+      <UDashboardNavbar :title="`Versionen: ${applicationForm?.name}`">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="p-6">
+        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" @restored="handleRestored" />
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+definePageMeta({
+  key: (route) => `${route.params.id}-versions`
+})
+
+const applicationFormId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
+const { applicationForm, navigationLinks: links, refresh } = await useApplicationFormNavigation(applicationFormId!)
+
+async function handleRestored() {
+  await refresh()
+  toast.add({
+    title: 'Version wiederhergestellt',
+    description: 'Das Formular wurde auf die ausgewählte Version zurückgesetzt.',
+    color: 'success'
+  })
+  router.push(`/application-forms/${applicationForm.value.id}/0`)
+}
+</script>