Browse Source

feat(gui-v2): add cell refs to smartsheet store

pull/3066/head
braks 2 years ago
parent
commit
00e592c496
  1. 23
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 10
      packages/nc-gui-v2/composables/useSmartsheetStore.ts

23
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -7,10 +7,14 @@ import {
inject, inject,
onMounted, onMounted,
provide, provide,
reactive,
ref,
useGridViewColumnWidth, useGridViewColumnWidth,
useProvideColumnCreateStore, useProvideColumnCreateStore,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
useTemplateRefsList,
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
@ -322,6 +340,7 @@ const onNavigate = (dir: NavigateDir) => {
</td> </td>
<td <td
v-for="(columnObj, colIndex) of fields" v-for="(columnObj, colIndex) of fields"
:ref="cellRefs.set"
:key="rowIndex + columnObj.title" :key="rowIndex + columnObj.title"
class="cell relative cursor-pointer nc-grid-cell" class="cell relative cursor-pointer nc-grid-cell"
:class="{ :class="{

10
packages/nc-gui-v2/composables/useSmartsheetStore.ts

@ -1,15 +1,14 @@
import { computed } from '@vue/reactivity'
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import type { TableType, ViewType } from 'nocodb-sdk' import type { TableType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { useNuxtApp } from '#app' import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
import { useProject } from '#imports'
import { useInjectionState } from '~/composables/useInjectionState'
const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => { const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const { sqlUi } = useProject() const { sqlUi } = useProject()
const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
// state // state
// todo: move to grid view store // todo: move to grid view store
const search = reactive({ const search = reactive({
@ -37,8 +36,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
return where return where
}) })
// actions
return { return {
view, view,
meta, meta,
@ -50,6 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
isForm, isForm,
isGrid, isGrid,
isGallery, isGallery,
cellRefs,
} }
}, 'smartsheet-store') }, 'smartsheet-store')

Loading…
Cancel
Save