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
|
||||
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