|
|
@ -1,16 +1,20 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { onClickOutside, useEventListener } from '@vueuse/core' |
|
|
|
|
|
|
|
import type { ColumnType } from 'nocodb-sdk' |
|
|
|
import type { ColumnType } from 'nocodb-sdk' |
|
|
|
import { UITypes, 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, |
|
|
|
|
|
|
|
onClickOutside, |
|
|
|
onMounted, |
|
|
|
onMounted, |
|
|
|
provide, |
|
|
|
provide, |
|
|
|
|
|
|
|
reactive, |
|
|
|
|
|
|
|
ref, |
|
|
|
|
|
|
|
useEventListener, |
|
|
|
useGridViewColumnWidth, |
|
|
|
useGridViewColumnWidth, |
|
|
|
useProvideColumnCreateStore, |
|
|
|
useProvideColumnCreateStore, |
|
|
|
useSmartsheetStoreOrThrow, |
|
|
|
useSmartsheetStoreOrThrow, |
|
|
|
useViewData, |
|
|
|
useViewData, |
|
|
|
|
|
|
|
watch, |
|
|
|
} from '#imports' |
|
|
|
} from '#imports' |
|
|
|
import type { Row } from '~/composables' |
|
|
|
import type { Row } from '~/composables' |
|
|
|
import { |
|
|
|
import { |
|
|
@ -27,20 +31,32 @@ import { |
|
|
|
import { NavigateDir } from '~/lib' |
|
|
|
import { NavigateDir } from '~/lib' |
|
|
|
|
|
|
|
|
|
|
|
const meta = inject(MetaInj) |
|
|
|
const meta = inject(MetaInj) |
|
|
|
|
|
|
|
|
|
|
|
const view = inject(ActiveViewInj) |
|
|
|
const view = inject(ActiveViewInj) |
|
|
|
|
|
|
|
|
|
|
|
// keep a root fields variable and will get modified from |
|
|
|
// keep a root fields variable and will get modified from |
|
|
|
// fields menu and get used in grid and gallery |
|
|
|
// fields menu and get used in grid and gallery |
|
|
|
const fields = inject(FieldsInj, ref([])) |
|
|
|
const fields = inject(FieldsInj, ref([])) |
|
|
|
|
|
|
|
|
|
|
|
const isLocked = inject(IsLockedInj, false) |
|
|
|
const isLocked = inject(IsLockedInj, false) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj) |
|
|
|
|
|
|
|
|
|
|
|
// todo: get from parent ( inject or use prop ) |
|
|
|
// todo: get from parent ( inject or use prop ) |
|
|
|
const isPublicView = false |
|
|
|
const isPublicView = false |
|
|
|
|
|
|
|
|
|
|
|
const isView = false |
|
|
|
const isView = false |
|
|
|
|
|
|
|
|
|
|
|
const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null }) |
|
|
|
const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null }) |
|
|
|
|
|
|
|
|
|
|
|
let editEnabled = $ref(false) |
|
|
|
let editEnabled = $ref(false) |
|
|
|
const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow() |
|
|
|
|
|
|
|
|
|
|
|
const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow() |
|
|
|
|
|
|
|
|
|
|
|
const addColumnDropdown = ref(false) |
|
|
|
const addColumnDropdown = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const contextMenu = ref(false) |
|
|
|
const contextMenu = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const contextMenuTarget = ref(false) |
|
|
|
const contextMenuTarget = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const visibleColLength = $computed(() => fields.value?.length) |
|
|
|
const visibleColLength = $computed(() => fields.value?.length) |
|
|
@ -56,7 +72,9 @@ const { |
|
|
|
deleteSelectedRows, |
|
|
|
deleteSelectedRows, |
|
|
|
selectedAllRecords, |
|
|
|
selectedAllRecords, |
|
|
|
} = useViewData(meta, view as any, xWhere) |
|
|
|
} = useViewData(meta, view as any, xWhere) |
|
|
|
|
|
|
|
|
|
|
|
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any) |
|
|
|
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any) |
|
|
|
|
|
|
|
|
|
|
|
onMounted(loadGridViewColumns) |
|
|
|
onMounted(loadGridViewColumns) |
|
|
|
|
|
|
|
|
|
|
|
provide(IsFormInj, false) |
|
|
|
provide(IsFormInj, false) |
|
|
@ -64,7 +82,6 @@ provide(IsGridInj, true) |
|
|
|
provide(PaginationDataInj, paginationData) |
|
|
|
provide(PaginationDataInj, paginationData) |
|
|
|
provide(ChangePageInj, changePage) |
|
|
|
provide(ChangePageInj, changePage) |
|
|
|
|
|
|
|
|
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj) |
|
|
|
|
|
|
|
reloadViewDataHook?.on(() => { |
|
|
|
reloadViewDataHook?.on(() => { |
|
|
|
loadData() |
|
|
|
loadData() |
|
|
|
}) |
|
|
|
}) |
|
|
@ -87,6 +104,7 @@ watch( |
|
|
|
const onresize = (colID: string, event: any) => { |
|
|
|
const onresize = (colID: string, event: any) => { |
|
|
|
updateWidth(colID, event.detail) |
|
|
|
updateWidth(colID, event.detail) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onXcResizing = (cn: string, event: any) => { |
|
|
|
const onXcResizing = (cn: string, event: any) => { |
|
|
|
resizingCol.value = cn |
|
|
|
resizingCol.value = cn |
|
|
|
resizingColWidth.value = event.detail |
|
|
|
resizingColWidth.value = event.detail |
|
|
@ -304,7 +322,7 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group"> |
|
|
|
<tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row"> |
|
|
|
<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> |
|
|
@ -322,7 +340,8 @@ const onNavigate = (dir: NavigateDir) => { |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
<td |
|
|
|
<td |
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
v-for="(columnObj, colIndex) of fields" |
|
|
|
:key="rowIndex + columnObj.title" |
|
|
|
:ref="cellRefs.set" |
|
|
|
|
|
|
|
:key="columnObj.id" |
|
|
|
class="cell relative cursor-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, |
|
|
|