130 lines
4.4 KiB
Vue
130 lines
4.4 KiB
Vue
<template>
|
|
<UDashboardPanel id="home">
|
|
<template #header>
|
|
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<FormValidationIndicator :status="validationStatus" />
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
|
|
<div v-if="!canWriteApplicationForms" class="text-center py-12">
|
|
<UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
|
|
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Keine Berechtigung</h2>
|
|
<p class="text-gray-500 mb-4">Sie haben keine Berechtigung zum Erstellen von Anträgen.</p>
|
|
<UButton to="/" class="mt-4"> Zurück zur Übersicht </UButton>
|
|
</div>
|
|
<div v-else-if="applicationFormTemplate">
|
|
<FormStepperWithNavigation
|
|
:form-element-sections="applicationFormTemplate.formElementSections"
|
|
@save="onSave"
|
|
@submit="onSubmit"
|
|
@add-input-form="handleAddInputForm"
|
|
>
|
|
<UFormField label="Name" class="mb-4">
|
|
<UInput v-model="applicationFormTemplate.name" />
|
|
</UFormField>
|
|
</FormStepperWithNavigation>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
ComplianceStatus,
|
|
type FormElementDto,
|
|
type FormElementSectionDto,
|
|
type PagedApplicationFormDto
|
|
} from '~~/.api-client'
|
|
import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
|
|
import type { FormElementId } from '~~/types/formElement'
|
|
import { useUserStore } from '~~/stores/useUserStore'
|
|
|
|
const { getAllApplicationFormTemplates } = await useApplicationFormTemplate()
|
|
const { createApplicationForm, submitApplicationForm } = useApplicationForm()
|
|
const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
|
|
const { canWriteApplicationForms } = usePermissions()
|
|
const userStore = useUserStore()
|
|
const { selectedOrganization } = storeToRefs(userStore)
|
|
const toast = useToast()
|
|
|
|
const { data, error } = await useAsyncData<PagedApplicationFormDto>(
|
|
'create-application-form',
|
|
async () => {
|
|
return await getAllApplicationFormTemplates()
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
if (error.value) {
|
|
throw createError({ statusText: error.value.message })
|
|
}
|
|
|
|
const applicationFormTemplate = computed(
|
|
// TODO: Don't select always the first item, allow user to select a template
|
|
() => data?.value?.content[0] ?? undefined
|
|
)
|
|
|
|
const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
|
|
const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
|
|
|
|
const allFormElements = computed(() => {
|
|
return (
|
|
applicationFormTemplate.value?.formElementSections?.flatMap((section: FormElementSectionDto) =>
|
|
section.formElementSubSections.flatMap((subsection) => subsection.formElements)
|
|
) ?? []
|
|
)
|
|
})
|
|
|
|
watch(
|
|
() => allFormElements.value,
|
|
(updatedFormElements: FormElementDto[]) => {
|
|
validationMap.value = validateFormElements(updatedFormElements)
|
|
validationStatus.value = getHighestComplianceStatus()
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
async function onSave() {
|
|
const applicationForm = await prepareAndCreateApplicationForm()
|
|
if (applicationForm) {
|
|
toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
|
|
}
|
|
}
|
|
|
|
async function onSubmit() {
|
|
const applicationForm = await prepareAndCreateApplicationForm()
|
|
if (applicationForm) {
|
|
await submitApplicationForm(applicationForm.id)
|
|
await navigateTo('/')
|
|
toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
|
|
}
|
|
}
|
|
|
|
function handleAddInputForm() {
|
|
// In create mode (no applicationFormId), addInputFormToApplicationForm returns undefined
|
|
// The form element is added locally to the template sections, which are reactive
|
|
// No action needed here
|
|
}
|
|
|
|
async function prepareAndCreateApplicationForm() {
|
|
if (!applicationFormTemplate.value) {
|
|
console.error('Application form data is undefined')
|
|
return null
|
|
}
|
|
|
|
console.log('selectedOrganization', selectedOrganization.value)
|
|
applicationFormTemplate.value.organizationId = selectedOrganization.value?.id ?? ''
|
|
|
|
return await createApplicationForm(applicationFormTemplate.value)
|
|
}
|
|
</script>
|