Global loading done.

src/views/Files/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <!-- <Loading v-if="store.isLoading" /> -->
+  <!-- <Loading /> -->
   <div class="container pt-4 2xl:max-w-none">
     <!-- Recently Used -->
     <section class="mb-4">
@@ -61,13 +63,12 @@
                   <IconVector class="inline-block fill-neutral-500"></IconVector>
                 </span>
               </th>
-              <!-- 後端暫時沒做 Owner -->
-              <!-- <th>
+              <th>
                 Owner
                 <span class="ml-2 cursor-pointer">
                   <IconVector class="inline-block fill-neutral-500"></IconVector>
                 </span>
-              </th> -->
+              </th>
               <th>
                 Last update
                 <span class="ml-2 cursor-pointer">
@@ -81,7 +82,7 @@
               <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">Owner</td> -->
+              <td class="text-neutral-500">{{ file.owner.name }}</td>
               <td class="text-neutral-500">{{ file.updated_at }}</td>
             </tr>
           </tbody>
@@ -114,7 +115,7 @@
 </template>
 
 <script>
-  import { storeToRefs } from 'pinia';
+  // import { storeToRefs } from 'pinia';
   import filesStore from '@/stores/files.js';
   import IconDataFormat from '@/components/icons/IconDataFormat.vue';
   import IconRule from '@/components/icons/IconRule.vue';
@@ -156,21 +157,49 @@
       },
       // 時間排序，如果沒有 accessed_at 就不加入 data
       recentlyUsedFiles: function() {
-        let recentlyUsedFiles = this.allFiles.filter(item => item.accessed_at !== null);
-        return recentlyUsedFiles.sort((n, o) => o - n);
+        let recentlyUsedFiles = this.allFiles;
+        recentlyUsedFiles.filter(item => item.accessed_at !== null);
+        return recentlyUsedFiles.sort((x, y) => y.updated_at - x.updated_at);
       },
+      // Sort All Files
+      // sortFiles: function() {
+      //   let sortFiles = this.allFiles;
+      //   sortFiles.sort(i=>i.name)
+      //   // (x.name > y.name) -0.5;
+      //   // x.name.toLowerCase().charCodeAt(0) - y.name.toLowerCase().charCodeAt(0));
+      //   console.log(sortFiles);
+      //   return sortFiles;
+      // }
+    },
+    watch: {
+      // allFiles: {
+      //   handler: function(newVal, oldVal) {
+      //     console.log(newVal);
+      //     console.log(oldVal);
+      //   },
+      //   deep: true,
+      // },
     },
     methods: {
       /**
        * Sort Files item
        */
-      switchFiles(item) {
-        this.filesTag = item
+       sortFiles(value) {
+        let sortFiles = this.store.allFiles;
+        let nameSort = sortFiles.sort((x, y)=> x.name.localeCompare(y.name, 'en'));
+        let updateSort = sortFiles.sort((x, y)=> x.updated_at - y.updated_at);
+
+        // if(sortFiles.length === undefined) return;
+        if(value === 'string') nameSort;
+        else if(value === 'date') updateSort;
+        console.log(sortFiles);
+        return sortFiles;
       }
     },
     mounted() {
       this.store.fetchEventLog();
       this.store.fetchFilter();
+      // this.sortFiles();
     }
   }
 
@@ -184,8 +213,8 @@ table {
   td {
     @apply border-b border-neutral-300 p-3 font-medium whitespace-nowrap break-keep overflow-hidden text-ellipsis
   }
-  tr {
-    @apply hover:bg-primary/50 duration-300
+  tbody tr {
+    @apply hover:bg-primary/50 duration-300 cursor-pointer
   }
 }
 </style>