Browse Source

fix: Added loading state to comment/audit list in expanded form

pull/6739/head
Muhammed Mustafa 1 year ago
parent
commit
0c45e79edd
  1. 11
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  2. 2
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

11
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@ -4,12 +4,18 @@ import type { AuditType } from 'nocodb-sdk'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports' import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
const props = defineProps<{
isLoading: boolean
}>()
const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow() const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
const commentsWrapperEl = ref<HTMLDivElement>() const commentsWrapperEl = ref<HTMLDivElement>()
const { user, appInfo } = useGlobal() const { user, appInfo } = useGlobal()
const isExpandedFormLoading = computed(() => props.isLoading)
const tab = ref<'comments' | 'audits'>('comments') const tab = ref<'comments' | 'audits'>('comments')
const { isUIAllowed } = useRoles() const { isUIAllowed } = useRoles()
@ -160,7 +166,10 @@ const onClickAudit = () => {
'pb-2': tab !== 'comments' && !appInfo.ee, 'pb-2': tab !== 'comments' && !appInfo.ee,
}" }"
> >
<div v-if="tab === 'comments'" class="flex flex-col h-full"> <div v-if="isExpandedFormLoading" class="flex flex-col h-full">
<GeneralLoader class="!mt-16" size="xlarge" />
</div>
<div v-else-if="tab === 'comments'" class="flex flex-col h-full">
<div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full"> <div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full">
<div class="text-center text-3xl text-gray-700"> <div class="text-center text-3xl text-gray-700">
<GeneralIcon icon="commentHere" /> <GeneralIcon icon="commentHere" />

2
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -761,7 +761,7 @@ export default {
class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden" class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden"
:class="{ active: commentsDrawer && isUIAllowed('commentList') }" :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
> >
<SmartsheetExpandedFormComments /> <SmartsheetExpandedFormComments :loading="isLoading" />
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save