Browse Source

feat(gui): on enter key press open ref table rows modal for LTAR cells

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
4b0845bd30
  1. 10
      packages/nc-gui/components/virtual-cell/BelongsTo.vue
  2. 10
      packages/nc-gui/components/virtual-cell/HasMany.vue
  3. 11
      packages/nc-gui/components/virtual-cell/ManyToMany.vue
  4. 9
      packages/nc-gui/components/virtual-cell/components/ListItems.vue
  5. 2
      packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

10
packages/nc-gui/components/virtual-cell/BelongsTo.vue

@ -17,6 +17,7 @@ import {
useProvideLTARStore, useProvideLTARStore,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useUIPermission, useUIPermission,
useSelectedCellKeyupListener
} from '#imports' } from '#imports'
import MdiArrowExpand from '~icons/mdi/arrow-expand' import MdiArrowExpand from '~icons/mdi/arrow-expand'
import MdiPlus from '~icons/mdi/plus' import MdiPlus from '~icons/mdi/plus'
@ -70,6 +71,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
await unlink(rec) await unlink(rec)
} }
} }
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
listItemsDlg.value = true
e.preventDefault()
break
}
})
</script> </script>
<template> <template>

10
packages/nc-gui/components/virtual-cell/HasMany.vue

@ -15,6 +15,7 @@ import {
useProvideLTARStore, useProvideLTARStore,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useUIPermission, useUIPermission,
useSelectedCellKeyupListener
} from '#imports' } from '#imports'
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
@ -81,6 +82,15 @@ const onAttachRecord = () => {
childListDlg.value = false childListDlg.value = false
listItemsDlg.value = true listItemsDlg.value = true
} }
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
listItemsDlg.value = true
e.preventDefault()
break
}
})
</script> </script>
<template> <template>

11
packages/nc-gui/components/virtual-cell/ManyToMany.vue

@ -16,6 +16,8 @@ import {
useProvideLTARStore, useProvideLTARStore,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useUIPermission, useUIPermission,
useSelectedCellKeyupListener,
ActiveCellInj,
} from '#imports' } from '#imports'
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
@ -82,6 +84,15 @@ const onAttachRecord = () => {
childListDlg.value = false childListDlg.value = false
listItemsDlg.value = true listItemsDlg.value = true
} }
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
listItemsDlg.value = true
e.preventDefault()
break
}
})
</script> </script>
<template> <template>

9
packages/nc-gui/components/virtual-cell/components/ListItems.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useEventListener } from '@vueuse/core'
import { RelationTypes, UITypes } from 'nocodb-sdk' import { RelationTypes, UITypes } from 'nocodb-sdk'
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk' import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { import {
@ -98,6 +99,14 @@ const newRowState = computed(() => {
watch(expandedFormDlg, (nexVal) => { watch(expandedFormDlg, (nexVal) => {
if (!nexVal && !isNew.value) vModel.value = false if (!nexVal && !isNew.value) vModel.value = false
}) })
// useEventListener((e: KeyboardEvent) => {
// switch (e.key) {
// case 'Enter':
// e.preventDefault()
// break
// }
// })
</script> </script>
<template> <template>

2
packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

@ -6,7 +6,7 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
watch(selected, (value) => { watch(selected, (value) => {
if (value) { if (value) {
cleanup.value = useEventListener('keydown', handler) cleanup.value = useEventListener('keydown', handler, true)
} else { } else {
cleanup.value?.() cleanup.value?.()
} }

Loading…
Cancel
Save