Browse Source

Merge pull request #3816 from elvus/elvus/dev-rebased

pull/3835/head
Braks 2 years ago committed by GitHub
parent
commit
0e95ddda38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 138
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 6
      packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
  3. 272
      packages/nc-gui/composables/useMultiSelect/index.ts

138
packages/nc-gui/components/smartsheet/Grid.vue

@ -22,12 +22,11 @@ import {
onClickOutside, onClickOutside,
onMounted, onMounted,
provide, provide,
reactive,
ref, ref,
useCopy,
useEventListener, useEventListener,
useGridViewColumnWidth, useGridViewColumnWidth,
useI18n, useI18n,
useMultiSelect,
useRoute, useRoute,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
useUIPermission, useUIPermission,
@ -61,12 +60,12 @@ const router = useRouter()
// todo: get from parent ( inject or use prop ) // todo: get from parent ( inject or use prop )
const isView = false const isView = false
const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
let editEnabled = $ref(false) let editEnabled = $ref(false)
const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow() const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
const visibleColLength = $computed(() => fields.value?.length)
const addColumnDropdown = ref(false) const addColumnDropdown = ref(false)
const _contextMenu = ref(false) const _contextMenu = ref(false)
@ -84,8 +83,6 @@ const expandedFormDlg = ref(false)
const expandedFormRow = ref<Row>() const expandedFormRow = ref<Row>()
const expandedFormRowState = ref<Record<string, any>>() const expandedFormRowState = ref<Record<string, any>>()
const visibleColLength = $computed(() => fields.value?.length)
const { const {
isLoading, isLoading,
loadData, loadData,
@ -102,7 +99,14 @@ const {
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view) const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
const { copy } = useCopy() const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
fields,
data,
$$(editEnabled),
isPkAvail,
clearCell,
makeEditable,
)
onMounted(loadGridViewColumns) onMounted(loadGridViewColumns)
@ -157,11 +161,6 @@ openNewRecordFormHook?.on(async () => {
expandForm(newRow, undefined, true) expandForm(newRow, undefined, true)
}) })
const selectCell = (row: number, col: number) => {
selected.row = row
selected.col = col
}
watch( watch(
() => view.value?.id, () => view.value?.id,
async (next, old) => { async (next, old) => {
@ -192,7 +191,7 @@ watch(contextMenu, () => {
} }
}) })
const clearCell = async (ctx: { row: number; col: number }) => { async function clearCell(ctx: { row: number; col: number }) {
const rowObj = data.value[ctx.row] const rowObj = data.value[ctx.row]
const columnObj = fields.value[ctx.col] const columnObj = fields.value[ctx.col]
@ -205,135 +204,49 @@ const clearCell = async (ctx: { row: number; col: number }) => {
await updateOrSaveRow(rowObj, columnObj.title) await updateOrSaveRow(rowObj, columnObj.title)
} }
const makeEditable = (row: Row, col: ColumnType) => { function makeEditable(row: Row, col: ColumnType) {
if (!hasEditPermission || editEnabled || isView) { if (!hasEditPermission || editEnabled || isView) {
return return
} }
if (!isPkAvail.value && !row.rowMeta.new) { if (!isPkAvail.value && !row.rowMeta.new) {
// Update not allowed for table which doesn't have primary Key // Update not allowed for table which doesn't have primary Key
message.info(t('msg.info.updateNotAllowedWithoutPK')) message.info(t('msg.info.updateNotAllowedWithoutPK'))
return return
} }
if (col.ai) { if (col.ai) {
// Auto Increment field is not editable // Auto Increment field is not editable
message.info(t('msg.info.autoIncFieldNotEditable')) message.info(t('msg.info.autoIncFieldNotEditable'))
return return
} }
if (col.pk && !row.rowMeta.new) { if (col.pk && !row.rowMeta.new) {
// Editing primary key not supported // Editing primary key not supported
message.info(t('msg.info.editingPKnotSupported')) message.info(t('msg.info.editingPKnotSupported'))
return return
} }
return (editEnabled = true) return (editEnabled = true)
} }
/** handle keypress events */ /** handle keypress events */
const onKeyDown = async (e: KeyboardEvent) => { useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
if (e.key === 'Alt') {
disableUrlOverlay.value = true
return
}
if (selected.row === null || selected.col === null) return
/** on tab key press navigate through cells */
switch (e.key) {
case 'Tab':
e.preventDefault()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
}
} else {
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
}
}
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
makeEditable(data.value[selected.row], fields.value[selected.col])
break
/** on delete key press clear cell */
case 'Delete':
if (!editEnabled) {
e.preventDefault()
await clearCell(selected as { row: number; col: number })
}
break
/** on arrow key press navigate through cells */
case 'ArrowRight':
e.preventDefault()
if (selected.col < visibleColLength - 1) selected.col++
break
case 'ArrowLeft':
e.preventDefault()
if (selected.col > 0) selected.col--
break
case 'ArrowUp':
e.preventDefault()
if (selected.row > 0) selected.row--
break
case 'ArrowDown':
e.preventDefault()
if (selected.row < data.value.length - 1) selected.row++
break
default:
{
const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if ((!editEnabled && e.metaKey) || e.ctrlKey) {
switch (e.keyCode) {
// copy - ctrl/cmd +c
case 67:
await copy(rowObj.row[columnObj.title] || '')
break
}
}
if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
return
}
/** on letter key press make cell editable and empty */
if (e?.key?.length === 1) {
if (!isPkAvail && !rowObj.rowMeta.new) {
// Update not allowed for table which doesn't have primary Key
return message.info(t('msg.info.updateNotAllowedWithoutPK'))
}
if (makeEditable(rowObj, columnObj)) {
rowObj.row[columnObj.title] = ''
}
// editEnabled = true
}
}
break
}
}
const onKeyUp = async (e: KeyboardEvent) => {
if (e.key === 'Alt') { if (e.key === 'Alt') {
disableUrlOverlay.value = false disableUrlOverlay.value = false
} }
} })
useEventListener(document, 'keydown', onKeyDown)
useEventListener(document, 'keyup', onKeyUp)
/** On clicking outside of table reset active cell */ /** On clicking outside of table reset active cell */
const smartTable = ref(null) const smartTable = ref(null)
onClickOutside(smartTable, () => { onClickOutside(smartTable, () => {
clearRangeRows()
if (selected.col === null) return if (selected.col === null) return
const activeCol = fields.value[selected.col] const activeCol = fields.value[selected.col]
if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
selected.row = null selected.row = null
selected.col = null selected.col = null
}) })
@ -499,7 +412,8 @@ reloadViewDataHook.trigger()
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <!-- this prevent select text from field if not in edit mode -->
<tbody @selectstart.prevent>
<LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row"> <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
<template #default="{ state }"> <template #default="{ state }">
<tr class="nc-grid-row"> <tr class="nc-grid-row">
@ -548,13 +462,17 @@ reloadViewDataHook.trigger()
:key="columnObj.id" :key="columnObj.id"
class="cell relative cursor-pointer nc-grid-cell" class="cell relative cursor-pointer nc-grid-cell"
:class="{ :class="{
active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex, active:
(isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex) ||
(isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex)),
}" }"
:data-key="rowIndex + columnObj.id" :data-key="rowIndex + columnObj.id"
:data-col="columnObj.id" :data-col="columnObj.id"
:data-title="columnObj.title" :data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)" @click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)" @dblclick="makeEditable(row, columnObj)"
@mousedown="startSelectRange($event, rowIndex, colIndex)"
@mouseover="selectBlock(rowIndex, colIndex)"
@contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })" @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
> >
<div class="w-full h-full"> <div class="w-full h-full">

6
packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue

@ -129,9 +129,9 @@ const deleteLink = async (id: string) => {
<template #default="{ record }"> <template #default="{ record }">
<div class="flex items-center items-center gap-1"> <div class="flex items-center items-center gap-1">
<template v-if="record.password"> <template v-if="record.password">
<span class="h-min max-w-[250px]">{{ <span class="h-min max-w-[250px]">
record.showPassword ? record.password : Array(record.password.length + 1).join('*') {{ record.showPassword ? record.password : Array(record.password.length + 1).join('*') }}
}}</span> </span>
<component <component
:is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon" :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
@click="record.showPassword = !record.showPassword" @click="record.showPassword = !record.showPassword"

272
packages/nc-gui/composables/useMultiSelect/index.ts

@ -0,0 +1,272 @@
import type { MaybeRef } from '@vueuse/core'
import { UITypes } from 'nocodb-sdk'
import { message, reactive, unref, useCopy, useEventListener, useI18n } from '#imports'
interface SelectedBlock {
row: number | null
col: number | null
}
/**
* Utility to help with multi-selecting rows/cells in the smartsheet
*/
export function useMultiSelect(
fields: MaybeRef<any[]>,
data: MaybeRef<any[]>,
editEnabled: MaybeRef<boolean>,
isPkAvail: MaybeRef<boolean>,
clearCell: Function,
makeEditable: Function,
) {
const { t } = useI18n()
const { copy } = useCopy()
const selected = reactive<SelectedBlock>({ 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 columnLength = $computed(() => unref(fields)?.length)
function selectCell(row: number, col: number) {
clearRangeRows()
selected.row = row
selected.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 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)
// return if the column is in between the selection
return col >= rangeRows.minCol && col <= rangeRows.maxCol && row >= rangeRows.minRow && row <= rangeRows.maxRow
} else {
return false
}
}
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()
}
// 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
}
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
}
useEventListener(document, 'mouseup', (e) => {
// if the editEnabled is false prevent the mouseup event for not select text
if (!unref(editEnabled)) {
e.preventDefault()
}
isSelectedBlock = false
})
const onKeyDown = async (e: KeyboardEvent) => {
if (
!isNaN(selectedRows.startRow) &&
!isNaN(selectedRows.startCol) &&
!isNaN(selectedRows.endRow) &&
!isNaN(selectedRows.endCol)
) {
// In case the user press tabs or arrows keys
selected.row = selectedRows.startRow
selected.col = selectedRows.startCol
}
if (selected.row === null || selected.col === null) return
/** on tab key press navigate through cells */
switch (e.key) {
case 'Tab':
e.preventDefault()
clearRangeRows()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = unref(columnLength) - 1
}
} else {
if (selected.col < unref(columnLength) - 1) {
selected.col++
} else if (selected.row < unref(data).length - 1) {
selected.row++
selected.col = 0
}
}
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
clearRangeRows()
makeEditable(unref(data)[selected.row], unref(fields)[selected.col])
break
/** on delete key press clear cell */
case 'Delete':
if (!unref(editEnabled)) {
e.preventDefault()
clearRangeRows()
await clearCell(selected 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++
break
case 'ArrowLeft':
clearRangeRows()
e.preventDefault()
clearRangeRows()
if (selected.col > 0) selected.col--
break
case 'ArrowUp':
clearRangeRows()
e.preventDefault()
clearRangeRows()
if (selected.row > 0) selected.row--
break
case 'ArrowDown':
clearRangeRows()
e.preventDefault()
clearRangeRows()
if (selected.row < unref(data).length - 1) selected.row++
break
default:
{
const rowObj = unref(data)[selected.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] || ''
}
if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
switch (e.keyCode) {
// copy - ctrl/cmd +c
case 67:
await copy(cptext)
break
}
}
if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
return
}
/** on letter key press make cell editable and empty */
if (e.key.length === 1) {
if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
// Update not allowed for table which doesn't have primary Key
return message.info(t('msg.info.updateNotAllowedWithoutPK'))
}
if (makeEditable(rowObj, columnObj)) {
rowObj.row[columnObj.title] = ''
}
// editEnabled = true
}
}
break
}
}
useEventListener(document, 'keydown', onKeyDown)
return {
selectCell,
selectBlock,
selectedRange,
clearRangeRows,
startSelectRange,
selected,
selectedRows,
rangeRows,
}
}
Loading…
Cancel
Save