feat(fullstack): Add form element section and stepper

legalconsenthub/components/FormEngine.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormElementDto, FormOptionDto } from '~/.api-client'
+import type { CommentDto, FormElementDto, FormOptionDto } from '~/.api-client'
 import { useComment } from '~/composables/comment/useComment'
 import { resolveComponent } from 'vue'
 

legalconsenthub/pages/application-forms/[id].vue

@@ -1,82 +0,0 @@
-<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 #left> toolbar left </template>
-      </UDashboardToolbar>
-    </template>
-
-    <template #body>
-      <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
-        <UCard variant="subtle">
-          <FormEngine
-            v-if="applicationForm"
-            v-model="applicationForm.formElements"
-            :application-form-id="applicationForm.id"
-            :disabled="isReadOnly"
-            @click:comments="openComments"
-          />
-          <UButton :disabled="isReadOnly" class="my-3 lg:my-4" @click="onSubmit">Submit</UButton>
-        </UCard>
-      </div>
-    </template>
-  </UDashboardPanel>
-</template>
-
-<script setup lang="ts">
-import type { ApplicationFormDto } from '~/.api-client'
-
-const { getApplicationFormById, updateApplicationForm } = useApplicationForm()
-const route = useRoute()
-const { user } = useAuth()
-
-const items = [
-  [
-    {
-      label: 'Neuer Mitbestimmungsantrag',
-      icon: 'i-lucide-send',
-      to: '/create'
-    }
-  ]
-]
-
-const { data } = await useAsyncData<ApplicationFormDto>(async () => {
-  return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
-})
-
-const applicationForm = computed({
-  get: () => data?.value,
-  set: (val) => {
-    if (val && data.value) {
-      data.value = val
-    }
-  }
-})
-
-const isReadOnly = computed(() => {
-  return applicationForm.value?.createdBy.id !== user.value?.id
-})
-
-async function onSubmit() {
-  if (data?.value) {
-    await updateApplicationForm(data.value.id, data.value)
-    await navigateTo('/')
-  }
-}
-
-function openComments(formElementId: string) {
-  console.log('open comments for', formElementId)
-}
-</script>

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

@@ -0,0 +1,159 @@
+<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 #left> toolbar left </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 class="text-xl text-pretty font-bold text-highlighted">
+          {{ currentFormElementSection.title }}
+        </h1>
+        <UCard variant="subtle">
+          <FormEngine
+            v-if="applicationForm"
+            v-model="currentFormElementSection.formElements"
+            :application-form-id="applicationForm.id"
+            :disabled="isReadOnly"
+            @click:comments="openComments"
+          />
+          <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>
+            <UButton
+              v-if="!stepper?.hasNext"
+              trailing-icon="i-lucide-send-horizontal"
+              :disabled="isReadOnly"
+              @click="onSubmit"
+            >
+              Submit
+            </UButton>
+          </div>
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto, FormElementSectionDto } from '~/.api-client'
+import type { StepperItem } from '@nuxt/ui'
+
+const { getApplicationFormById, updateApplicationForm } = useApplicationForm()
+const route = useRoute()
+const { user } = useAuth()
+
+const items = [
+  [
+    {
+      label: 'Neuer Mitbestimmungsantrag',
+      icon: 'i-lucide-send',
+      to: '/create'
+    }
+  ]
+]
+
+const stepper = useTemplateRef('stepper')
+const activeStepperItemIndex = ref<number>(0)
+
+const currentFormElementSection = computed<FormElementSectionDto>(() => {
+  return applicationForm.value?.formElementSections[activeStepperItemIndex.value]
+})
+
+watch(activeStepperItemIndex, async (newActiveStepperItem: number) => {
+  activeStepperItemIndex.value = newActiveStepperItem
+  await navigateTo(`/application-forms/${route.params.id}/${newActiveStepperItem}`)
+})
+
+watch(
+  () => route.path,
+  (_) => {
+    const sectionIndex = parseInt(route.params.sectionIndex[0])
+    activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
+  },
+  { immediate: true }
+)
+
+const { data, error } = await useAsyncData<ApplicationFormDto>(async () => {
+  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>({
+  get: () => data?.value as ApplicationFormDto,
+  set: (val: ApplicationFormDto) => {
+    if (val && data.value) {
+      data.value = val
+    }
+  }
+})
+
+const isReadOnly = computed(() => {
+  return applicationForm.value?.createdBy.id !== user.value?.id
+})
+
+const stepperItems = computed(() => {
+  const stepperItems: StepperItem[] = []
+  applicationForm.value.formElementSections.forEach((section: FormElementSectionDto, index: number, _) => {
+    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 targetSectionIndex =
+    direction === 'forward' ? activeStepperItemIndex.value + 1 : activeStepperItemIndex.value - 1
+  await navigateTo(`/application-forms/${route.params.id}/${targetSectionIndex}`)
+}
+
+async function onSubmit() {
+  if (data?.value) {
+    await updateApplicationForm(data.value.id, data.value)
+    await navigateTo('/')
+  }
+}
+
+function openComments(formElementId: string) {
+  console.log('open comments for', formElementId)
+}
+</script>

legalconsenthub/pages/create.vue

@@ -26,8 +26,33 @@
             <UFormField label="Name">
               <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
             </UFormField>
-            <FormEngine v-model="formElements" />
-            <UButton type="submit">Submit</UButton>
+            <UStepper ref="stepper" v-model="activeStepperItem" :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>
+              <UButton v-if="!stepper?.hasNext" @click="onSubmit"> Submit </UButton>
+            </div>
           </UForm>
         </UPageCard>
       </div>
@@ -36,20 +61,60 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
+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 } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 const { userDto, selectedOrganization } = useAuth()
 
-const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
+const stepper = useTemplateRef('stepper')
+const activeStepperItem = ref<number>(0)
+
+const currentFormElementSection = computed(() => {
+  return applicationFormTemplate.value?.formElementSections[activeStepperItem.value]
+})
+
+watch(activeStepperItem, async (newActiveStepperItem: number) => {
+  activeStepperItem.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
   get: () => data?.value?.content[0] ?? undefined,
   set: (val) => {
     if (val && data.value) {
@@ -59,10 +124,11 @@ const applicationFormTemplate = computed({
 })
 
 const formElements = computed({
-  get: () => applicationFormTemplate.value?.formElements ?? [],
+  get: () => currentFormElementSection?.value?.formElements ?? [],
   set: (val) => {
     if (val && applicationFormTemplate.value) {
-      applicationFormTemplate.value.formElements = val
+      if (!currentFormElementSection.value) return
+      currentFormElementSection.value.formElements = val
     }
   }
 })

legalconsenthub/pages/index.vue

@@ -36,7 +36,7 @@
           v-for="(applicationFormElem, index) in applicationForms"
           :key="applicationFormElem.id"
           class="flex justify-between items-center p-4 bg-white rounded-lg shadow-md"
-          @click="navigateTo(`application-forms/${applicationFormElem.id}`)"
+          @click="navigateTo(`application-forms/${applicationFormElem.id}/0`)"
         >
           <div>
             <p class="font-medium text-(--ui-text-highlighted) text-base">