feat(nc-gui): add context menu for expanded form comments

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { enumColor, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
+import { enumColor, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useI18n, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
@@ -10,6 +10,35 @@ await loadCommentsAndLogs()
 
 const showBorder = ref(false)
 
+const { copy } = useCopy()
+
+const { t } = useI18n()
+
+const { isUIAllowed } = useUIPermission()
+
+const hasEditPermission = $computed(() => isUIAllowed('commentEditable'))
+
+const _contextMenu = ref(false)
+
+const contextMenu = computed({
+  get: () => _contextMenu.value,
+  set: (val) => {
+    if (hasEditPermission) {
+      _contextMenu.value = val
+    }
+  },
+})
+
+async function copyComment(val: string) {
+  if (!val) return
+  try {
+    await copy(val)
+    message.success(t('msg.success.commentCopied'))
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+
 watch(
   commentsAndLogs,
   () => {
@@ -26,31 +55,49 @@ watch(
   <div class="h-full flex flex-col w-full bg-[#eceff1] p-2">
     <div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-dull p-2 space-y-2">
       <a-skeleton v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
-
       <template v-else>
-        <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
-          <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
-
-          <div class="flex-1">
-            <p class="mb-1 caption edited-text text-[10px] text-gray-500">
-              {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
-              {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
-            </p>
-
-            <p
-              v-if="log.op_type === 'COMMENT'"
-              class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded"
-              :style="{ backgroundColor: enumColor.light[2] }"
-            >
-              {{ log.description }}
-            </p>
-
-            <p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
-
-            <p class="time text-right text-[10px] mb-0 mt-1 text-gray-500">
-              {{ timeAgo(log.created_at) }}
-            </p>
-          </div>
+        <div v-for="(log, idx) of commentsAndLogs" :key="log.id">
+          <a-dropdown :trigger="['contextmenu']" :overlay-class-name="`nc-dropdown-comment-context-menu-${idx}`">
+            <div class="flex gap-1 text-xs">
+              <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+
+              <div class="flex-1">
+                <p class="mb-1 caption edited-text text-[10px] text-gray-500">
+                  {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
+                  {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+                </p>
+
+                <p
+                  v-if="log.op_type === 'COMMENT'"
+                  class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded"
+                  :style="{ backgroundColor: enumColor.light[2] }"
+                >
+                  {{ log.description }}
+                </p>
+
+                <p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
+
+                <p class="time text-right text-[10px] mb-0 mt-1 text-gray-500">
+                  {{ timeAgo(log.created_at) }}
+                </p>
+              </div>
+            </div>
+
+            <template #overlay>
+              <a-menu @click="contextMenu = false">
+                <a-menu-item key="copy-comment" @click="copyComment(log.description)">
+                  <div v-e="['a:comment:copy']" class="nc-project-menu-item">
+                    {{ t('activity.copyComment') }}
+                  </div>
+                </a-menu-item>
+                <a-menu-item key="edit-comment">
+                  <div v-e="['a:comment:edit']" class="nc-project-menu-item">
+                    {{ t('activity.editComment') }}
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
         </div>
       </template>
     </div>
@@ -59,10 +106,9 @@ watch(
 
     <div class="p-0">
       <div class="flex justify-center">
-        <!--        Comments only -->
+        <!-- Comments only -->
         <a-checkbox v-model:checked="commentsOnly" v-e="['c:row-expand:comment-only']" @change="loadCommentsAndLogs">
           {{ $t('labels.commentsOnly') }}
-
           <span class="text-[11px] text-gray-500" />
         </a-checkbox>
       </div>