wip: single/multi select option creation

Signed-off-by: Pranav C <pranavxc@gmail.com>

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<SelectOptionType[]>(() => {
     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: () =>
+  get: () => {
-    selectedIds.value.reduce((acc, id) => {
+    return selectedIds.value.reduce((acc, id) => {
-      const title = options.value.find((op) => op.id === id)?.title
+      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[]),
+    }, [] as string[])
-  set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
+  },
+  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
+    const item = options.value.find((op) => op.title === el)
-    if (item) {
+    const itemIdOrTitle = item?.id || item?.title
-      return [item]
+    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]
+  }
+}
 </script>
 
 <template>
@@ -153,7 +192,8 @@ useSelectedCellKeyupListener(active, (e) => {
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
-    :show-search="false"
+    show-search
+    :open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
@@ -162,7 +202,7 @@ useSelectedCellKeyupListener(active, (e) => {
   >
     <a-select-option
       v-for="op of options"
-      :key="op.id"
+      :key="op.id || op.title"
       :value="op.title"
       :data-testid="`select-option-${column.title}-${rowIndex}`"
       @click.stop

packages/nc-gui/components/cell/SingleSelect.vue

@@ -2,6 +2,7 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -14,7 +15,6 @@ import {
   useEventListener,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 
 interface Props {
   modelValue?: string | undefined
@@ -41,30 +41,41 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 const vModel = computed({
   get: () => modelValue,
-  set: (val) => emit('update:modelValue', val || null),
+  set: (val) => {
+    emit('update:modelValue', val || null)
+  },
 })
 
-const options = computed<SelectOptionType[]>(() => {
+const options = computed<(SelectOptionType & { value: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
-    return opts
+    return opts.map((o: any) => ({ ...o, value: o.title }))
   }
   return []
 })
 
-const handleClose = (e: MouseEvent) => {
+const handleKeys = (e: KeyboardEvent) => {
-  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+  switch (e.key) {
-    isOpen.value = false
+    case 'Escape':
-    aselect.value.blur()
+      e.preventDefault()
+      isOpen.value = false
+      break
   }
 }
 
+const handleClose = (e: MouseEvent) => {
+  // if (aselect.value && !aselect.value.$el.contains(e.target)) {
+  //   isOpen.value = false
+  //   aselect.value.blur()
+  // }
+}
+
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
@@ -87,6 +98,22 @@ useSelectedCellKeyupListener(active, (e) => {
       break
   }
 })
+
+const val = ref()
+const { $api } = useNuxtApp()
+
+const addIfMissingAndSave = async () => {
+  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+
+  if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+    options.value.push({ title: newOptValue, value: newOptValue })
+    column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
+
+    await $api.dbTableColumn.update(column.value?.id as string, {
+      ...column.value,
+    })
+  }
+}
 </script>
 
 <template>
@@ -141,6 +168,3 @@ useSelectedCellKeyupListener(active, (e) => {
   opacity: 1;
 }
 </style>
-<!--
-
--->