feat(gui): show temporary value while syncing in background

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

packages/nc-gui/components.d.ts

@@ -96,8 +96,6 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
-    MaterialSymbolsKeyboardShift: typeof import('~icons/material-symbols/keyboard-shift')['default']
-    MaterialSymbolsLightMode: typeof import('~icons/material-symbols/light-mode')['default']
     MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
     MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']

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

@@ -15,7 +15,7 @@ import {
   useEventListener,
   useProject,
   useSelectedCellKeyupListener,
-  watch,enumColor,useMetas
+  watch, enumColor, useMetas,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -49,9 +49,13 @@ const isOpen = ref(false)
 const isKanban = inject(IsKanbanInj, ref(false))
 
 const searchVal = ref()
+
 const { $api } = useNuxtApp()
+
 const { getMeta } = useMetas()
 
+const tempVal = ref<string>()
+
 const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
@@ -71,13 +75,17 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
 
 const vModel = computed({
   get: () => {
-    return selectedIds.value.reduce((acc, id) => {
+    const selected = 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[])
+
+    if (tempVal.value) selected.push(tempVal.value)
+
+    return selected
   },
   set: (val) => {
     if (isOptionMissing.value && val[val.length - 1] === searchVal.value) {
@@ -116,7 +124,6 @@ const handleKeys = async (e: KeyboardEvent) => {
       break
   }
 }
-const v = Math.floor(Math.random() * 1000)
 
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
@@ -176,25 +183,35 @@ useSelectedCellKeyupListener(active, (e) => {
 
 async function addIfMissingAndSave() {
   if (!searchVal) return false
-
-  const newOptValue = searchVal?.value
-
-  if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
-    const newOptions = [...options.value]
-    newOptions.push({ title: newOptValue, value: newOptValue,
-      color: enumColor.light[(options.value.length + 1) % enumColor.light.length], })
-    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]
-    searchVal.value = ''
+  try {
+    tempVal.value = searchVal.value
+    const newOptValue = searchVal?.value
+
+    if (newOptValue && !options.value.some((o) => o.title === newOptValue)) {
+      const newOptions = [...options.value]
+      newOptions.push({
+        title: newOptValue, value: newOptValue,
+        color: enumColor.light[(options.value.length + 1) % enumColor.light.length],
+      })
+      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]
+      searchVal.value = ''
+    }
+  } catch (e) {
+    // todo: handle error message
+    console.log(e)
+  } finally {
+    tempVal.value = ''
   }
 }
 
+
 const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }

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

@@ -43,16 +43,20 @@ const isKanban = inject(IsKanbanInj, ref(false))
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
+const tempVal = ref<string>()
 
 const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
 
 const vModel = computed({
-  get: () => modelValue,
+  get: () => tempVal.value ?? modelValue,
   set: (val) => {
     if (isOptionMissing.value && val === searchVal.value) {
-      return addIfMissingAndSave()
+      tempVal.value = val
+      return addIfMissingAndSave().finally(() => {
+        tempVal.value = undefined
+      })
     }
     emit('update:modelValue', val || null)
   },
@@ -161,7 +165,6 @@ const search = () => {
     @keydown.stop
     show-search
     @search="search"
-    @keydown.enter.stop
     @click="isOpen = (active || editable) && !isOpen"
   >
     <a-select-option

packages/nocodb/src/lib/Noco.ts

@@ -213,7 +213,6 @@ export default class Noco {
     });
 
     // to get ip addresses
-
     this.router.use(requestIp.mw());
     this.router.use(cookieParser());
     this.router.use(