142 lines
4.5 KiB
Vue
142 lines
4.5 KiB
Vue
<template>
|
|
<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>
|
|
<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, formElement.id)"
|
|
/>
|
|
<TheComment
|
|
v-if="applicationFormId && activeFormElement === formElement.id"
|
|
:form-element-id="formElement.id"
|
|
:application-form-id="applicationFormId"
|
|
:comments="comments?.[formElement.id]"
|
|
/>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'transition-opacity duration-200',
|
|
openDropdownId === formElement.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
|
|
]"
|
|
>
|
|
<UDropdownMenu
|
|
:items="getDropdownItems(formElement.id, index)"
|
|
:content="{ align: 'end' }"
|
|
@update:open="(isOpen) => handleDropdownToggle(formElement.id, 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
|
|
}>()
|
|
|
|
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)
|
|
|
|
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
|
|
}
|
|
|
|
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')
|
|
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[], 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) {
|
|
if (activeFormElement.value === formElementId) {
|
|
activeFormElement.value = ''
|
|
return
|
|
}
|
|
activeFormElement.value = formElementId
|
|
emit('click:comments', formElementId)
|
|
}
|
|
</script>
|