Files page Pinia Done

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",
+        "mitt": "^3.0.0",
         "moment": "^2.29.4",
         "pinia": "^2.0.28",
         "postcss": "^8.4.20",
@@ -4138,6 +4139,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -9243,6 +9249,11 @@
       "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
       "dev": true
     },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.2",
+    "mitt": "^3.0.0",
     "moment": "^2.29.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",

src/components/Navbar.vue

@@ -5,10 +5,10 @@
         <div class="flex flex-1 items-center">
             <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
             <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-              <li @click="changeViewType('all')">ALL</li>
+              <li @click="switchNavItem($event)">ALL</li>
-              <li @click="changeViewType('discover')">DISCOVER</li>
+              <li @click="switchNavItem($event)">DISCOVER</li>
-              <li @click="changeViewType('compare')">COMPARE</li>
+              <li @click="switchNavItem($event)">COMPARE</li>
-            <li @click="changeViewType('disign')">DESIGN</li>
+              <li @click="switchNavItem($event)">DESIGN</li>
           </ul>
         </div>
         <div class="flex justify-end items-center">
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+ import filesStore from '@/stores/files.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 
@@ -43,27 +44,34 @@ export default {
     return {
       showNavbarBreadcrumb: false,
       // 之後優化要模組化
-      // viewType:[
+      // navViewName: {
-      //   {
+      //   files: ['all', 'discover', 'compare', 'design'],
-      //     typeName: '',
+      // },
-      //     typeCategory: [],
+      navViewName: '',
-      //   }
-      // ]
-      viewType: ''
     };
   },
+  setup() {
+    const store = filesStore();
+
+    return {
+      store,
+    }
+  },
   components: {
     IconSearch,
-    IconSetting
+    IconSetting,
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
   methods: {
-    changeViewType(type) {
+    switchNavView(name) {
-      this.viewType = type;
+      this.navViewName = name;
+    },
+    switchNavItem(event) {
+      this.store.filesTag = event.target.innerText;
     }
-  }
+  },
 }
 </script>
 

src/main.js

@@ -6,9 +6,11 @@ import router from "./router";
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import moment from 'moment';
+import mitt from 'mitt';
 
 import "./assets/main.css";
 
+const emitter = mitt();
 const pinia = createPinia();
 const app = createApp(App);
 
@@ -18,6 +20,7 @@ pinia.use(({ store }) => {
 
 // can use `this.$moment` in Vue.js
 app.config.globalProperties.$moment = moment;
+app.config.globalProperties.emitter = emitter;
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);

src/stores/files.js

@@ -0,0 +1,85 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+import moment from 'moment';
+
+export default defineStore('filesStore', {
+  state: () => ({
+    allFilter: [
+      {
+        log: {},
+        fileType: '',
+      }
+    ],
+    allEventLog: [
+      {
+        parentLog: '',
+        fileType: '',
+      }
+    ],
+    switchFilesTagData: {
+      ALL: ['Log', 'Filter', 'Rule', 'Design'],
+      DISCOVER: ['Log', 'Filter', 'Rule'],
+      COMPARE: ['Filter'],
+      DESIGN: ['Log', 'Design'],
+    },
+    filesTag: 'ALL',
+  }),
+  getters: {
+  /**
+   * Get allFiles and switch files tag
+   */
+  allFiles: state => {
+    let result = [
+      ...state.allEventLog,
+      ...state.allFilter.map(itemFilter => {
+        return { ...itemFilter, parentLog: itemFilter.log.name }
+      })
+    ];
+    let data = state.switchFilesTagData;
+    let filesTag = state.filesTag;
+
+    result = result.filter(file => data[filesTag].includes(file.fileType));
+    return result;
+    },
+  },
+  actions: {
+    /**
+     * Fetch event logs api
+     */
+    async fetchEventLog() {
+      const api = 'api/logs';
+
+      try {
+        const response = await axios.get(api);
+
+        this.allEventLog = response.data;
+        this.allEventLog.map(o => {
+          o.parentLog = "-";
+          o.fileType = "Log";
+          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');
+          return this.allEventLog
+        })
+      } catch(error) {
+      } finally {};
+    },
+    /**
+     * Fetch filters api
+     */
+    async fetchFilter() {
+      const api = 'api/filters';
+
+      try {
+        const response = await axios.get(api);
+
+        this.allFilter = response.data;
+        this.allFilter.map(o => {
+          o.fileType = "Filter";
+          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');
+        });
+      } catch(error) {
+      } finally {};
+    },
+  }
+})

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 = [
+        return this.store.allFiles;
-          ...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;
-        },
       // 時間排序，如果沒有 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.store.fetchEventLog();
-      this.fetchEventLog();
+      this.store.fetchFilter();
     }
   }
 

src/views/Login/index.vue

@@ -50,7 +50,6 @@ export default {
     return {
       isDisabled: true,
       showPassword: false,
-      name: 'hellow world'
     }
   },
   setup() {

src/views/MainContainer.vue

@@ -37,6 +37,6 @@ export default {
      * check login for 'my-account' api
      */
     this.checkLogin();
-  }
+  },
 };
 </script>