gremiumhub/legalconsenthub/app/components/FormEngine.vue

<template>
  <TransitionGroup name="form-element" tag="div" class="relative" @before-enter="applyCascadingEntryDelay">
    <div
      v-for="(formElementItem, visibleIndex) in visibleFormElements"
      :key="getElementKey(formElementItem.formElement, formElementItem.indexInSubsection)"
      :data-index="visibleIndex"
    >
      <div class="group flex py-3 lg:py-4">
        <div class="flex-auto min-w-0">
          <p
            v-if="formElementItem.formElement.title"
            :class="['font-semibold', formElementItem.formElement.description ? '' : 'pb-3']"
          >
            {{ formElementItem.formElement.title }}
          </p>
          <p v-if="formElementItem.formElement.description" class="text-dimmed pb-3">
            {{ formElementItem.formElement.description }}
          </p>
          <component
            :is="getResolvedComponent(formElementItem.formElement)"
            :form-options="formElementItem.formElement.options"
            :disabled="props.disabled"
            :all-form-elements="props.allFormElements"
            :table-row-preset="formElementItem.formElement.tableRowPreset"
            :application-form-id="props.applicationFormId"
            :form-element-reference="formElementItem.formElement.reference"
            @update:form-options="updateFormOptions($event, formElementItem)"
          />
          <div v-if="formElementItem.formElement.isClonable && !props.disabled" class="mt-3">
            <UButton
              variant="outline"
              size="sm"
              leading-icon="i-lucide-copy-plus"
              @click="handleCloneElement(formElementItem.formElement, formElementItem.indexInSubsection)"
            >
              {{ $t('applicationForms.formElements.addAnother') }}
            </UButton>
          </div>
          <TheComment
            v-if="
              applicationFormId &&
              formElementItem.formElement.id &&
              activeFormElement === formElementItem.formElement.id
            "
            :form-element-id="formElementItem.formElement.id"
            :application-form-id="applicationFormId"
            :comments="comments?.[formElementItem.formElement.id]"
            :total-count="
              commentCounts?.[formElementItem.formElement.id] ?? comments?.[formElementItem.formElement.id]?.length ?? 0
            "
            @close="activeFormElement = ''"
          />
        </div>
        <div class="flex items-start gap-1">
          <div class="min-w-9">
            <UButton
              v-if="
                applicationFormId &&
                formElementItem.formElement.id &&
                (commentCounts?.[formElementItem.formElement.id] ?? 0) > 0
              "
              color="neutral"
              variant="soft"
              size="xs"
              icon="i-lucide-message-square"
              class="w-full justify-center"
              @click="toggleComments(formElementItem.formElement.id)"
            >
              {{ commentCounts?.[formElementItem.formElement.id] ?? 0 }}
            </UButton>
          </div>
          <div
            :class="[
              'transition-opacity duration-200',
              openDropdownId === getElementKey(formElementItem.formElement, formElementItem.indexInSubsection)
                ? 'opacity-100'
                : 'opacity-100 lg:opacity-0 lg:group-hover:opacity-100 lg:focus-within:opacity-100'
            ]"
          >
            <UDropdownMenu
              :items="
                getDropdownItems(
                  formElementItem.formElement,
                  getElementKey(formElementItem.formElement, formElementItem.indexInSubsection),
                  formElementItem.indexInSubsection
                )
              "
              :content="{ align: 'end' }"
              @update:open="
                (isOpen: boolean) =>
                  handleDropdownToggle(
                    getElementKey(formElementItem.formElement, formElementItem.indexInSubsection),
                    isOpen
                  )
              "
            >
              <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
            </UDropdownMenu>
          </div>
        </div>
      </div>
      <USeparator v-if="visibleIndex < visibleFormElements.length - 1" />
    </div>
  </TransitionGroup>
</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
  allFormElements?: FormElementDto[]
}>()

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 { loadInitial: loadCommentsInitial } = commentStore
const { commentsByApplicationFormId, countsByApplicationFormId } = storeToRefs(commentStore)

const comments = computed(() => {
  if (!props.applicationFormId) return {}
  return commentsByApplicationFormId.value[props.applicationFormId] ?? {}
})

const commentCounts = computed(() => {
  if (!props.applicationFormId) return {}
  return countsByApplicationFormId.value[props.applicationFormId] ?? {}
})

const route = useRoute()
const activeFormElement = ref('')
const openDropdownId = ref<string | null>(null)

type VisibleFormElement = { formElement: FormElementDto; indexInSubsection: number }

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

const visibleFormElements = computed<VisibleFormElement[]>(() => {
  return props.modelValue
    .map((formElement, indexInSubsection) => ({ formElement, indexInSubsection }))
    .filter(({ formElement }) => {
      const key = formElement.id || formElement.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 'RICH_TEXT':
      return resolveComponent('TheEditor')
    case 'DATE':
      return resolveComponent('TheDate')
    case 'TABLE':
      return resolveComponent('TheTable')
    case 'FILE_UPLOAD':
      return resolveComponent('TheFileUpload')
    default:
      return resolveComponent('Unimplemented')
  }
}

function getDropdownItems(
  formElement: FormElementDto,
  formElementKey: 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(formElement.id ?? formElementKey)
    })
  }

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

  return [items]
}

function updateFormOptions(formOptions: FormOptionDto[], target: VisibleFormElement) {
  const targetElement = target.formElement
  const targetIndex = target.indexInSubsection

  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 }
    }
    // Newly added form input element
    if (!targetElement.id && !targetElement.reference && props.modelValue[targetIndex] === element) {
      return { ...element, options: formOptions }
    }
    return element
  })
  emit('update:modelValue', updatedModelValue)
}

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

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

function applyCascadingEntryDelay(el: Element) {
  const index = parseInt((el as HTMLElement).dataset.index ?? '0', 10)
  ;(el as HTMLElement).style.transitionDelay = `${index * 30}ms`
}
</script>