From aa3c80bacb50ba442f43fee7259247ce9d2b41f1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 24 Jun 2024 08:28:53 +0000
Subject: [PATCH] fix(nc-gui): make audit log table first column stick

---
 .../nc-gui/components/workspace/AuditLogs.vue | 174 ++++++++++++------
 1 file changed, 120 insertions(+), 54 deletions(-)

diff --git a/packages/nc-gui/components/workspace/AuditLogs.vue b/packages/nc-gui/components/workspace/AuditLogs.vue
index 3ba2d2e821..0e2dc2aff7 100644
--- a/packages/nc-gui/components/workspace/AuditLogs.vue
+++ b/packages/nc-gui/components/workspace/AuditLogs.vue
@@ -70,6 +70,8 @@ const isRowExpanded = ref(false)
 
 const selectedAudit = ref<null | AuditType>(null)
 
+const tableWrapper = ref<HTMLDivElement>()
+
 const auditDropdowns = ref({
   type: false,
   subType: false,
@@ -324,6 +326,20 @@ onMounted(async () => {
     await loadAudits(currentPage.value, currentLimit.value, false)
   }
 })
+
+useEventListener(tableWrapper, 'scroll', () => {
+  const stickyHeaderCell = tableWrapper.value?.querySelector('th.cell-user')
+  const nonStickyHeaderFirstCell = tableWrapper.value?.querySelector('th.cell-base')
+  if (!stickyHeaderCell?.getBoundingClientRect().right || !nonStickyHeaderFirstCell?.getBoundingClientRect().left) {
+    return
+  }
+
+  if (nonStickyHeaderFirstCell?.getBoundingClientRect().left < stickyHeaderCell?.getBoundingClientRect().right + 180) {
+    tableWrapper.value?.classList.add('sticky-shadow')
+  } else {
+    tableWrapper.value?.classList.remove('sticky-shadow')
+  }
+})
 </script>
 
 <template>
@@ -765,18 +781,21 @@ onMounted(async () => {
           'bordered': bordered,
         }"
       >
-        <div class="table-wrapper h-full max-h-[calc(100%_-_40px)] overflow-auto nc-scrollbar-thin relative">
-          <div class="nc-audit-logs-table table h-full relative">
-            <div class="thead sticky top-0">
-              <div class="tr">
-                <div
-                  class="th cell-user !hover:bg-gray-100 select-none cursor-pointer"
+        <div
+          ref="tableWrapper"
+          class="nc-audit-logs-table h-full max-h-[calc(100%_-_40px)] nc-scrollbar-thin relative !overflow-auto"
+        >
+          <table class="!sticky top-0 z-10">
+            <thead>
+              <tr>
+                <th
+                  class="cell-user !hover:bg-gray-100 select-none cursor-pointer"
                   :class="{
                     'cursor-not-allowed': !audits?.length,
                   }"
                   @click="updateOrderBy('user')"
                 >
-                  <div class="flex items-center gap-3 sticky left-0">
+                  <div class="flex items-center gap-3">
                     <div>User</div>
                     <GeneralIcon
                       v-if="auditLogsQuery.orderBy?.user"
@@ -788,9 +807,9 @@ onMounted(async () => {
                     />
                     <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
                   </div>
-                </div>
-                <div
-                  class="th cell-timestamp !hover:bg-gray-100 select-none cursor-pointer"
+                </th>
+                <th
+                  class="cell-timestamp !hover:bg-gray-100 select-none cursor-pointer"
                   :class="{
                     'cursor-not-allowed': !audits?.length,
                   }"
@@ -809,25 +828,38 @@ onMounted(async () => {
                     />
                     <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
                   </div>
-                </div>
-                <div class="th cell-base">Base</div>
-                <div class="th cell-type">Type</div>
-                <div class="th cell-sub-type">Sub-type</div>
-                <div class="th cell-description">Description</div>
-                <div class="th cell-ip">IP Address</div>
-              </div>
-            </div>
-            <div class="tbody">
-              <template v-if="audits?.length">
-                <template v-for="(audit, i) of audits" :key="i">
-                  <div
-                    class="tr"
-                    :class="{
-                      selected: selectedAudit?.id === audit.id && isRowExpanded,
-                    }"
-                    @click="handleRowClick(audit)"
-                  >
-                    <div class="td cell-user">
+                </th>
+                <th class="cell-base">
+                  <div>Base</div>
+                </th>
+                <th class="cell-type">
+                  <div>Type</div>
+                </th>
+                <th class="cell-sub-type">
+                  <div>Sub-type</div>
+                </th>
+                <th class="cell-description">
+                  <div>Description</div>
+                </th>
+                <th class="cell-ip">
+                  <div>IP Address</div>
+                </th>
+              </tr>
+            </thead>
+          </table>
+          <template v-if="audits?.length">
+            <table>
+              <tbody>
+                <tr
+                  v-for="(audit, i) of audits"
+                  :key="i"
+                  :class="{
+                    selected: selectedAudit?.id === audit.id && isRowExpanded,
+                  }"
+                  @click="handleRowClick(audit)"
+                >
+                  <td class="cell-user">
+                    <div>
                       <div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
                         <GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
                         <div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
@@ -863,14 +895,18 @@ onMounted(async () => {
                       </div>
                       <template v-else>{{ audit.user }} </template>
                     </div>
-                    <div class="td cell-timestamp">
+                  </td>
+                  <td class="cell-timestamp">
+                    <div>
                       <NcTooltip placement="bottom">
                         <template #title> {{ parseStringDateTime(audit.created_at, 'D MMMM YYYY HH:mm') }}</template>
 
                         {{ timeAgo(audit.created_at) }}
                       </NcTooltip>
                     </div>
-                    <div class="td cell-base">
+                  </td>
+                  <td class="cell-base">
+                    <div>
                       <div v-if="audit.base_id" class="w-full">
                         <NcTooltip
                           class="truncate text-sm !leading-5 text-gray-800 font-semibold"
@@ -889,7 +925,9 @@ onMounted(async () => {
                         {{ audit.base_id }}
                       </template>
                     </div>
-                    <div class="td cell-type">
+                  </td>
+                  <td class="cell-type">
+                    <div>
                       <div class="truncate bg-gray-200 px-2 py-1 rounded-lg">
                         <NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
                           <template #title> {{ auditOperationTypeLabels[audit.op_type] }}</template>
@@ -898,7 +936,9 @@ onMounted(async () => {
                         </NcTooltip>
                       </div>
                     </div>
-                    <div class="td cell-sub-type">
+                  </td>
+                  <td class="cell-sub-type">
+                    <div>
                       <div class="truncate">
                         <NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
                           <template #title> {{ auditOperationSubTypeLabels[audit.op_sub_type] }}</template>
@@ -907,21 +947,25 @@ onMounted(async () => {
                         </NcTooltip>
                       </div>
                     </div>
-                    <div class="td cell-description">
+                  </td>
+                  <td class="cell-description">
+                    <div>
                       <div class="truncate">
                         {{ audit.description }}
                       </div>
                     </div>
-                    <div class="td cell-ip">
+                  </td>
+                  <td class="cell-ip">
+                    <div>
                       <div class="truncate">
                         {{ audit.ip }}
                       </div>
                     </div>
-                  </div>
-                </template>
-              </template>
-            </div>
-          </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
         </div>
         <div
           v-show="isLoading"
@@ -1074,39 +1118,61 @@ onMounted(async () => {
 }
 
 .nc-audit-logs-table {
-  .thead {
-    .th {
+  &.sticky-shadow {
+    th,
+    td {
+      &.cell-user {
+        box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.08);
+      }
+    }
+  }
+  thead {
+    th {
       @apply bg-gray-50 text-sm text-gray-600;
+
+      &.cell-user {
+        @apply sticky left-0 z-4 bg-gray-50;
+      }
     }
   }
 
-  .tbody {
-    .tr {
+  tbody {
+    tr {
       @apply cursor-pointer;
 
       .td {
         @apply text-small leading-[18px] text-gray-600;
       }
+
+      td {
+        &.cell-user {
+          @apply sticky left-0 z-4 bg-white;
+        }
+      }
     }
   }
 
-  .tr {
-    @apply h-[54px] flex overflow-hidden border-b-1  border-gray-200;
+  tr {
+    @apply h-[54px] flex border-b-1  border-gray-200;
 
-    &:hover .td {
-      @apply bg-gray-50;
+    &:hover td {
+      @apply !bg-gray-50;
     }
 
-    &.selected .td {
-      @apply bg-gray-50;
+    &.selected td {
+      @apply !bg-gray-50;
     }
 
-    .th,
-    .td {
-      @apply px-6 h-full flex items-center;
+    th,
+    td {
+      @apply h-full;
+
+      & > div {
+        @apply px-6 h-full flex items-center;
+      }
 
       &.cell-user {
-        @apply w-[220px];
+        @apply w-[220px] sticky left-0 z-5;
       }
 
       &.cell-timestamp,