gremiumhub/legalconsenthub/app/components/FormEngine.vue

<template>
  <template v-for="(formElement, index) in visibleFormElements" :key="getElementKey(formElement, index)">
    <div class="group flex py-3 lg:py-4">
      <div class="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)"
        />
        <div v-if="formElement.isClonable && !props.disabled" class="mt-3">
          <UButton
            variant="outline"
            size="sm"
            leading-icon="i-lucide-copy-plus"
            @click="handleCloneElement(formElement, index)"
          >
            {{ $t('applicationForms.formElements.addAnother') }}
          </UButton>
        </div>
        <TheComment
          v-if="applicationFormId && formElement.id && activeFormElement === formElement.id"
          :form-element-id="formElement.id"
          :application-form-id="applicationFormId"
          :comments="comments?.[formElement.id]"
        />
      </div>
      <div
        :class="[
          'transition-opacity duration-200',
          openDropdownId === getElementKey(formElement, index) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
        ]"
      >
        <UDropdownMenu
          :items="getDropdownItems(getElementKey(formElement, index), index)"
          :content="{ align: 'end' }"
          @update:open="(isOpen) => handleDropdownToggle(getElementKey(formElement, index), isOpen)"
        >
          <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
        </UDropdownMenu>
      </div>
    </div>
    <USeparator v-if="index < visibleFormElements.length - 1" />
  </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[]
  visibilityMap: Map<string, boolean>
  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
  (e: 'clone:element', element: FormElementDto, 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 route = useRoute()
const activeFormElement = ref('')
const openDropdownId = ref<string | null>(null)

function getElementKey(element: FormElementDto, index: number): string {
  return element.id || element.reference || `element-${index}`
}

const visibleFormElements = computed(() => {
  return props.modelValue.filter((element) => {
    const key = element.id || element.reference
    return key ? props.visibilityMap.get(key) !== false : true
  })
})

function handleDropdownToggle(formElementId: string, isOpen: boolean) {
  openDropdownId.value = isOpen ? formElementId : null
}

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 'TEXTAREA':
      return resolveComponent('TheTextarea')
    case 'TITLE_BODY_TEXTFIELDS':
      return resolveComponent('TheTitleBodyInput')
    case 'DATE':
      return resolveComponent('TheDate')
    default:
      return resolveComponent('Unimplemented')
  }
}

function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
  const { t: $t } = useI18n()
  const items = []

  if (route.path !== '/create') {
    items.push({
      label: $t('applicationForms.formElements.comments'),
      icon: 'i-lucide-message-square-more',
      onClick: () => toggleComments(formElementId)
    })
  }

  items.push({
    label: $t('applicationForms.formElements.addInputBelow'),
    icon: 'i-lucide-list-plus',
    onClick: () => emit('add:input-form', formElementPosition)
  })

  return [items]
}

function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
  const targetElement = visibleFormElements.value[formElementIndex]
  if (!targetElement) {
    return
  }

  const updatedModelValue = props.modelValue.map((element) => {
    if (targetElement.id && element.id === targetElement.id) {
      return { ...element, options: formOptions }
    }
    if (targetElement.reference && element.reference === targetElement.reference) {
      return { ...element, options: formOptions }
    }
    return element
  })
  emit('update:modelValue', updatedModelValue)
}

function toggleComments(formElementId: string) {
  if (activeFormElement.value === formElementId) {
    activeFormElement.value = ''
    return
  }
  activeFormElement.value = formElementId
  emit('click:comments', formElementId)
}

function handleCloneElement(formElement: FormElementDto, position: number) {
  emit('clone:element', formElement, position)
}
</script>