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>

src/views/MainContainer.vue

@@ -4,28 +4,34 @@
     <Navbar/>
   </header>
   <main>
+    <Loading v-if="loadingStore.isLoading" />
     <router-view></router-view>
   </main>
 </template>
 
 <script>
-import loginStore from '@/stores/login.js';
+import LoginStore from '@/stores/login.js';
+import LoadingStore from '@/stores/loading.js';
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
+import Loading from '@/components/Loading.vue';
 
 export default {
   name: 'MainContainer',
   setup() {
-    const store = loginStore();
-    const { checkLogin } = store;
+    const loginStore = LoginStore();
+    const loadingStore = LoadingStore();
+    const { checkLogin } = loginStore;
 
     return {
       checkLogin,
+      loadingStore,
     }
   },
   components: {
     Header,
     Navbar,
+    Loading,
   },
   created() {
     /**