Global loading done.

src/assets/loader.css

@@ -0,0 +1,31 @@
+.loader {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  background-image:
+    linear-gradient(#FFF 16px, transparent 0) ,
+    linear-gradient(#FF3D00 16px, transparent 0) ,
+    linear-gradient(#FF3D00 16px, transparent 0) ,
+    linear-gradient(#FFF 16px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: left top , left bottom , right top , right bottom;
+  animation: rotate 1s linear infinite;
+}
+@keyframes rotate {
+  0% {
+    width: 64px;
+    height: 64px;
+    transform: rotate(0deg)
+  }
+  50% {
+    width: 30px;
+    height: 30px;
+    transform: rotate(180deg)
+  }
+  100% {
+    width: 64px;
+    height: 64px;
+    transform: rotate(360deg)
+  }
+}

src/assets/main.css

@@ -1 +1,2 @@
 @import './tailwind.css';
+@import './loader.css';

src/components/Loading.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-full fixed inset-0 m-auto flex justify-center items-center bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-10">
+    <span class="loader block"></span>
+  </div>
+</template>

src/main.js

@@ -1,8 +1,8 @@
 import { createApp, markRaw } from "vue";
-import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
+import pinia from '@/stores/main.js'
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import moment from 'moment';
@@ -11,7 +11,6 @@ import mitt from 'mitt';
 import "./assets/main.css";
 
 const emitter = mitt();
-const pinia = createPinia();
 const app = createApp(App);
 
 pinia.use(({ store }) => {
@@ -25,5 +24,4 @@ app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
 
-
 app.mount("#app");

src/stores/files.js

@@ -1,7 +1,11 @@
 import { defineStore } from "pinia";
+import  loadingStore from './loading.js';
+import pinia from '@/stores/main.js'
 import axios from "axios";
 import moment from 'moment';
 
+const loading = loadingStore(pinia);
+
 export default defineStore('filesStore', {
   state: () => ({
     allFilter: [
@@ -23,6 +27,7 @@ export default defineStore('filesStore', {
       DESIGN: ['Log', 'Design'],
     },
     filesTag: 'ALL',
+    httpStatus: 200,
   }),
   getters: {
   /**
@@ -60,8 +65,11 @@ export default defineStore('filesStore', {
           o.accessed_at = moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
           return this.allEventLog
         })
+        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
-      } finally {};
+        loading.isLoading = true;
+        this.httpStatus = error.request.status;
+      };
     },
     /**
      * Fetch filters api
@@ -78,8 +86,11 @@ export default defineStore('filesStore', {
           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');
         });
+        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
-      } finally {};
+        loading.isLoading = true;
+        this.httpStatus = error.request.status;
+      };
     },
   }
 })

src/stores/loading.js

@@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+
+export default defineStore('loadingStore', {
+  state: () => ({
+    isLoading: true,
+  })
+});

src/stores/main.js

@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia';
+const pinia = createPinia();
+export default pinia;

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);
+        let recentlyUsedFiles = this.allFiles;
-        return recentlyUsedFiles.sort((n, o) => o - n);
+        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) {
+       sortFiles(value) {
-        this.filesTag = item
+        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 {
+  tbody tr {
-    @apply hover:bg-primary/50 duration-300
+    @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 loginStore = LoginStore();
-    const { checkLogin } = store;
+    const loadingStore = LoadingStore();
+    const { checkLogin } = loginStore;
 
     return {
       checkLogin,
+      loadingStore,
     }
   },
   components: {
     Header,
     Navbar,
+    Loading,
   },
   created() {
     /**