fix: comment delete not working (#8714)

* fix: missing ui acl

* fix: remove unwanted ref fix: wrap condition in template

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

@@ -30,8 +30,6 @@ const route = useRoute()
 
 const { dashboardUrl } = useDashboard()
 
-const editRef = ref<any>()
-
 const { user, appInfo } = useGlobal()
 
 const isExpandedFormLoading = computed(() => props.loading)
@@ -108,6 +106,9 @@ onKeyStroke('Enter', (event) => {
 function editComments(comment: CommentType) {
   editComment.value = comment
   isEditing.value = true
+  nextTick(() => {
+    scrollToComment(comment.id)
+  })
 }
 
 const value = computed({
@@ -225,6 +226,21 @@ const createdBy = (
     return 'Shared source'
   }
 }
+
+const getUserRole = (email: string) => {
+  const user = baseUsers.value.find((user) => user.email === email)
+  if (!user) return ProjectRoles.NO_ACCESS
+
+  return user.roles || ProjectRoles.NO_ACCESS
+}
+
+const editedAt = (comment: CommentType) => {
+  if (comment.updated_at !== comment.created_at && comment.updated_at) {
+    const str = timeAgo(comment.updated_at).replace(' ', '_')
+    return `[(edited)](a~~~###~~~Edited_${str}) `
+  }
+  return ''
+}
 </script>
 
 <template>
@@ -286,10 +302,8 @@ const createdBy = (
                     </div>
                     <div class="flex items-center gap-2">
                       <NcDropdown
-                        v-if="(comment.created_by_email === user!.email && !editComment )"
-                        :class="{
-                        'opacity-0 group-hover:opacity-100': comment.created_by_email === user!.email && !editComment,
-                        }"
+                        v-if="!editCommentValue"
+                        class="!hidden !group-hover:block"
                         overlay-class-name="!min-w-[160px]"
                         placement="bottomRight"
                       >
@@ -299,6 +313,7 @@ const createdBy = (
                         <template #overlay>
                           <NcMenu>
                             <NcMenuItem
+                              v-if="user && comment.created_by_email === user.email"
                               v-e="['c:comment-expand:comment:edit']"
                               class="text-gray-700"
                               @click="editComments(comment)"
@@ -309,15 +324,28 @@ const createdBy = (
                               </div>
                             </NcMenuItem>
                             <NcMenuItem
-                              v-e="['c:row-expand:comment:delete']"
-                              class="!text-red-500 !hover:bg-red-50"
-                              @click="deleteComment(comment.id!)"
+                              v-e="['c:comment-expand:comment:copy']"
+                              class="text-gray-700"
+                              @click="copyComment(comment)"
                             >
                               <div class="flex gap-2 items-center">
-                                <component :is="iconMap.delete" class="cursor-pointer" />
-                                {{ $t('general.delete') }}
+                                <component :is="iconMap.copy" class="cursor-pointer" />
+                                {{ $t('general.copy') }} URL
                               </div>
                             </NcMenuItem>
+                            <template v-if="user && comment.created_by_email === user.email">
+                              <NcDivider />
+                              <NcMenuItem
+                                v-e="['c:row-expand:comment:delete']"
+                                class="!text-red-500 !hover:bg-red-50"
+                                @click="deleteComment(comment.id!)"
+                              >
+                                <div class="flex gap-2 items-center">
+                                  <component :is="iconMap.delete" class="cursor-pointer" />
+                                  {{ $t('general.delete') }}
+                                </div>
+                              </NcMenuItem>
+                            </template>
                           </NcMenu>
                         </template>
                       </NcDropdown>
@@ -352,8 +380,7 @@ const createdBy = (
                   </div>
                   <div class="flex-1 flex flex-col gap-1 mt-1 max-w-[calc(100%)]">
                     <SmartsheetExpandedFormRichComment
-                      v-if="comment.id === editComment?.id"
-                      ref="editRef"
+                      v-if="comment.id === editCommentValue?.id"
                       v-model:value="value"
                       autofocus
                       :hide-options="false"

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -214,6 +214,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const resolveComment = async (commentId: string) => {
+    if (!isUIAllowed('commentResolve')) return
     const tempC = comments.value.find((c) => c.id === commentId)
 
     try {

packages/nc-gui/lib/acl.ts

@@ -98,6 +98,8 @@ const rolePermissions = {
   },
   [ProjectRoles.COMMENTER]: {
     include: {
+      commentDelete: true,
+      commentResolve: true,
       commentEdit: true,
       commentList: true,
       commentCount: true,