feat(gui-v2): add comments

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

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

@@ -59,6 +59,7 @@ const contextMenu = ref(false)
 
 const contextMenuTarget = ref(false)
 const expandedFormDlg = ref(false)
+const expandedFormRow = ref<Row>()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -272,6 +273,11 @@ const onNavigate = (dir: NavigateDir) => {
       break
   }
 }
+
+const expandForm = (row: Row) => {
+  expandedFormRow.value = row
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -419,7 +425,7 @@ const onNavigate = (dir: NavigateDir) => {
     </div>
 
     <SmartsheetPagination />
-    <SmartsheetExpandedForm v-model="expandedFormDlg" />
+    <SmartsheetExpandedForm v-if="expandedFormRow" v-model="expandedFormDlg" :row="expandedFormRow" />
   </div>
 </template>
 

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

@@ -1,16 +1,97 @@
 <script setup lang="ts">
-const loadComments = async () => {
-  const data = await this.$api.utils.commentList({
-    row_id: this.meta.columns
-      .filter((c) => c.pk)
-      .map((c) => this.localState[c.title])
-      .join('___'),
-    fk_model_id: this.meta.id,
-    comments_only: this.commentsOnly,
-  })
-}
+import { useExpandedFormStoreOrThrow } from '#imports'
+import { timeAgo } from '~/utils'
+import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
+import MdiAccountIcon from '~icons/mdi/account-circle'
+import {colors}
+
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow()
+
+await loadCommentsAndLogs()
 </script>
 
-<template></template>
+<template>
+  <div>
+    <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">
+
+
+        <MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/>
+
+        <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>
+<!--        :style="{ background: colors[2] }" -->
+                 <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" >
+        {{ 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 text-[10px] mb-0">
+          {{ 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> -->
+      <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"
+      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>
+    </a-input>
+  </div>
+  </div>
+</template>
 
 <style scoped></style>

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

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
-import { computed, provide } from 'vue'
+import { Ref, computed, provide, toRef } from 'vue'
+import Comments from '~/components/smartsheet/expanded-form/Comments.vue'
+import { useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
+import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
 interface Props {
   modelValue: string | null
+  row: Row
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
 const fields = inject(FieldsInj, ref([]))
-const meta = inject(MetaInj)
+const row = toRef(props, 'row')
+
+const { meta } = useSmartsheetStoreOrThrow()
 
 provide(IsFormInj, true)
 
 // accept as a prop
-const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+
+const { loadComments } = useProvideExpandedFormStore(meta, row)
 
 const commentsDrawer = ref(false)
 
@@ -58,7 +66,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
         </div>
 
         <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
-          <div class="w-[250px]">dsdsssdsdsdd</div>
+          <div class="w-[250px]">
+            <Comments />
+          </div>
         </div>
       </div>
     </a-card>

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

@@ -20,3 +20,4 @@ export * from './useVirtualCell'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
 export * from './useLTARStore'
+export * from './useExpandedFormStore'

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

@@ -1,11 +1,70 @@
-import { useInjectionState,  } from '#imports'
+import { useNuxtApp } from '#app'
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useInjectionState } from '#imports'
+import { useApi } from '~/composables/useApi'
+import { extractPkFromRow } from '~/utils'
+import { message } from 'ant-design-vue'
 
-const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(() => {
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
+  (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
+    const { $e, $state } = useNuxtApp()
+    const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
+    // { useGlobalInstance: true },
+    const commentsOnly = ref(false)
+    const commentsAndLogs = ref([])
+    const comment = ref('')
+
+    const loadCommentsAndLogs = async () => {
+      if (!row.value) return
+      const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+      if (!rowId) return
+      commentsAndLogs.value = await api.utils.commentList({
+        row_id: rowId,
+        fk_model_id: meta.value.id as string,
+        comments_only: commentsOnly.value,
+      })
+    }
+
+    const  isYou = (email) => {
+      return $state.user?.value?.email === email;
+    }
+
+    const saveComment = async () => {
+      try {
 
-},'expanded-form-store')
 
+        if (!row.value) return
+        const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+        if (!rowId) return
 
+        await api.utils.commentRow({
+          fk_model_id: meta.value?.id as string,
+          row_id: rowId,
+          description: comment.value,
+        })
 
+        comment.value = ''
+        message.success('Comment added successfully')
+        await loadCommentsAndLogs()
+      } catch (e) {
+        message.error(e.message)
+      }
+
+      $e('a:row-expand:comment')
+    }
+    return {
+      commentsOnly,
+      loadCommentsAndLogs,
+      commentsAndLogs,
+      isCommentsLoading,
+      commentsError,
+      saveComment,
+      comment,isYou
+    }
+  },
+  'expanded-form-store',
+)
 
 export { useProvideExpandedFormStore }
 

packages/nc-gui-v2/utils/dataUtils.ts

@@ -0,0 +1,8 @@
+import type { ColumnType } from 'nocodb-sdk'
+
+export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
+  return columns
+    ?.filter((c) => c.pk)
+    .map((c) => row?.[c.title as string])
+    .join('___')
+}

packages/nc-gui-v2/utils/index.ts

@@ -15,3 +15,4 @@ export * from './columnUtils'
 export * from './validation'
 export * from './viewUtils'
 export * from './currencyUtils'
+export * from './dataUtils'

packages/nocodb-sdk/src/lib/Api.ts

@@ -3111,7 +3111,7 @@ export class Api<
      * @response `200` `void` OK
      */
     commentRow: (
-      data: { row_id: string; fk_model_id: string; comment: string },
+      data: { row_id: string; fk_model_id: string; description?: string },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({