From 095ebdfcf3ee419af4ea5de1fa3b9e3881fa55f0 Mon Sep 17 00:00:00 2001 From: Ekaterina Balakina Date: Sat, 26 Nov 2022 13:12:17 +0100 Subject: [PATCH] copy in right menu, notification and refactor --- .../nc-gui/components/smartsheet/Grid.vue | 82 +++--- .../composables/useMultiSelect/cellRange.ts | 54 ++++ .../composables/useMultiSelect/copyValue.ts | 29 ++ .../composables/useMultiSelect/index.ts | 272 ++++++++---------- packages/nc-gui/context/index.ts | 2 +- packages/nc-gui/lang/en.json | 3 +- 6 files changed, 242 insertions(+), 200 deletions(-) create mode 100644 packages/nc-gui/composables/useMultiSelect/cellRange.ts create mode 100644 packages/nc-gui/composables/useMultiSelect/copyValue.ts diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue index d007bfb074..43726b0b8b 100644 --- a/packages/nc-gui/components/smartsheet/Grid.vue +++ b/packages/nc-gui/components/smartsheet/Grid.vue @@ -162,15 +162,8 @@ const getContainerScrollForElement = ( return scroll } -const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect( - fields, - data, - $$(editEnabled), - isPkAvail, - clearCell, - makeEditable, - scrollToCell, - (e: KeyboardEvent) => { +const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyValue, isCellSelected, selectedCell } = + useMultiSelect(fields, data, $$(editEnabled), isPkAvail, clearCell, makeEditable, scrollToCell, (e: KeyboardEvent) => { // ignore navigating if picker(Date, Time, DateTime, Year) // or single/multi select options is open const activePickerOrDropdownEl = document.querySelector( @@ -188,9 +181,9 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey if (e.key === ' ') { - if (selected.row !== null && !editEnabled) { + if (selectedCell.row !== null && !editEnabled) { e.preventDefault() - const row = data.value[selected.row] + const row = data.value[selectedCell.row] expandForm(row) return true } @@ -208,37 +201,37 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange if (cmdOrCtrl) { switch (e.key) { case 'ArrowUp': - selected.row = 0 - selected.col = selected.col ?? 0 + selectedCell.row = 0 + selectedCell.col = selectedCell.col ?? 0 scrollToCell?.() editEnabled = false return true case 'ArrowDown': - selected.row = data.value.length - 1 - selected.col = selected.col ?? 0 + selectedCell.row = data.value.length - 1 + selectedCell.col = selectedCell.col ?? 0 scrollToCell?.() editEnabled = false return true case 'ArrowRight': - selected.row = selected.row ?? 0 - selected.col = fields.value?.length - 1 + selectedCell.row = selectedCell.row ?? 0 + selectedCell.col = fields.value?.length - 1 scrollToCell?.() editEnabled = false return true case 'ArrowLeft': - selected.row = selected.row ?? 0 - selected.col = 0 + selectedCell.row = selectedCell.row ?? 0 + selectedCell.col = 0 scrollToCell?.() editEnabled = false return true } } - }, -) + }) function scrollToCell(row?: number | null, col?: number | null) { - row = row ?? selected.row - col = col ?? selected.col + row = row ?? selectedCell.row + col = col ?? selectedCell.col + if (row !== undefined && col !== undefined && row !== null && col !== null) { // get active cell const rows = tbodyEl.value?.querySelectorAll('tr') @@ -393,10 +386,12 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => { /** On clicking outside of table reset active cell */ const smartTable = ref(null) onClickOutside(smartTable, (e) => { - clearRangeRows() - if (selected.col === null) return + // do nothing if context menu was open + if (contextMenu.value) return + clearSelectedRange() + if (selectedCell.col === null) return - const activeCol = fields.value[selected.col] + const activeCol = fields.value[selectedCell.col] if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return @@ -417,25 +412,25 @@ onClickOutside(smartTable, (e) => { return } - selected.row = null - selected.col = null + selectedCell.row = null + selectedCell.col = null }) const onNavigate = (dir: NavigateDir) => { - if (selected.row === null || selected.col === null) return + if (selectedCell.row === null || selectedCell.col === null) return editEnabled = false switch (dir) { case NavigateDir.NEXT: - if (selected.row < data.value.length - 1) { - selected.row++ + if (selectedCell.row < data.value.length - 1) { + selectedCell.row++ } else { addEmptyRow() - selected.row++ + selectedCell.row++ } break case NavigateDir.PREV: - if (selected.row > 0) { - selected.row-- + if (selectedCell.row > 0) { + selectedCell.row-- } break } @@ -696,9 +691,7 @@ watch( :key="columnObj.id" class="cell relative cursor-pointer nc-grid-cell" :class="{ - 'active': - (hasEditPermission && selected.col === colIndex && selected.row === rowIndex) || - (hasEditPermission && selectedRange(rowIndex, colIndex)), + 'active': hasEditPermission && isCellSelected(rowIndex, colIndex), 'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row), }" :data-testid="`cell-${columnObj.title}-${rowIndex}`" @@ -708,7 +701,7 @@ watch( @click="selectCell(rowIndex, colIndex)" @dblclick="makeEditable(row, columnObj)" @mousedown="startSelectRange($event, rowIndex, colIndex)" - @mouseover="selectBlock(rowIndex, colIndex)" + @mouseover="endSelectRange(rowIndex, colIndex)" @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })" >
@@ -716,7 +709,7 @@ watch( v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :column="columnObj" - :active="selected.col === colIndex && selected.row === rowIndex" + :active="selectedCell.col === colIndex && selectedCell.row === rowIndex" :row="row" @navigate="onNavigate" /> @@ -726,10 +719,10 @@ watch( v-model="row.row[columnObj.title]" :column="columnObj" :edit-enabled=" - !!hasEditPermission && !!editEnabled && selected.col === colIndex && selected.row === rowIndex + !!hasEditPermission && !!editEnabled && selectedCell.col === colIndex && selectedCell.row === rowIndex " :row-index="rowIndex" - :active="selected.col === colIndex && selected.row === rowIndex" + :active="selectedCell.col === colIndex && selectedCell.row === rowIndex" @update:edit-enabled="editEnabled = $event" @save="updateOrSaveRow(row, columnObj.title, state)" @navigate="onNavigate" @@ -794,6 +787,13 @@ watch( {{ $t('activity.insertRow') }}
+ + +
+ + {{ $t('general.copy') }} +
+ diff --git a/packages/nc-gui/composables/useMultiSelect/cellRange.ts b/packages/nc-gui/composables/useMultiSelect/cellRange.ts new file mode 100644 index 0000000000..c059cbfe12 --- /dev/null +++ b/packages/nc-gui/composables/useMultiSelect/cellRange.ts @@ -0,0 +1,54 @@ +export interface Cell { + row: number | null + col: number | null +} + +export class CellRange { + _start: Cell | null + _end: Cell | null + + constructor(start = null, end = null) { + this._start = start + this._end = end ?? this._start + } + + get start() { + return { + row: Math.min(this._start?.row ?? NaN, this._end?.row ?? NaN), + col: Math.min(this._start?.col ?? NaN, this._end?.col ?? NaN), + } + } + + get end() { + return { + row: Math.max(this._start?.row ?? NaN, this._end?.row ?? NaN), + col: Math.max(this._start?.col ?? NaN, this._end?.col ?? NaN), + } + } + + startRange(value: Cell) { + if (value == null) { + return + } + + this._start = value + this._end = value + } + + endRange(value: Cell) { + if (value == null) { + return + } + + this._end = value + } + + clear() { + this._start = null + this._end = null + } + + isEmpty() { + return this._start == null || this._end == null + } +} diff --git a/packages/nc-gui/composables/useMultiSelect/copyValue.ts b/packages/nc-gui/composables/useMultiSelect/copyValue.ts new file mode 100644 index 0000000000..fec82fb7c9 --- /dev/null +++ b/packages/nc-gui/composables/useMultiSelect/copyValue.ts @@ -0,0 +1,29 @@ +import { UITypes } from '../../../nocodb-sdk' +import type { ColumnType } from '../../../nocodb-sdk' +import type { Row } from '~/lib' + +export const copyTable = async (rows: Row[], cols: ColumnType[]) => { + let copyHTML = '' + let copyPlainText = '' + + rows.forEach((row) => { + let copyRow = '' + cols.forEach((col) => { + let value = (col.title && row.row[col.title]) ?? '' + if (typeof value === 'object') { + value = JSON.stringify(value) + } + copyRow += `` + copyPlainText = `${copyPlainText} ${value} \t` + }) + copyHTML += `${copyRow}` + copyPlainText = `${copyPlainText.trim()}\n` + }) + copyHTML += '
${value}
' + copyPlainText.trim() + + const blobHTML = new Blob([copyHTML], { type: 'text/html' }) + const blobPlainText = new Blob([copyPlainText], { type: 'text/plain' }) + + return navigator.clipboard.write([new ClipboardItem({ [blobHTML.type]: blobHTML, [blobPlainText.type]: blobPlainText })]) +} diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts index 9b08d29554..c27ea269ed 100644 --- a/packages/nc-gui/composables/useMultiSelect/index.ts +++ b/packages/nc-gui/composables/useMultiSelect/index.ts @@ -1,18 +1,16 @@ import type { MaybeRef } from '@vueuse/core' -import { UITypes } from 'nocodb-sdk' -import { message, reactive, ref, unref, useCopy, useEventListener, useI18n } from '#imports' - -interface SelectedBlock { - row: number | null - col: number | null -} +import type { ColumnType } from 'nocodb-sdk' +import type { Cell } from './cellRange' +import { CellRange } from './cellRange' +import { copyTable, message, reactive, ref, unref, useCopy, useEventListener, useI18n } from '#imports' +import type { Row } from '~/lib' /** * Utility to help with multi-selecting rows/cells in the smartsheet */ export function useMultiSelect( - fields: MaybeRef, - data: MaybeRef, + fields: MaybeRef, + data: MaybeRef, _editEnabled: MaybeRef, isPkAvail: MaybeRef, clearCell: Function, @@ -26,99 +24,92 @@ export function useMultiSelect( const editEnabled = ref(_editEnabled) - const selected = reactive({ row: null, col: null }) - - // save the first and the last column where the mouse is down while the value isSelectedRow is true - const selectedRows = reactive({ startCol: NaN, endCol: NaN, startRow: NaN, endRow: NaN }) - - // calculate the min and the max column where the mouse is down while the value isSelectedRow is true - const rangeRows = reactive({ minRow: NaN, maxRow: NaN, minCol: NaN, maxCol: NaN }) - - // check if mouse is down or up false=mouseup and true=mousedown - let isSelectedBlock = $ref(false) + const selectedCell = reactive({ row: null, col: null }) + const selectedRange = reactive(new CellRange()) + let isMouseDown = $ref(false) const columnLength = $computed(() => unref(fields)?.length) + async function copyValue(ctx?: Cell) { + try { + if (!selectedRange.isEmpty()) { + const cprows = unref(data).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy + const cpcols = unref(fields).slice(selectedRange.start.col, selectedRange.end.col + 1) // slice the selected cols for copy + + await copyTable(cprows, cpcols) + message.success(t('msg.info.copiedToClipboard')) + } else { + // if copy was called with context (right click position) - copy value from context + // else if there is just one selected cell, copy it's value + const cpRow = ctx?.row ?? selectedCell?.row + const cpCol = ctx?.col ?? selectedCell?.col + + if (cpRow != null && cpCol != null) { + const rowObj = unref(data)[cpRow] + const columnObj = unref(fields)[cpCol] + + let textToCopy = (columnObj.title && rowObj.row[columnObj.title]) || '' + if (typeof textToCopy === 'object') { + textToCopy = JSON.stringify(textToCopy) + } + await copy(textToCopy) + message.success(t('msg.info.copiedToClipboard')) + } + } + } catch { + message.error(t('msg.error.copyToClipboardError')) + } + } + function selectCell(row: number, col: number) { - clearRangeRows() - if (selected.row === row && selected.col === col) return + selectedRange.clear() + if (selectedCell.row === row && selectedCell.col === col) return editEnabled.value = false - selected.row = row - selected.col = col + selectedCell.row = row + selectedCell.col = col } - function selectBlock(row: number, col: number) { - // if selected.col and selected.row are null and isSelectedBlock is true that means you are selecting a block - if (selected.col === null || selected.row === null) { - if (isSelectedBlock) { - // save the next value after the selectionStart - selectedRows.endCol = col - selectedRows.endRow = row - } - } else if (selected.col !== col || selected.row !== row) { - // if selected.col and selected.row is not null but the selected col and row is not equal at the row and col where the mouse is clicking - // and isSelectedBlock is true that means you are selecting a block - if (isSelectedBlock) { - selected.col = null - selected.row = null - // save the next value after the selectionStart - selectedRows.endCol = col - selectedRows.endRow = row - } + function endSelectRange(row: number, col: number) { + if (!isMouseDown) { + return } + selectedCell.row = null + selectedCell.col = null + selectedRange.endRange({ row, col }) } - function selectedRange(row: number, col: number) { - if ( - !isNaN(selectedRows.startRow) && - !isNaN(selectedRows.startCol) && - !isNaN(selectedRows.endRow) && - !isNaN(selectedRows.endCol) - ) { - // check if column selection is up or down - rangeRows.minRow = Math.min(selectedRows.startRow, selectedRows.endRow) - rangeRows.maxRow = Math.max(selectedRows.startRow, selectedRows.endRow) - rangeRows.minCol = Math.min(selectedRows.startCol, selectedRows.endCol) - rangeRows.maxCol = Math.max(selectedRows.startCol, selectedRows.endCol) + function isCellSelected(row: number, col: number) { + if (selectedCell?.row === row && selectedCell?.col === col) { + return true + } - // return if the column is in between the selection - return col >= rangeRows.minCol && col <= rangeRows.maxCol && row >= rangeRows.minRow && row <= rangeRows.maxRow - } else { + if (selectedRange.isEmpty()) { return false } + + return ( + col >= selectedRange.start.col && + col <= selectedRange.end.col && + row >= selectedRange.start.row && + row <= selectedRange.end.row + ) } function startSelectRange(event: MouseEvent, row: number, col: number) { - // if editEnabled but the selected col or the selected row is not equal like the actual row or col, enabled selected multiple rows - if (unref(editEnabled) && (selected.col !== col || selected.row !== row)) { - event.preventDefault() - } else if (!unref(editEnabled)) { - // if editEnabled is not true, enabled selected multiple rows - event.preventDefault() + // if there was a right click on selected range, don't restart the selection + const leftClickButton = 0 + if (event?.button !== leftClickButton && isCellSelected(row, col)) { + return } - // clear the selection when the mouse is down - selectedRows.startCol = NaN - selectedRows.endCol = NaN - selectedRows.startRow = NaN - selectedRows.endRow = NaN - // asing where the selection start - selectedRows.startCol = col - selectedRows.startRow = row - isSelectedBlock = true - } + if (unref(editEnabled)) { + event.preventDefault() + return + } - function clearRangeRows() { - // when the selection starts or ends or when enter/arrow/tab is pressed - // this clear the previous selection - rangeRows.minCol = NaN - rangeRows.maxCol = NaN - rangeRows.minRow = NaN - rangeRows.maxRow = NaN - selectedRows.startRow = NaN - selectedRows.startCol = NaN - selectedRows.endRow = NaN - selectedRows.endCol = NaN + isMouseDown = true + selectedRange.clear() + selectedRange.startRange({ row, col }) } useEventListener(document, 'mouseup', (e) => { @@ -127,7 +118,7 @@ export function useMultiSelect( e.preventDefault() } - isSelectedBlock = false + isMouseDown = false }) const onKeyDown = async (e: KeyboardEvent) => { @@ -136,41 +127,36 @@ export function useMultiSelect( return true } - if ( - !isNaN(selectedRows.startRow) && - !isNaN(selectedRows.startCol) && - !isNaN(selectedRows.endRow) && - !isNaN(selectedRows.endCol) - ) { + if (!selectedRange.isEmpty()) { // In case the user press tabs or arrows keys - selected.row = selectedRows.startRow - selected.col = selectedRows.startCol + selectedCell.row = selectedRange.start.row + selectedCell.col = selectedRange.start.col } - if (selected.row === null || selected.col === null) return + if (selectedCell.row === null || selectedCell.col === null) return /** on tab key press navigate through cells */ switch (e.key) { case 'Tab': e.preventDefault() - clearRangeRows() + selectedRange.clear() if (e.shiftKey) { - if (selected.col > 0) { - selected.col-- + if (selectedCell.col > 0) { + selectedCell.col-- editEnabled.value = false - } else if (selected.row > 0) { - selected.row-- - selected.col = unref(columnLength) - 1 + } else if (selectedCell.row > 0) { + selectedCell.row-- + selectedCell.col = unref(columnLength) - 1 editEnabled.value = false } } else { - if (selected.col < unref(columnLength) - 1) { - selected.col++ + if (selectedCell.col < unref(columnLength) - 1) { + selectedCell.col++ editEnabled.value = false - } else if (selected.row < unref(data).length - 1) { - selected.row++ - selected.col = 0 + } else if (selectedCell.row < unref(data).length - 1) { + selectedCell.row++ + selectedCell.col = 0 editEnabled.value = false } } @@ -179,90 +165,63 @@ export function useMultiSelect( /** on enter key press make cell editable */ case 'Enter': e.preventDefault() - clearRangeRows() - makeEditable(unref(data)[selected.row], unref(fields)[selected.col]) + selectedRange.clear() + makeEditable(unref(data)[selectedCell.row], unref(fields)[selectedCell.col]) break /** on delete key press clear cell */ case 'Delete': e.preventDefault() - clearRangeRows() - await clearCell(selected as { row: number; col: number }) + selectedRange.clear() + await clearCell(selectedCell as { row: number; col: number }) break /** on arrow key press navigate through cells */ case 'ArrowRight': e.preventDefault() - clearRangeRows() - if (selected.col < unref(columnLength) - 1) { - selected.col++ + selectedRange.clear() + if (selectedCell.col < unref(columnLength) - 1) { + selectedCell.col++ scrollToActiveCell?.() editEnabled.value = false } break case 'ArrowLeft': - clearRangeRows() + selectedRange.clear() e.preventDefault() - clearRangeRows() - if (selected.col > 0) { - selected.col-- + if (selectedCell.col > 0) { + selectedCell.col-- scrollToActiveCell?.() editEnabled.value = false } break case 'ArrowUp': - clearRangeRows() + selectedRange.clear() e.preventDefault() - clearRangeRows() - if (selected.row > 0) { - selected.row-- + if (selectedCell.row > 0) { + selectedCell.row-- scrollToActiveCell?.() editEnabled.value = false } break case 'ArrowDown': - clearRangeRows() + selectedRange.clear() e.preventDefault() - clearRangeRows() - if (selected.row < unref(data).length - 1) { - selected.row++ + if (selectedCell.row < unref(data).length - 1) { + selectedCell.row++ scrollToActiveCell?.() editEnabled.value = false } break default: { - const rowObj = unref(data)[selected.row] + const rowObj = unref(data)[selectedCell.row] - const columnObj = unref(fields)[selected.col] - - let cptext = '' // variable for save the text to be copy - - if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) { - const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy - - const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy - - cprows.forEach((row) => { - cpcols.forEach((col) => { - // todo: JSON stringify the attachment cell and LTAR contents for copy - // filter attachment cells and LATR cells from copy - if (col.uidt !== UITypes.Attachment && col.uidt !== UITypes.LinkToAnotherRecord) { - cptext = `${cptext} ${row.row[col.title]} \t` - } - }) - - cptext = `${cptext.trim()}\n` - }) - - cptext.trim() - } else { - cptext = rowObj.row[columnObj.title] || '' - } + const columnObj = unref(fields)[selectedCell.col] if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) { switch (e.keyCode) { // copy - ctrl/cmd +c case 67: - await copy(cptext) + await copyValue() break } } @@ -277,7 +236,7 @@ export function useMultiSelect( // Update not allowed for table which doesn't have primary Key return message.info(t('msg.info.updateNotAllowedWithoutPK')) } - if (makeEditable(rowObj, columnObj)) { + if (makeEditable(rowObj, columnObj) && columnObj.title) { rowObj.row[columnObj.title] = '' } // editEnabled = true @@ -291,12 +250,11 @@ export function useMultiSelect( return { selectCell, - selectBlock, - selectedRange, - clearRangeRows, startSelectRange, - selected, - selectedRows, - rangeRows, + endSelectRange, + clearSelectedRange: selectedRange.clear.bind(selectedRange), + copyValue, + isCellSelected, + selectedCell, } } diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts index 21278b9876..5cbff053fa 100644 --- a/packages/nc-gui/context/index.ts +++ b/packages/nc-gui/context/index.ts @@ -26,7 +26,7 @@ export const ReloadViewDataHookInj: InjectionKey> = Sy export const ReloadViewMetaHookInj: InjectionKey> = Symbol('reload-view-meta-injection') export const ReloadRowDataHookInj: InjectionKey> = Symbol('reload-row-data-injection') export const OpenNewRecordFormHookInj: InjectionKey> = Symbol('open-new-record-form-injection') -export const FieldsInj: InjectionKey> = Symbol('fields-injection') +export const FieldsInj: InjectionKey> = Symbol('fields-injection') export const EditModeInj: InjectionKey> = Symbol('edit-mode-injection') export const SharedViewPasswordInj: InjectionKey> = Symbol('shared-view-password-injection') export const CellUrlDisableOverlayInj: InjectionKey> = Symbol('cell-url-disable-url') diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json index bd19e8ad4a..ecd3c8777a 100644 --- a/packages/nc-gui/lang/en.json +++ b/packages/nc-gui/lang/en.json @@ -666,7 +666,8 @@ "parameterKeyCannotBeEmpty": "Parameter key cannot be empty", "duplicateParameterKeysAreNotAllowed": "Duplicate parameter keys are not allowed", "fieldRequired": "{value} cannot be empty.", - "projectNotAccessible": "Project not accessible" + "projectNotAccessible": "Project not accessible", + "copyToClipboardError": "Failed to copy to clipboard" }, "toast": { "exportMetadata": "Project metadata exported successfully",