mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1538 lines
46 KiB
1538 lines
46 KiB
<script lang="ts" setup> |
|
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 { |
|
ActiveViewInj, |
|
CellUrlDisableOverlayInj, |
|
ChangePageInj, |
|
FieldsInj, |
|
IsFormInj, |
|
IsGalleryInj, |
|
IsGridInj, |
|
IsLockedInj, |
|
MetaInj, |
|
NavigateDir, |
|
OpenNewRecordFormHookInj, |
|
PaginationDataInj, |
|
ReadonlyInj, |
|
ReloadRowDataHookInj, |
|
ReloadViewDataHookInj, |
|
RowHeightInj, |
|
SmartsheetStoreEvents, |
|
computed, |
|
createEventHook, |
|
enumColor, |
|
extractPkFromRow, |
|
iconMap, |
|
inject, |
|
isColumnRequiredAndNull, |
|
isDrawerOrModalExist, |
|
isMac, |
|
message, |
|
onBeforeUnmount, |
|
onClickOutside, |
|
onMounted, |
|
provide, |
|
ref, |
|
useEventListener, |
|
useGridViewColumnWidth, |
|
useI18n, |
|
useMetas, |
|
useMultiSelect, |
|
useNuxtApp, |
|
useRoles, |
|
useRoute, |
|
useSmartsheetStoreOrThrow, |
|
useUIPermission, |
|
useUndoRedo, |
|
useViewData, |
|
watch, |
|
} from '#imports' |
|
import type { Row } from '~/lib' |
|
|
|
const { t } = useI18n() |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const view = inject(ActiveViewInj, ref()) |
|
|
|
const { $e } = useNuxtApp() |
|
|
|
// keep a root fields variable and will get modified from |
|
// fields menu and get used in grid and gallery |
|
const fields = inject(FieldsInj, ref([])) |
|
const readOnly = inject(ReadonlyInj, ref(false)) |
|
const isLocked = inject(IsLockedInj, ref(false)) |
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook()) |
|
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()) |
|
|
|
const { hasRole } = useRoles() |
|
const { isUIAllowed } = useUIPermission() |
|
const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable')) |
|
|
|
const route = useRoute() |
|
const router = useRouter() |
|
|
|
const { addUndo, clone, defineViewScope } = useUndoRedo() |
|
|
|
// todo: get from parent ( inject or use prop ) |
|
const isView = false |
|
|
|
let editEnabled = $ref(false) |
|
|
|
const { appInfo } = useGlobal() |
|
|
|
const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow() |
|
|
|
const visibleColLength = $computed(() => fields.value?.length) |
|
|
|
const addColumnDropdown = ref(false) |
|
|
|
const _contextMenu = ref(false) |
|
const contextMenu = computed({ |
|
get: () => _contextMenu.value, |
|
set: (val) => { |
|
if (hasEditPermission) { |
|
_contextMenu.value = val |
|
} |
|
}, |
|
}) |
|
const contextMenuClosing = ref(false) |
|
|
|
const scrolling = ref(false) |
|
|
|
const bulkUpdateDlg = ref(false) |
|
|
|
const routeQuery = $computed(() => route.query as Record<string, string>) |
|
const contextMenuTarget = ref<{ row: number; col: number } | null>(null) |
|
const expandedFormDlg = ref(false) |
|
const expandedFormRow = ref<Row>() |
|
const expandedFormRowState = ref<Record<string, any>>() |
|
const gridWrapper = ref<HTMLElement>() |
|
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) |
|
|
|
const { |
|
isLoading, |
|
loadData, |
|
paginationData, |
|
formattedData: data, |
|
updateOrSaveRow, |
|
changePage, |
|
addEmptyRow: _addEmptyRow, |
|
deleteRow, |
|
deleteSelectedRows, |
|
selectedAllRecords, |
|
removeRowIfNew, |
|
navigateToSiblingRow, |
|
getExpandedRowIndex, |
|
deleteRangeOfRows, |
|
bulkUpdateRows, |
|
bulkUpdateView, |
|
} = useViewData(meta, view, xWhere) |
|
|
|
const { getMeta } = useMetas() |
|
|
|
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view) |
|
|
|
const getContainerScrollForElement = ( |
|
el: HTMLElement, |
|
container: HTMLElement, |
|
offset?: { |
|
top?: number |
|
bottom?: number |
|
left?: number |
|
right?: number |
|
}, |
|
) => { |
|
const childPos = el.getBoundingClientRect() |
|
const parentPos = container.getBoundingClientRect() |
|
|
|
// provide an extra offset to show the prev/next/up/bottom cell |
|
const extraOffset = 15 |
|
|
|
const numColWidth = container.querySelector('thead th:nth-child(1)')?.getBoundingClientRect().width ?? 0 |
|
const primaryColWidth = container.querySelector('thead th:nth-child(2)')?.getBoundingClientRect().width ?? 0 |
|
|
|
const stickyColsWidth = numColWidth + primaryColWidth |
|
|
|
const relativePos = { |
|
top: childPos.top - parentPos.top, |
|
right: childPos.right - parentPos.right, |
|
bottom: childPos.bottom - parentPos.bottom, |
|
left: childPos.left - parentPos.left - stickyColsWidth, |
|
} |
|
|
|
const scroll = { |
|
top: 0, |
|
left: 0, |
|
} |
|
|
|
/* |
|
* If the element is to the right of the container, scroll right (positive) |
|
* If the element is to the left of the container, scroll left (negative) |
|
*/ |
|
scroll.left = |
|
relativePos.right + (offset?.right || 0) > 0 |
|
? container.scrollLeft + relativePos.right + (offset?.right || 0) + extraOffset |
|
: relativePos.left - (offset?.left || 0) < 0 |
|
? container.scrollLeft + relativePos.left - (offset?.left || 0) - extraOffset |
|
: container.scrollLeft |
|
|
|
/* |
|
* If the element is below the container, scroll down (positive) |
|
* If the element is above the container, scroll up (negative) |
|
*/ |
|
scroll.top = |
|
relativePos.bottom + (offset?.bottom || 0) > 0 |
|
? container.scrollTop + relativePos.bottom + (offset?.bottom || 0) + extraOffset |
|
: relativePos.top - (offset?.top || 0) < 0 |
|
? container.scrollTop + relativePos.top - (offset?.top || 0) - extraOffset |
|
: container.scrollTop |
|
|
|
return scroll |
|
} |
|
|
|
const { |
|
isCellSelected, |
|
activeCell, |
|
handleMouseDown, |
|
handleMouseOver, |
|
handleCellClick, |
|
clearSelectedRange, |
|
copyValue, |
|
isCellActive, |
|
resetSelectedRange, |
|
makeActive, |
|
selectedRange, |
|
isCellInFillRange, |
|
isFillMode, |
|
} = useMultiSelect( |
|
meta, |
|
fields, |
|
data, |
|
$$(editEnabled), |
|
isPkAvail, |
|
contextMenu, |
|
clearCell, |
|
clearSelectedRangeOfCells, |
|
makeEditable, |
|
scrollToCell, |
|
(e: KeyboardEvent) => { |
|
// ignore navigating if picker(Date, Time, DateTime, Year) |
|
// or single/multi select options is open |
|
const activePickerOrDropdownEl = document.querySelector( |
|
'.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active', |
|
) |
|
if (activePickerOrDropdownEl) { |
|
e.preventDefault() |
|
return true |
|
} |
|
|
|
// skip keyboard event handling if there is a drawer / modal |
|
if (isDrawerOrModalExist()) { |
|
return true |
|
} |
|
|
|
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey |
|
const altOrOptionKey = e.altKey |
|
if (e.key === ' ') { |
|
if (isCellActive.value && !editEnabled && hasEditPermission) { |
|
e.preventDefault() |
|
const row = data.value[activeCell.row] |
|
expandForm(row) |
|
return true |
|
} |
|
} else if (e.key === 'Escape') { |
|
if (editEnabled) { |
|
editEnabled = false |
|
return true |
|
} |
|
} else if (e.key === 'Enter') { |
|
if (e.shiftKey) { |
|
// add a line break for types like LongText / JSON |
|
return true |
|
} |
|
if (editEnabled) { |
|
editEnabled = false |
|
return true |
|
} |
|
} |
|
|
|
if (cmdOrCtrl) { |
|
if (!isCellActive.value) return |
|
|
|
// cmdOrCtrl+shift handled in useMultiSelect |
|
if (e.shiftKey) return |
|
|
|
switch (e.key) { |
|
case 'ArrowUp': |
|
e.preventDefault() |
|
clearSelectedRange() |
|
activeCell.row = 0 |
|
activeCell.col = activeCell.col ?? 0 |
|
scrollToCell?.() |
|
editEnabled = false |
|
return true |
|
case 'ArrowDown': |
|
e.preventDefault() |
|
clearSelectedRange() |
|
activeCell.row = data.value.length - 1 |
|
activeCell.col = activeCell.col ?? 0 |
|
scrollToCell?.() |
|
editEnabled = false |
|
return true |
|
case 'ArrowRight': |
|
e.preventDefault() |
|
clearSelectedRange() |
|
activeCell.row = activeCell.row ?? 0 |
|
activeCell.col = fields.value?.length - 1 |
|
scrollToCell?.() |
|
editEnabled = false |
|
return true |
|
case 'ArrowLeft': |
|
e.preventDefault() |
|
clearSelectedRange() |
|
activeCell.row = activeCell.row ?? 0 |
|
activeCell.col = 0 |
|
scrollToCell?.() |
|
editEnabled = false |
|
return true |
|
} |
|
} |
|
|
|
if (altOrOptionKey) { |
|
switch (e.keyCode) { |
|
case 82: { |
|
// ALT + R |
|
if (isAddingEmptyRowAllowed) { |
|
$e('c:shortcut', { key: 'ALT + R' }) |
|
addEmptyRow() |
|
activeCell.row = data.value.length - 1 |
|
activeCell.col = 0 |
|
resetSelectedRange() |
|
nextTick(() => { |
|
;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({ |
|
behavior: 'smooth', |
|
}) |
|
}) |
|
} |
|
break |
|
} |
|
case 67: { |
|
// ALT + C |
|
if (isAddingColumnAllowed) { |
|
$e('c:shortcut', { key: 'ALT + C' }) |
|
addColumnDropdown.value = true |
|
} |
|
break |
|
} |
|
} |
|
} |
|
}, |
|
async (ctx: { row: number; col?: number; updatedColumnTitle?: string }) => { |
|
const rowObj = data.value[ctx.row] |
|
const columnObj = ctx.col !== undefined ? fields.value[ctx.col] : null |
|
|
|
if (!ctx.updatedColumnTitle && isVirtualCol(columnObj)) { |
|
return |
|
} |
|
|
|
// See DateTimePicker.vue for details |
|
data.value[ctx.row].rowMeta.isUpdatedFromCopyNPaste = { |
|
...data.value[ctx.row].rowMeta.isUpdatedFromCopyNPaste, |
|
[ctx.updatedColumnTitle || columnObj.title]: true, |
|
} |
|
|
|
// update/save cell value |
|
await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title) |
|
}, |
|
bulkUpdateRows, |
|
fillHandle, |
|
) |
|
|
|
function scrollToCell(row?: number | null, col?: number | null) { |
|
row = row ?? activeCell.row |
|
col = col ?? activeCell.col |
|
|
|
if (row !== null && col !== null) { |
|
// get active cell |
|
const rows = tableBodyEl.value?.querySelectorAll('tr') |
|
const cols = rows?.[row].querySelectorAll('td') |
|
const td = cols?.[col === 0 ? 0 : col + 1] |
|
|
|
if (!td || !gridWrapper.value) return |
|
|
|
const { height: headerHeight } = tableHeadEl.value!.getBoundingClientRect() |
|
const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 }) |
|
|
|
// if first column set left to 0 since it's sticky it will be visible and calculated value will be wrong |
|
// setting left to 0 will make it scroll to the left |
|
if (col === 0) { |
|
tdScroll.left = 0 |
|
} |
|
|
|
if (rows && row === rows.length - 2) { |
|
// if last row make 'Add New Row' visible |
|
gridWrapper.value.scrollTo({ |
|
top: gridWrapper.value.scrollHeight, |
|
left: |
|
cols && col === cols.length - 2 // if corner cell |
|
? gridWrapper.value.scrollWidth |
|
: tdScroll.left, |
|
behavior: 'smooth', |
|
}) |
|
return |
|
} |
|
|
|
if (cols && col === cols.length - 2) { |
|
// if last column make 'Add New Column' visible |
|
gridWrapper.value.scrollTo({ |
|
top: tdScroll.top, |
|
left: gridWrapper.value.scrollWidth, |
|
behavior: 'smooth', |
|
}) |
|
return |
|
} |
|
|
|
// scroll into the active cell |
|
gridWrapper.value.scrollTo({ |
|
top: tdScroll.top, |
|
left: tdScroll.left, |
|
behavior: 'smooth', |
|
}) |
|
} |
|
} |
|
|
|
const rowHeight = computed(() => { |
|
if ((view.value?.view as GridType)?.row_height !== undefined) { |
|
switch ((view.value?.view as GridType)?.row_height) { |
|
case 0: |
|
return 1 |
|
case 1: |
|
return 2 |
|
case 2: |
|
return 4 |
|
case 3: |
|
return 6 |
|
default: |
|
return 1 |
|
} |
|
} |
|
}) |
|
|
|
onMounted(loadGridViewColumns) |
|
|
|
provide(IsFormInj, ref(false)) |
|
|
|
provide(IsGalleryInj, ref(false)) |
|
|
|
provide(IsGridInj, ref(true)) |
|
|
|
provide(PaginationDataInj, paginationData) |
|
|
|
provide(ChangePageInj, changePage) |
|
|
|
provide(RowHeightInj, rowHeight) |
|
|
|
const disableUrlOverlay = ref(false) |
|
provide(CellUrlDisableOverlayInj, disableUrlOverlay) |
|
|
|
const showLoading = ref(true) |
|
|
|
const skipRowRemovalOnCancel = ref(false) |
|
|
|
const preloadColumn = ref<Partial<any>>() |
|
|
|
function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false) { |
|
const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[]) |
|
|
|
if (rowId) { |
|
router.push({ |
|
query: { |
|
...routeQuery, |
|
rowId, |
|
}, |
|
}) |
|
} else { |
|
expandedFormRow.value = row |
|
expandedFormRowState.value = state |
|
expandedFormDlg.value = true |
|
skipRowRemovalOnCancel.value = !fromToolbar |
|
} |
|
} |
|
|
|
const onresize = (colID: string, event: any) => { |
|
updateWidth(colID, event.detail) |
|
} |
|
|
|
const onXcResizing = (cn: string, event: any) => { |
|
resizingCol.value = cn |
|
resizingColWidth.value = event.detail |
|
} |
|
|
|
defineExpose({ |
|
loadData, |
|
openColumnCreate: (data) => { |
|
tableHeadEl.value?.querySelector('th:last-child')?.scrollIntoView({ behavior: 'smooth' }) |
|
setTimeout(() => { |
|
addColumnDropdown.value = true |
|
preloadColumn.value = data |
|
}, 500) |
|
}, |
|
}) |
|
|
|
// reset context menu target on hide |
|
watch(contextMenu, () => { |
|
if (!contextMenu.value) { |
|
contextMenuClosing.value = true |
|
contextMenuTarget.value = null |
|
} else { |
|
contextMenuClosing.value = false |
|
} |
|
}) |
|
|
|
const rowRefs = $ref<any[]>() |
|
|
|
async function clearCell(ctx: { row: number; col: number } | null, skipUpdate = false) { |
|
if ( |
|
!ctx || |
|
!hasEditPermission || |
|
(fields.value[ctx.col].uidt !== UITypes.LinkToAnotherRecord && isVirtualCol(fields.value[ctx.col])) |
|
) |
|
return |
|
|
|
const rowObj = data.value[ctx.row] |
|
const columnObj = fields.value[ctx.col] |
|
|
|
if (isVirtualCol(columnObj)) { |
|
addUndo({ |
|
undo: { |
|
fn: async (ctx: { row: number; col: number }, col: ColumnType, row: Row, pg: PaginatedType) => { |
|
if (paginationData.value.pageSize === pg.pageSize) { |
|
if (paginationData.value.page !== pg.page) { |
|
await changePage(pg.page!) |
|
} |
|
const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[]) |
|
const rowObj = data.value[ctx.row] |
|
const columnObj = fields.value[ctx.col] |
|
if ( |
|
columnObj.title && |
|
rowId === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) && |
|
columnObj.id === col.id |
|
) { |
|
rowObj.row[columnObj.title] = row.row[columnObj.title] |
|
await rowRefs[ctx.row]!.addLTARRef(rowObj.row[columnObj.title], columnObj) |
|
await rowRefs[ctx.row]!.syncLTARRefs(rowObj.row) |
|
activeCell.col = ctx.col |
|
activeCell.row = ctx.row |
|
scrollToCell?.() |
|
} else { |
|
throw new Error('Record could not be found') |
|
} |
|
} else { |
|
throw new Error('Page size changed') |
|
} |
|
}, |
|
args: [clone(ctx), clone(columnObj), clone(rowObj), clone(paginationData.value)], |
|
}, |
|
redo: { |
|
fn: async (ctx: { row: number; col: number }, col: ColumnType, row: Row, pg: PaginatedType) => { |
|
if (paginationData.value.pageSize === pg.pageSize) { |
|
if (paginationData.value.page !== pg.page) { |
|
await changePage(pg.page!) |
|
} |
|
const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[]) |
|
const rowObj = data.value[ctx.row] |
|
const columnObj = fields.value[ctx.col] |
|
if (rowId === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) && columnObj.id === col.id) { |
|
await rowRefs[ctx.row]!.clearLTARCell(columnObj) |
|
activeCell.col = ctx.col |
|
activeCell.row = ctx.row |
|
scrollToCell?.() |
|
} else { |
|
throw new Error('Record could not be found') |
|
} |
|
} else { |
|
throw new Error('Page size changed') |
|
} |
|
}, |
|
args: [clone(ctx), clone(columnObj), clone(rowObj), clone(paginationData.value)], |
|
}, |
|
scope: defineViewScope({ view: view.value }), |
|
}) |
|
await rowRefs[ctx.row]!.clearLTARCell(columnObj) |
|
return |
|
} |
|
|
|
// handle Checkbox and rating fields in a special way |
|
switch (columnObj.uidt) { |
|
case UITypes.Checkbox: |
|
rowObj.row[columnObj.title] = false |
|
break |
|
case UITypes.Rating: |
|
rowObj.row[columnObj.title] = 0 |
|
break |
|
default: |
|
rowObj.row[columnObj.title] = null |
|
break |
|
} |
|
|
|
if (!skipUpdate) { |
|
// update/save cell value |
|
await updateOrSaveRow(rowObj, columnObj.title) |
|
} |
|
} |
|
|
|
async function clearSelectedRangeOfCells() { |
|
if (!hasEditPermission) return |
|
|
|
const start = selectedRange.start |
|
const end = selectedRange.end |
|
|
|
const startRow = Math.min(start.row, end.row) |
|
const endRow = Math.max(start.row, end.row) |
|
const startCol = Math.min(start.col, end.col) |
|
const endCol = Math.max(start.col, end.col) |
|
|
|
const cols = fields.value.slice(startCol, endCol + 1) |
|
const rows = data.value.slice(startRow, endRow + 1) |
|
const props = [] |
|
|
|
for (const row of rows) { |
|
for (const col of cols) { |
|
if (!row || !col || !col.title) continue |
|
|
|
// TODO handle LinkToAnotherRecord |
|
if (isVirtualCol(col)) continue |
|
|
|
row.row[col.title] = null |
|
props.push(col.title) |
|
} |
|
} |
|
|
|
await bulkUpdateRows(rows, props) |
|
} |
|
|
|
function makeEditable(row: Row, col: ColumnType) { |
|
if (!hasEditPermission || editEnabled || isView || isLocked.value || readOnly.value || isSystemColumn(col)) { |
|
return |
|
} |
|
|
|
if (!isPkAvail.value && !row.rowMeta.new) { |
|
// Update not allowed for table which doesn't have primary Key |
|
message.info(t('msg.info.updateNotAllowedWithoutPK')) |
|
return |
|
} |
|
|
|
if (col.ai) { |
|
// Auto Increment field is not editable |
|
message.info(t('msg.info.autoIncFieldNotEditable')) |
|
return |
|
} |
|
|
|
if (col.pk && !row.rowMeta.new) { |
|
// Editing primary key not supported |
|
message.info(t('msg.info.editingPKnotSupported')) |
|
return |
|
} |
|
|
|
if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt as UITypes)) { |
|
return |
|
} |
|
|
|
return (editEnabled = true) |
|
} |
|
|
|
/** handle keypress events */ |
|
useEventListener(document, 'keyup', async (e: KeyboardEvent) => { |
|
if (e.key === 'Alt') { |
|
disableUrlOverlay.value = false |
|
} |
|
}) |
|
|
|
const smartTable = ref(null) |
|
|
|
/** On clicking outside of table reset active cell */ |
|
onClickOutside(tableBodyEl, (e) => { |
|
// do nothing if mousedown on the scrollbar (scrolling) |
|
if (scrolling.value) { |
|
return |
|
} |
|
|
|
// do nothing if context menu was open |
|
if (contextMenu.value) return |
|
|
|
if (activeCell.row === null || activeCell.col === null) return |
|
|
|
const activeCol = fields.value[activeCell.col] |
|
|
|
if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return |
|
|
|
// skip if fill mode is active |
|
if (isFillMode.value) return |
|
|
|
// ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year) |
|
// or single/multi select options |
|
const activePickerOrDropdownEl = document.querySelector( |
|
'.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active', |
|
) |
|
if ( |
|
e.target && |
|
activePickerOrDropdownEl && |
|
(activePickerOrDropdownEl === e.target || activePickerOrDropdownEl?.contains(e.target as Element)) |
|
) |
|
return |
|
|
|
// skip if drawer / modal is active |
|
if (isDrawerOrModalExist()) { |
|
return |
|
} |
|
|
|
clearSelectedRange() |
|
activeCell.row = null |
|
activeCell.col = null |
|
}) |
|
|
|
const onNavigate = (dir: NavigateDir) => { |
|
if (activeCell.row === null || activeCell.col === null) return |
|
|
|
editEnabled = false |
|
clearSelectedRange() |
|
|
|
switch (dir) { |
|
case NavigateDir.NEXT: |
|
if (activeCell.row < data.value.length - 1) { |
|
activeCell.row++ |
|
} else { |
|
addEmptyRow() |
|
activeCell.row++ |
|
} |
|
break |
|
case NavigateDir.PREV: |
|
if (activeCell.row > 0) { |
|
activeCell.row-- |
|
} |
|
break |
|
} |
|
nextTick(() => { |
|
scrollToCell() |
|
}) |
|
} |
|
|
|
const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) => { |
|
if (isSqlView.value) return |
|
e.preventDefault() |
|
if (target) { |
|
contextMenuTarget.value = target |
|
} |
|
} |
|
|
|
const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?: ViewType; data?: any } = {}) => { |
|
let index = -1 |
|
for (const currentRow of args.data || data.value) { |
|
index++ |
|
/** if new record save row and save the LTAR cells */ |
|
if (currentRow.rowMeta.new) { |
|
const syncLTARRefs = rowRefs?.[index]?.syncLTARRefs |
|
const savedRow = await updateOrSaveRow(currentRow, '', {}, args) |
|
await syncLTARRefs?.(savedRow, args) |
|
currentRow.rowMeta.changed = false |
|
continue |
|
} |
|
|
|
/** if existing row check updated cell and invoke update method */ |
|
if (currentRow.rowMeta.changed) { |
|
currentRow.rowMeta.changed = false |
|
for (const field of (args.metaValue || meta.value)?.columns ?? []) { |
|
// `url` would be enriched in attachment during listing |
|
// hence it would consider as a change while it is not necessary to update |
|
if (isVirtualCol(field) || field.uidt === UITypes.Attachment) continue |
|
if (field.title! in currentRow.row && currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) { |
|
await updateOrSaveRow(currentRow, field.title!, {}, args) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
async function reloadViewDataHandler(shouldShowLoading: boolean | void) { |
|
// save any unsaved data before reload |
|
await saveOrUpdateRecords() |
|
|
|
// set value if spinner should be hidden |
|
showLoading.value = !!shouldShowLoading |
|
await loadData() |
|
// reset to default (showing spinner on load) |
|
showLoading.value = true |
|
} |
|
|
|
async function openNewRecordHandler() { |
|
const newRow = addEmptyRow() |
|
expandForm(newRow, undefined, true) |
|
} |
|
|
|
reloadViewDataHook?.on(reloadViewDataHandler) |
|
openNewRecordFormHook?.on(openNewRecordHandler) |
|
|
|
onBeforeUnmount(async () => { |
|
/** save/update records before unmounting the component */ |
|
const viewMetaValue = view.value |
|
const dataValue = data.value |
|
if (viewMetaValue) { |
|
getMeta(viewMetaValue.fk_model_id, false, true).then((res) => { |
|
const metaValue = res |
|
if (!metaValue) return |
|
saveOrUpdateRecords({ |
|
metaValue, |
|
viewMetaValue, |
|
data: dataValue, |
|
}) |
|
}) |
|
} |
|
|
|
// reset hooks |
|
reloadViewDataHook?.off(reloadViewDataHandler) |
|
openNewRecordFormHook?.off(openNewRecordHandler) |
|
}) |
|
|
|
const expandedFormOnRowIdDlg = computed({ |
|
get() { |
|
return !!routeQuery.rowId |
|
}, |
|
set(val) { |
|
if (!val) |
|
router.push({ |
|
query: { |
|
...routeQuery, |
|
rowId: undefined, |
|
}, |
|
}) |
|
}, |
|
}) |
|
|
|
// reload table data reload hook as fallback to rowdatareload |
|
provide(ReloadRowDataHookInj, reloadViewDataHook) |
|
|
|
// trigger initial data load in grid |
|
// reloadViewDataHook.trigger() |
|
|
|
const switchingTab = ref(false) |
|
|
|
watch( |
|
view, |
|
async (next, old) => { |
|
try { |
|
if (next && next.id !== old?.id) { |
|
switchingTab.value = true |
|
// whenever tab changes or view changes save any unsaved data |
|
if (old?.id) { |
|
const oldMeta = await getMeta(old.fk_model_id!, false, true) |
|
if (oldMeta) { |
|
await saveOrUpdateRecords({ |
|
viewMetaValue: old, |
|
metaValue: oldMeta as TableType, |
|
data: data.value, |
|
}) |
|
} |
|
} |
|
await loadData() |
|
} |
|
} catch (e) { |
|
console.log(e) |
|
} finally { |
|
switchingTab.value = false |
|
} |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null) |
|
|
|
eventBus.on(async (event, payload) => { |
|
if (event === SmartsheetStoreEvents.FIELD_ADD) { |
|
columnOrder.value = payload |
|
addColumnDropdown.value = true |
|
} |
|
}) |
|
|
|
const closeAddColumnDropdown = (scrollToLastCol = false) => { |
|
columnOrder.value = null |
|
addColumnDropdown.value = false |
|
if (scrollToLastCol) { |
|
setTimeout(() => { |
|
const lastAddNewRowHeader = tableHeadEl.value?.querySelector('th:last-child') |
|
if (lastAddNewRowHeader) { |
|
lastAddNewRowHeader.scrollIntoView({ behavior: 'smooth' }) |
|
} |
|
}, 200) |
|
} |
|
} |
|
|
|
const confirmDeleteRow = (row: number) => { |
|
try { |
|
deleteRow(row) |
|
|
|
if (selectedRange.isRowInRange(row)) { |
|
clearSelectedRange() |
|
} |
|
|
|
if (activeCell.row === row) { |
|
activeCell.row = null |
|
activeCell.col = null |
|
} |
|
} catch (e: any) { |
|
message.error(e.message) |
|
} |
|
} |
|
|
|
const deleteSelectedRangeOfRows = () => { |
|
deleteRangeOfRows(selectedRange).then(() => { |
|
clearSelectedRange() |
|
activeCell.row = null |
|
activeCell.col = null |
|
}) |
|
} |
|
|
|
function addEmptyRow(row?: number) { |
|
const rowObj = _addEmptyRow(row) |
|
nextTick().then(() => { |
|
clearSelectedRange() |
|
makeActive(row ?? data.value.length - 1, 0) |
|
selectedRange.startRange({ row: activeCell.row!, col: activeCell.col! }) |
|
scrollToCell?.() |
|
}) |
|
return rowObj |
|
} |
|
|
|
const fillHandleTop = ref() |
|
const fillHandleLeft = ref() |
|
|
|
const cellRefs = ref<{ el: HTMLElement }[]>([]) |
|
|
|
const showFillHandle = computed( |
|
() => |
|
!readOnly.value && |
|
!isLocked.value && |
|
!editEnabled && |
|
(!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) && |
|
!data.value[(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) ?? -1]?.rowMeta?.new, |
|
) |
|
|
|
const refreshFillHandle = () => { |
|
const cellRef = cellRefs.value.find( |
|
(cell) => |
|
cell.el.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) && |
|
cell.el.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col), |
|
) |
|
if (cellRef) { |
|
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 |
|
} |
|
} |
|
|
|
const addRowExpandOnClose = (row: Row) => { |
|
if (!skipRowRemovalOnCancel.value) { |
|
const removed = removeRowIfNew(row) |
|
|
|
if (removed) { |
|
clearSelectedRange() |
|
|
|
activeCell.row = null |
|
activeCell.col = null |
|
} |
|
} |
|
} |
|
|
|
watch( |
|
[() => selectedRange.end.row, () => selectedRange.end.col, () => activeCell.row, () => activeCell.col], |
|
([sr, sc, ar, ac], [osr, osc, oar, oac]) => { |
|
if (sr !== osr || sc !== osc || ar !== oar || ac !== oac) { |
|
refreshFillHandle() |
|
} |
|
}, |
|
) |
|
|
|
useEventListener(gridWrapper, 'scroll', () => { |
|
refreshFillHandle() |
|
}) |
|
|
|
useEventListener(document, 'mousedown', (e) => { |
|
if (e.offsetX > (e.target as HTMLElement)?.clientWidth || e.offsetY > (e.target as HTMLElement)?.clientHeight) { |
|
scrolling.value = true |
|
} |
|
}) |
|
|
|
useEventListener(document, 'mouseup', () => { |
|
// wait for click event to finish before setting scrolling to false |
|
setTimeout(() => { |
|
scrolling.value = false |
|
}, 100) |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="relative flex flex-col h-full min-h-0 w-full" data-testid="nc-grid-wrapper"> |
|
<general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15" data-testid="grid-load-spinner"> |
|
<div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000"> |
|
<a-spin size="large" /> |
|
</div> |
|
</general-overlay> |
|
|
|
<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" |
|
> |
|
<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" /> |
|
</div> |
|
|
|
<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)" |
|
> |
|
{{ 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> |
|
</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), |
|
'active-cell': |
|
hasEditPermission && |
|
((activeCell.row === rowIndex && activeCell.col === colIndex) || |
|
(selectedRange._start?.row === rowIndex && selectedRange._start?.col === 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 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"> |
|
<a-menu-item |
|
v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())" |
|
@click="confirmDeleteRow(contextMenuTarget.row)" |
|
> |
|
<div v-e="['a:row:delete']" class="nc-project-menu-item"> |
|
<!-- Delete Row --> |
|
{{ $t('activity.deleteRow') }} |
|
</div> |
|
</a-menu-item> |
|
|
|
<a-menu-item v-else-if="contextMenuTarget" @click="deleteSelectedRangeOfRows"> |
|
<div v-e="['a:row:delete']" class="nc-project-menu-item"> |
|
<!-- Delete Rows --> |
|
Delete Rows |
|
</div> |
|
</a-menu-item> |
|
|
|
<a-menu-item |
|
v-if="appInfo.ee && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)" |
|
@click="bulkUpdateDlg = true" |
|
> |
|
<div v-e="['a:row:update-bulk']" class="nc-project-menu-item"> |
|
<component :is="iconMap.edit" /> |
|
<!-- TODO i18n --> |
|
Update Selected Rows |
|
</div> |
|
</a-menu-item> |
|
|
|
<a-menu-item |
|
v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)" |
|
@click="deleteSelectedRows" |
|
> |
|
<div v-e="['a:row:delete-bulk']" class="nc-project-menu-item text-red-500"> |
|
<component :is="iconMap.delete" /> |
|
<!-- Delete Selected Rows --> |
|
{{ $t('activity.deleteSelectedRow') }} |
|
</div> |
|
</a-menu-item> |
|
|
|
<!-- Clear cell --> |
|
<a-menu-item |
|
v-if=" |
|
contextMenuTarget && |
|
selectedRange.isSingleCell() && |
|
(fields[contextMenuTarget.col].uidt === UITypes.LinkToAnotherRecord || |
|
!isVirtualCol(fields[contextMenuTarget.col])) |
|
" |
|
@click="clearCell(contextMenuTarget)" |
|
> |
|
<div v-e="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div> |
|
</a-menu-item> |
|
|
|
<!-- Clear cell --> |
|
<a-menu-item v-else-if="contextMenuTarget" @click="clearSelectedRangeOfCells()"> |
|
<div v-e="['a:row:clear-range']" class="nc-project-menu-item">Clear Cells</div> |
|
</a-menu-item> |
|
|
|
<a-menu-item v-if="contextMenuTarget && selectedRange.isSingleCell()" @click="addEmptyRow(contextMenuTarget.row + 1)"> |
|
<div v-e="['a:row:insert']" class="nc-project-menu-item"> |
|
<!-- Insert New Row --> |
|
{{ $t('activity.insertRow') }} |
|
</div> |
|
</a-menu-item> |
|
|
|
<a-menu-item v-if="contextMenuTarget" data-testid="context-menu-item-copy" @click="copyValue(contextMenuTarget)"> |
|
<div v-e="['a:row:copy']" class="nc-project-menu-item"> |
|
<!-- Copy --> |
|
{{ $t('general.copy') }} |
|
</div> |
|
</a-menu-item> |
|
</a-menu> |
|
</template> |
|
</a-dropdown> |
|
</div> |
|
|
|
<div |
|
v-if="isAddingEmptyRowAllowed" |
|
class="absolute bottom-1px left-2 z-4" |
|
data-testid="nc-grid-add-new-row" |
|
@click="addEmptyRow()" |
|
> |
|
<a-button v-e="['c:row:add:grid-bottom', { footer: true }]" class="!rounded-xl" size="small"> |
|
<div class="flex items-center"> |
|
<component :is="iconMap.plus" class="text-pint-500 text-xs" /> |
|
<span class="ml-1"> |
|
{{ $t('activity.addRow') }} |
|
</span> |
|
</div> |
|
</a-button> |
|
</div> |
|
|
|
<LazySmartsheetPagination align-count-on-right> </LazySmartsheetPagination> |
|
<Suspense> |
|
<LazySmartsheetExpandedForm |
|
v-if="expandedFormRow && expandedFormDlg" |
|
v-model="expandedFormDlg" |
|
:row="expandedFormRow" |
|
:state="expandedFormRowState" |
|
:meta="meta" |
|
:view="view" |
|
@update:model-value="addRowExpandOnClose(expandedFormRow)" |
|
/> |
|
</Suspense> |
|
|
|
<Suspense> |
|
<LazySmartsheetExpandedForm |
|
v-if="expandedFormOnRowIdDlg" |
|
:key="routeQuery.rowId" |
|
v-model="expandedFormOnRowIdDlg" |
|
:row="{ row: {}, oldRow: {}, rowMeta: {} }" |
|
:meta="meta" |
|
:row-id="routeQuery.rowId" |
|
:view="view" |
|
show-next-prev-icons |
|
:first-row="getExpandedRowIndex() === 0" |
|
:last-row="getExpandedRowIndex() === data.length - 1" |
|
@next="navigateToSiblingRow(NavigateDir.NEXT)" |
|
@prev="navigateToSiblingRow(NavigateDir.PREV)" |
|
/> |
|
</Suspense> |
|
|
|
<Suspense> |
|
<LazyDlgBulkUpdate |
|
v-if="bulkUpdateDlg" |
|
v-model="bulkUpdateDlg" |
|
:meta="meta" |
|
:view="view" |
|
:bulk-update-rows="bulkUpdateRows" |
|
:bulk-update-view="bulkUpdateView" |
|
:selected-all-records="selectedAllRecords" |
|
:rows="data.filter((r) => r.rowMeta.selected)" |
|
/> |
|
</Suspense> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.nc-grid-wrapper { |
|
@apply h-full w-full overflow-auto; |
|
|
|
td, |
|
th { |
|
@apply border-gray-200 border-solid border-b border-r; |
|
min-height: 41px !important; |
|
height: 41px !important; |
|
position: relative; |
|
} |
|
|
|
th { |
|
@apply bg-gray-100; |
|
} |
|
|
|
td:not(:first-child) > div { |
|
overflow: hidden; |
|
@apply flex px-1 h-auto; |
|
} |
|
|
|
table { |
|
border-collapse: separate; |
|
border-spacing: 0; |
|
} |
|
|
|
td { |
|
text-overflow: ellipsis; |
|
} |
|
|
|
td.active::after { |
|
content: ''; |
|
position: absolute; |
|
z-index: 3; |
|
height: calc(100% + 2px); |
|
width: calc(100% + 2px); |
|
left: -1px; |
|
top: -1px; |
|
pointer-events: none; |
|
} |
|
|
|
// todo: replace with css variable |
|
td.active::after { |
|
@apply text-primary border-current bg-primary bg-opacity-5; |
|
} |
|
|
|
td.active-cell::after { |
|
@apply border-1 border-solid text-primary border-current bg-primary bg-opacity-5; |
|
} |
|
|
|
td.filling::after { |
|
content: ''; |
|
position: absolute; |
|
z-index: 3; |
|
height: calc(100% + 2px); |
|
width: calc(100% + 2px); |
|
left: -1px; |
|
top: -1px; |
|
pointer-events: none; |
|
} |
|
|
|
// todo: replace with css variable |
|
td.filling::after { |
|
@apply border-1 border-dashed text-primary border-current bg-gray-100 bg-opacity-50; |
|
} |
|
|
|
//td.active::before { |
|
// content: ''; |
|
// z-index:4; |
|
// @apply absolute !w-[10px] !h-[10px] !right-[-5px] !bottom-[-5px] bg-primary; |
|
//} |
|
|
|
thead th:nth-child(1) { |
|
position: sticky !important; |
|
left: 0; |
|
z-index: 5; |
|
} |
|
|
|
tbody td:nth-child(1) { |
|
position: sticky !important; |
|
left: 0; |
|
z-index: 4; |
|
background: white; |
|
} |
|
|
|
thead th:nth-child(2) { |
|
position: sticky !important; |
|
left: 85px; |
|
z-index: 5; |
|
@apply border-r-2 border-r-gray-300; |
|
} |
|
|
|
tbody td:nth-child(2) { |
|
position: sticky !important; |
|
left: 85px; |
|
z-index: 4; |
|
background: white; |
|
@apply border-r-2 border-r-gray-300; |
|
} |
|
} |
|
|
|
:deep { |
|
.resizer:hover, |
|
.resizer:active, |
|
.resizer:focus { |
|
// todo: replace with primary color |
|
@apply bg-blue-500/50; |
|
cursor: col-resize; |
|
} |
|
} |
|
|
|
.nc-grid-row { |
|
.nc-row-expand-and-checkbox { |
|
@apply w-full items-center justify-between; |
|
} |
|
|
|
.nc-expand { |
|
&:not(.nc-comment) { |
|
@apply hidden; |
|
} |
|
|
|
&.nc-comment { |
|
display: flex; |
|
} |
|
} |
|
|
|
&:hover { |
|
.nc-row-no.toggle { |
|
@apply hidden; |
|
} |
|
|
|
.nc-expand { |
|
@apply flex; |
|
} |
|
|
|
.nc-row-expand-and-checkbox { |
|
@apply flex; |
|
} |
|
} |
|
} |
|
|
|
.nc-grid-header { |
|
position: sticky; |
|
top: -1px; |
|
|
|
@apply z-10 bg-gray-100; |
|
|
|
&:hover { |
|
.nc-no-label { |
|
@apply hidden; |
|
} |
|
|
|
.nc-check-all { |
|
@apply flex; |
|
} |
|
} |
|
} |
|
|
|
tbody tr:hover { |
|
@apply bg-gray-100 bg-opacity-50; |
|
} |
|
|
|
.nc-required-cell { |
|
box-shadow: inset 0 0 2px #f00; |
|
} |
|
|
|
.nc-fill-handle { |
|
@apply w-[6px] h-[6px] absolute rounded-full bg-red-500 !pointer-events-auto mt-[-4px] ml-[-4px]; |
|
} |
|
|
|
.nc-fill-handle:hover, |
|
.nc-fill-handle:active, |
|
.nc-fill-handle:focus { |
|
@apply w-[8px] h-[8px] mt-[-5px] ml-[-5px]; |
|
} |
|
</style>
|
|
|