refactor(gui-v2): auto scroll to last comment or audit

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

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

@@ -1,60 +1,79 @@
 <script setup lang="ts">
 import { useExpandedFormStoreOrThrow } from '#imports'
+import { nextTick } from '#imports'
 import { enumColor, timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, row } =
   useExpandedFormStoreOrThrow()
 
+const commentsWrapperEl = ref<HTMLDivElement>()
+
+
 await loadCommentsAndLogs()
+
+watch(
+  commentsAndLogs,
+  () => {
+  nextTick(() => {
+    if (commentsWrapperEl.value)
+      commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
+  })
+}, { immediate: true })
+
 </script>
 
 <template>
-  <div>
-    <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
+  <div class="h-full d-flex flex-column w-full">
+    <div class="flex-grow-1 min-h-[100px] overflow-y-auto p-2" ref="commentsWrapperEl">
+      <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="flex gap-1 text-xs">
-        <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>
-          <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>
+      <template v-else>
+        <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
+          <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>
+            <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>
 
-          <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+            <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>
+            <p class="time text-right text-[10px] mb-0">
+              {{ timeAgo(log.created_at) }}
+            </p>
+          </div>
         </div>
-      </div>
+      </template>
     </div>
-    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+    <div class="border-1 my-2 w-full ml-6" />
+    <div class="p-2">
+      <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:value="comment"
-        class="caption comment-box"
-        :class="{ focus: showborder }"
-        @focusin="showborder = true"
-        @focusout="showborder = false"
-        @keyup.enter.prevent="saveComment"
-      >
-        <template #suffix>
-          <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
-        </template>
-      </a-input>
+      </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:value="comment"
+          class="caption comment-box"
+          :class="{ focus: showborder }"
+          @focusin="showborder = true"
+          @focusout="showborder = false"
+          @keyup.enter.prevent="saveComment"
+        >
+          <template #suffix>
+            <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
+          </template>
+        </a-input>
+      </div>
     </div>
   </div>
 </template>

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

@@ -80,8 +80,8 @@ const isExpanded = useVModel(props, 'modelValue', emits)
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
-      <div class="flex h-full nc-form-wrapper">
-        <div class="flex-grow f-full overflow-auto">
+      <div class="flex h-full nc-form-wrapper items-stretch">
+        <div class="flex-grow overflow-auto">
           <div class="w-[500px] mx-auto">
             <div v-for="col in fields" :key="col.title" class="mt-2">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
@@ -102,10 +102,10 @@ const isExpanded = useVModel(props, 'modelValue', emits)
         </div>
 
         <div
-          class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto"
+          class="nc-comments-drawer min-w-0 min-h-full max-h-full"
           :class="{ active: commentsDrawer }"
         >
-          <div class="w-[280px]">
+          <div class="h-full">
             <Comments v-if="commentsDrawer" />
           </div>
         </div>