Discover: sidevarFilter button Apply for temporaryData done.

src/components/Discover/sidebarFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12 !bg-neutral-100">
+  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" :baseZIndex="15" class="!w-11/12 !bg-neutral-100">
     <template #header>
       <ul class="flex space-x-4">
         <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('filter')" :class="tab === 'filter'? 'text-neutral-900': 'text-neutral-500'">Filter</li>
@@ -84,7 +84,7 @@
         <!-- Button -->
         <div class="float-right space-x-4 px-4 py-2">
           <button class="btn btn-sm btn-neutral" @click="reset">Reset</button>
-          <button class="btn btn-sm btn-neutral">Apply</button>
+          <button class="btn btn-sm btn-neutral" @click="submit">Apply</button>
         </div>
       </div>
     </div>
@@ -94,12 +94,14 @@
 
 
     <!-- header: funnel -->
-    <div v-if="tab === 'funnel'"></div>
+    <div v-if="tab === 'funnel'">temporaryData:{{ temporaryData }}</div>
 
   </Sidebar>
 </template>
 
 <script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
 import ActOccCase from '@/components/Discover/table/actOccCase.vue';
 import ActOcc from '@/components/Discover/table/actOcc.vue';
 import ActAndSeq from '@/components/Discover/table/actAndSeq.vue';
@@ -131,6 +133,11 @@ export default {
       require: true,
     },
   },
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+    return { isLoading }
+  },
   data() {
     return {
       selectFilter: {
@@ -142,8 +149,17 @@ export default {
         'Refine': ['Include', 'Exclude'],
         'Containment': ['Contained in', 'Started in', 'End in', 'Activity in', 'Trim'],
       },
-      tab: 'filter',
+      tab: 'filter', // filter | funnel
-      selectValue: ['Sequence', 'Have activity(s)', 'Start', 'Directly follows', 'Case', 'Include', 'Contained in'],
+      // selectValue: ['Sequence', 'Have activity(s)', 'Start', 'Directly follows', 'Case', 'Include', 'Contained in'],
+      selectValue: {
+        0: 'Sequence',
+        1: 'Have activity(s)',
+        2: 'Start',
+        3: 'Directly follows',
+        4: 'Case',
+        5: 'Include',
+        6: 'Contained in',
+      },
       selectFilterTask: null,
       selectFilterStart: null,
       selectFilterEnd: null,
@@ -155,6 +171,7 @@ export default {
       isEndSelected: null,
       isActAllTask: true,
       rowData: [],
+      temporaryData: null,
     }
   },
   components: {
@@ -205,6 +222,9 @@ export default {
       return `width:${value}%;`
     },
     //設定 Have activity(s) 內容
+    /**
+     * @param {array} data filterTaskData
+     */
     setHaveAct(data){
       return data.map(task => {
         return {
@@ -222,7 +242,7 @@ export default {
     /**
      * @param {array} array filterStartToEnd / filterEndToStart
      */
-     setActData(array) {
+    setActData(array) {
       let list = [];
       array.forEach((task, index) => {
         let data = {
@@ -314,8 +334,85 @@ export default {
       this.isStartSelected = null;
       this.isEndSelected = null;
       this.isActAllTask = true;
+      this.$toast.success('Reset Success.');
+    },
+    // 發送選取的資料
+    submit(){
+      let data;
+      let sele = this.selectValue;
+      let isExclude = sele[5] === 'Exclude' ? true : false
+
+      // Filter Type 選 Sequence 的行為
+      // 若陣列為空，則跳出警告訊息
+      if(sele[0] === 'Sequence'){
+        if(sele[1] === 'Have activity(s)'){ // Activity Sequence 選 Have activity(s) 的行為
+          if(this.selectFilterTask === null || this.selectFilterTask.length === 0) return this.$toast.error('未選擇');
+          else {
+            // 將多選的 task 拆成一包包 obj
+            data = this.selectFilterTask.map(task => {
+              return {
+                type : 'contains-task',
+                task : task.label,
+                is_exclude : isExclude,
+              }
+            })
+          };
+        }else if(sele[1] === 'Start activity & end activity') { // Activity Sequence 選 Start activity & end activity 的行為
+          if(sele[2] === 'Start') {
+            if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('未選擇');
+            else {
+              data = {
+                type: 'starts-with',
+                task: this.selectFilterStart.label,
+                is_exclude: isExclude,
+              }
+            };
+          }else if(sele[2] === 'End') {
+            if(this.selectFilterEnd === null || this.selectFilterEnd.length === 0) return this.$toast.error('未選擇');
+            else {
+              data = {
+                type: 'starts-with',
+                task: this.selectFilterEnd.label,
+                is_exclude: isExclude,
+              }
+            };
+          }else if(sele[2] === 'Start & End') {
+            if(this.selectFilterStartToEnd === null || this.selectFilterStartToEnd.length === 0 || this.selectFilterEndToStart === null || this.selectFilterEndToStart.length === 0 ) return this.$toast.error('未選擇');
+            else {
+              data = {
+                type: 'start-end',
+                starts_with: this.selectFilterStartToEnd.label,
+                ends_with: this.selectFilterEndToStart.label,
+                is_exclude: isExclude,
+              }
+            }
+          };
+        }else if(sele[1] === 'Sequence'){ // Activity Sequence 選 Sequence 的行為
+          if(this.listSeq.length < 2) return this.$toast.error('未選擇');
+          else {
+            data = {
+              type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows',
+              task: this.listSeq.map(task => task.label),
+              is_exclude: isExclude,
+            }
+          };
+        }
+      }
+      // 將資料指向 Vue dat 雙向綁定
+      this.temporaryData = data;
+      // 結束後要清空資料
+      this.reset();
+      // 發送時，isLoading
+      this.isLoading = true;
+      // 結束後，要跳出傳送成功的訊息
+      // 跳轉 this.tab = 'funnel';
+      setTimeout(() => {
+        this.isLoading = false;
+        this.$toast.success('Filter Success');
+        this.tab = 'funnel';
+      }, 1000);
+    },
 
-    }
   },
 }
 </script>

src/components/Loading.vue

@@ -1,5 +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">
+  <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-20">
     <span class="loader block"></span>
   </div>
 </template>

src/main.js

@@ -60,7 +60,7 @@ app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
 app.use(ToastPlugin, { // use `this.$toast` in Vue.js
-  duration: 10000,
+  duration: 5000,
 });
 app.use(PrimeVue);
 app.component('Sidebar', Sidebar);