All Files sort done

src/stores/files.js

@@ -17,12 +17,14 @@ export default defineStore('filesStore', {
       {
         log: {},
         fileType: '',
+        ownerName: '',
       }
     ],
     allEventLog: [
       {
         parentLog: '',
         fileType: '',
+        ownerName: '',
       }
     ],
     switchFilesTagData: {
@@ -66,6 +68,7 @@ export default defineStore('filesStore', {
         this.allEventLog.map(o => {
           o.parentLog = "-";
           o.fileType = "Log";
+          o.ownerName = o.owner.name;
           o.updated_at = moment(o.updated_at).format('YYYY-MM-DD HH:MM');
           o.accessed_at = moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
           return this.allEventLog
@@ -96,6 +99,7 @@ export default defineStore('filesStore', {
         this.allFilter = response.data;
         this.allFilter.map(o => {
           o.fileType = "Filter";
+          o.ownerName = o.owner.name;
           o.updated_at = moment(o.updated_at).format('YYYY-MM-DD HH:MM');
           o.accessed_at = moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
         });

src/views/Files/index.vue

@@ -43,36 +43,12 @@
         <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
           <thead class="sticky top-0 bg-neutral-10">
             <tr>
-                <th @click="addSortEvent('name')" class="cursor-pointer">
-                  Name
+              <th v-for="(item, index) in sortData" :key="index" @click="switchSort(item.sortKey)" class="cursor-pointer">
+                {{ item.sortName }}
                 <span class="ml-2">
                   <IconVector class="inline-block fill-neutral-500"></IconVector>
                 </span>
               </th>
-              <th @click="addSortEvent('parentLog')"  class="cursor-pointer">
-                Parent log
-                <span class="ml-2 cursor-pointer">
-                  <IconVector class="inline-block fill-neutral-500"></IconVector>
-                </span>
-              </th>
-              <th @click="addSortEvent('parentLog')"  class="cursor-pointer">
-                File type
-                <span class="ml-2 cursor-pointer">
-                  <IconVector class="inline-block fill-neutral-500"></IconVector>
-                </span>
-              </th>
-              <th @click="addSortEvent('parentLog')"  class="cursor-pointer">
-                Owner
-                <span class="ml-2 cursor-pointer">
-                  <IconVector class="inline-block fill-neutral-500"></IconVector>
-                </span>
-              </th>
-              <th @click="addSortEvent('upadte')" class="cursor-pointer">
-                Last update
-                <span class="ml-2 cursor-pointer">
-                  <IconVector class="inline-block fill-neutral-500"></IconVector>
-                </span>
-              </th>
             </tr>
           </thead>
           <tbody>
@@ -128,8 +104,29 @@
         switchListOrGrid: false,
         filesTag: 'all',
         sortReverseOrder: false,
-        reverse: 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() {
@@ -154,17 +151,18 @@
        */
       allFiles: function(value) {
         let sortFiles = Array.from(this.store.allFiles);
+
+        let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
+        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();
-        // let dataSort;
-        // let aaa = this.recentlyUsedFiles;
-        // // aaa.reverse();
-        // console.log(aaa)
-
-        return strSort;
 
+        return this.sortKey !== 'updated_at'? strSort: dataSort;
       },
-      // 時間排序，如果沒有 accessed_at 就不加入 data
+      /**
+       * 時間排序，如果沒有 accessed_at 就不加入 data
+       */
       recentlyUsedFiles: function() {
         let recentlyUsedFiles = Array.from(this.store.allFiles);
         recentlyUsedFiles.filter(item => item.accessed_at !== null);
@@ -172,9 +170,10 @@
       },
     },
     methods: {
-      /**上下按鈕切換 */
-      // 順序預設為 true，點擊變逆序 false，每改一次都會重新渲染一次
-      addSortEvent(value) {
+      /**
+       * switch sort
+       */
+      switchSort(value) {
         this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
         this.sortKey = value;
       },
@@ -184,7 +183,6 @@
       this.store.fetchFilter();
     }
   }
-
 </script>
 
 <style scoped lang="scss">