From 5b7c7880480adf0f4cb9913d699442d895dd495b Mon Sep 17 00:00:00 2001 From: Raju Udava <86527202+dstala@users.noreply.github.com> Date: Thu, 13 Jun 2024 13:22:17 +0530 Subject: [PATCH] Nc fix/comments UI (#8711) * fix: minor fixes * fix: minor fixes * fix: minor fixes * fix: hover on comment --------- Co-authored-by: DarkPhoenix2704 --- .../components/cell/RichText/LinkOptions.vue | 12 ++-- .../smartsheet/expanded-form/Comments.vue | 55 +++++++++++++------ .../smartsheet/expanded-form/RichComment.vue | 5 ++ .../expanded-form/RichTextOptions.vue | 21 ++++++- .../composables/useExpandedFormStore.ts | 43 ++++++++++++--- 5 files changed, 100 insertions(+), 36 deletions(-) diff --git a/packages/nc-gui/components/cell/RichText/LinkOptions.vue b/packages/nc-gui/components/cell/RichText/LinkOptions.vue index 5c89009095..49c0f7ef96 100644 --- a/packages/nc-gui/components/cell/RichText/LinkOptions.vue +++ b/packages/nc-gui/components/cell/RichText/LinkOptions.vue @@ -11,6 +11,7 @@ const emits = defineEmits(['blur']) interface Props { editor: Editor isFormField?: boolean + isComment?: boolean } const { editor, isFormField } = toRefs(props) @@ -164,6 +165,9 @@ const openLink = () => { const onMountLinkOptions = (e) => { if (e?.popper?.style) { + if (props.isComment) { + e.popper.style.left = '-10%' + } e.popper.style.width = '95%' } } @@ -233,14 +237,6 @@ const tabIndex = computed(() => { -
-
-
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue index 3e90a9d0d3..fb1ef536eb 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue @@ -13,7 +13,6 @@ const { audits, isAuditLoading, saveComment: _saveComment, - comment: newComment, updateComment, } = useExpandedFormStoreOrThrow() @@ -23,6 +22,14 @@ const commentsWrapperEl = ref() const commentInputRef = ref() +const comment = ref('') + +const { copy } = useClipboard() + +const route = useRoute() + +const { dashboardUrl } = useDashboard() + const editRef = ref() const { user, appInfo } = useGlobal() @@ -68,10 +75,16 @@ async function onEditComment() { isCommentMode.value = true - await updateComment(editComment.value.id!, { - comment: editComment.value?.comment, + const tempCom = { + ...editCommentValue.value, + } + + isEditing.value = false + editCommentValue.value = undefined + await updateComment(tempCom.id!, { + comment: tempCom.comment, }) - onStopEdit() + loadComments() } function onCancel() { @@ -116,10 +129,16 @@ function scrollComments() { } } -const isSaving = ref(false) - const saveComment = async () => { - if (isSaving.value) return + if (!comment.value.trim()) return + + while (comment.value.endsWith('
') || comment.value.endsWith('\n')) { + if (comment.value.endsWith('
')) { + comment.value = comment.value.slice(0, -6) + } else { + comment.value = comment.value.slice(0, -2) + } + } isCommentMode.value = true isSaving.value = true @@ -129,7 +148,7 @@ const saveComment = async () => { ...comments.value, { id: `temp-${new Date().getTime()}`, - comment: newComment.value, + comment: comment.value, created_at: new Date().toISOString(), created_by: user.value?.id, created_by_email: user.value?.email, @@ -137,13 +156,16 @@ const saveComment = async () => { }, ] + const tempCom = comment.value + comment.value = '' + commentInputRef?.value?.setEditorContent('', true) await nextTick(() => { scrollComments() }) try { - await _saveComment() + await _saveComment(tempCom) await nextTick(() => { isExpandedFormCommentMode.value = true }) @@ -235,10 +257,8 @@ const createdBy = (
@@ -337,7 +357,7 @@ const createdBy = ( v-model:value="value" autofocus :hide-options="false" - class="expanded-form-comment-edit-input expanded-form-comment-input !pt-2 !pb-0.5 !pl-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[694px]" + class="expanded-form-comment-edit-input cursor-text expanded-form-comment-input !py-2 !px-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[240px]" data-testid="expanded-form-comment-input" sync-value-change @save="onEditComment" @@ -366,10 +386,10 @@ const createdBy = (
{ isFocused.value = true emits('focus') + onFocusWrapper() }, onBlur: (e) => { if ( @@ -122,6 +125,7 @@ const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => { const onFocusWrapper = () => { if (!props.readOnly && !keys.shift.value) { editor.value?.chain().focus().run() + setEditorContent(vModel.value, true) } } @@ -236,6 +240,7 @@ defineExpose({ v-if="editor" ref="richTextLinkOptionRef" :editor="editor" + :is-comment="true" :is-form-field="true" @blur="isFocused = false" /> diff --git a/packages/nc-gui/components/smartsheet/expanded-form/RichTextOptions.vue b/packages/nc-gui/components/smartsheet/expanded-form/RichTextOptions.vue index 174ed5720c..ea3535ad47 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/RichTextOptions.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/RichTextOptions.vue @@ -67,8 +67,25 @@ const onToggleLink = () => { } const newMentionNode = () => { - editor.value?.commands.insertContent('@') - editor.value?.chain().focus().run() + if (!editor.value) return + + const lastCharacter = editor.value.state.doc.textBetween( + editor.value.state.selection.$from.pos - 1, + editor.value.state.selection.$from.pos, + ) + + if (lastCharacter === '@') { + editor.value + .chain() + .deleteRange({ from: editor.value.state.selection.$from.pos - 1, to: editor.value.state.selection.$from.pos }) + .run() + } else if (lastCharacter !== ' ') { + editor.value?.commands.insertContent(' @') + editor.value?.chain().focus().run() + } else { + editor.value?.commands.insertContent('@') + editor.value?.chain().focus().run() + } } diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts index 7e0d8cd7dc..9416753816 100644 --- a/packages/nc-gui/composables/useExpandedFormStore.ts +++ b/packages/nc-gui/composables/useExpandedFormStore.ts @@ -25,8 +25,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m const isAuditLoading = ref(false) - const comment = ref('') - const commentsDrawer = ref(true) const saveRowAndStay = ref(0) @@ -250,9 +248,12 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m } } - const saveComment = async () => { + const saveComment = async (comment: string) => { try { - if (!row.value || !comment.value) return + if (!row.value || !comment) { + comments.value = comments.value.filter((c) => !c.id?.startsWith('temp-')) + return + } const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]) @@ -261,7 +262,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m await $api.utils.commentRow({ fk_model_id: meta.value?.id as string, row_id: rowId, - comment: `${comment.value}`.replace(/(
)+$/g, ''), + comment: `${comment}`.replace(/(
)+$/g, ''), }) // Increase Comment Count in rowMeta @@ -275,8 +276,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m // reloadTrigger?.trigger() await Promise.all([loadComments(), loadAudits()]) - - comment.value = '' } catch (e: any) { comments.value = comments.value.filter((c) => !(c.id ?? '').startsWith('temp-')) message.error( @@ -526,7 +525,34 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m } const updateComment = async (commentId: string, comment: Partial) => { - return await $api.utils.commentUpdate(commentId, comment) + const tempEdit = comments.value.find((c) => c.id === commentId) + try { + comments.value = comments.value.map((c) => { + if (c.id === commentId) { + return { + ...c, + ...comment, + updated_at: new Date().toISOString(), + } + } + return c + }) + await $api.utils.commentUpdate(commentId, comment) + } catch (e: any) { + comments.value = comments.value.map((c) => { + if (c.id === commentId) { + return tempEdit + } + return c + }) + message.error( + await extractSdkResponseErrorMsg( + e as Error & { + response: any + }, + ), + ) + } } return { @@ -540,7 +566,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m resolveComment, isCommentsLoading, saveComment, - comment, isYou, commentsDrawer, row,