feat(gui-v2): comment styling and functionality

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -3,9 +3,17 @@ import { useExpandedFormStoreOrThrow } from '#imports'
 import { timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
-import {colors}
+import { enumColor } from '~/utils'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow()
+const {
+  loadCommentsAndLogs,
+  commentsAndLogs,
+  isCommentsLoading,
+  commentsOnly,
+  saveComment,
+  isYou,
+  comment,
+} = useExpandedFormStoreOrThrow()
 
 await loadCommentsAndLogs()
 </script>
@@ -15,17 +23,17 @@ await loadCommentsAndLogs()
     <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
     <div v-else class="blue-grey">
-      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
+      <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
 
 
-        <MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/>
-
-        <p class="mb-1 caption edited-text">
+        <MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+        <div class="flex-grow">
+          <p class="mb-1 caption edited-text text-[10px] text-gray">
             {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
             {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
           </p>
-<!--        :style="{ background: colors[2] }" -->
-                 <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" >
+          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip w-full min-h-20px"
+             :style="{ backgroundColor: enumColor.light[2] }">
             {{ log.description }}
           </p>
 
@@ -35,63 +43,34 @@ await loadCommentsAndLogs()
             {{ timeAgo(log.created_at) }}
           </p>
         </div>
-<!--      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
-        &lt;!&ndash;          <v-list-item-icon class="ma-0 mr-2">
-            <v-icon :color="isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'">
-              mdi-account-circle
-            </v-icon>
-          </v-list-item-icon> &ndash;&gt;
-        <div class="flex-grow-1" style="min-width: 0">
-          <p class="mb-1 caption edited-text">
-            {{ // isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
-            {{ // log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
-          </p>
-          &lt;!&ndash;          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" :style="{ background: colors[2] }">
-            {{ log.description }}
-          </p>
-
-          <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
-
-          <p class="time text-right mb-0">
-            {{ timeAgo(log.created_at) }}
-          </p> &ndash;&gt;
       </div>
-      </div>-->
     </div>
-    <!--  </div> -->
-
-    <!--  <v-spacer />
-  <v-divider />
-  <div class="d-flex align-center justify-center">
-    <v-switch
-      v-model="commentsOnly"
-      v-t="['c:row-expand:comment-only']"
-      class="mt-1"
-      dense
-      hide-details
-      @change="getAuditsAndComments"
-    >
-      <template #label>
-        <span class="caption grey&#45;&#45;text">Comments only</span>
-      </template>
-    </v-switch>
-  </div> -->
+    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"><span class="text-xs">Comments only</span>
+    </a-checkbox>
     <div class="flex-shrink-1 mt-2 d-flex pl-4">
       <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
       <a-input
-      v-model="comment"
+        v-model:value="comment"
         class="caption comment-box"
         :class="{ focus: showborder }"
         @focusin="showborder = true"
         @focusout="showborder = false"
         @keyup.enter.prevent="saveComment"
       >
-      <template v-if="comment" #addonAfter>
-        <MdiKeyboardReturnIcon class="text-sm" small @click="saveComment" />
+        <template #suffix>
+          <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
         </template>
       </a-input>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.red.lighten-4) {
+  @apply bg-red-100
+}
+
+:deep(.green.lighten-4) {
+  @apply bg-green-100
+}
+</style>

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

@@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
 </script>
 
 <template>
-  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" body-style="padding:0" :closable="false">
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{padding:0}" :closable="false">
     <div class="flex p-2">
       <div class="flex-grow" />
       <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@@ -65,9 +65,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
           </div>
         </div>
 
-        <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
-          <div class="w-[250px]">
-            <Comments />
+        <div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
+          <div class="w-[280px]">
+            <Comments v-if="commentsDrawer" />
           </div>
         </div>
       </div>

packages/nc-gui-v2/composables/useExpandedFormStore.ts

@@ -19,11 +19,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       if (!row.value) return
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
       if (!rowId) return
-      commentsAndLogs.value = await api.utils.commentList({
+      commentsAndLogs.value = (await api.utils.commentList({
         row_id: rowId,
         fk_model_id: meta.value.id as string,
         comments_only: commentsOnly.value,
-      })
+      }))?.reverse?.() || []
     }
 
     const  isYou = (email) => {
@@ -34,7 +34,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       try {
 
 
-        if (!row.value) return
+        if (!row.value || !comment.value) return
         const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
         if (!rowId) return
 

packages/nc-gui-v2/package.json

@@ -26,6 +26,7 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
+    "vue-dompurify-html": "^3.0.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
     "vue-i18n": "^9.1.10",

packages/nc-gui-v2/plugins/domPurify.ts

@@ -0,0 +1,7 @@
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { defineNuxtPlugin } from 'nuxt/app'
+
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueDOMPurifyHTML)
+})

packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

@@ -678,6 +678,7 @@ h5 {
   padding: 8px;
   border-radius: 8px;
 }
+
 </style>
 <!--
 /**