Delay loading and toast 待æDone

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;
-        else if(value === 'date') updateSort;
-        console.log(sortFiles);
-        return sortFiles;
+        // if(value === 'string') nameSort;
+        // else if(value === 'date') updateSort;
+        // console.log(sortFiles);
+        // return sortFiles;
       }
     },
     mounted() {
       this.store.fetchEventLog();
       this.store.fetchFilter();
       // this.sortFiles();
+      // console.log(this.sortReverseOrder);
     }
   }