Browse Source

feat(nc-gui): form limit options reordering

pull/7729/head
Ramesh Mane 10 months ago
parent
commit
f9b31309e3
  1. 68
      packages/nc-gui/components/smartsheet/form/LimitOptions.vue

68
packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@ -50,7 +50,7 @@ const vModel = computed({
id: user.id, id: user.id,
email: user.email, email: user.email,
display_name: user.display_name, display_name: user.display_name,
order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++, order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? c.order : order++,
show: show:
user.id && limitOptionsById[user.id] user.id && limitOptionsById[user.id]
? limitOptionsById[user.id]?.show ? limitOptionsById[user.id]?.show
@ -58,6 +58,7 @@ const vModel = computed({
? true ? true
: false, : false,
})) }))
.sort((a, b) => a.order - b.order)
if ((props.modelValue || []).length !== collaborators.length) { if ((props.modelValue || []).length !== collaborators.length) {
emit( emit(
@ -67,13 +68,20 @@ const vModel = computed({
} }
return collaborators return collaborators
} else if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(column.value.uidt as UITypes)) { } else if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(column.value.uidt as UITypes)) {
const updateModelValue = ((column.value.colOptions as SelectOptionsType)?.options || []).map((c) => { const updateModelValue = ((column.value.colOptions as SelectOptionsType)?.options || [])
return { .map((c) => {
...c, return {
order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++, ...c,
show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false, order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
} as SelectOptionType & { show?: boolean } show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
}) } as SelectOptionType & { show?: boolean }
})
.sort((a, b) => {
if (a.order !== undefined && b.order !== undefined) {
return a.order - b.order
}
return 0
})
if ((props.modelValue || []).length !== ((column.value.colOptions as SelectOptionsType)?.options || []).length) { if ((props.modelValue || []).length !== ((column.value.colOptions as SelectOptionsType)?.options || []).length) {
emit( emit(
@ -93,8 +101,42 @@ const vModel = computed({
}, },
}) })
const syncOptions = () => { async function onMove(_event: { moved: { newIndex: number; oldIndex: number; element: any } }) {
// set initial colOptions if not set const {
moved: { newIndex = 0, oldIndex = 0, element },
} = _event
if (!vModel.value.length || vModel.value.length === 1) {
element.order = 1
} else if (vModel.value.length - 1 === newIndex) {
element.order = (vModel.value[newIndex - 1]?.order || 0) + 1
} else if (newIndex === 0) {
element.order = (vModel.value[1]?.order || 0) / 2
} else {
element.order = ((vModel.value[newIndex - 1]?.order || 0) + (vModel.value[newIndex + 1].order || 0)) / 2
}
let nextOrder: number
// set new order value based on the new order of the items
if (!vModel.value.length || vModel.value.length === 1) {
nextOrder = 1
} else if (vModel.value.length - 1 === newIndex) {
// If moving to the end, set nextOrder greater than the maximum order in the list
nextOrder = Math.max(...vModel.value.map((item) => item?.order ?? 0)) + 1
} else if (newIndex === 0) {
// If moving to the beginning, set nextOrder smaller than the minimum order in the list
nextOrder = Math.min(...vModel.value.map((item) => item?.order ?? 0)) / 2
} else {
nextOrder =
(parseFloat(String(vModel.value[newIndex - 1]?.order ?? 0)) + parseFloat(String(vModel.value[newIndex + 1]?.order ?? 0))) /
2
}
const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
element.order = _nextOrder
vModel.value = vModel.value
} }
</script> </script>
@ -124,11 +166,11 @@ const syncOptions = () => {
</div> </div>
<Draggable <Draggable
v-if="vModel.length" v-if="vModel.length"
:list="vModel" :model-value="vModel"
item-key="id" item-key="id"
handle=".nc-child-draggable-icon" handle=".nc-child-draggable-icon"
class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar" class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
@change="syncOptions" @change="onMove($event)"
@start="drag = true" @start="drag = true"
@end="drag = false" @end="drag = false"
> >
@ -147,7 +189,7 @@ const syncOptions = () => {
]" ]"
:data-testid="`nc-form-field-${column.title?.replaceAll(' ', '')}-limit-option-${element.title?.replaceAll(' ', '')}`" :data-testid="`nc-form-field-${column.title?.replaceAll(' ', '')}-limit-option-${element.title?.replaceAll(' ', '')}`"
> >
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600" /> <component :is="iconMap.drag" class="nc-child-draggable-icon flex-none cursor-move !h-4 !w-4 text-gray-600" />
<div <div
@click=" @click="

Loading…
Cancel
Save