Files page Pinia Done

src/views/Files/index.vue

@@ -28,7 +28,7 @@
     </section>
     <section>
       <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
-        <h2 class="font-bold" @click="filesTag = 'design'">All Files</h2>
+        <h2 class="font-bold">All Files</h2>
         <ul class="flex items-center">
           <li class="mr-4 cursor-pointer" @click="switchListOrGrid = false">
             <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
@@ -114,6 +114,8 @@
 </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';
   import IconsFilter from '@/components/icons/IconsFilter.vue';
@@ -125,29 +127,17 @@
   export default {
     data() {
       return {
-        allFilter: [
-          {
-            log: {},
-            fileType: '',
-          }
-        ],
-        allEventLog: [
-          {
-            parentLog: '',
-            fileType: '',
-          }
-        ],
         switchListOrGrid: false,
-        switchFilesTagData: {
-          all: ['Log', 'Filter', 'Rule', 'Design'],
-          discover: ['Log', 'Filter', 'Rule'],
-          compare: ['Filter'],
-          design: ['Log', 'Design'],
-        },
         filesTag: 'all',
       }
     },
-    setup() {},
+    setup() {
+      const store = filesStore();
+
+      return {
+        store,
+      }
+    },
     components: {
       IconDataFormat,
       IconRule,
@@ -155,25 +145,15 @@
       IconFlowChart,
       IconVector,
       IconList,
-      IconGrid
+      IconGrid,
     },
     computed: {
       /**
-       * Get allFiles and switch files tag
+       * Read allFiles
        */
       allFiles: function() {
-        let result = [
-          ...this.allEventLog,
-          ...this.allFilter.map(itemFilter => {
-            return { ...itemFilter, parentLog: itemFilter.log.name }
-          })
-        ];
-        let data = this.switchFilesTagData;
-        let filesTag = this.filesTag;
-
-        result = result.filter(file => data[filesTag].includes(file.fileType));
-        return result;
-        },
+        return this.store.allFiles;
+      },
       // 時間排序，如果沒有 accessed_at 就不加入 data
       recentlyUsedFiles: function() {
         let recentlyUsedFiles = this.allFiles.filter(item => item.accessed_at !== null);
@@ -181,51 +161,16 @@
       },
     },
     methods: {
-      /**
-       * Get all files
-       */
-      async fetchFilter() {
-        const api = 'api/filters';
-
-        try {
-          const response = await this.$http.get(api);
-
-          this.allFilter = response.data;
-          this.allFilter.map(o => {
-            o.fileType = "Filter";
-            o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
-            o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
-          });
-        } catch(error) {
-        } finally {};
-      },
-      /**
-       * Get all event log
-       */
-      async fetchEventLog() {
-        const api = 'api/logs';
-
-        try {
-          const response = await this.$http.get(api);
-
-          this.allEventLog = response.data;
-          this.allEventLog.map(o => {
-            o.parentLog = "-";
-            o.fileType = "Log";
-            o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
-            o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
-            return this.allEventLog
-          })
-        } catch(error) {
-        };
-      },
       /**
        * Sort Files item
        */
+      switchFiles(item) {
+        this.filesTag = item
+      }
     },
     mounted() {
-      this.fetchFilter();
-      this.fetchEventLog();
+      this.store.fetchEventLog();
+      this.store.fetchFilter();
     }
   }