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,6 +112,7 @@ async function addIfMissingAndSave() {
   searchVal.value = ''
 
   if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+    try {
       options.value.push({
         title: newOptValue,
         value: newOptValue,
@@ -119,6 +124,11 @@ async function addIfMissingAndSave() {
         ...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