mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
56 changed files with 947 additions and 95 deletions
@ -0,0 +1,245 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { isMac } from '#imports' |
||||||
|
|
||||||
|
const { modelValue } = defineProps<{ |
||||||
|
modelValue: boolean |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const dialogShow = computed({ |
||||||
|
get: () => modelValue, |
||||||
|
set: (v) => emit('update:modelValue', v), |
||||||
|
}) |
||||||
|
|
||||||
|
const renderCmdOrCtrlKey = () => { |
||||||
|
return isMac() ? '⌘' : 'CTRL' |
||||||
|
} |
||||||
|
|
||||||
|
const shortcutList = [ |
||||||
|
{ |
||||||
|
title: 'General', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['ALT', 'T'], |
||||||
|
behaviour: 'Insert new table', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['ALT', 'R'], |
||||||
|
behaviour: 'Insert new row', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['ALT', 'C'], |
||||||
|
behaviour: 'Insert new column', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['ALT', 'F'], |
||||||
|
behaviour: 'Toggle fullscreen mode', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['ALT', 'I'], |
||||||
|
behaviour: 'Invite a member to team', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['ALT', ','], |
||||||
|
behaviour: 'Open Team & Settings', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Grid View', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), '←'], |
||||||
|
behaviour: 'Jump to leftmost column in this row', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), '→'], |
||||||
|
behaviour: 'Jump to rightmost column in this row', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), '↑'], |
||||||
|
behaviour: 'Jump to first record in this column (in same page)', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), '↓'], |
||||||
|
behaviour: 'Jump to last record in this column (in same page)', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), 'C'], |
||||||
|
behaviour: 'Copy cell contents', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Enter'], |
||||||
|
behaviour: 'Switch cell in focus to EDIT mode; opens modal / picker if cell is associated with one', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Esc'], |
||||||
|
behaviour: 'Exit cell EDIT mode', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Delete'], |
||||||
|
behaviour: 'Clear cell', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Space'], |
||||||
|
behaviour: 'Expand current row', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['←', '→', '↑', '↓'], |
||||||
|
behaviour: 'General cell navigation', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Tab'], |
||||||
|
behaviour: 'Move to next cell horizontally; if on last cell, move to next row beginning', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Text / Number', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['←'], |
||||||
|
behaviour: 'Move cursor to the left', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['→'], |
||||||
|
behaviour: 'Move cursor to the right', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['↑'], |
||||||
|
behaviour: 'Move cursor to the left', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['↓'], |
||||||
|
behaviour: 'Move cursor to the right', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'SingleSelect', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['↑'], |
||||||
|
behaviour: 'Move to the previous option', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['↓'], |
||||||
|
behaviour: 'Move to the next option', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Enter'], |
||||||
|
behaviour: 'Select the current option', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'MultiSelect', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['↑'], |
||||||
|
behaviour: 'Move to the previous option', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['↓'], |
||||||
|
behaviour: 'Move to the next option', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['Enter'], |
||||||
|
behaviour: 'Select / deselect the current option', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Date / DateTime', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), ';'], |
||||||
|
behaviour: 'Select current date time', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'LinkToAnotherRecord', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['↑'], |
||||||
|
behaviour: 'Move to the previous option', |
||||||
|
}, |
||||||
|
{ |
||||||
|
keys: ['↓'], |
||||||
|
behaviour: 'Move to the next option', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Checkbox', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['Enter'], |
||||||
|
behaviour: 'Toggle', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Rating', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: ['<0 ~ Max>'], |
||||||
|
behaviour: 'Enter number to toggle rating', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Expanded Form', |
||||||
|
shortcuts: [ |
||||||
|
{ |
||||||
|
keys: [renderCmdOrCtrlKey(), 'Enter'], |
||||||
|
behaviour: 'Save current expanded form item', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
v-model:visible="dialogShow" |
||||||
|
:class="{ active: dialogShow }" |
||||||
|
width="max(30vw, 600px)" |
||||||
|
class="p-2" |
||||||
|
:footer="null" |
||||||
|
:wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`" |
||||||
|
@keydown.esc="dialogShow = false" |
||||||
|
> |
||||||
|
<template #title> {{ $t('title.keyboardShortcut') }} </template> |
||||||
|
<a-list |
||||||
|
v-for="(shortcutItem, shortcutItemIdx) of shortcutList" |
||||||
|
:key="shortcutItemIdx" |
||||||
|
class="nc-shortcut-list !mb-5" |
||||||
|
size="small" |
||||||
|
bordered |
||||||
|
:data-source="shortcutItem.shortcuts" |
||||||
|
> |
||||||
|
<template #header> |
||||||
|
<div class="font-bold">{{ shortcutItem.title }}</div> |
||||||
|
</template> |
||||||
|
<template #renderItem="{ item }"> |
||||||
|
<a-list-item> |
||||||
|
<span class="inline-block"> |
||||||
|
<kbd |
||||||
|
v-for="(key, keyIdx) of item.keys" |
||||||
|
:key="keyIdx" |
||||||
|
class="ml-[1px] mr-[1px] px-[8px] py-[3px] border-b-[3px] uppercase border-1 border-solid border-primary border-opacity-50 rounded" |
||||||
|
> |
||||||
|
{{ key }} |
||||||
|
</kbd> |
||||||
|
</span> |
||||||
|
<span class="inline-block text-right"> |
||||||
|
{{ item.behaviour }} |
||||||
|
</span> |
||||||
|
</a-list-item> |
||||||
|
</template> |
||||||
|
</a-list> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
@ -1,2 +1,3 @@ |
|||||||
// refer - https://stackoverflow.com/a/11752084
|
// refer - https://stackoverflow.com/a/11752084
|
||||||
export const isMac = () => /Mac/i.test(navigator.platform) |
export const isMac = () => /Mac/i.test(navigator.platform) |
||||||
|
export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer-open') |
||||||
|
|||||||
@ -0,0 +1,104 @@ |
|||||||
|
import { expect, test } from '@playwright/test'; |
||||||
|
import { DashboardPage } from '../pages/Dashboard'; |
||||||
|
import { GridPage } from '../pages/Dashboard/Grid'; |
||||||
|
import setup from '../setup'; |
||||||
|
|
||||||
|
test.describe('Verify shortcuts', () => { |
||||||
|
let dashboard: DashboardPage, grid: GridPage; |
||||||
|
let context: any; |
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => { |
||||||
|
context = await setup({ page }); |
||||||
|
dashboard = new DashboardPage(page, context.project); |
||||||
|
grid = dashboard.grid; |
||||||
|
}); |
||||||
|
|
||||||
|
test('Verify shortcuts', async ({ page }) => { |
||||||
|
await dashboard.treeView.openTable({ title: 'Country' }); |
||||||
|
// create new table
|
||||||
|
await page.keyboard.press('Alt+t'); |
||||||
|
await dashboard.treeView.createTable({ title: 'New Table', skipOpeningModal: true }); |
||||||
|
await dashboard.treeView.verifyTable({ title: 'New Table' }); |
||||||
|
|
||||||
|
// create new row
|
||||||
|
await grid.column.clickColumnHeader({ title: 'Title' }); |
||||||
|
await page.waitForTimeout(2000); |
||||||
|
await page.keyboard.press('Alt+r'); |
||||||
|
await grid.editRow({ index: 0, value: 'New Row' }); |
||||||
|
await grid.verifyRowCount({ count: 1 }); |
||||||
|
|
||||||
|
// create new column
|
||||||
|
await page.keyboard.press('Alt+c'); |
||||||
|
await grid.column.fillTitle({ title: 'New Column' }); |
||||||
|
await grid.column.save(); |
||||||
|
await grid.column.verify({ title: 'New Column' }); |
||||||
|
|
||||||
|
// fullscreen
|
||||||
|
await page.keyboard.press('Alt+f'); |
||||||
|
await dashboard.treeView.verifyVisibility({ |
||||||
|
isVisible: false, |
||||||
|
}); |
||||||
|
await dashboard.viewSidebar.verifyVisibility({ |
||||||
|
isVisible: false, |
||||||
|
}); |
||||||
|
await page.keyboard.press('Alt+f'); |
||||||
|
await dashboard.treeView.verifyVisibility({ |
||||||
|
isVisible: true, |
||||||
|
}); |
||||||
|
await dashboard.viewSidebar.verifyVisibility({ |
||||||
|
isVisible: true, |
||||||
|
}); |
||||||
|
|
||||||
|
// invite team member
|
||||||
|
await page.keyboard.press('Alt+i'); |
||||||
|
await dashboard.settings.teams.invite({ |
||||||
|
email: 'new@example.com', |
||||||
|
role: 'editor', |
||||||
|
skipOpeningModal: true, |
||||||
|
}); |
||||||
|
const url = await dashboard.settings.teams.getInvitationUrl(); |
||||||
|
// await dashboard.settings.teams.closeInvite();
|
||||||
|
expect(url).toContain('signup'); |
||||||
|
await page.waitForTimeout(1000); |
||||||
|
await dashboard.settings.teams.closeInvite(); |
||||||
|
|
||||||
|
// Cmd + Right arrow
|
||||||
|
await dashboard.treeView.openTable({ title: 'Country' }); |
||||||
|
await page.waitForTimeout(1500); |
||||||
|
await grid.cell.click({ index: 0, columnHeader: 'Country' }); |
||||||
|
await page.waitForTimeout(1500); |
||||||
|
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowRight' : 'Control+ArrowRight'); |
||||||
|
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'City List' }); |
||||||
|
|
||||||
|
// Cmd + Right arrow
|
||||||
|
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowLeft' : 'Control+ArrowLeft'); |
||||||
|
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' }); |
||||||
|
|
||||||
|
// Cmd + up arrow
|
||||||
|
await grid.cell.click({ index: 24, columnHeader: 'Country' }); |
||||||
|
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowUp' : 'Control+ArrowUp'); |
||||||
|
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' }); |
||||||
|
|
||||||
|
// Cmd + down arrow
|
||||||
|
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowDown' : 'Control+ArrowDown'); |
||||||
|
await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Country' }); |
||||||
|
|
||||||
|
// Enter to edit and Esc to cancel
|
||||||
|
await grid.cell.click({ index: 0, columnHeader: 'Country' }); |
||||||
|
await page.keyboard.press('Enter'); |
||||||
|
await page.keyboard.type('New'); |
||||||
|
await page.keyboard.press('Escape'); |
||||||
|
await grid.cell.verify({ index: 0, columnHeader: 'Country', value: 'AfghanistanNew' }); |
||||||
|
|
||||||
|
// Space to open expanded row and Meta + Space to save
|
||||||
|
await grid.cell.click({ index: 1, columnHeader: 'Country' }); |
||||||
|
await page.keyboard.press('Space'); |
||||||
|
await dashboard.expandedForm.verify({ |
||||||
|
header: 'Algeria', |
||||||
|
}); |
||||||
|
await dashboard.expandedForm.fillField({ columnTitle: 'Country', value: 'NewAlgeria' }); |
||||||
|
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+Enter' : 'Control+Enter'); |
||||||
|
await page.waitForTimeout(2000); |
||||||
|
await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' }); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue