|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { onClickOutside, useEventListener } from '@vueuse/core' |
|
|
|
import { onClickOutside, useEventListener } from '@vueuse/core' |
|
|
|
import type { ColumnType } from 'nocodb-sdk' |
|
|
|
import type { ColumnType } from 'nocodb-sdk' |
|
|
|
import { isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { UITypes, isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import { |
|
|
|
import { |
|
|
|
inject, |
|
|
|
inject, |
|
|
|
@ -228,6 +228,12 @@ useEventListener(document, 'keydown', onKeyDown) |
|
|
|
/** 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, () => { |
|
|
|
|
|
|
|
if (selected.col === null) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const activeCol = fields.value[selected.col] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return |
|
|
|
|
|
|
|
|
|
|
|
selected.row = null |
|
|
|
selected.row = null |
|
|
|
selected.col = null |
|
|
|
selected.col = null |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -255,7 +261,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> |
|
|
|
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> |
|
|
|
<table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true"> |
|
|
|
<table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true"> |
|
|
|
<thead> |
|
|
|
<thead> |
|
|
|
<tr class="group"> |
|
|
|
<tr> |
|
|
|
<th> |
|
|
|
<th> |
|
|
|
<div class="flex align-center w-[80px]"> |
|
|
|
<div class="flex align-center w-[80px]"> |
|
|
|
<div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div> |
|
|
|
<div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div> |
|
|
|
@ -264,6 +270,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
class="group-hover:flex w-full align-center" |
|
|
|
class="group-hover:flex w-full align-center" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-checkbox v-model:checked="selectedAllRecords" /> |
|
|
|
<a-checkbox v-model:checked="selectedAllRecords" /> |
|
|
|
|
|
|
|
|
|
|
|
<span class="flex-1" /> |
|
|
|
<span class="flex-1" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -279,6 +286,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
@xcresized="resizingCol = null" |
|
|
|
@xcresized="resizingCol = null" |
|
|
|
> |
|
|
|
> |
|
|
|
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> |
|
|
|
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> |
|
|
|
|
|
|
|
|
|
|
|
<SmartsheetHeaderCell v-else :column="col" /> |
|
|
|
<SmartsheetHeaderCell v-else :column="col" /> |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" --> |
|
|
|
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" --> |
|
|
|
@ -287,6 +295,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
<div class="h-full w-[60px] flex align-center justify-center"> |
|
|
|
<div class="h-full w-[60px] flex align-center justify-center"> |
|
|
|
<MdiPlus class="text-sm" /> |
|
|
|
<MdiPlus class="text-sm" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
<template #overlay> |
|
|
|
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" /> |
|
|
|
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -295,7 +304,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row"> |
|
|
|
<tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group"> |
|
|
|
<td key="row-index" class="caption nc-grid-cell group"> |
|
|
|
<td key="row-index" class="caption nc-grid-cell group"> |
|
|
|
<div class="flex items-center w-[80px]"> |
|
|
|
<div class="flex items-center w-[80px]"> |
|
|
|
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div> |
|
|
|
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div> |
|
|
|
@ -304,6 +313,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
class="group-hover:flex w-full items-center justify-between p-1" |
|
|
|
class="group-hover:flex w-full items-center justify-between p-1" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-checkbox v-model:checked="row.rowMeta.selected" /> |
|
|
|
<a-checkbox v-model:checked="row.rowMeta.selected" /> |
|
|
|
|
|
|
|
<span class="flex-1" /> |
|
|
|
<div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"> |
|
|
|
<div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"> |
|
|
|
<MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" /> |
|
|
|
<MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -313,10 +323,11 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
<td |
|
|
|
<td |
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
:key="rowIndex + columnObj.title" |
|
|
|
:key="rowIndex + columnObj.title" |
|
|
|
class="cell pointer nc-grid-cell" |
|
|
|
class="cell relative cursor-pointer nc-grid-cell" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex, |
|
|
|
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex, |
|
|
|
}" |
|
|
|
}" |
|
|
|
|
|
|
|
: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)" |
|
|
|
@ -338,6 +349,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
v-model="row.row[columnObj.title]" |
|
|
|
:column="columnObj" |
|
|
|
:column="columnObj" |
|
|
|
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex" |
|
|
|
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex" |
|
|
|
|
|
|
|
:row-index="rowIndex" |
|
|
|
@update:edit-enabled="editEnabled = false" |
|
|
|
@update:edit-enabled="editEnabled = false" |
|
|
|
@save="updateOrSaveRow(row, columnObj.title)" |
|
|
|
@save="updateOrSaveRow(row, columnObj.title)" |
|
|
|
@navigate="onNavigate" |
|
|
|
@navigate="onNavigate" |
|
|
|
@ -366,14 +378,18 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
</tbody> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
<template #overlay> |
|
|
|
<template #overlay> |
|
|
|
<div class="bg-white shadow" @click="contextMenu = false"> |
|
|
|
<a-menu class="bg-white shadow" @click="contextMenu = false"> |
|
|
|
<div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div> |
|
|
|
<a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)" |
|
|
|
<div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div> |
|
|
|
><span class="text-xs">Delete row</span></a-menu-item |
|
|
|
<div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div> |
|
|
|
> |
|
|
|
<div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)"> |
|
|
|
<a-menu-item @click="deleteSelectedRows"><span class="text-xs">Delete all selected rows</span></a-menu-item> |
|
|
|
Insert new row |
|
|
|
<a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)" |
|
|
|
</div> |
|
|
|
><span class="text-xs">Clear cell</span> |
|
|
|
</div> |
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
<a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)"> |
|
|
|
|
|
|
|
<span class="text-xs">Insert new row</span> |
|
|
|
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
</a-menu> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-dropdown> |
|
|
|
</a-dropdown> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
Wing-Kam Wong
2 years ago