feat(#13): Show form elements depending on other form element values

legalconsenthub/app/components/FormEngine.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="(formElement, index) in props.modelValue" :key="formElement.id">
+  <template v-for="(formElement, index) in visibleFormElements" :key="formElement.id">
     <div class="group flex py-3 lg:py-4">
       <div class="flex-auto">
         <p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
@@ -8,7 +8,7 @@
           :is="getResolvedComponent(formElement)"
           :form-options="formElement.options"
           :disabled="props.disabled"
-          @update:form-options="updateFormOptions($event, index)"
+          @update:form-options="updateFormOptions($event, formElement.id)"
         />
         <TheComment
           v-if="applicationFormId && activeFormElement === formElement.id"
@@ -32,7 +32,7 @@
         </UDropdownMenu>
       </div>
     </div>
-    <USeparator v-if="index < props.modelValue.length - 1" />
+    <USeparator v-if="index < visibleFormElements.length - 1" />
   </template>
 </template>
 
@@ -45,6 +45,7 @@ import { useCommentStore } from '~~/stores/useCommentStore'
 
 const props = defineProps<{
   modelValue: FormElementDto[]
+  visibilityMap: Map<string, boolean>
   applicationFormId?: string
   disabled?: boolean
 }>()
@@ -68,6 +69,10 @@ const route = useRoute()
 const activeFormElement = ref('')
 const openDropdownId = ref<string | null>(null)
 
+const visibleFormElements = computed(() => {
+  return props.modelValue.filter((element) => props.visibilityMap.get(element.id) !== false)
+})
+
 function handleDropdownToggle(formElementId: string, isOpen: boolean) {
   openDropdownId.value = isOpen ? formElementId : null
 }
@@ -112,14 +117,15 @@ function getDropdownItems(formElementId: string, formElementPosition: number): D
   return [items]
 }
 
-function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
-  console.log('Updating form options for element index:', formElementIndex, formOptions)
-  const updatedModelValue = [...props.modelValue]
-  const currentElement = updatedModelValue[formElementIndex]
-  if (currentElement) {
-    updatedModelValue[formElementIndex] = { ...currentElement, options: formOptions }
-    emit('update:modelValue', updatedModelValue)
-  }
+function updateFormOptions(formOptions: FormOptionDto[], formElementId: string) {
+  console.log('Updating form options for element ID:', formElementId, formOptions)
+  const updatedModelValue = props.modelValue.map((element) => {
+    if (element.id === formElementId) {
+      return { ...element, options: formOptions }
+    }
+    return element
+  })
+  emit('update:modelValue', updatedModelValue)
 }
 
 function toggleComments(formElementId: string) {