146 lines
5.1 KiB
Vue
146 lines
5.1 KiB
Vue
<template>
|
|
<UDashboardPanel id="home">
|
|
<template #header>
|
|
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<div class="flex-1" />
|
|
<USeparator orientation="vertical" class="h-8 mx-2" />
|
|
<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">{{ $t('applicationForms.noPermission') }}</h2>
|
|
<p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
|
|
<UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
|
|
</div>
|
|
<div v-else-if="applicationFormTemplate">
|
|
<FormStepperWithNavigation
|
|
:form-element-sections="applicationFormTemplate.formElementSections"
|
|
@save="onSave"
|
|
@submit="onSubmit"
|
|
@add-input-form="handleAddInputForm"
|
|
@update:form-element-sections="handleFormElementSectionsUpdate"
|
|
>
|
|
<UFormField :label="$t('common.name')" class="mb-4">
|
|
<UInput v-model="applicationFormTemplate.name" class="w-full" />
|
|
</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 } = useApplicationFormTemplate()
|
|
const { createApplicationForm, submitApplicationForm } = useApplicationForm()
|
|
const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
|
|
const { evaluateVisibility } = useFormElementVisibility()
|
|
const { canWriteApplicationForms } = usePermissions()
|
|
const userStore = useUserStore()
|
|
const { selectedOrganization } = storeToRefs(userStore)
|
|
const toast = useToast()
|
|
const { t: $t } = useI18n()
|
|
const logger = useLogger().withTag('create')
|
|
|
|
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)
|
|
) ?? []
|
|
)
|
|
})
|
|
|
|
const visibilityMap = computed(() => {
|
|
return evaluateVisibility(allFormElements.value)
|
|
})
|
|
|
|
watch(
|
|
() => allFormElements.value,
|
|
(updatedFormElements: FormElementDto[]) => {
|
|
validationMap.value = validateFormElements(updatedFormElements, visibilityMap.value)
|
|
validationStatus.value = getHighestComplianceStatus()
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
async function onSave() {
|
|
const applicationForm = await prepareAndCreateApplicationForm()
|
|
if (applicationForm) {
|
|
toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
|
|
}
|
|
}
|
|
|
|
async function onSubmit() {
|
|
const applicationForm = await prepareAndCreateApplicationForm()
|
|
if (applicationForm?.id) {
|
|
await submitApplicationForm(applicationForm.id)
|
|
await navigateTo('/')
|
|
toast.add({ title: $t('common.success'), description: $t('applicationForms.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
|
|
}
|
|
|
|
function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
|
|
if (applicationFormTemplate.value) {
|
|
applicationFormTemplate.value.formElementSections = sections
|
|
}
|
|
}
|
|
|
|
async function prepareAndCreateApplicationForm() {
|
|
if (!applicationFormTemplate.value) {
|
|
logger.error('Application form data is undefined')
|
|
return null
|
|
}
|
|
|
|
logger.debug('selectedOrganization', selectedOrganization.value)
|
|
applicationFormTemplate.value.organizationId = selectedOrganization.value?.id ?? ''
|
|
|
|
return await createApplicationForm(applicationFormTemplate.value)
|
|
}
|
|
</script>
|