From c0ad84169a4a64de54a5a1097137f3ff1d54b656 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 7 Mar 2024 12:29:08 +0800
Subject: [PATCH] fix: Issues #138 files page thead sticky and only tbody have
 scrollbar done.

---
 src/assets/vendors.css    |  4 ++++
 src/views/Files/index.vue | 20 +++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/assets/vendors.css b/src/assets/vendors.css
index 210b581..5851a61 100644
--- a/src/assets/vendors.css
+++ b/src/assets/vendors.css
@@ -103,3 +103,7 @@ p-radiobutton-icon */
 .p-datatable-resizable > .p-datatable-wrapper {
   @apply !overflow-x-visible
 }
+/* 蓋住 inline style 的 overflow-auto，才能使 thead 定位 */
+.p-datatable-wrapper {
+  overflow: unset !important;
+}
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 061b0c0..0e7f412 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -159,8 +159,8 @@
           </ul>
         </div>
         <!-- All Files type of List -->
-        <div class="overflow-y-scroll overflow-x-hidden scrollbar max-h-[calc(100vh_-_440px)]" v-if="!switchListOrGrid">
-          <DataTable :value="allFiles" dataKey="id" tableClass="w-full text-sm cursor-pointer relative table-fixed" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
+        <div class=" " v-if="!switchListOrGrid">
+          <DataTable :value="allFiles" dataKey="id" tableClass="w-full text-sm cursor-pointer relative table-fixed" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable" >
             <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
             <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
             <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
@@ -179,7 +179,7 @@
         </div>
         <!-- All Files type of grid -->
         <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" v-else>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
+          <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
             <div>
               <span class="material-symbols-outlined mb-2 !text-[32px] block">
                 {{ file.icon }}
@@ -557,18 +557,20 @@
         const clickedLi = e.target.closest('li');
         if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
       })
+      // 為 DataTable tbody 加入 .scrollbar 選擇器
+      const tbodyElement = document.querySelector('.p-datatable-tbody');
+      tbodyElement.classList.add('scrollbar');
       this.isLoading = false;
-      // document.onmousemove = (e) => {
-      //   console.log('x:', e.pageX);
-      //   console.log('y:', e.pageY);
-      // }
     },
   }
 </script>
 
 <style scoped>
 :deep(thead) {
-  @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute
+  @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute table table-fixed w-full
+}
+:deep(tbody) {
+  @apply overflow-y-auto overflow-x-hidden max-h-[calc(100vh_-_480px)] block
 }
 :deep(table th) {
   @apply border-b !border-neutral-500 !p-2 text-left font-bold !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
@@ -577,7 +579,7 @@
   @apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis
 }
 :deep(tbody > tr) {
-  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none
+  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none table table-fixed w-full
 }
 :deep(.p-sortable-column) {
   @apply focus:!shadow-none !text-neutral-900