From dcc24fef103ca5be3e5c435951a0cc2af0a11245 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 19 Oct 2023 11:31:13 +0000 Subject: [PATCH 1/5] fix: Comments are adding to FE state before api calls --- .../composables/useExpandedFormStore.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts index a602a6b1d8..96804dfb22 100644 --- a/packages/nc-gui/composables/useExpandedFormStore.ts +++ b/packages/nc-gui/composables/useExpandedFormStore.ts @@ -31,6 +31,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m const { t } = useI18n() + const { user } = useGlobal() + const commentsOnly = ref(false) const commentsAndLogs = ref([]) @@ -58,6 +60,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m const { isUIAllowed } = useRoles() + const isSaving = ref(false) + // getters const displayValue = computed(() => { if (row?.value?.row) { @@ -135,6 +139,22 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m if (!rowId) return + isSaving.value = true + + const createdDate = new Date().toISOString() + + commentsAndLogs.value.push({ + created_at: createdDate, + description: `The following comment has been created:${comment.value}`, + email: user?.value?.email, + user: user?.value?.email, + id: '', + display_name: user.value?.display_name, + row_id: rowId, + updated_at: createdDate, + op_type: 'COMMENT', + }) + await api.utils.commentRow({ fk_model_id: meta.value?.id as string, row_id: rowId, @@ -148,6 +168,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m await loadCommentsAndLogs() } catch (e: any) { message.error(e.message) + } finally { + isSaving.value = false } $e('a:row-expand:comment') From 0c45e79edd13b16a16b011a1d8d623bf027bbbf9 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 19 Oct 2023 11:31:14 +0000 Subject: [PATCH 2/5] fix: Added loading state to comment/audit list in expanded form --- .../components/smartsheet/expanded-form/Comments.vue | 11 ++++++++++- .../components/smartsheet/expanded-form/index.vue | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue index 8eb7c149c8..31c3c094b9 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue +++ b/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 { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports' +const props = defineProps<{ + isLoading: boolean +}>() + const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow() const commentsWrapperEl = ref() const { user, appInfo } = useGlobal() +const isExpandedFormLoading = computed(() => props.isLoading) + const tab = ref<'comments' | 'audits'>('comments') const { isUIAllowed } = useRoles() @@ -160,7 +166,10 @@ const onClickAudit = () => { 'pb-2': tab !== 'comments' && !appInfo.ee, }" > -
+
+ +
+
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue index 8bbdcbf53a..69f1c52da6 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue +++ b/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="{ active: commentsDrawer && isUIAllowed('commentList') }" > - +
From 39ad60a519ca732f0895fe035e6273c45e24a335 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 19 Oct 2023 11:31:15 +0000 Subject: [PATCH 3/5] fix: Comments are adding to FE state before api calls --- .../smartsheet/expanded-form/Comments.vue | 3 +-- .../composables/useExpandedFormStore.ts | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue index 31c3c094b9..2b6c132625 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue @@ -97,8 +97,7 @@ function scrollComments() { } const saveComment = async () => { - await _saveComment() - scrollComments() + await _saveComment(() => setTimeout(() => scrollComments(), 100)) } watch(commentsWrapperEl, () => { diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts index 96804dfb22..7a69e5b84e 100644 --- a/packages/nc-gui/composables/useExpandedFormStore.ts +++ b/packages/nc-gui/composables/useExpandedFormStore.ts @@ -131,7 +131,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m } } - const saveComment = async () => { + const saveComment = async (scrollToCreateComment?: any) => { try { if (!row.value || !comment.value) return @@ -142,10 +142,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m isSaving.value = true const createdDate = new Date().toISOString() + const createdIndex = commentsAndLogs.value.length commentsAndLogs.value.push({ created_at: createdDate, - description: `The following comment has been created:${comment.value}`, + description: `The following comment has been created: ${comment.value}`, email: user?.value?.email, user: user?.value?.email, id: '', @@ -153,19 +154,23 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m row_id: rowId, updated_at: createdDate, op_type: 'COMMENT', + new: true, }) - await api.utils.commentRow({ + const commentValue = comment.value + comment.value = '' + + if (scrollToCreateComment) scrollToCreateComment() + + const createdComment = await api.utils.commentRow({ fk_model_id: meta.value?.id as string, row_id: rowId, - description: `The following comment has been created: ${comment.value}`, + description: `The following comment has been created: ${commentValue}`, }) - comment.value = '' + commentsAndLogs.value[createdIndex] = createdComment reloadTrigger?.trigger() - - await loadCommentsAndLogs() } catch (e: any) { message.error(e.message) } finally { From b8ea49cd36c81f65ba72136a435ad22e905736f0 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 19 Oct 2023 11:31:16 +0000 Subject: [PATCH 4/5] fix: Added iconOnly prop to button for the case of having only icon style --- packages/nc-gui/components/nc/Button.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue index fdf7e2e808..1c6dc4d548 100644 --- a/packages/nc-gui/components/nc/Button.vue +++ b/packages/nc-gui/components/nc/Button.vue @@ -20,6 +20,7 @@ interface Props { type?: ButtonType | 'danger' | 'secondary' | undefined size?: NcButtonSize centered?: boolean + iconOnly?: boolean } const props = withDefaults(defineProps(), { @@ -107,7 +108,7 @@ useEventListener(NcButton, 'mousedown', () => {
- +
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts index 7a69e5b84e..0c447d4757 100644 --- a/packages/nc-gui/composables/useExpandedFormStore.ts +++ b/packages/nc-gui/composables/useExpandedFormStore.ts @@ -60,8 +60,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m const { isUIAllowed } = useRoles() - const isSaving = ref(false) - // getters const displayValue = computed(() => { if (row?.value?.row) { @@ -131,7 +129,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m } } - const saveComment = async (scrollToCreateComment?: any) => { + const saveComment = async () => { try { if (!row.value || !comment.value) return @@ -139,42 +137,19 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m if (!rowId) return - isSaving.value = true - - const createdDate = new Date().toISOString() - const createdIndex = commentsAndLogs.value.length - - commentsAndLogs.value.push({ - created_at: createdDate, - description: `The following comment has been created: ${comment.value}`, - email: user?.value?.email, - user: user?.value?.email, - id: '', - display_name: user.value?.display_name, - row_id: rowId, - updated_at: createdDate, - op_type: 'COMMENT', - new: true, - }) - - const commentValue = comment.value - comment.value = '' - - if (scrollToCreateComment) scrollToCreateComment() - - const createdComment = await api.utils.commentRow({ + await api.utils.commentRow({ fk_model_id: meta.value?.id as string, row_id: rowId, - description: `The following comment has been created: ${commentValue}`, + description: `The following comment has been created: ${comment.value}`, }) - commentsAndLogs.value[createdIndex] = createdComment - reloadTrigger?.trigger() + + await loadCommentsAndLogs() + + comment.value = '' } catch (e: any) { message.error(e.message) - } finally { - isSaving.value = false } $e('a:row-expand:comment')