refactor(gui): requested changes

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

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

@@ -57,7 +57,9 @@ const { $api } = useNuxtApp()
 
 const { getMeta } = useMetas()
 
-const tempVal = reactive<string[]>([])
+// a variable to keep newly created options value
+// temporary until it's add the option to column meta
+const tempSelectedOptsState = reactive<string[]>([])
 
 const options = computed<(SelectOptionType & { value?: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -86,7 +88,7 @@ const vModel = computed({
       return acc
     }, [] as string[])
 
-    if (tempVal.length) selected.push(...tempVal)
+    if (tempSelectedOptsState.length) selected.push(...tempSelectedOptsState)
 
     return selected
   },
@@ -103,31 +105,18 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-          const opa = options.value.find((el) => el.title === a)
-          const opb = options.value.find((el) => el.title === b)
-          if (opa && opb) {
-            return opa.order! - opb.order!
-          }
-          return 0
-        })
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
+            if (opa && opb) {
+              return opa.order! - opb.order!
+            }
+            return 0
+          })
         : modelValue.split(',')
       : modelValue
     : [],
 )
 
-// const handleKeys = async (e: KeyboardEvent) => {
-//   switch (e.key) {
-//     case 'Escape':
-//       e.preventDefault()
-//       isOpen.value = false
-//       break
-//     case 'Enter':
-//       e.stopPropagation()
-//       await addIfMissingAndSave()
-//       break
-//   }
-// }
-
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -191,7 +180,7 @@ const activeOptCreateInProgress = ref(0)
 async function addIfMissingAndSave() {
   if (!searchVal.value || isPublic.value) return false
   try {
-    tempVal.push(searchVal.value)
+    tempSelectedOptsState.push(searchVal.value)
     const newOptValue = searchVal?.value
     searchVal.value = ''
     activeOptCreateInProgress.value++
@@ -212,17 +201,15 @@ async function addIfMissingAndSave() {
       if (!activeOptCreateInProgress.value) {
         await getMeta(column.value.fk_model_id!, true)
         vModel.value = [...vModel.value]
-        tempVal.splice(0, tempVal.length)
+        tempSelectedOptsState.splice(0, tempSelectedOptsState.length)
       }
     } else {
       activeOptCreateInProgress.value--
     }
   } catch (e) {
-    // todo: handle error message
+    // todo: handle error
     console.log(e)
     activeOptCreateInProgress.value--
-  } finally {
-    // tempVal.value = ''
   }
 }
 

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

@@ -13,7 +13,6 @@ import {
   enumColor,
   inject,
   ref,
-  useEventListener,
   watch,
 } from '#imports'
 
@@ -45,7 +44,10 @@ const isPublic = inject(IsPublicInj, ref(false))
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
-const tempVal = ref<string>()
+
+// a variable to keep newly created option value
+// temporary until it's add the option to column meta
+const tempSelectedOptState = ref<string>()
 
 const options = computed<(SelectOptionType & { value: string })[]>(() => {
   if (column?.value.colOptions) {
@@ -66,41 +68,18 @@ const isOptionMissing = computed(() => {
 })
 
 const vModel = computed({
-  get: () => tempVal.value ?? modelValue,
+  get: () => tempSelectedOptState.value ?? modelValue,
   set: (val) => {
     if (isOptionMissing.value && val === searchVal.value) {
-      tempVal.value = val
+      tempSelectedOptState.value = val
       return addIfMissingAndSave().finally(() => {
-        tempVal.value = undefined
+        tempSelectedOptState.value = undefined
       })
     }
     emit('update:modelValue', val || null)
   },
 })
 
-// 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
-//   }
-// }
-
-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) => {
   if (!n) {
     aselect.value?.$el?.querySelector('input')?.blur()

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

@@ -131,9 +131,10 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
+
     // invoke the keyEventHandler if provided and return if it returns true
     if (await keyEventHandler?.(e)) {
-      return
+      return true
     }
 
     if (
@@ -268,7 +269,7 @@ export function useMultiSelect(
           }
 
           if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
-            return
+            return true
           }
 
           /** on letter key press make cell editable and empty */

packages/nc-gui/nuxt.config.ts

@@ -141,7 +141,6 @@ export default defineNuxtConfig({
       'process.env.DEBUG': 'false',
       'process.nextTick': () => {},
       'process.env.ANT_MESSAGE_DURATION': process.env.ANT_MESSAGE_DURATION,
-      'process.env.NC_BACKEND_URL': process.env.NC_BACKEND_URL,
     },
     server: {
       watch: {

packages/noco-docs/content/en/getting-started/installation.md

@@ -478,7 +478,7 @@ It is mandatory to configure `NC_DB` environment variables for production usecas
 | NC_JWT_EXPIRES_IN                  | No        | JWT token expiry time                                                                                                   | `10h`                                                                                          |   |
 | NC_CONNECT_TO_EXTERNAL_DB_DISABLED | No        | Disable Project creation with external database                                                                         |                                                                                                |   |
 | NC_INVITE_ONLY_SIGNUP              | No        | Allow users to signup only via invite url, value should be any non-empty string.                                        |                                                                                                |   |
-| NC_BACKEND_URL                     | No        | Custom Backend URL                                                                                                      | ``http://localhost:8080`` will be used                                                         |   |
+| NUXT_PUBLIC_NC_BACKEND_URL         | No        | Custom Backend URL                                                                                                      | ``http://localhost:8080`` will be used                                                         |   |
 | NC_REQUEST_BODY_SIZE               | No        | Request body size [limit](https://expressjs.com/en/resources/middleware/body-parser.html#limit)                         | `1048576`                                                                                      |   |
 | NC_EXPORT_MAX_TIMEOUT              | No        | After NC_EXPORT_MAX_TIMEOUT csv gets downloaded in batches                                                              | Default value 5000(in millisecond) will be used                                                |   |
 | NC_DISABLE_TELE                    | No        | Disable telemetry                                                                                                       |                                                                                                |   |