From ee8330ab03d3fd99d5c0a0a9ae1e46d71b5e6fd9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 10 Aug 2022 10:42:09 +0200 Subject: [PATCH 1/4] chore(gui-v2): remove `group` class from `tr` --- packages/nc-gui-v2/components/smartsheet/Grid.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue index 1f7e48bed6..9b225dbade 100644 --- a/packages/nc-gui-v2/components/smartsheet/Grid.vue +++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue @@ -304,7 +304,7 @@ const onNavigate = (dir: NavigateDir) => { - +
{{ rowIndex + 1 }}
From d3be38d26d4ac22abc2b8e687152d26b62470f74 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 10 Aug 2022 10:47:40 +0200 Subject: [PATCH 2/4] chore(gui-v2): use overflow-auto --- packages/nc-gui-v2/components/cell/attachment/index.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue index 3390e9dc57..dc54d4ce9c 100644 --- a/packages/nc-gui-v2/components/cell/attachment/index.vue +++ b/packages/nc-gui-v2/components/cell/attachment/index.vue @@ -57,6 +57,7 @@ onKeyDown('Escape', () => { onMounted(() => { if (typeof document !== 'undefined') { dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement + console.log(dropZoneRef.value) } }) @@ -99,7 +100,7 @@ onMounted(() => {
Date: Wed, 10 Aug 2022 13:30:49 +0200 Subject: [PATCH 3/4] feat(gui-v2): add cell refs to smartsheet store --- .../nc-gui-v2/components/smartsheet/Grid.vue | 23 +++++++++++++++++-- .../composables/useSmartsheetStore.ts | 10 ++++---- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue index 9b225dbade..7fe40b93db 100644 --- a/packages/nc-gui-v2/components/smartsheet/Grid.vue +++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue @@ -7,10 +7,14 @@ import { inject, onMounted, provide, + reactive, + ref, useGridViewColumnWidth, useProvideColumnCreateStore, useSmartsheetStoreOrThrow, + useTemplateRefsList, useViewData, + watch, } from '#imports' import type { Row } from '~/composables' import { @@ -27,20 +31,32 @@ import { import { NavigateDir } from '~/lib' const meta = inject(MetaInj) + const view = inject(ActiveViewInj) + // 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 isLocked = inject(IsLockedInj, false) + +const reloadViewDataHook = inject(ReloadViewDataHookInj) + // todo: get from parent ( inject or use prop ) const isPublicView = false + const isView = false const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null }) + let editEnabled = $ref(false) -const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow() + +const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow() + const addColumnDropdown = ref(false) + const contextMenu = ref(false) + const contextMenuTarget = ref(false) const visibleColLength = $computed(() => fields.value?.length) @@ -56,7 +72,9 @@ const { deleteSelectedRows, selectedAllRecords, } = useViewData(meta, view as any, xWhere) + const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any) + onMounted(loadGridViewColumns) provide(IsFormInj, false) @@ -64,7 +82,6 @@ provide(IsGridInj, true) provide(PaginationDataInj, paginationData) provide(ChangePageInj, changePage) -const reloadViewDataHook = inject(ReloadViewDataHookInj) reloadViewDataHook?.on(() => { loadData() }) @@ -87,6 +104,7 @@ watch( const onresize = (colID: string, event: any) => { updateWidth(colID, event.detail) } + const onXcResizing = (cn: string, event: any) => { resizingCol.value = cn resizingColWidth.value = event.detail @@ -322,6 +340,7 @@ const onNavigate = (dir: NavigateDir) => { import { onKeyDown } from '@vueuse/core' import { useProvideAttachmentCell } from './utils' -import Modal from './Modal.vue' import { useSortable } from './sort' +import Modal from './Modal.vue' import Carousel from './Carousel.vue' -import { onMounted, ref, useDropZone, watch } from '#imports' +import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports' import { isImage, openLink } from '~/utils' interface Props { @@ -20,16 +20,18 @@ const { modelValue, rowIndex } = defineProps() const emits = defineEmits() -const dropZoneRef = ref() - const sortableRef = ref() +const { cellRefs } = useSmartsheetStoreOrThrow()! + const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } = useProvideAttachmentCell(updateModelValue) +const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`)) + const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly) -const { isOverDropZone } = useDropZone(dropZoneRef, onDrop) +const { isOverDropZone } = useDropZone(currentCellRef, onDrop) /** on new value, reparse our stored attachments */ watch( @@ -52,25 +54,17 @@ onKeyDown('Escape', () => { modalVisible.value = false isOverDropZone.value = false }) - -/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */ -onMounted(() => { - if (typeof document !== 'undefined') { - dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement - console.log(dropZoneRef.value) - } -})