@ -1,4 +1,5 @@
< script lang = "ts" setup > < script lang = "ts" setup >
import axios from 'axios'
import { nextTick } from '@vue/runtime-core' import { nextTick } from '@vue/runtime-core'
import type { ColumnReqType , ColumnType , PaginatedType , TableType , ViewType } from 'nocodb-sdk' import type { ColumnReqType , ColumnType , PaginatedType , TableType , ViewType } from 'nocodb-sdk'
import { UITypes , ViewTypes , isLinksOrLTAR , isSystemColumn , isVirtualCol } from 'nocodb-sdk' import { UITypes , ViewTypes , isLinksOrLTAR , isSystemColumn , isVirtualCol } from 'nocodb-sdk'
@ -122,7 +123,7 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
const openNewRecordFormHook = inject ( OpenNewRecordFormHookInj , createEventHook ( ) ) const openNewRecordFormHook = inject ( OpenNewRecordFormHookInj , createEventHook ( ) )
useViewColumns ( view , meta , ( ) => reloadViewDataHook . trigger ( ) ) const { isViewColumnsLoading } = useViewColumns ( view , meta , ( ) => reloadViewDataHook . trigger ( ) )
const { isMobileMode } = useGlobal ( ) const { isMobileMode } = useGlobal ( )
@ -383,11 +384,19 @@ const gridWrapperClass = computed<string>(() => {
return classes . join ( ' ' ) return classes . join ( ' ' )
} ) } )
const dummyDataForLoading = computed ( ( ) => { const dummyColumnDataForLoading = computed ( ( ) => {
let length = fields . value ? . length ? ? 40
length = length || 40
return Array . from ( { length : length + 1 } ) . map ( ( ) => ( { } ) )
} )
const dummyRowDataForLoading = computed ( ( ) => {
return Array . from ( { length : 40 } ) . map ( ( ) => ( { } ) ) return Array . from ( { length : 40 } ) . map ( ( ) => ( { } ) )
} ) } )
const showSkeleton = computed ( ( ) => disableSkeleton !== true && ( isViewDataLoading . value || isPaginationLoading . value ) ) const showSkeleton = computed (
( ) => disableSkeleton !== true && ( isViewDataLoading . value || isPaginationLoading . value || isViewColumnsLoading . value ) ,
)
/ / # G r i d / / # G r i d
@ -884,7 +893,7 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
} }
/ / # G r i d R e s i z e / / # G r i d R e s i z e
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
@ -893,8 +902,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 ) => {
@ -1059,6 +1072,22 @@ onBeforeUnmount(async () => {
reloadViewDataHook ? . on ( reloadViewDataHandler ) reloadViewDataHook ? . on ( reloadViewDataHandler )
openNewRecordFormHook ? . on ( openNewRecordHandler ) openNewRecordFormHook ? . on ( openNewRecordHandler )
/ / T O D O : U s e C S S a n i m a t i o n s
const showLoaderAfterDelay = ref ( false )
watch ( [ isViewDataLoading , showSkeleton , isPaginationLoading ] , ( ) => {
if ( ! isViewDataLoading . value && ! showSkeleton . value && ! isPaginationLoading . value ) {
showLoaderAfterDelay . value = false
return
}
showLoaderAfterDelay . value = false
setTimeout ( ( ) => {
showLoaderAfterDelay . value = true
} , 500 )
} )
/ / # W a t c h e r s / / # W a t c h e r s
/ / r e s e t c o n t e x t m e n u t a r g e t o n h i d e / / r e s e t c o n t e x t m e n u t a r g e t o n h i d e
@ -1099,8 +1128,10 @@ watch(
try { try {
await loadData ? . ( ) await loadData ? . ( )
} catch ( e ) { } catch ( e ) {
console . log ( e ) if ( ! axios . isCancel ( e ) ) {
message . error ( t ( 'msg.errorLoadingData' ) ) console . log ( e )
message . error ( t ( 'msg.errorLoadingData' ) )
}
} finally { } finally {
isViewDataLoading . value = false isViewDataLoading . value = false
} }
@ -1163,7 +1194,7 @@ const loaderText = computed(() => {
< div class = "flex flex-col" : class = "`${headerOnly !== true ? 'h-full w-full' : ''}`" > < div class = "flex flex-col" : class = "`${headerOnly !== true ? 'h-full w-full' : ''}`" >
< div ref = "gridWrapper" class = "nc-grid-wrapper min-h-0 flex-1 relative" :class ="gridWrapperClass" > < div ref = "gridWrapper" class = "nc-grid-wrapper min-h-0 flex-1 relative" :class ="gridWrapperClass" >
< div < div
v - show = "showSkeleton && !isPaginationLoading" v - show = "showSkeleton && !isPaginationLoading && showLoaderAfterDelay "
class = "flex items-center justify-center absolute l-0 t-0 w-full h-full z-10 pb-10" class = "flex items-center justify-center absolute l-0 t-0 w-full h-full z-10 pb-10"
> >
< div class = "flex flex-col justify-center gap-2" > < div class = "flex flex-col justify-center gap-2" >
@ -1187,11 +1218,11 @@ const loaderText = computed(() => {
@ contextmenu = "showContextMenu" @ contextmenu = "showContextMenu"
> >
< thead v-show ="hideHeader !== true" ref="tableHeadEl" > < thead v-show ="hideHeader !== true" ref="tableHeadEl" >
< tr v-if ="showSkeleton && isPagination Loading" > < tr v-if ="isViewColumns Loading" >
< td < td
v - for = "(col, colIndex) of dummyDataForLoading" v - for = "(col, colIndex) of dummyColumn DataForLoading"
: key = "colIndex" : key = "colIndex"
class = "!bg-gray-50 h-full" class = "!bg-gray-50 h-full border-b-1 border-r-1 "
: class = "{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }" : class = "{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }"
> >
< a -skeleton < a -skeleton
@ -1203,7 +1234,7 @@ const loaderText = computed(() => {
/ > / >
< / td > < / td >
< / tr > < / tr >
< tr v-show ="!isPagination Loading" class="nc-grid-header" > < tr v-show ="!isViewColumns Loading" class="nc-grid-header" >
< th class = "w-[85px] min-w-[85px]" data -testid = " grid -id -column " @ dblclick = "() => {}" > < th class = "w-[85px] min-w-[85px]" data -testid = " grid -id -column " @ dblclick = "() => {}" >
< div class = "w-full h-full flex pl-5 pr-1 items-center" data -testid = " nc -check -all " > < div class = "w-full h-full flex pl-5 pr-1 items-center" data -testid = " nc -check -all " >
< template v-if ="!readOnly" > < template v-if ="!readOnly" >
@ -1228,9 +1259,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
@ -1352,10 +1388,11 @@ const loaderText = computed(() => {
< / thead > < / thead >
< tbody v-if ="headerOnly !== true" ref="tableBodyEl" > < tbody v-if ="headerOnly !== true" ref="tableBodyEl" >
< template v-if ="showSkeleton" > < template v-if ="showSkeleton" >
< tr v-for ="(row, rowIndex) of dummyDataForLoading" :key ="rowIndex" > < tr v-for ="(row, rowIndex) of dummyRow DataForLoading" :key ="rowIndex" >
< td < td
v - for = "(col, colIndex) of dummyDataForLoading" v - for = "(col, colIndex) of dummyColumn DataForLoading"
: key = "colIndex" : key = "colIndex"
class = "border-b-1 border-r-1"
: class = "{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }" : class = "{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }"
> < / td > > < / td >
< / tr > < / tr >
@ -1456,6 +1493,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"
@ -1949,4 +1991,11 @@ tbody tr:hover {
. nc - fill - handle : focus { . nc - fill - handle : focus {
@ apply w - [ 8 px ] h - [ 8 px ] mt - [ - 5 px ] ml - [ - 5 px ] ; @ apply w - [ 8 px ] h - [ 8 px ] mt - [ - 5 px ] ml - [ - 5 px ] ;
} }
: deep ( . ant - skeleton - input ) {
@ apply rounded text - gray - 100 ! bg - gray - 100 ! bg - opacity - 65 ;
animation : slow - show - 1 5 s ease 5 s forwards ;
}
< / style > < / style >
< style lang = "scss" > < / style >
Reenphy George
1 year ago
committed by
GitHub
