gremiumhub/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue

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

        <template #right>
          <UDropdownMenu :items="items">
            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
          </UDropdownMenu>
        </template>
      </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>
      </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>
    </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' })
  }
}
</script>