Files: switch All Files type of List table to Primevue DataTable.

src/views/Files/index.vue

@@ -38,28 +38,14 @@
         </ul>
       </div>
       <!-- All Files type of List -->
-      <div class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] mx-[-8px] scrollbar" v-if="!switchListOrGrid">
+      <div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
-        <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
+        <DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" breakpoint="0" @row-dblclick="enterDiscover($event.data)">
-          <thead class="sticky top-0 bg-neutral-10">
+          <Column field="name" header="Name" bodyClass="font-medium" sortable></Column>
-            <tr>
+          <Column field="parentLog" header="Parent log" bodyClass="text-neutral-500" sortable></Column>
-              <th v-for="(item, index) in sortData" :key="index" @click="switchSort(item.sortKey)" class="cursor-pointer">
+          <Column field="fileType" header="File type" bodyClass="text-neutral-500" sortable></Column>
-                {{ item.sortName }}
+          <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
-                <span class="ml-2">
+          <Column field="updated_at" header="Last update" bodyClass="text-neutral-500" sortable></Column>
-                  <IconVector class="inline-block fill-neutral-500"></IconVector>
+        </DataTable>
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
-              <td>{{ file.name }}</td>
-              <td class="text-neutral-500">{{ file.parentLog }}</td>
-              <td class="text-neutral-500">{{ file.fileType }}</td>
-              <td class="text-neutral-500">{{ file.owner.name }}</td>
-              <td class="text-neutral-500">{{ file.updated_at }}</td>
-            </tr>
-          </tbody>
-        </table>
       </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_-_480px)] scrollbar" v-else>
@@ -100,30 +86,6 @@
       return {
         switchListOrGrid: false,
         filesTag: 'all',
-        sortReverseOrder: false,
-        sortKey: 'name',
-        sortData: [
-          {
-            sortKey: 'name',
-            sortName: 'Name',
-          },
-          {
-            sortKey: 'parentLog',
-            sortName: 'Parent log',
-          },
-          {
-            sortKey: 'fileType',
-            sortName: 'File type',
-          },
-          {
-            sortKey: 'ownerName',
-            sortName: 'Owner',
-          },
-          {
-            sortKey: 'updated_at',
-            sortName: 'Last update',
-          },
-        ],
       }
     },
     setup() {
@@ -149,14 +111,8 @@
       allFiles: function() {
         if(this.store.allFiles.length !== 0){
           let sortFiles = Array.from(this.store.allFiles);
-
+          sortFiles.sort((x,y) => new Date(x.updated_at) - new Date(y.updated_at));
-          let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
+          return sortFiles;
-          let dataSort = this.sortReverseOrder === false? dataSortOrder: dataSortOrder.reverse();
-
-          let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
-          let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
-
-          return this.sortKey !== 'updated_at'? strSort: dataSort;
         }
       },
       /**
@@ -178,14 +134,6 @@
       }
     },
     methods: {
-      /**
-       * sort's switch
-       * @param {string} value
-       */
-      switchSort(value) {
-        this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
-        this.sortKey = value;
-      },
       /**
        * 選擇該 files 進入 Discover/Compare/Design 頁面
        * @param {object} file
@@ -201,16 +149,23 @@
   }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
-table {
+:deep(thead) {
-  th {
+  @apply sticky top-0 bg-neutral-10
-    @apply border-b border-neutral-500 p-3 text-left font-black whitespace-nowrap break-keep overflow-hidden text-ellipsis
+}
-  }
+:deep(table th) {
-  td {
+  @apply border-b !border-neutral-500 p-3 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
-    @apply border-b border-neutral-300 p-3 font-medium whitespace-nowrap break-keep overflow-hidden text-ellipsis
+}
-  }
+:deep(table td) {
-  tbody tr {
+  @apply border-b border-neutral-300 p-3 whitespace-nowrap break-keep overflow-hidden text-ellipsis
-    @apply hover:bg-primary/50 duration-300 cursor-pointer
+}
-  }
+:deep(tbody > tr) {
+  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none
+}
+:deep(.p-sortable-column) {
+  @apply focus:!shadow-none !text-neutral-900
+}
+:deep(.p-sortable-column-icon) {
+  @apply !text-[#6c757d]
 }
 </style>