github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): enter key navigation 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2992/head
Pranav C 2 years ago
parent
bf947e8012
commit
92cdc64119
4 changed files with 107 additions and 236 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  2. 127
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 188
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  4. 5
      packages/nc-gui-v2/lib/enums.ts

23
packages/nc-gui-v2/components/smartsheet/Cell.vue
Unescape View File

@ -4,6 +4,7 @@ import type { ColumnType } from 'nocodb-sdk'
import { provide, toRef } from 'vue'
import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
import { ColumnInj, EditModeInj } from '~/context'
import { NavigateDir } from '~/lib'
interface Props {
column: ColumnType
@ -17,7 +18,7 @@ interface Emits {
const { column, ...props } = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'save'])
const emit = defineEmits(['update:modelValue', 'save', 'navigate'])
provide(ColumnInj, column)
@ -25,6 +26,7 @@ provide(EditModeInj, toRef(props, 'editEnabled'))
let changed = $ref(false)
const syncValue = useDebounceFn(function () {
changed = false
emit('save')
}, 1000)
@ -59,6 +61,7 @@ const vModel = computed({
syncValue()
} else if (!isManualSaved) {
emit('save')
changed = true
}
}
},
@ -87,10 +90,26 @@ const {
isPercent,
isPhoneNumber,
} = useColumn(column)
const syncAndNavigate = (dir: NavigateDir) => {
if (changed) {
emit('save')
changed = false
}
emit('navigate', dir)
}
</script>
<template>
<div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
<div
class="nc-cell"
@keydown.stop.left
@keydown.stop.right
@keydown.stop.up
@keydown.stop.down
@keydown.stop.enter.exact="syncAndNavigate(NavigateDir.NEXT)"
@keydown.stop.shift.enter.exact="syncAndNavigate(NavigateDir.PREV)"
>
<CellTextArea v-if="isTextArea" v-model="vModel" />
<CellCheckbox v-else-if="isBoolean" v-model="vModel" />
<CellAttachment v-else-if="isAttachment" v-model="vModel" />

127
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -1,7 +1,6 @@
<script lang="ts" setup>
import { isVirtualCol } from 'nocodb-sdk'
import {
Row,
inject,
onKeyStroke,
onMounted,
@ -22,8 +21,9 @@ import {
PaginationDataInj,
ReloadViewDataHookInj,
} from '~/context'
import MdiPlusIcon from '~icons/mdi/plus'
import { NavigateDir } from '~/lib'
import MdiArrowExpandIcon from '~icons/mdi/arrow-expand'
import MdiPlusIcon from '~icons/mdi/plus'
const meta = inject(MetaInj)
const view = inject(ActiveViewInj)
@ -128,57 +128,78 @@ const clearCell = async (ctx: { row: number; col: number }) => {
/** handle keypress events */
onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
if (selected.row !== null && selected.col !== null) {
/** on tab key press navigate through cells */
switch (e.key) {
case 'Tab':
e.preventDefault()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
}
} else {
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
}
if (selected.row === null || selected.col === null) return
/** on tab key press navigate through cells */
switch (e.key) {
case 'Tab':
e.preventDefault()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
}
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
editEnabled = true
break
/** on delete key press clear cell */
case 'Delete':
e.preventDefault()
await clearCell(selected as { row: number; col: number })
break
/** on arrow key press navigate through cells */
case 'ArrowRight':
e.preventDefault()
if (selected.col < visibleColLength - 1) selected.col++
break
case 'ArrowLeft':
e.preventDefault()
if (selected.col > 0) selected.col--
break
case 'ArrowUp':
e.preventDefault()
if (selected.row > 0) selected.row--
break
case 'ArrowDown':
e.preventDefault()
if (selected.row < data.value.length - 1) selected.row++
break
}
} else {
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
}
}
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
editEnabled = true
break
/** on delete key press clear cell */
case 'Delete':
e.preventDefault()
await clearCell(selected as { row: number; col: number })
break
/** on arrow key press navigate through cells */
case 'ArrowRight':
e.preventDefault()
if (selected.col < visibleColLength - 1) selected.col++
break
case 'ArrowLeft':
e.preventDefault()
if (selected.col > 0) selected.col--
break
case 'ArrowUp':
e.preventDefault()
if (selected.row > 0) selected.row--
break
case 'ArrowDown':
e.preventDefault()
if (selected.row < data.value.length - 1) selected.row++
break
}
})
const onNavigate = (dir: NavigateDir) => {
if (selected.row === null || selected.col === null) return
switch (dir) {
case NavigateDir.NEXT:
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
}
break
case NavigateDir.PREV:
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
}
break
}
}
</script>
<template>
@ -254,7 +275,9 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
>
<div class="w-full h-full">
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
:column="columnObj" />
:column="columnObj"
@navigate="onNavigate"
/>
<SmartsheetCell
v-else
@ -262,6 +285,7 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@save="updateOrSaveRow(row, columnObj.title)"
@navigate="onNavigate"
/>
</div>
</td>
@ -326,7 +350,6 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
@apply flex align-center h-auto;
padding: 0 5px;
}
}
table,

188
packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
Unescape View File

@ -2,6 +2,8 @@
import type { ColumnType } from 'nocodb-sdk'
import { provide, useVirtualCell } from '#imports'
import { ColumnInj } from '~/context'
import { NavigateDir } from '~/lib'
interface Props {
column: ColumnType
@ -10,7 +12,7 @@ interface Props {
const { column, modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue', 'navigate'])
provide(ColumnInj, column)
provide('value', value)
@ -19,196 +21,18 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
</script>
<template>
<div class="nc-virtual-cell">
<div class="nc-virtual-cell"
@keydown.stop.enter.exact="emit('navigate',NavigateDir.NEXT)"
@keydown.stop.shift.enter.exact="emit('navigate',NavigateDir.PREV)">
<VirtualCellHasMany v-if="isHm" />
<VirtualCellManyToMany v-else-if="isMm" />
<VirtualCellBelongsTo v-else-if="isBt" />
<VirtualCellRollup v-else-if="isRollup" />
<VirtualCellFormula v-else-if="isFormula" />
<VirtualCellCount v-else-if="isCount" />
<!-- <v-lazy> -->
<!-- <has-many-cell
v-if="hm"
ref="cell"
:row="row"
:value="row[column.title]"
:meta="meta"
:hm="hm"
:nodes="nodes"
:active="active"
:sql-ui="sqlUi"
:is-new="isNew"
:is-form="isForm"
:breadcrumbs="breadcrumbs"
:is-locked="isLocked"
:required="required"
:is-public="isPublic"
:metas="metas"
:column="column"
:password="password"
v-on="$listeners"
/>
<many-to-many-cell
v-else-if="mm"
ref="cell"
:is-public="isPublic"
:row="row"
:value="row[column.title]"
:meta="meta"
:nodes="nodes"
:sql-ui="sqlUi"
:active="active"
:is-new="isNew"
:api="api"
:is-form="isForm"
:breadcrumbs="breadcrumbs"
:is-locked="isLocked"
:required="required"
:column="column"
:metas="metas"
:password="password"
v-on="$listeners"
/>
<belongs-to-cell
v-else-if="bt"
ref="cell"
:is-public="isPublic"
:disabled-columns="disabledColumns"
:active="active"
:row="row"
:value="row[column.title]"
:meta="meta"
:nodes="nodes"
:api="api"
:sql-ui="sqlUi"
:is-new="isNew"
:is-form="isForm"
:breadcrumbs="breadcrumbs"
:is-locked="isLocked"
:metas="metas"
:column="column"
:password="password"
v-on="$listeners"
/>
<lookup-cell
v-else-if="lookup"
:disabled-columns="disabledColumns"
:active="active"
:row="row"
:value="row[column.title]"
:meta="meta"
:metas="metas"
:nodes="nodes"
:api="api"
:sql-ui="sqlUi"
:is-new="isNew"
:is-form="isForm"
:column="column"
:is-locked="isLocked"
v-on="$listeners "
/>
<formula-cell
v-else-if="formula"
:row="row"
:column="column"
:client="nodes.dbConnection.client"
/>
<rollup-cell
v-else-if="rollup"
:row="row"
:column="column"
/>
</v-lazy>
<span v-if="hint" class="nc-hint">{{ hint }}</span>
<div v-if="isLocked" class="nc-locked-overlay" /> -->
</div>
</template>
<!-- <script>
import { UITypes } from "nocodb-sdk";
import RollupCell from "./virtualCell/RollupCell";
import FormulaCell from "./virtualCell/FormulaCell";
import hasManyCell from "./virtualCell/HasManyCell";
import LookupCell from "./virtualCell/LookupCell";
import manyToManyCell from "./virtualCell/ManyToManyCell";
import belongsToCell from "./virtualCell/BelongsToCell";
// todo: optimize parent/child meta extraction
export default {
name: "VirtualCell",
components: {
RollupCell,
FormulaCell,
LookupCell,
belongsToCell,
manyToManyCell,
hasManyCell
},
props: {
breadcrumbs: {
type: Array,
default() {
return [];
}
},
column: [Object],
row: [Object],
nodes: [Object],
meta: [Object],
api: [Object, Function],
active: Boolean,
sqlUi: [Object, Function],
isNew: {
type: Boolean,
default: false
},
isForm: {
type: Boolean,
default: false
},
disabledColumns: Object,
hint: String,
isLocked: Boolean,
required: Boolean,
isPublic: Boolean,
metas: Object,
password: String
},
computed: {
hm() {
return this.column && this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions.type === "hm";
},
bt() {
return this.column && (this.column.uidt === UITypes.ForeignKey || this.column.uidt === UITypes.LinkToAnotherRecord) && this.column.colOptions.type === "bt";
},
mm() {
return this.column && this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions.type === "mm";
},
lookup() {
return this.column && this.column.uidt === UITypes.Lookup;
},
formula() {
return this.column && this.column.uidt === UITypes.Formula;
},
rollup() {
return this.column && this.column.uidt === UITypes.Rollup;
}
},
methods: {
async save(row) {
if (row && this.$refs.cell && this.$refs.cell.saveLocalState) {
try {
await this.$refs.cell.saveLocalState(row);
} catch (e) {
}
}
}
}
};
</script> -->
<style scoped>
.nc-hint {
font-size: 0.61rem;

5
packages/nc-gui-v2/lib/enums.ts
Unescape View File

@ -48,3 +48,8 @@ export enum Language {
sl = 'Slovenščina',
pt_BR = 'Português (Brasil)',
}
export enum NavigateDir {
NEXT,
PREV,
}

Write Preview
Loading…
Cancel
Save