Browse Source

refactor(gui): requested changes

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4406/head
Pranav C 2 years ago
parent
commit
56dc7615c3
  1. 41
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 35
      packages/nc-gui/components/cell/SingleSelect.vue
  3. 5
      packages/nc-gui/composables/useMultiSelect/index.ts
  4. 1
      packages/nc-gui/nuxt.config.ts
  5. 2
      packages/noco-docs/content/en/getting-started/installation.md

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

@ -57,7 +57,9 @@ const { $api } = useNuxtApp()
const { getMeta } = useMetas() 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 })[]>(() => { const options = computed<(SelectOptionType & { value?: string })[]>(() => {
if (column?.value.colOptions) { if (column?.value.colOptions) {
@ -86,7 +88,7 @@ const vModel = computed({
return acc return acc
}, [] as string[]) }, [] as string[])
if (tempVal.length) selected.push(...tempVal) if (tempSelectedOptsState.length) selected.push(...tempSelectedOptsState)
return selected return selected
}, },
@ -103,31 +105,18 @@ const selectedTitles = computed(() =>
? typeof modelValue === 'string' ? typeof modelValue === 'string'
? isMysql ? isMysql
? modelValue.split(',').sort((a, b) => { ? modelValue.split(',').sort((a, b) => {
const opa = options.value.find((el) => el.title === a) const opa = options.value.find((el) => el.title === a)
const opb = options.value.find((el) => el.title === b) const opb = options.value.find((el) => el.title === b)
if (opa && opb) { if (opa && opb) {
return opa.order! - opb.order! return opa.order! - opb.order!
} }
return 0 return 0
}) })
: modelValue.split(',') : modelValue.split(',')
: modelValue : 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) => { const handleClose = (e: MouseEvent) => {
if (aselect.value && !aselect.value.$el.contains(e.target)) { if (aselect.value && !aselect.value.$el.contains(e.target)) {
isOpen.value = false isOpen.value = false
@ -191,7 +180,7 @@ const activeOptCreateInProgress = ref(0)
async function addIfMissingAndSave() { async function addIfMissingAndSave() {
if (!searchVal.value || isPublic.value) return false if (!searchVal.value || isPublic.value) return false
try { try {
tempVal.push(searchVal.value) tempSelectedOptsState.push(searchVal.value)
const newOptValue = searchVal?.value const newOptValue = searchVal?.value
searchVal.value = '' searchVal.value = ''
activeOptCreateInProgress.value++ activeOptCreateInProgress.value++
@ -212,17 +201,15 @@ async function addIfMissingAndSave() {
if (!activeOptCreateInProgress.value) { if (!activeOptCreateInProgress.value) {
await getMeta(column.value.fk_model_id!, true) await getMeta(column.value.fk_model_id!, true)
vModel.value = [...vModel.value] vModel.value = [...vModel.value]
tempVal.splice(0, tempVal.length) tempSelectedOptsState.splice(0, tempSelectedOptsState.length)
} }
} else { } else {
activeOptCreateInProgress.value-- activeOptCreateInProgress.value--
} }
} catch (e) { } catch (e) {
// todo: handle error message // todo: handle error
console.log(e) console.log(e)
activeOptCreateInProgress.value-- activeOptCreateInProgress.value--
} finally {
// tempVal.value = ''
} }
} }

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

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

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

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

1
packages/nc-gui/nuxt.config.ts

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

2
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_JWT_EXPIRES_IN | No | JWT token expiry time | `10h` | |
| NC_CONNECT_TO_EXTERNAL_DB_DISABLED | No | Disable Project creation with external database | | | | 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_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_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_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 | | | | NC_DISABLE_TELE | No | Disable telemetry | | |

Loading…
Cancel
Save