Delay loading and toast 待æDone

package-lock.json

@@ -17,7 +17,8 @@
         "tailwindcss": "^3.2.4",
         "vue": "^3.2.45",
         "vue-axios": "^3.5.2",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vue-toast-notification": "^3.0.4"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.4",
@@ -5901,6 +5902,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-toast-notification": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
+      "integrity": "sha512-rEhLtcKg8SVdBpdN7PrNst5nmY8dw0j3NkNImqurhlGurqR/QDKoou0t2PuCReEOCTKqHvfLCle2I3kwQWDWDQ==",
+      "engines": {
+        "node": ">=12.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -10431,6 +10443,12 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue-toast-notification": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
+      "integrity": "sha512-rEhLtcKg8SVdBpdN7PrNst5nmY8dw0j3NkNImqurhlGurqR/QDKoou0t2PuCReEOCTKqHvfLCle2I3kwQWDWDQ==",
+      "requires": {}
+    },
     "w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",

package.json

@@ -23,7 +23,8 @@
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue-toast-notification": "^3.0.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",

src/components/Navbar.vue

@@ -47,7 +47,7 @@ export default {
       // navViewName: {
       //   files: ['all', 'discover', 'compare', 'design'],
       // },
-      navViewName: '',
+      // navViewName: '',
     };
   },
   setup() {
@@ -65,9 +65,9 @@ export default {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
   methods: {
-    switchNavView(name) {
+    // switchNavView(name) {
-      this.navViewName = name;
+    //   this.navViewName = name;
-    },
+    // },
     switchNavItem(event) {
       this.store.filesTag = event.target.innerText;
     }

src/main.js

@@ -7,14 +7,18 @@ import axios from 'axios';
 import VueAxios from 'vue-axios';
 import moment from 'moment';
 import mitt from 'mitt';
+import ToastPlugin from 'vue-toast-notification';
 
 import "./assets/main.css";
+//import 'vue-toast-notification/dist/theme-default.css';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
 const emitter = mitt();
 const app = createApp(App);
 
 pinia.use(({ store }) => {
   store.$router = markRaw(router)
+  store.$toast = markRaw(ToastPlugin)
 });
 
 // can use `this.$moment` in Vue.js
@@ -23,5 +27,9 @@ app.config.globalProperties.emitter = emitter;
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
+// use `this.$toast` in Vue.js
+app.use(ToastPlugin, {
+  duration: 10000,
+});
 
 app.mount("#app");

src/stores/files.js

@@ -3,8 +3,13 @@ import  loadingStore from './loading.js';
 import pinia from '@/stores/main.js'
 import axios from "axios";
 import moment from 'moment';
+import {useToast} from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
 const loading = loadingStore(pinia);
+const $toast = useToast();
+// Delay loading and toast 待模組化
+let delay = s =>  new Promise((resolve, reject) => setTimeout(resolve, s));
 
 export default defineStore('filesStore', {
   state: () => ({
@@ -67,8 +72,16 @@ export default defineStore('filesStore', {
         })
         if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
-        loading.isLoading = true;
         this.httpStatus = error.request.status;
+        delay().then(() =>{
+          loading.isLoading = true;
+          return delay(1000);
+        }).then(()=>{
+          loading.isLoading = false;
+          return delay(500);
+        }).then(() => {
+          $toast.default('Import Filter files error.');
+        })
       };
     },
     /**
@@ -88,8 +101,16 @@ export default defineStore('filesStore', {
         });
         if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
-        loading.isLoading = true;
         this.httpStatus = error.request.status;
+        delay().then(() =>{
+          loading.isLoading = true;
+          return delay(1000);
+        }).then(()=>{
+          loading.isLoading = false;
+          return delay(500);
+        }).then(() => {
+          $toast.default('Import Filter files error.');
+        })
       };
     },
   }

src/stores/main.js

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

src/views/Files/index.vue

@@ -47,7 +47,7 @@
               <tr>
                 <th>
                   Name
-                  <span class="ml-2 cursor-pointer">
+                  <span class="ml-2 cursor-pointer" @click="addSortEvent($event)">
                     <IconVector class="inline-block fill-neutral-500"></IconVector>
                   </span>
               </th>
@@ -115,7 +115,6 @@
 </template>
 
 <script>
-  // import { storeToRefs } from 'pinia';
   import filesStore from '@/stores/files.js';
   import IconDataFormat from '@/components/icons/IconDataFormat.vue';
   import IconRule from '@/components/icons/IconRule.vue';
@@ -130,6 +129,7 @@
       return {
         switchListOrGrid: false,
         filesTag: 'all',
+        sortReverseOrder: false,
       }
     },
     setup() {
@@ -152,7 +152,17 @@
       /**
        * Read allFiles
        */
-      allFiles: function() {
+      allFiles: function(value) {
+        // let sortFiles = this.store.allFiles;
+        // let nameSortOrder = sortFiles.sort((x, y)=> x.name.localeCompare(y.name, 'en'));
+        // let nameSortReverse = sortFiles.sort((x, y)=> y.name.localeCompare(x.name, 'en'));
+
+        // if(this.sortReverseOrder === false){
+        //   return nameSortOrder;
+        // }
+        // else {
+        //   return nameSortReverse;
+        // }
         return this.store.allFiles;
       },
       // 時間排序，如果沒有 accessed_at 就不加入 data
@@ -171,35 +181,39 @@
       //   return sortFiles;
       // }
     },
-    watch: {
-      // allFiles: {
-      //   handler: function(newVal, oldVal) {
-      //     console.log(newVal);
-      //     console.log(oldVal);
-      //   },
-      //   deep: true,
-      // },
-    },
     methods: {
+      /**上下按鈕切換 */
+      // 順序預設為 true，點擊變逆序 false，每改一次都會重新渲染一次
+      addSortEvent(event) {
+        if(this.sortReverseOrder === false){
+          this.sortReverseOrder = true;
+        }else {
+          this.sortReverseOrder = false;
+        }
+        console.log(this.sortReverseOrder);
+      },
       /**
        * Sort Files item
        */
-       sortFiles(value) {
+      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);
+        console.log(nameSort);
+
 
         // if(sortFiles.length === undefined) return;
-        if(value === 'string') nameSort;
+        // if(value === 'string') nameSort;
-        else if(value === 'date') updateSort;
+        // else if(value === 'date') updateSort;
-        console.log(sortFiles);
+        // console.log(sortFiles);
-        return sortFiles;
+        // return sortFiles;
       }
     },
     mounted() {
       this.store.fetchEventLog();
       this.store.fetchFilter();
       // this.sortFiles();
+      // console.log(this.sortReverseOrder);
     }
   }