refactor(gui): reload table meta after adding new option

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

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
@@ -20,6 +21,7 @@ import {
   useSelectedCellKeyupListener,
   watch,
 } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -210,6 +212,7 @@ async function addIfMissingAndSave() {
     // todo: handle error
     console.log(e)
     activeOptCreateInProgress.value--
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
@@ -15,6 +16,7 @@ import {
   ref,
   watch,
 } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface Props {
   modelValue?: string | undefined
@@ -45,6 +47,8 @@ const { $api } = useNuxtApp()
 
 const searchVal = ref()
 
+const { getMeta } = useMetas()
+
 // a variable to keep newly created option value
 // temporary until it's add the option to column meta
 const tempSelectedOptState = ref<string>()
@@ -108,17 +112,23 @@ async function addIfMissingAndSave() {
   searchVal.value = ''
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
-    options.value.push({
-      title: newOptValue,
-      value: newOptValue,
-      color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
-    })
-    column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
-
-    await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
-      ...column.value,
-    })
-    vModel.value = newOptValue
+    try {
+      options.value.push({
+        title: newOptValue,
+        value: newOptValue,
+        color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
+      })
+      column.value.colOptions = { options: options.value.map(({ value: _, ...rest }) => rest) }
+
+      await $api.dbTableColumn.update((column.value as { fk_column_id?: string })?.fk_column_id || (column.value?.id as string), {
+        ...column.value,
+      })
+      vModel.value = newOptValue
+      await getMeta(column.value.fk_model_id!, true)
+    } catch (e) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 }
 

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -131,7 +131,6 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
-
     // invoke the keyEventHandler if provided and return if it returns true
     if (await keyEventHandler?.(e)) {
       return true