major: Rename legalconsenthub to gremiumhub
This commit is contained in:
@@ -1,258 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user