gremiumhub/legalconsenthub/pages/create.vue

<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right />
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left />
      </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="!canCreateApplicationForm" 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>
          <UAlert
            v-if="currentRoleInfo"
            :title="`Ihre aktuelle Rolle: ${currentRoleInfo.name}`"
            :description="currentRoleInfo.description"
            :color="currentRoleInfo.color"
            variant="soft"
            class="max-w-md mx-auto"
          />
        </div>
        <div v-else>
          <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
            {{ trafficLightStatusEmoji }}
          </UPageCard>

          <UPageCard variant="subtle">
            <UForm class="space-y-4" :state="{}" @submit="onSubmit">
              <UFormField label="Name">
                <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
              </UFormField>
              <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>
              <FormEngine
                v-if="currentFormElementSection?.formElements"
                v-model="currentFormElementSection.formElements"
              />
              <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" variant="outline" @click="onSave"> Save </UButton>
                  <UButton trailing-icon="i-lucide-send-horizontal" @click="onSubmit"> Submit </UButton>
                </div>
              </div>
            </UForm>
          </UPageCard>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import { ComplianceStatus, type FormElementSectionDto, type PagedApplicationFormDto } from '~/.api-client'
import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
import type { FormElementId } from '~/types/FormElement'
import type { StepperItem } from '@nuxt/ui'

const { getAllApplicationFormTemplates } = useApplicationFormTemplate()
const { createApplicationForm, submitApplicationForm } = useApplicationForm()
const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
const { userDto, selectedOrganization } = useAuth()
const { canCreateApplicationForm, getCurrentRoleInfo } = usePermissions()
const toast = useToast()

// Get current role information for display
const currentRoleInfo = computed(() => getCurrentRoleInfo())

const stepper = useTemplateRef('stepper')
const activeStepperItemIndex = ref<number>(0)

const currentFormElementSection = computed(
  () => applicationFormTemplate.value?.formElementSections[activeStepperItemIndex.value]
)

watch(activeStepperItemIndex, async (newActiveStepperItem: number) => {
  activeStepperItemIndex.value = newActiveStepperItem
})

const { data, error } = await useAsyncData<PagedApplicationFormDto>(async () => {
  return await getAllApplicationFormTemplates()
})

if (error.value) {
  throw createError({ statusText: error.value.message })
}

const stepperItems = computed(() => {
  const stepperItems: StepperItem[] = []
  if (!applicationFormTemplate.value) {
    return stepperItems
  }

  applicationFormTemplate.value.formElementSections.forEach((section: FormElementSectionDto) => {
    stepperItems.push({
      title: section.shortTitle,
      description: section.description
    })
  })
  return stepperItems
})

async function navigateStepper(direction: 'forward' | 'backward') {
  if (direction === 'forward') {
    stepper.value?.next()
  } else {
    stepper.value?.prev()
  }
}

const applicationFormTemplate = computed(
  // TODO: Don't select always the first item, allow user to select a template
  () => data?.value?.content[0] ?? undefined
)

const formElements = computed({
  get: () => currentFormElementSection?.value?.formElements ?? [],
  set: (val) => {
    if (val && applicationFormTemplate.value) {
      if (!currentFormElementSection.value) return
      currentFormElementSection.value.formElements = val
    }
  }
})
const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)

watch(
  () => formElements,
  (updatedFormElements) => {
    validationMap.value = validateFormElements(updatedFormElements.value)
    validationStatus.value = getHighestComplianceStatus()
  },
  { deep: true }
)

const trafficLightStatusEmoji = computed(() => {
  switch (validationStatus.value) {
    case ComplianceStatus.Critical:
      return '🔴'
    case ComplianceStatus.Warning:
      return '🟡'
    case ComplianceStatus.NonCritical:
      return '🟢'
    default:
      return '🟢'
  }
})

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' })
  }
}

async function prepareAndCreateApplicationForm() {
  if (!applicationFormTemplate.value) {
    console.error('Application form data is undefined')
    return null
  }

  applicationFormTemplate.value.createdBy = userDto.value
  applicationFormTemplate.value.lastModifiedBy = userDto.value
  applicationFormTemplate.value.organizationId = selectedOrganization.value?.id ?? ''

  return await createApplicationForm(applicationFormTemplate.value)
}
</script>