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

Merge pull request #7608 from nocodb/nc-feat/add-new-row-by-keyboard-interactions 

Nc feat(nc-gui): Keyboard interactions on tables: new rows, page navigation
pull/7621/head
Raju Udava 10 months ago committed by GitHub
parent
b4fc1b2731 8b84350a21
commit
4b5c91267b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 107 additions and 1 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. 53
      packages/nc-gui/components/smartsheet/grid/Table.vue
  2. 55
      tests/playwright/tests/db/features/keyboardShortcuts.spec.ts

53
packages/nc-gui/components/smartsheet/grid/Table.vue
Unescape View File

@ -558,7 +558,7 @@ const {
clearSelectedRangeOfCells,
makeEditable,
scrollToCell,
(e: KeyboardEvent) => {
async (e: KeyboardEvent) => {
// ignore navigating if picker(Date, Time, DateTime, Year)
// or single/multi select options is open
const activePickerOrDropdownEl = document.querySelector(
@ -601,6 +601,42 @@ const {
editEnabled.value = false
return true
}
} else if (e.key === 'Tab') {
if (e.shiftKey && activeCell.row === 0 && activeCell.col === 0 && !paginationDataRef.value?.isFirstPage) {
e.preventDefault()
await resetAndChangePage((paginationDataRef.value?.pageSize ?? 25) - 1, fields.value?.length - 1, -1)
return true
} else if (!e.shiftKey && activeCell.row === dataRef.value.length - 1 && activeCell.col === fields.value?.length - 1) {
e.preventDefault()
if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
addEmptyRow()
await resetAndChangePage(dataRef.value.length - 1, 0)
return true
} else if (!paginationDataRef.value?.isLastPage) {
await resetAndChangePage(0, 0, 1)
return true
}
}
} else if (!cmdOrCtrl && !e.shiftKey && e.key === 'ArrowUp') {
if (activeCell.row === 0 && !paginationDataRef.value?.isFirstPage) {
e.preventDefault()
await resetAndChangePage((paginationDataRef.value?.pageSize ?? 25) - 1, activeCell.col!, -1)
return true
}
} else if (!cmdOrCtrl && !e.shiftKey && e.key === 'ArrowDown') {
if (activeCell.row === dataRef.value.length - 1) {
e.preventDefault()
if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
addEmptyRow()
await resetAndChangePage(dataRef.value.length - 1, activeCell.col!)
return true
} else if (!paginationDataRef.value?.isLastPage) {
await resetAndChangePage(0, activeCell.col!, 1)
return true
}
}
}
if (cmdOrCtrl) {
@ -938,6 +974,21 @@ function scrollToCell(row?: number | null, col?: number | null) {
}
}
async function resetAndChangePage(row: number, col: number, pageChange?: number) {
clearSelectedRange()
if (pageChange !== undefined && paginationDataRef.value?.page) {
await changePage?.(paginationDataRef.value.page + pageChange)
await nextTick()
makeActive(row, col)
} else {
makeActive(row, col)
await nextTick()
}
scrollToCell?.()
}
const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?: ViewType; data?: any } = {}) => {
let index = -1
for (const currentRow of args.data || dataRef.value) {

55
tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
Unescape View File

@ -137,6 +137,61 @@ test.describe('Verify shortcuts', () => {
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+Enter' : 'Control+Enter');
await page.reload();
await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
// Tab:
// If current page is not last page and and current cell is last column of last row and user press `Tab` then current page will be incremented by 1
await grid.cell.click({ index: 24, columnHeader: 'Cities' });
await page.keyboard.press('Tab');
await grid.verifyActivePage({ pageNumber: '2' });
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
// If current page is last page and and current cell is last column of last row and user press `Tab` then new empty row will be added
await grid.clickPagination({ type: 'last-page' });
await grid.cell.click({ index: 8, columnHeader: 'Cities' });
await page.keyboard.press('Tab');
await grid.verifyRowCount({ count: 10 });
await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
// If current page is not first page and and current cell is first column of first row and user press `Shift+Tab` then current page will be decremented by 1
await grid.cell.click({ index: 0, columnHeader: 'Country' });
await page.keyboard.press('Shift+Tab');
await grid.verifyActivePage({ pageNumber: '4' });
await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
// If current page is first page and and current cell is first column of first row and user press `Shift+Tab` then current page will not change
await grid.clickPagination({ type: 'first-page' });
await grid.cell.click({ index: 0, columnHeader: 'Country' });
await page.keyboard.press('Shift+Tab');
await grid.verifyActivePage({ pageNumber: '1' });
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
// ArrowDown:
// If current page is not last page and and current cell is in last row and user press `ArrowDown` then current page will be incremented by 1
await grid.cell.click({ index: 24, columnHeader: 'Cities' });
await page.keyboard.press('ArrowDown');
await grid.verifyActivePage({ pageNumber: '2' });
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
// If current page is last page and and current cell is in last row and user press `ArrowDown` then new empty row will be added
await grid.clickPagination({ type: 'last-page' });
await grid.cell.click({ index: 8, columnHeader: 'Cities' });
await page.keyboard.press('ArrowDown');
await grid.verifyRowCount({ count: 10 });
await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
// ArrowUp:
// If current page is not first page and and current cell is in first row and user press `ArrwoUp` then current page will be decremented by 1
await grid.cell.click({ index: 0, columnHeader: 'Cities' });
await page.keyboard.press('ArrowUp');
await grid.verifyActivePage({ pageNumber: '4' });
await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
// If current page is first page and and current cell is in first row and user press `ArrwoUp` then current page will not change
await grid.clickPagination({ type: 'first-page' });
await grid.cell.click({ index: 0, columnHeader: 'Cities' });
await page.keyboard.press('ArrowUp');
await grid.verifyActivePage({ pageNumber: '1' });
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
});
});

Write Preview
Loading…
Cancel
Save