|
|
|
@ -2,7 +2,6 @@
|
|
|
|
|
import { nextTick } from '@vue/runtime-core' |
|
|
|
|
import type { ColumnReqType, ColumnType, GridType, PaginatedType, TableType, ViewType } from 'nocodb-sdk' |
|
|
|
|
import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk' |
|
|
|
|
import type { UseElementBoundingReturn } from '@vueuse/core' |
|
|
|
|
import { |
|
|
|
|
ActiveViewInj, |
|
|
|
|
CellUrlDisableOverlayInj, |
|
|
|
@ -112,6 +111,8 @@ const tableHeadEl = ref<HTMLElement>()
|
|
|
|
|
const tableBodyEl = ref<HTMLElement>() |
|
|
|
|
const fillHandle = ref<HTMLElement>() |
|
|
|
|
|
|
|
|
|
const gridRect = useElementBounding(gridWrapper) |
|
|
|
|
|
|
|
|
|
const isAddingColumnAllowed = $computed(() => !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value) |
|
|
|
|
|
|
|
|
|
const isAddingEmptyRowAllowed = $computed(() => !isView && !isLocked.value && hasEditPermission && !isSqlView.value) |
|
|
|
@ -891,16 +892,19 @@ function addEmptyRow(row?: number) {
|
|
|
|
|
return rowObj |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const tableRect = useElementBounding(smartTable) |
|
|
|
|
const { height: tableHeight, width: tableWidth } = tableRect |
|
|
|
|
|
|
|
|
|
const { x: gridX, y: gridY } = useScroll(gridWrapper) |
|
|
|
|
|
|
|
|
|
const fillHandleTop = ref() |
|
|
|
|
const fillHandleLeft = ref() |
|
|
|
|
|
|
|
|
|
const cellRefs = ref<{ el: HTMLElement }[]>([]) |
|
|
|
|
let cellRect: UseElementBoundingReturn | null = null |
|
|
|
|
|
|
|
|
|
const showFillHandle = computed( |
|
|
|
|
() => |
|
|
|
|
!readOnly.value && |
|
|
|
|
!isLocked.value && |
|
|
|
|
!editEnabled && |
|
|
|
|
(!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) && |
|
|
|
|
!data.value[selectedRange.end.row ?? activeCell.row]?.rowMeta?.new, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const refreshFillHandle = () => { |
|
|
|
|
const cellRef = cellRefs.value.find( |
|
|
|
@ -908,28 +912,22 @@ const refreshFillHandle = () => {
|
|
|
|
|
cell.el.dataset.rowIndex === String(selectedRange.end.row) && cell.el.dataset.colIndex === String(selectedRange.end.col), |
|
|
|
|
) |
|
|
|
|
if (cellRef) { |
|
|
|
|
cellRect = useElementBounding(cellRef.el) |
|
|
|
|
if (!cellRect || !tableRect) return |
|
|
|
|
if (selectedRange.end.col === 0) { |
|
|
|
|
fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value |
|
|
|
|
fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value |
|
|
|
|
fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value + gridX.value |
|
|
|
|
const cellRect = useElementBounding(cellRef.el) |
|
|
|
|
if (!cellRect || !gridWrapper.value) return |
|
|
|
|
fillHandleTop.value = cellRect.top.value + cellRect.height.value - gridRect.top.value + gridWrapper.value.scrollTop |
|
|
|
|
fillHandleLeft.value = cellRect.left.value + cellRect.width.value - gridRect.left.value + gridWrapper.value.scrollLeft |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
() => `${selectedRange.end.row}-${selectedRange.end.col}`, |
|
|
|
|
(n, o) => { |
|
|
|
|
if (n !== o) { |
|
|
|
|
if (gridWrapper.value) { |
|
|
|
|
refreshFillHandle() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
) |
|
|
|
|
watch([() => selectedRange.end.row, () => selectedRange.end.col], (n, o) => { |
|
|
|
|
if (n !== o) { |
|
|
|
|
refreshFillHandle() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
useEventListener(gridWrapper, 'scroll', () => { |
|
|
|
|
refreshFillHandle() |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
@ -940,233 +938,233 @@ watch(
|
|
|
|
|
</div> |
|
|
|
|
</general-overlay> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
ref="gridWrapper" |
|
|
|
|
class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull" |
|
|
|
|
:class="{ |
|
|
|
|
relative: |
|
|
|
|
!readOnly && |
|
|
|
|
!isLocked && |
|
|
|
|
(!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) && |
|
|
|
|
((!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)), |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull relative"> |
|
|
|
|
<a-dropdown |
|
|
|
|
v-model:visible="contextMenu" |
|
|
|
|
:trigger="isSqlView ? [] : ['contextmenu']" |
|
|
|
|
overlay-class-name="nc-dropdown-grid-context-menu" |
|
|
|
|
> |
|
|
|
|
<table |
|
|
|
|
ref="smartTable" |
|
|
|
|
class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white" |
|
|
|
|
@contextmenu="showContextMenu" |
|
|
|
|
> |
|
|
|
|
<thead ref="tableHeadEl"> |
|
|
|
|
<tr class="nc-grid-header"> |
|
|
|
|
<th class="w-[85px] min-w-[85px]" data-testid="grid-id-column"> |
|
|
|
|
<div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all"> |
|
|
|
|
<template v-if="!readOnly"> |
|
|
|
|
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div> |
|
|
|
|
<div |
|
|
|
|
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }" |
|
|
|
|
class="nc-check-all w-full items-center" |
|
|
|
|
> |
|
|
|
|
<a-checkbox v-model:checked="selectedAllRecords" /> |
|
|
|
|
<div class="table-overlay"> |
|
|
|
|
<table |
|
|
|
|
ref="smartTable" |
|
|
|
|
class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white" |
|
|
|
|
@contextmenu="showContextMenu" |
|
|
|
|
> |
|
|
|
|
<thead ref="tableHeadEl"> |
|
|
|
|
<tr class="nc-grid-header"> |
|
|
|
|
<th class="w-[85px] min-w-[85px]" data-testid="grid-id-column"> |
|
|
|
|
<div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all"> |
|
|
|
|
<template v-if="!readOnly"> |
|
|
|
|
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div> |
|
|
|
|
<div |
|
|
|
|
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }" |
|
|
|
|
class="nc-check-all w-full items-center" |
|
|
|
|
> |
|
|
|
|
<a-checkbox v-model:checked="selectedAllRecords" /> |
|
|
|
|
|
|
|
|
|
<span class="flex-1" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="text-gray-500">#</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</th> |
|
|
|
|
<th |
|
|
|
|
v-for="col in fields" |
|
|
|
|
:key="col.title" |
|
|
|
|
v-xc-ver-resize |
|
|
|
|
:data-col="col.id" |
|
|
|
|
:data-title="col.title" |
|
|
|
|
@xcresize="onresize(col.id, $event)" |
|
|
|
|
@xcresizing="onXcResizing(col.title, $event)" |
|
|
|
|
@xcresized="resizingCol = null" |
|
|
|
|
> |
|
|
|
|
<div class="w-full h-full bg-gray-100 flex items-center"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" /> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" /> |
|
|
|
|
</div> |
|
|
|
|
</th> |
|
|
|
|
<th |
|
|
|
|
v-if="isAddingColumnAllowed" |
|
|
|
|
v-e="['c:column:add']" |
|
|
|
|
class="cursor-pointer" |
|
|
|
|
@click.stop="addColumnDropdown = true" |
|
|
|
|
> |
|
|
|
|
<a-dropdown |
|
|
|
|
v-model:visible="addColumnDropdown" |
|
|
|
|
:trigger="['click']" |
|
|
|
|
overlay-class-name="nc-dropdown-grid-add-column" |
|
|
|
|
> |
|
|
|
|
<div class="h-full w-[60px] flex items-center justify-center"> |
|
|
|
|
<component :is="iconMap.plus" class="text-sm nc-column-add" /> |
|
|
|
|
<span class="flex-1" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="text-gray-500">#</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</th> |
|
|
|
|
<th |
|
|
|
|
v-for="col in fields" |
|
|
|
|
:key="col.title" |
|
|
|
|
v-xc-ver-resize |
|
|
|
|
:data-col="col.id" |
|
|
|
|
:data-title="col.title" |
|
|
|
|
@xcresize="onresize(col.id, $event)" |
|
|
|
|
@xcresizing="onXcResizing(col.title, $event)" |
|
|
|
|
@xcresized="resizingCol = null" |
|
|
|
|
> |
|
|
|
|
<div class="w-full h-full bg-gray-100 flex items-center"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" /> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<SmartsheetColumnEditOrAddProvider |
|
|
|
|
v-if="addColumnDropdown" |
|
|
|
|
:preload="preloadColumn" |
|
|
|
|
:column-position="columnOrder" |
|
|
|
|
@submit="closeAddColumnDropdown(true)" |
|
|
|
|
@cancel="closeAddColumnDropdown()" |
|
|
|
|
@click.stop |
|
|
|
|
@keydown.stop |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody ref="tableBodyEl"> |
|
|
|
|
<LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row"> |
|
|
|
|
<template #default="{ state }"> |
|
|
|
|
<tr |
|
|
|
|
class="nc-grid-row" |
|
|
|
|
:style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }" |
|
|
|
|
:data-testid="`grid-row-${rowIndex}`" |
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" /> |
|
|
|
|
</div> |
|
|
|
|
</th> |
|
|
|
|
<th |
|
|
|
|
v-if="isAddingColumnAllowed" |
|
|
|
|
v-e="['c:column:add']" |
|
|
|
|
class="cursor-pointer" |
|
|
|
|
@click.stop="addColumnDropdown = true" |
|
|
|
|
> |
|
|
|
|
<td |
|
|
|
|
key="row-index" |
|
|
|
|
class="caption nc-grid-cell pl-5 pr-1" |
|
|
|
|
:data-testid="`cell-Id-${rowIndex}`" |
|
|
|
|
@contextmenu="contextMenuTarget = null" |
|
|
|
|
<a-dropdown |
|
|
|
|
v-model:visible="addColumnDropdown" |
|
|
|
|
:trigger="['click']" |
|
|
|
|
overlay-class-name="nc-dropdown-grid-add-column" |
|
|
|
|
> |
|
|
|
|
<div class="items-center flex gap-1 min-w-[60px]"> |
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly || !isLocked" |
|
|
|
|
class="nc-row-no text-xs text-gray-500" |
|
|
|
|
:class="{ toggle: !readOnly, hidden: row.rowMeta.selected }" |
|
|
|
|
> |
|
|
|
|
{{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }} |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly" |
|
|
|
|
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" |
|
|
|
|
class="nc-row-expand-and-checkbox" |
|
|
|
|
> |
|
|
|
|
<a-checkbox v-model:checked="row.rowMeta.selected" /> |
|
|
|
|
</div> |
|
|
|
|
<span class="flex-1" /> |
|
|
|
|
<div class="h-full w-[60px] flex items-center justify-center"> |
|
|
|
|
<component :is="iconMap.plus" class="text-sm nc-column-add" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)" |
|
|
|
|
class="nc-expand" |
|
|
|
|
:data-testid="`nc-expand-${rowIndex}`" |
|
|
|
|
:class="{ 'nc-comment': row.rowMeta?.commentCount }" |
|
|
|
|
> |
|
|
|
|
<a-spin |
|
|
|
|
v-if="row.rowMeta.saving" |
|
|
|
|
class="!flex items-center" |
|
|
|
|
:data-testid="`row-save-spinner-${rowIndex}`" |
|
|
|
|
/> |
|
|
|
|
<template v-else> |
|
|
|
|
<span |
|
|
|
|
v-if="row.rowMeta?.commentCount" |
|
|
|
|
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)" |
|
|
|
|
:style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }" |
|
|
|
|
@click="expandForm(row, state)" |
|
|
|
|
> |
|
|
|
|
{{ row.rowMeta.commentCount }} |
|
|
|
|
</span> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)" |
|
|
|
|
> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.expand" |
|
|
|
|
v-e="['c:row-expand']" |
|
|
|
|
class="select-none transform hover:(text-accent scale-120) nc-row-expand" |
|
|
|
|
<template #overlay> |
|
|
|
|
<SmartsheetColumnEditOrAddProvider |
|
|
|
|
v-if="addColumnDropdown" |
|
|
|
|
:preload="preloadColumn" |
|
|
|
|
:column-position="columnOrder" |
|
|
|
|
@submit="closeAddColumnDropdown(true)" |
|
|
|
|
@cancel="closeAddColumnDropdown()" |
|
|
|
|
@click.stop |
|
|
|
|
@keydown.stop |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody ref="tableBodyEl"> |
|
|
|
|
<LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row"> |
|
|
|
|
<template #default="{ state }"> |
|
|
|
|
<tr |
|
|
|
|
class="nc-grid-row" |
|
|
|
|
:style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }" |
|
|
|
|
:data-testid="`grid-row-${rowIndex}`" |
|
|
|
|
> |
|
|
|
|
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`"> |
|
|
|
|
<div class="items-center flex gap-1 min-w-[60px]"> |
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly || !isLocked" |
|
|
|
|
class="nc-row-no text-xs text-gray-500" |
|
|
|
|
:class="{ toggle: !readOnly, hidden: row.rowMeta.selected }" |
|
|
|
|
> |
|
|
|
|
{{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }} |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly" |
|
|
|
|
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" |
|
|
|
|
class="nc-row-expand-and-checkbox" |
|
|
|
|
> |
|
|
|
|
<a-checkbox v-model:checked="row.rowMeta.selected" /> |
|
|
|
|
</div> |
|
|
|
|
<span class="flex-1" /> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)" |
|
|
|
|
class="nc-expand" |
|
|
|
|
:data-testid="`nc-expand-${rowIndex}`" |
|
|
|
|
:class="{ 'nc-comment': row.rowMeta?.commentCount }" |
|
|
|
|
> |
|
|
|
|
<a-spin |
|
|
|
|
v-if="row.rowMeta.saving" |
|
|
|
|
class="!flex items-center" |
|
|
|
|
:data-testid="`row-save-spinner-${rowIndex}`" |
|
|
|
|
/> |
|
|
|
|
<template v-else> |
|
|
|
|
<span |
|
|
|
|
v-if="row.rowMeta?.commentCount" |
|
|
|
|
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)" |
|
|
|
|
:style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }" |
|
|
|
|
@click="expandForm(row, state)" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
> |
|
|
|
|
{{ row.rowMeta.commentCount }} |
|
|
|
|
</span> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)" |
|
|
|
|
> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.expand" |
|
|
|
|
v-e="['c:row-expand']" |
|
|
|
|
class="select-none transform hover:(text-accent scale-120) nc-row-expand" |
|
|
|
|
@click="expandForm(row, state)" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<SmartsheetTableDataCell |
|
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
|
:key="columnObj.id" |
|
|
|
|
ref="cellRefs" |
|
|
|
|
class="cell relative nc-grid-cell" |
|
|
|
|
:class="{ |
|
|
|
|
'cursor-pointer': hasEditPermission, |
|
|
|
|
'active': hasEditPermission && isCellSelected(rowIndex, colIndex), |
|
|
|
|
'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row), |
|
|
|
|
'align-middle': !rowHeight || rowHeight === 1, |
|
|
|
|
'align-top': rowHeight && rowHeight !== 1, |
|
|
|
|
'filling': isCellInFillRange(rowIndex, colIndex), |
|
|
|
|
}" |
|
|
|
|
:data-testid="`cell-${columnObj.title}-${rowIndex}`" |
|
|
|
|
:data-key="rowIndex + columnObj.id" |
|
|
|
|
:data-col="columnObj.id" |
|
|
|
|
:data-title="columnObj.title" |
|
|
|
|
:data-row-index="rowIndex" |
|
|
|
|
:data-col-index="colIndex" |
|
|
|
|
@mousedown="handleMouseDown($event, rowIndex, colIndex)" |
|
|
|
|
@mouseover="handleMouseOver($event, rowIndex, colIndex)" |
|
|
|
|
@click="handleCellClick($event, rowIndex, colIndex)" |
|
|
|
|
@dblclick="makeEditable(row, columnObj)" |
|
|
|
|
@contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })" |
|
|
|
|
> |
|
|
|
|
<div v-if="!switchingTab" class="w-full h-full"> |
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="isVirtualCol(columnObj)" |
|
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
|
:column="columnObj" |
|
|
|
|
:active="activeCell.col === colIndex && activeCell.row === rowIndex" |
|
|
|
|
:row="row" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@navigate="onNavigate" |
|
|
|
|
@save="updateOrSaveRow(row, '', state)" |
|
|
|
|
/> |
|
|
|
|
</td> |
|
|
|
|
<SmartsheetTableDataCell |
|
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
|
:key="columnObj.id" |
|
|
|
|
ref="cellRefs" |
|
|
|
|
class="cell relative nc-grid-cell" |
|
|
|
|
:class="{ |
|
|
|
|
'cursor-pointer': hasEditPermission, |
|
|
|
|
'active': hasEditPermission && isCellSelected(rowIndex, colIndex), |
|
|
|
|
'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row), |
|
|
|
|
'align-middle': !rowHeight || rowHeight === 1, |
|
|
|
|
'align-top': rowHeight && rowHeight !== 1, |
|
|
|
|
'filling': isCellInFillRange(rowIndex, colIndex), |
|
|
|
|
}" |
|
|
|
|
:data-testid="`cell-${columnObj.title}-${rowIndex}`" |
|
|
|
|
:data-key="rowIndex + columnObj.id" |
|
|
|
|
:data-col="columnObj.id" |
|
|
|
|
:data-title="columnObj.title" |
|
|
|
|
:data-row-index="rowIndex" |
|
|
|
|
:data-col-index="colIndex" |
|
|
|
|
@mousedown="handleMouseDown($event, rowIndex, colIndex)" |
|
|
|
|
@mouseover="handleMouseOver($event, rowIndex, colIndex)" |
|
|
|
|
@click="handleCellClick($event, rowIndex, colIndex)" |
|
|
|
|
@dblclick="makeEditable(row, columnObj)" |
|
|
|
|
@contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })" |
|
|
|
|
> |
|
|
|
|
<div v-if="!switchingTab" class="w-full h-full"> |
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="isVirtualCol(columnObj)" |
|
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
|
:column="columnObj" |
|
|
|
|
:active="activeCell.col === colIndex && activeCell.row === rowIndex" |
|
|
|
|
:row="row" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@navigate="onNavigate" |
|
|
|
|
@save="updateOrSaveRow(row, '', state)" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else |
|
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
|
:column="columnObj" |
|
|
|
|
:edit-enabled=" |
|
|
|
|
!!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex |
|
|
|
|
" |
|
|
|
|
:row-index="rowIndex" |
|
|
|
|
:active="activeCell.col === colIndex && activeCell.row === rowIndex" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@update:edit-enabled="editEnabled = $event" |
|
|
|
|
@save="updateOrSaveRow(row, columnObj.title, state)" |
|
|
|
|
@navigate="onNavigate" |
|
|
|
|
@cancel="editEnabled = false" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</SmartsheetTableDataCell> |
|
|
|
|
</tr> |
|
|
|
|
</template> |
|
|
|
|
</LazySmartsheetRow> |
|
|
|
|
|
|
|
|
|
<tr |
|
|
|
|
v-if="isAddingEmptyRowAllowed" |
|
|
|
|
v-e="['c:row:add:grid-bottom']" |
|
|
|
|
class="cursor-pointer" |
|
|
|
|
@mouseup.stop |
|
|
|
|
@click="addEmptyRow()" |
|
|
|
|
> |
|
|
|
|
<td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0"> |
|
|
|
|
<div class="px-2 w-full flex items-center text-gray-500"> |
|
|
|
|
<component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" /> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td :colspan="visibleColLength"></td> |
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else |
|
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
|
:column="columnObj" |
|
|
|
|
:edit-enabled=" |
|
|
|
|
!!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex |
|
|
|
|
" |
|
|
|
|
:row-index="rowIndex" |
|
|
|
|
:active="activeCell.col === colIndex && activeCell.row === rowIndex" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@update:edit-enabled="editEnabled = $event" |
|
|
|
|
@save="updateOrSaveRow(row, columnObj.title, state)" |
|
|
|
|
@navigate="onNavigate" |
|
|
|
|
@cancel="editEnabled = false" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</SmartsheetTableDataCell> |
|
|
|
|
</tr> |
|
|
|
|
</template> |
|
|
|
|
</LazySmartsheetRow> |
|
|
|
|
|
|
|
|
|
<tr |
|
|
|
|
v-if="isAddingEmptyRowAllowed" |
|
|
|
|
v-e="['c:row:add:grid-bottom']" |
|
|
|
|
class="cursor-pointer relative z-3" |
|
|
|
|
@mouseup.stop |
|
|
|
|
@click="addEmptyRow()" |
|
|
|
|
> |
|
|
|
|
<td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0"> |
|
|
|
|
<div class="px-2 w-full flex items-center text-gray-500"> |
|
|
|
|
<component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" /> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td :colspan="visibleColLength"></td> |
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
<!-- Fill Handle --> |
|
|
|
|
<div |
|
|
|
|
v-show="showFillHandle" |
|
|
|
|
ref="fillHandle" |
|
|
|
|
class="nc-fill-handle" |
|
|
|
|
:class=" |
|
|
|
|
(!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0) |
|
|
|
|
? 'z-3' |
|
|
|
|
: 'z-4' |
|
|
|
|
" |
|
|
|
|
:style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="!isLocked && hasEditPermission" #overlay> |
|
|
|
|
<a-menu class="shadow !rounded !py-0" @click="contextMenu = false"> |
|
|
|
@ -1243,28 +1241,6 @@ watch(
|
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
<div |
|
|
|
|
class="table-overlay absolute top-0 left-0 pointer-events-none overflow-hidden" |
|
|
|
|
:style="{ height: `${tableHeight}px`, width: `${tableWidth}px` }" |
|
|
|
|
> |
|
|
|
|
<!-- Fill Handle --> |
|
|
|
|
<div |
|
|
|
|
v-show=" |
|
|
|
|
!readOnly && |
|
|
|
|
!isLocked && |
|
|
|
|
!editEnabled && |
|
|
|
|
(!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) |
|
|
|
|
" |
|
|
|
|
ref="fillHandle" |
|
|
|
|
class="nc-fill-handle" |
|
|
|
|
:class=" |
|
|
|
|
(!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0) |
|
|
|
|
? 'z-3' |
|
|
|
|
: 'z-4' |
|
|
|
|
" |
|
|
|
|
:style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|