refactor(gui): use a-select for single select

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

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

@@ -48,7 +48,7 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
-const options = computed<SelectOptionType[]>(() => {
+const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? (column.value.colOptions as SelectOptionsType).options.filter((el: SelectOptionType) => el.title !== '') || []
@@ -167,7 +167,12 @@ const { $api } = useNuxtApp()
 const { getMeta } = useMetas()
 
 async function addIfMissingAndSave() {
-  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
+
+  if (!searchInput) return false
+
+  const newOptValue = searchInput?.value
+
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
     const newOptions = [...options.value]
     newOptions.push({ title: newOptValue, value: newOptValue })
@@ -179,6 +184,7 @@ async function addIfMissingAndSave() {
     await getMeta(column.value.fk_model_id!, true)
 
     vModel.value = [...vModel.value, newOptValue]
+    searchInput.value = ''
   }
 }
 </script>

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

@@ -60,12 +60,17 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
   return []
 })
 
-const handleKeys = (e: KeyboardEvent) => {
+const handleKeys = async (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Escape':
       e.preventDefault()
       isOpen.value = false
       break
+    case 'Enter':
+      e.preventDefault()
+      if (await addIfMissingAndSave())
+        e.stopPropagation()
+      break
   }
 }
 
@@ -102,8 +107,12 @@ useSelectedCellKeyupListener(active, (e) => {
 const val = ref()
 const { $api } = useNuxtApp()
 
-const addIfMissingAndSave = async () => {
-  const newOptValue = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
+async function addIfMissingAndSave() {
+  const searchInput = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')
+
+  if(!searchInput) return false
+
+  const newOptValue = searchInput?.value
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
     options.value.push({ title: newOptValue, value: newOptValue })
@@ -117,6 +126,24 @@ const addIfMissingAndSave = async () => {
 </script>
 
 <template>
+  <!--  <a-auto-complete
+      ref="aselect"
+      v-model:value="val"
+      class="w-full h-fill"
+      dropdown-class-name="nc-dropdown-single-select-cell"
+      :options="options"
+      @select="vModel = val"
+      :defaultActiveFirstOption="false"
+      @keydown.enter.prevent.stop="addIfMissingAndSave"
+    >
+      <template #option="item">
+        <div style="display: flex; justify-content: space-between">
+          {{ item.value }}
+        </div>
+      </template>
+      -->
+
+
   <a-select
     ref="aselect"
     v-model:value="vModel"