github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: belongs to loading screen

pull/6486/head
sreehari jayaraj 1 year ago
parent
250476cbc4
commit
bfc4e0548d
2 changed files with 70 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 133
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  2. 9
      packages/nc-gui/components/virtual-cell/components/ListItems.vue

133
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
Unescape View File

@ -124,11 +124,8 @@ onKeyStroke('Escape', () => {
vModel.value = false vModel.value = false
}) })
const isDataExist = computed(() => { const isDataExist = computed<boolean>(() => {
if (childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)) { return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
return true
}
return false
}) })
</script> </script>
@ -151,8 +148,6 @@ const isDataExist = computed(() => {
:related-table-title="relatedTableMeta?.title" :related-table-title="relatedTableMeta?.title"
:display-value="row.row[displayValueProp]" :display-value="row.row[displayValueProp]"
/> />
<div v-if="!isForm" class="m-4 bg-gray-50 border-gray-50 border-b-2">></div>
<div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2"> <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
<div <div
class="flex items-center border-1 p-1 rounded-md w-full border-gray-200" class="flex items-center border-1 p-1 rounded-md w-full border-gray-200"
@ -175,74 +170,72 @@ const isDataExist = computed(() => {
</div> </div>
</div> </div>
<template v-if="isDataExist"> <div v-if="isDataExist || isChildrenLoading" class="mt-2 mb-2">
<div class="mt-2 mb-2"> <div
<div :class="{
:class="{ 'h-[420px]': !isForm,
'h-[420px]': !isForm, 'h-[250px]': isForm,
'h-[250px]': isForm, }"
}" class="overflow-scroll nc-scrollbar-md cursor-pointer pr-1"
class="overflow-scroll nc-scrollbar-md cursor-pointer pr-1" >
> <template v-if="isChildrenLoading">
<template v-if="isChildrenLoading"> <div
<div v-for="(x, i) in Array.from({ length: 10 })"
v-for="(x, i) in Array.from({ length: 10 })" :key="i"
:key="i" class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50" >
> <a-skeleton-image class="h-24 w-24 !rounded-xl" />
<a-skeleton-image class="h-24 w-24 !rounded-xl" /> <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
<div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center"> <a-skeleton-input class="!w-48 !rounded-xl" active size="small" />
<a-skeleton-input class="!w-48 !rounded-xl" active size="small" /> <div class="flex flex-row gap-6 w-10/12">
<div class="flex flex-row gap-6 w-10/12"> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<template v-else> </template>
<LazyVirtualCellComponentsListItem <template v-else>
v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []" <LazyVirtualCellComponentsListItem
:key="id" v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
:row="refRow" :key="id"
:fields="fields" :row="refRow"
data-testid="nc-child-list-item" :fields="fields"
:attachment="attachmentCol" data-testid="nc-child-list-item"
:related-table-display-value-prop="relatedTableDisplayValueProp" :attachment="attachmentCol"
:is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true" :related-table-display-value-prop="relatedTableDisplayValueProp"
:is-loading="isChildrenListLoading[Number.parseInt(id)]" :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
@expand="onClick(refRow)" :is-loading="isChildrenListLoading[Number.parseInt(id)]"
@click=" @expand="onClick(refRow)"
() => { @click="
if (isPublic && !isForm) return () => {
isNew if (isPublic && !isForm) return
? unlinkRow(refRow, Number.parseInt(id)) isNew
: isChildrenListLinked[Number.parseInt(id)] ? unlinkRow(refRow, Number.parseInt(id))
? unlinkRow(refRow, Number.parseInt(id)) : isChildrenListLinked[Number.parseInt(id)]
: linkRow(refRow, Number.parseInt(id)) ? unlinkRow(refRow, Number.parseInt(id))
} : linkRow(refRow, Number.parseInt(id))
" }
/> "
</template> />
</div> </template>
</div> </div>
</template> </div>
<div <div
v-if="!isDataExist && !isChildrenLoading" v-else
:class="{ :class="{
'h-[420px]': !isForm, 'h-[420px]': !isForm,
'h-[250px]': isForm, 'h-[250px]': isForm,

9
packages/nc-gui/components/virtual-cell/components/ListItems.vue
Unescape View File

@ -49,6 +49,8 @@ const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowSt
const isPublic = inject(IsPublicInj, ref(false)) const isPublic = inject(IsPublicInj, ref(false))
isChildrenExcludedLoading.value = true
const isForm = inject(IsFormInj, ref(false)) const isForm = inject(IsFormInj, ref(false))
const saveRow = inject(SaveRowInj, () => {}) const saveRow = inject(SaveRowInj, () => {})
@ -213,7 +215,7 @@ onKeyStroke('Escape', () => {
</NcButton> </NcButton>
</div> </div>
<template v-if="childrenExcludedList?.pageInfo?.totalRows"> <template v-if="childrenExcludedList?.pageInfo?.totalRows || isChildrenExcludedLoading">
<div class="pb-2 pt-1"> <div class="pb-2 pt-1">
<div class="h-[420px] overflow-scroll nc-scrollbar-md pr-1 cursor-pointer"> <div class="h-[420px] overflow-scroll nc-scrollbar-md pr-1 cursor-pointer">
<template v-if="isChildrenExcludedLoading"> <template v-if="isChildrenExcludedLoading">
@ -274,7 +276,10 @@ onKeyStroke('Escape', () => {
</div> </div>
</div> </div>
</template> </template>
<div v-else class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500"> <div
v-if="!isChildrenExcludedLoading && !childrenExcludedList?.pageInfo?.totalRows"
class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500"
>
<InboxIcon class="w-16 h-16 mx-auto" /> <InboxIcon class="w-16 h-16 mx-auto" />
<p> <p>
{{ $t('msg.thereAreNoRecordsInTable') }} {{ $t('msg.thereAreNoRecordsInTable') }}

Write Preview
Loading…
Cancel
Save