From 56dc7615c302ff5fff45f8ca1704a11d859f3c2c Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 21 Nov 2022 17:01:03 +0530 Subject: [PATCH] refactor(gui): requested changes Signed-off-by: Pranav C --- .../nc-gui/components/cell/MultiSelect.vue | 41 +++++++------------ .../nc-gui/components/cell/SingleSelect.vue | 35 ++++------------ .../composables/useMultiSelect/index.ts | 5 ++- packages/nc-gui/nuxt.config.ts | 1 - .../en/getting-started/installation.md | 2 +- 5 files changed, 25 insertions(+), 59 deletions(-) diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue index 3229831054..821291cc98 100644 --- a/packages/nc-gui/components/cell/MultiSelect.vue +++ b/packages/nc-gui/components/cell/MultiSelect.vue @@ -57,7 +57,9 @@ const { $api } = useNuxtApp() const { getMeta } = useMetas() -const tempVal = reactive([]) +// a variable to keep newly created options value +// temporary until it's add the option to column meta +const tempSelectedOptsState = reactive([]) 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 = '' } } diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue index d9d6d1a3d3..0cdb50d4df 100644 --- a/packages/nc-gui/components/cell/SingleSelect.vue +++ b/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() + +// a variable to keep newly created option value +// temporary until it's add the option to column meta +const tempSelectedOptState = ref() 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() diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts index d0d6fe7867..61473193ed 100644 --- a/packages/nc-gui/composables/useMultiSelect/index.ts +++ b/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 */ diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts index 885cbe78d9..afba37c6ba 100644 --- a/packages/nc-gui/nuxt.config.ts +++ b/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: { diff --git a/packages/noco-docs/content/en/getting-started/installation.md b/packages/noco-docs/content/en/getting-started/installation.md index 107158e4ed..2f341aee2a 100644 --- a/packages/noco-docs/content/en/getting-started/installation.md +++ b/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 | | |