feat(#5): Add title-body control element that can be added dynamically, refactored sectionIndex/create

legalconsenthub/components/FormEngine.vue

@@ -1,28 +1,28 @@
 <template>
   <template v-for="(formElement, index) in props.modelValue" :key="formElement.id">
-    <div class="group py-3 lg:py-4">
-      <p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
-      <p v-if="formElement.description" class="text-dimmed pb-3">{{ formElement.description }}</p>
-      <div class="flex justify-between">
+    <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)"
         />
-        <UIcon
-          name="i-lucide-message-square-more"
-          class="size-5 cursor-pointer hidden group-hover:block"
-          @click="toggleComments(formElement.id)"
+        <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>
-    <TheComment
-      v-if="applicationFormId && activeFormElement === formElement.id"
-      :form-element-id="formElement.id"
-      :application-form-id="applicationFormId"
-      :comments="comments?.[formElement.id]"
-    />
     <USeparator />
   </template>
 </template>
@@ -31,6 +31,7 @@
 import type { FormElementDto, FormOptionDto } from '~/.api-client'
 import { resolveComponent } from 'vue'
 import TheComment from '~/components/TheComment.vue'
+import type { DropdownMenuItem } from '@nuxt/ui'
 
 const props = defineProps<{
   modelValue: FormElementDto[]
@@ -41,6 +42,7 @@ const props = defineProps<{
 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()
@@ -66,11 +68,30 @@ function getResolvedComponent(formElement: FormElementDto) {
       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 }