Browse Source

Merge pull request #6610 from nocodb/nc-fix/column-resize

fix: column resize
nc-fix/redirect-after-signin
mertmit 1 year ago committed by GitHub
parent
commit
8621e251bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 24
      packages/nc-gui/components/smartsheet/grid/Table.vue
  2. 32
      packages/nc-gui/composables/useGridViewColumn.ts
  3. 1
      packages/nc-gui/plugins/resizeDirective.ts

24
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -885,7 +885,7 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
} }
// #Grid Resize // #Grid Resize
const { updateGridViewColumn, resizingColWidth, resizingCol } = useGridViewColumnOrThrow() const { updateGridViewColumn, gridViewCols, resizingColOldWith } = useGridViewColumnOrThrow()
const onresize = (colID: string | undefined, event: any) => { const onresize = (colID: string | undefined, event: any) => {
if (!colID) return if (!colID) return
@ -894,8 +894,12 @@ const onresize = (colID: string | undefined, event: any) => {
const onXcResizing = (cn: string | undefined, event: any) => { const onXcResizing = (cn: string | undefined, event: any) => {
if (!cn) return if (!cn) return
resizingCol.value = cn gridViewCols.value[cn].width = `${event.detail}`
resizingColWidth.value = event.detail }
const onXcStartResizing = (cn: string | undefined, event: any) => {
if (!cn) return
resizingColOldWith.value = event.detail
} }
const loadColumn = (title: string, tp: string, colOptions?: any) => { const loadColumn = (title: string, tp: string, colOptions?: any) => {
@ -1231,9 +1235,14 @@ const loaderText = computed(() => {
v-xc-ver-resize v-xc-ver-resize
:data-col="col.id" :data-col="col.id"
:data-title="col.title" :data-title="col.title"
:style="{
'min-width': gridViewCols[col.id]?.width || '200px',
'max-width': gridViewCols[col.id]?.width || '200px',
'width': gridViewCols[col.id]?.width || '200px',
}"
@xcstartresizing="onXcStartResizing(col.id, $event)"
@xcresize="onresize(col.id, $event)" @xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)" @xcresizing="onXcResizing(col.id, $event)"
@xcresized="resizingCol = null"
> >
<div class="w-full h-full flex items-center"> <div class="w-full h-full flex items-center">
<LazySmartsheetHeaderVirtualCell <LazySmartsheetHeaderVirtualCell
@ -1459,6 +1468,11 @@ const loaderText = computed(() => {
hasEditPermission && hasEditPermission &&
isCellSelected(rowIndex, colIndex), isCellSelected(rowIndex, colIndex),
}" }"
:style="{
'min-width': gridViewCols[columnObj.id]?.width || '200px',
'max-width': gridViewCols[columnObj.id]?.width || '200px',
'width': gridViewCols[columnObj.id]?.width || '200px',
}"
:data-testid="`cell-${columnObj.title}-${rowIndex}`" :data-testid="`cell-${columnObj.title}-${rowIndex}`"
:data-key="`data-key-${rowIndex}-${columnObj.id}`" :data-key="`data-key-${rowIndex}-${columnObj.id}`"
:data-col="columnObj.id" :data-col="columnObj.id"

32
packages/nc-gui/composables/useGridViewColumn.ts

@ -1,11 +1,9 @@
import type { ColumnType, GridColumnReqType, GridColumnType, ViewType } from 'nocodb-sdk' import type { ColumnType, GridColumnReqType, GridColumnType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useStyleTag, useUndoRedo, watch } from '#imports' import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports'
const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState( const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
(view: Ref<(ViewType & { columns?: GridColumnType[] }) | undefined>, statePublic = false) => { (view: Ref<(ViewType & { columns?: GridColumnType[] }) | undefined>, statePublic = false) => {
const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
const { isUIAllowed } = useRoles() const { isUIAllowed } = useRoles()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -15,30 +13,11 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
const { addUndo, defineViewScope } = useUndoRedo() const { addUndo, defineViewScope } = useUndoRedo()
const gridViewCols = ref<Record<string, GridColumnType>>({}) const gridViewCols = ref<Record<string, GridColumnType>>({})
const resizingCol = ref<string | null>('') const resizingColOldWith = ref('200px')
const resizingColWidth = ref('200px')
const isPublic = inject(IsPublicInj, ref(statePublic)) const isPublic = inject(IsPublicInj, ref(statePublic))
const columns = computed<ColumnType[]>(() => metas.value?.[view.value?.fk_model_id as string]?.columns || []) const columns = computed<ColumnType[]>(() => metas.value?.[view.value?.fk_model_id as string]?.columns || [])
watch(
[gridViewCols, resizingCol, resizingColWidth],
() => {
let style = ''
for (const c of columns?.value || []) {
const val = gridViewCols?.value?.[c?.id as string]?.width || '200px'
if (val && c.title !== resizingCol?.value) {
style += `[data-col="${c.id}"]{min-width:${val};max-width:${val};width: ${val};}`
} else {
style += `[data-col="${c.id}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
}
}
css.value = style
},
{ deep: true, immediate: true },
)
const loadGridViewColumns = async () => { const loadGridViewColumns = async () => {
if (!view.value?.id && !isPublic.value) return if (!view.value?.id && !isPublic.value) return
@ -52,8 +31,6 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
}), }),
{}, {},
) )
loadCss()
} }
/** when columns changes(create/delete) reload grid columns /** when columns changes(create/delete) reload grid columns
@ -70,7 +47,8 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
if (!undo) { if (!undo) {
const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => { const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => {
if (gridViewCols.value[id][k as keyof GridColumnType]) { if (gridViewCols.value[id][k as keyof GridColumnType]) {
o[k] = gridViewCols.value[id][k as keyof GridColumnType] if (k === 'width') o[k] = `${resizingColOldWith.value}px`
else o[k] = gridViewCols.value[id][k as keyof GridColumnType]
} }
return o return o
}, {}) }, {})
@ -105,7 +83,7 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
} }
} }
return { loadGridViewColumns, updateGridViewColumn, resizingCol, resizingColWidth, gridViewCols, loadCss, unloadCss } return { loadGridViewColumns, updateGridViewColumn, gridViewCols, resizingColOldWith }
}, },
'useGridViewColumn', 'useGridViewColumn',
) )

1
packages/nc-gui/plugins/resizeDirective.ts

@ -36,6 +36,7 @@ export default defineNuxtPlugin((nuxtApp) => {
startWidth = parseInt(document.defaultView?.getComputedStyle(el)?.width || '0', 10) startWidth = parseInt(document.defaultView?.getComputedStyle(el)?.width || '0', 10)
document.documentElement.addEventListener('mousemove', doDrag, false) document.documentElement.addEventListener('mousemove', doDrag, false)
document.documentElement.addEventListener('mouseup', stopDrag, false) document.documentElement.addEventListener('mouseup', stopDrag, false)
emit('xcstartresizing', startWidth)
} }
;(el as any).initDrag = initDrag ;(el as any).initDrag = initDrag

Loading…
Cancel
Save