diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue index f3f09fecba..ffc70435e9 100644 --- a/packages/nc-gui/components/cell/MultiSelect.vue +++ b/packages/nc-gui/components/cell/MultiSelect.vue @@ -17,6 +17,7 @@ import { useProject, useSelectedCellKeyupListener, watch, + useMetas } from '#imports' import MdiCloseCircle from '~icons/mdi/close-circle' @@ -55,21 +56,24 @@ const options = computed(() => { for (const op of opts.filter((el: SelectOptionType) => el.order === null)) { op.title = op.title?.replace(/^'/, '').replace(/'$/, '') } - return opts + return opts.map((o: SelectOptionType) => ({ ...o, value: o.title })) } return [] }) const vModel = computed({ - get: () => - selectedIds.value.reduce((acc, id) => { - const title = options.value.find((op) => op.id === id)?.title + get: () => { + return selectedIds.value.reduce((acc, id) => { + const title = (options.value.find((op) => op.id === id) || options.value.find((op) => op.title === id))?.title if (title) acc.push(title) return acc - }, [] as string[]), - set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')), + }, [] as string[]) + }, + set: (val) => { + emit('update:modelValue', val.length === 0 ? null : val.join(',')) + }, }) const selectedTitles = computed(() => @@ -89,6 +93,20 @@ const selectedTitles = computed(() => : [], ) +const handleKeys = async (e: KeyboardEvent) => { + switch (e.key) { + case 'Escape': + e.preventDefault() + isOpen.value = false + break + case 'Enter': + e.stopPropagation() + await addIfMissingAndSave() + break + } +} +const v = Math.floor(Math.random() * 1000) + const handleClose = (e: MouseEvent) => { if (aselect.value && !aselect.value.$el.contains(e.target)) { isOpen.value = false @@ -97,9 +115,10 @@ const handleClose = (e: MouseEvent) => { onMounted(() => { selectedIds.value = selectedTitles.value.flatMap((el) => { - const item = options.value.find((op) => op.title === el)?.id - if (item) { - return [item] + const item = options.value.find((op) => op.title === el) + const itemIdOrTitle = item?.id || item?.title + if (itemIdOrTitle) { + return [itemIdOrTitle] } return [] @@ -142,6 +161,26 @@ useSelectedCellKeyupListener(active, (e) => { break } }) + +const searchVal = ref() +const { $api } = useNuxtApp() +const {getMeta} = useMetas() + +async function addIfMissingAndSave() { + const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value + if (newOptValue && !options.value.some((o) => o.title === newOptValue)) { + const newOptions = [...options.value] + newOptions.push({ title: newOptValue, value: newOptValue }) + column.value.colOptions = { options: newOptions.map(({ value: _, ...rest }) => rest) } + + await $api.dbTableColumn.update(column.value?.id as string, { + ...column.value, + }) + await getMeta(column.value.fk_model_id!, true) + + vModel.value = [...vModel.value, newOptValue] + } +}