feat(#9): Nuxt 4 migration

2025-11-02 18:46:46 +01:00
parent 763b2f7b7f
commit 6d79c710a2
54 changed files with 2904 additions and 1416 deletions
--- a/legalconsenthub/app/components/FormEngine.vue
+++ b/legalconsenthub/app/components/FormEngine.vue
@@ -0,0 +1,110 @@
+<template>
+  <template v-for="(formElement, index) in props.modelValue" :key="formElement.id">
+    <div class="flex py-3 lg:py-4">
+      <div class="group flex-auto">
+        <p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
+        <p v-if="formElement.description" class="text-dimmed pb-3">{{ formElement.description }}</p>
+        <component
+          :is="getResolvedComponent(formElement)"
+          :form-options="formElement.options"
+          :disabled="props.disabled"
+          @update:form-options="updateFormOptions($event, index)"
+        />
+        <TheComment
+          v-if="applicationFormId && activeFormElement === formElement.id"
+          :form-element-id="formElement.id"
+          :application-form-id="applicationFormId"
+          :comments="comments?.[formElement.id]"
+        />
+      </div>
+      <div>
+        <UDropdownMenu :items="getDropdownItems(formElement.id, index)" :content="{ align: 'end' }">
+          <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
+        </UDropdownMenu>
+      </div>
+    </div>
+    <USeparator />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { FormElementDto, FormOptionDto } from '~~/.api-client'
+import { resolveComponent } from 'vue'
+import TheComment from '~/components/TheComment.vue'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { useCommentStore } from '~~/stores/useCommentStore'
+
+const props = defineProps<{
+  modelValue: FormElementDto[]
+  applicationFormId?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', formElementDto: FormElementDto[]): void
+  (e: 'click:comments', formElementId: string): void
+  (e: 'add:input-form', position: number): void
+}>()
+
+const commentStore = useCommentStore()
+const { load: loadComments } = commentStore
+const { comments } = storeToRefs(commentStore)
+
+if (props.applicationFormId) {
+  console.log('Loading comments for application form:', props.applicationFormId)
+  await loadComments(props.applicationFormId)
+}
+
+const activeFormElement = ref('')
+
+function getResolvedComponent(formElement: FormElementDto) {
+  switch (formElement.type) {
+    case 'CHECKBOX':
+      return resolveComponent('TheCheckbox')
+    case 'SELECT':
+      return resolveComponent('TheSelect')
+    case 'RADIOBUTTON':
+      return resolveComponent('TheRadioGroup')
+    case 'SWITCH':
+      return resolveComponent('TheSwitch')
+    case 'TEXTFIELD':
+      return resolveComponent('TheInput')
+    case 'TITLE_BODY_TEXTFIELDS':
+      return resolveComponent('TheTitleBodyInput')
+    default:
+      return resolveComponent('Unimplemented')
+  }
+}
+
+function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
+  return [
+    [
+      {
+        label: 'Comments',
+        icon: 'i-lucide-message-square-more',
+        onClick: () => toggleComments(formElementId)
+      },
+      {
+        label: 'Add input field below',
+        icon: 'i-lucide-list-plus',
+        onClick: () => emit('add:input-form', formElementPosition)
+      }
+    ]
+  ]
+}
+
+function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
+  const updatedModelValue = [...props.modelValue]
+  updatedModelValue[formElementIndex] = { ...updatedModelValue[formElementIndex], options: formOptions }
+  emit('update:modelValue', updatedModelValue)
+}
+
+function toggleComments(formElementId: string) {
+  if (activeFormElement.value === formElementId) {
+    activeFormElement.value = ''
+    return
+  }
+  activeFormElement.value = formElementId
+  emit('click:comments', formElementId)
+}
+</script>