feat(#4): Add versioning of application form
This commit is contained in:
103
legalconsenthub/app/components/TheForm.vue
Normal file
103
legalconsenthub/app/components/TheForm.vue
Normal file
@@ -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>
|
||||
183
legalconsenthub/app/components/VersionHistory.vue
Normal file
183
legalconsenthub/app/components/VersionHistory.vue
Normal file
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user