From ddb102b4e816fb23592c3e02698058c0543bfff1 Mon Sep 17 00:00:00 2001 From: Anbarasu Date: Thu, 5 Sep 2024 09:27:52 +0530 Subject: [PATCH] feat: add today shortcut for Date related fields (#9425) * fix: document today's date shortcut * fix: update keyboard bindings * fix: update keybinding * fix: date time cell copypaste --- .../nc-gui/components/cell/DatePicker.vue | 35 ++++++++----------- .../nc-gui/components/cell/DateTimePicker.vue | 35 ++++++++----------- .../nc-gui/components/cell/TimePicker.vue | 35 ++++++++----------- .../nc-gui/components/cell/YearPicker.vue | 35 ++++++++----------- .../040.keyboard-shortcuts.md | 25 ++++++------- 5 files changed, 69 insertions(+), 96 deletions(-) diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue index aeb7f9cd1d..8e1bb6c251 100644 --- a/packages/nc-gui/components/cell/DatePicker.vue +++ b/packages/nc-gui/components/cell/DatePicker.vue @@ -242,31 +242,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => { // To prevent event listener on non active cell if (!active.value) return - if ( - e.altKey || - e.ctrlKey || - e.shiftKey || - e.metaKey || - !isGrid.value || - isExpandedForm.value || - isEditColumn.value || - isExpandedFormOpenExist() - ) { + if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) { return } - switch (e.key) { - case ';': - localState.value = dayjs(new Date()) - e.preventDefault() - break - default: - if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { - isClearedInputMode.value = true - datePickerRef.value.focus() - editable.value = true - open.value = true + if (e.metaKey || e.ctrlKey) { + if (e.key === ';') { + if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) { + localState.value = dayjs(new Date()) + e.preventDefault() } + } else return + } + + if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { + isClearedInputMode.value = true + datePickerRef.value.focus() + editable.value = true + open.value = true } }) diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue index 2d1aee15f6..1824fe7dbf 100644 --- a/packages/nc-gui/components/cell/DateTimePicker.vue +++ b/packages/nc-gui/components/cell/DateTimePicker.vue @@ -296,31 +296,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => { // To prevent event listener on non active cell if (!active.value) return - if ( - e.altKey || - e.ctrlKey || - e.shiftKey || - e.metaKey || - !isGrid.value || - isExpandedForm.value || - isEditColumn.value || - isExpandedFormOpenExist() - ) { + if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) { return } - switch (e.key) { - case ';': - localState.value = dayjs(new Date()) - e.preventDefault() - break - default: - if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) { - isClearedInputMode.value = true - isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus() - editable.value = true - open.value = true + if (e.metaKey || e.ctrlKey) { + if (e.key === ';') { + if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) { + localState.value = dayjs(new Date()) + e.preventDefault() } + } else return + } + + if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) { + isClearedInputMode.value = true + isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus() + editable.value = true + open.value = true } }) diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue index 6644a0c1f4..8b941bcecb 100644 --- a/packages/nc-gui/components/cell/TimePicker.vue +++ b/packages/nc-gui/components/cell/TimePicker.vue @@ -225,31 +225,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => { // To prevent event listener on non active cell if (!active.value) return - if ( - e.altKey || - e.ctrlKey || - e.shiftKey || - e.metaKey || - !isGrid.value || - isExpandedForm.value || - isEditColumn.value || - isExpandedFormOpenExist() - ) { + if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) { return } - switch (e.key) { - case ';': - localState.value = dayjs(new Date()) - e.preventDefault() - break - default: - if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { - isClearedInputMode.value = true - datePickerRef.value.focus() - editable.value = true - open.value = true + if (e.metaKey || e.ctrlKey) { + if (e.key === ';') { + if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) { + localState.value = dayjs(new Date()) + e.preventDefault() } + } else return + } + + if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { + isClearedInputMode.value = true + datePickerRef.value.focus() + editable.value = true + open.value = true } }) diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue index 3745590f5b..b87dfeb768 100644 --- a/packages/nc-gui/components/cell/YearPicker.vue +++ b/packages/nc-gui/components/cell/YearPicker.vue @@ -206,31 +206,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => { // To prevent event listener on non active cell if (!active.value) return - if ( - e.altKey || - e.ctrlKey || - e.shiftKey || - e.metaKey || - !isGrid.value || - isExpandedForm.value || - isEditColumn.value || - isExpandedFormOpenExist() - ) { + if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) { return } - switch (e.key) { - case ';': - localState.value = dayjs(new Date()) - e.preventDefault() - break - default: - if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { - isClearedInputMode.value = true - datePickerRef.value.focus() - editable.value = true - open.value = true + if (e.metaKey || e.ctrlKey) { + if (e.key === ';') { + if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) { + localState.value = dayjs(new Date()) + e.preventDefault() } + } else return + } + + if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { + isClearedInputMode.value = true + datePickerRef.value.focus() + editable.value = true + open.value = true } }) diff --git a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md index 5cf2bafcc4..9a604f999e 100644 --- a/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md +++ b/packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md @@ -91,18 +91,19 @@ To navigate within ⌘+J menu, ## Field type specific shortcuts -| Datatype | Key | Behaviour | -|:----------------------:|------------:|:-----------------------------------| -| Text & Numerical cells | `←` `→` | Move cursor to the left / right | -| | `↑` `↓` | Move cursor to the beginning / end | -| Single Select | `↑` `↓` | Move between options | -| | `Enter` | Select option | -| Multi Select | `↑` `↓` | Move between options | -| | `Enter` | Select / deselect option | -| Link | `↑` `↓` | Move between options | -| | `Enter` | Link current selection | -| Checkbox | `Enter` | Toggle | -| Rating | `<0 ~ Max>` | Enter number to toggle rating | +| Datatype | Key | Behaviour | +|:-----------------------------:|------------:|:-----------------------------------| +| Text & Numerical cells | `←` `→` | Move cursor to the left / right | +| | `↑` `↓` | Move cursor to the beginning / end | +| Single Select | `↑` `↓` | Move between options | +| | `Enter` | Select option | +| Multi Select | `↑` `↓` | Move between options | +| | `Enter` | Select / deselect option | +| Link | `↑` `↓` | Move between options | +| | `Enter` | Link current selection | +| Checkbox | `Enter` | Toggle | +| Rating | `<0 ~ Max>` | Enter number to toggle rating | +| Date / Time / DateTime / Year | `⌘` + `;` | Select today's date | ## Expanded form shortcuts