feat(gui-v2): load row comments count

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

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -30,6 +30,8 @@ import {
 } from '~/context'
 import { NavigateDir } from '~/lib'
 
+import { enumColor } from '~/utils'
+
 const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
@@ -74,6 +76,7 @@ const {
   deleteRow,
   deleteSelectedRows,
   selectedAllRecords,
+  loadAggCommentsCount,
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
@@ -85,8 +88,9 @@ provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-reloadViewDataHook?.on(() => {
+reloadViewDataHook?.on(async () => {
-  loadData()
+  await loadData()
+  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
@@ -333,21 +337,28 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <tbody>
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
-              <tr class="nc-grid-row">
+                <tr class="nc-grid-row">
-                <td key="row-index" class="caption nc-grid-cell group">
+                  <td key="row-index" class="caption nc-grid-cell">
-                  <div class="flex items-center w-[80px]">
+                    <div class="align-center flex w-[80px]">
-                    <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                    <div
+                      <div
-                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                      class="group-hover:flex w-full items-center justify-between p-1"
+                        class="group-hover:flex w-full items-center justify-between p-1"
-                    >
+                      >
-                      <a-checkbox v-model:checked="row.rowMeta.selected" />
+                        <a-checkbox v-model:checked="row.rowMeta.selected" />
-                      <span class="flex-1" />
+                        <span class="flex-1" />
-                      <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                        <span
-                        <MdiArrowExpand
+                          v-if="row.rowMeta?.commentCount"
-                          class="select-none transform hover:(text-pink-500 scale-120)"
+                          class="py-1 px-3 rounded-full text-[11px]"
+                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
-                        />
+                        >{{ row.rowMeta.commentCount }}</span>
+                        <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
+                            @click="expandForm(row, state)"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>

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

@@ -55,7 +55,7 @@ watch(
     <div class="p-0">
       <div class="flex justify-center">
         <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
-          ><span class="text-[11px]">Comments only</span>
+          ><span class="text-[11px] text-gray-500">Comments only</span>
         </a-checkbox>
       </div>
       <div class="flex-shrink-1 mt-2 d-flex pl-4">

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

@@ -1,10 +1,10 @@
-import type { Api, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -16,7 +16,10 @@ const formatData = (list: Record<string, any>[]) =>
 export interface Row {
   row: Record<string, any>
   oldRow: Record<string, any>
-  rowMeta?: any
+  rowMeta: {
+    new?: boolean
+    commentCount?: number
+  }
 }
 
 export function useViewData(
@@ -24,8 +27,13 @@ export function useViewData(
   viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
+  if (!meta) {
+    throw new Error('Table meta is not available')
+  }
+
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const aggCommentCount = ref<Record<string, number>>({})
   const galleryData = ref<GalleryType | undefined>(undefined)
 
   const { project } = useProject()
@@ -49,13 +57,39 @@ export function useViewData(
     )
     paginationData.value.totalRows = count
   }
-  
+
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
     where: where?.value ?? '',
   }))
 
+  /** load row comments count */
+  const loadAggCommentsCount = async () => {
+    // todo: handle in public api
+    // if (this.isPublicView) {
+    //   return;
+    // }
+
+    const ids = formattedData.value
+      ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
+      ?.map(({ row }) => {
+        return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
+      })
+
+    if (!ids?.length) return
+
+    aggCommentCount.value = await $api.utils.commentCount({
+      ids,
+      fk_model_id: meta.value.id as string,
+    })
+
+    for (const row of formattedData.value) {
+      const id = extractPkFromRow(row.row, meta?.value?.columns as ColumnType[])
+      row.rowMeta.commentCount = aggCommentCount.value?.find((c) => c.row_id === id)?.count || 0
+    }
+  }
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
@@ -64,6 +98,8 @@ export function useViewData(
     })
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
+
+    loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -265,5 +301,7 @@ export function useViewData(
     syncCount,
     galleryData,
     loadGalleryData,
+    aggCommentCount,
+    loadAggCommentsCount,
   }
 }