From 8b502e67f4eff8d11b98f82fb6143a01a5550cae Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Fri, 1 Dec 2023 14:24:05 +0800
Subject: [PATCH] feat: Conformance Save Logout done.

---
 .../Conformance/ConformanceSidebar.vue        |  4 ++
 src/components/Header.vue                     | 20 ++++++----
 src/components/Navbar.vue                     | 16 +++++++-
 src/module/alertModal.js                      | 39 ++++++++++++-------
 src/stores/allMapData.js                      |  1 +
 src/views/Discover/Conformance/index.vue      | 14 +++----
 src/views/Discover/Map/index.vue              | 12 +++++-
 src/views/MainContainer.vue                   | 21 +++-------
 8 files changed, 78 insertions(+), 49 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 7096e6b..5ece75b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -1268,6 +1268,10 @@ export default {
       };
     });
   },
+  beforeUnmount() {
+    this.isSubmitReset();
+    this.selectTimeReset();
+  },
 }
 </script>
 <style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3ff4362..18833f5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -24,6 +24,8 @@ import loginStore from '@/stores/login.js';
 import DspLogo from '@/components/icons/DspLogo.vue';
 import IconMember from '@/components/icons/IconMember.vue';
 import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
   data() {
@@ -35,9 +37,11 @@ export default {
     const store = loginStore();
     const { logOut } = store;
     const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
     const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+    const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
 
-    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, allMapDataStore}
+    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, conformanceLogTempCheckId, conformanceFilterTempCheckId, allMapDataStore, conformanceStore, conformanceFileName }
   },
   components: {
     DspLogo,
@@ -45,13 +49,13 @@ export default {
   },
   methods: {
     logOutButton() {
-      if (this.$route.name === 'Map' && this.$route.params.type === 'log') {
-        this.tempFilterId = null;
-        this.temporaryData = [];
-        this.postRuleData = [];
-        this.ruleData = [];
-      };
-      this.logOut();
+      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
+        // 傳給 Map，通知 Sidebar 要關閉。
+        this.$emitter.emit('leaveFilter', false);
+        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
+      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
+      } else this.logOut();
     },
   },
   mounted() {
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 27999bd..55f2566 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,6 +1,15 @@
 <template>
   <nav class="bg-neutral-700">
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
+      <p class="text-neutral-10">logId: {{ logId }}</p>
+      <p class="text-neutral-10">tempFilterId: {{ tempFilterId }}</p>
+      <p class="text-neutral-10">createFilterId: {{ createFilterId }}</p>
+      <p class="text-neutral-10">conformanceLogId: {{ conformanceLogId }}</p>
+      <p class="text-neutral-10">conformanceFilterId: {{ conformanceFilterId }}</p>
+      <p class="text-neutral-10">conformanceLogTempCheckId: {{ conformanceLogTempCheckId }}</p>
+      <p class="text-neutral-10">conformanceFilterTempCheckId: {{ conformanceFilterTempCheckId }}</p>
+      <p class="text-neutral-10">conformanceLogCreateCheckId: {{ conformanceLogCreateCheckId }}</p>
+      <p class="text-neutral-10">conformanceFilterCreateCheckId: {{ conformanceFilterCreateCheckId }}</p>
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
           <!-- 回 Files 頁 -->
@@ -148,15 +157,18 @@ export default {
           if(this.createFilterId) {
             await this.allMapDataStore.updataFilter();
             if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
-            this.tempFilterId = null;
           }else if(this.logId){
             await saveFilter(this.allMapDataStore.addFilterId);
             // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
             await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
           };
           break;
-        case 'Conformance':
         case 'CheckMap':
+          // 無論 parentLog, parentFilter，做新 filter 皆另存新檔
+          await saveFilter(this.allMapDataStore.addFilterId);
+          // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
+          await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
+        case 'Conformance':
         case 'CheckConformance':
           // 先判斷有沒有 check Id，有就儲存 return，沒有就往下走
           // 沒有 check Id, 有暫存 temp Id 可以另存新檔
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 5a5bd44..6db021d 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -65,8 +65,9 @@ export async function savedSuccessfully(value) {
  * @param { function } next
  * @param { function } addFilterId
  * @param { string } toPath
+ * @param { function } logOut
  */
-export async function leaveFilter(next, addFilterId, toPath) {
+export async function leaveFilter(next, addFilterId, toPath, logOut) {
   const allMapDataStore = AllMapDataStore();
   const result = await Swal.fire({
     title: 'SAVE YOUR FILTER?',
@@ -82,13 +83,18 @@ export async function leaveFilter(next, addFilterId, toPath) {
     customClass: customClass
   })
   if(result.isConfirmed) {
-    await saveFilter(addFilterId)
-    next(toPath);
+    if(allMapDataStore.createFilterId) {
+      await allMapDataStore.updataFilter();
+      if(allMapDataStore.isUpdataFilter) await savedSuccessfully(allMapDataStore.filterName);
+    } else {
+      await saveFilter(addFilterId);
+    }
+    logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'cancel') {
     allMapDataStore.tempFilterId = null;
-    next(toPath);
+    logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'backdrop') {
-    next(false);
+    logOut ? null : next(false);
   }
 };
 /**
@@ -127,9 +133,10 @@ export async function saveConformance(addConformanceCreateCheckId) {
  * @param { function } next
  * @param { function } addConformanceCreateCheckId
  * @param { string } toPath
+ * @param { function } logOut
  */
-export async function leaveConformance(next, addConformanceCreateCheckId, toPath) {
-  const allMapDataStore = AllMapDataStore();
+export async function leaveConformance(next, addConformanceCreateCheckId, toPath, logOut) {
+  const conformanceStore = ConformanceStore();
   const result = await Swal.fire({
     title: 'SAVE YOUR RULE?',
     icon: 'warning',
@@ -143,16 +150,22 @@ export async function leaveConformance(next, addConformanceCreateCheckId, toPath
     customClass: customClass
   })
   if(result.isConfirmed) {
-    await saveFilter(addConformanceCreateCheckId)
-    next(toPath);
+    if(conformanceStore.conformanceFilterCreateCheckId || conformanceStore.conformanceLogCreateCheckId) {
+      await conformanceStore.updataConformance();
+      if(conformanceStore.isUpdataConformance) await savedSuccessfully(conformanceStore.conformanceFileName);
+    } else {
+      await saveConformance(addConformanceCreateCheckId);
+    }
+    logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'cancel') {
-    ConformanceStore.conformanceFilterTempCheckId = null;
-    ConformanceStore.conformanceLogTempCheckId = null;
-    next(toPath);
+    conformanceStore.conformanceFilterTempCheckId = null;
+    conformanceStore.conformanceLogTempCheckId = null;
+    logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'backdrop') {
-    next(false);
+    logOut ? null : next(false);
   }
 };
+
 // 登出 button 規則，暫時沒用到
 export async function logoutLeave(addFilterId) {
   const allMapDataStore = AllMapDataStore();
diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js
index 3856967..669e0da 100644
--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -352,6 +352,7 @@ export default defineStore('allMapDataStore', {
       try {
         const response = await this.$axios.put(api, data);
         this.isUpdataFilter = response.status === 200;
+        this.tempFilterId = null;
       }catch(error) {
         apiError(error, 'Failed to updata an Existing Filter.');
       }
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index 5954163..bee5fdd 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -1,10 +1,4 @@
 <template>
-  <!-- conformanceLogId: {{ conformanceLogId }} <br>
-  conformanceFilterId: {{ conformanceFilterId }} <br>
-  conformanceLogTempCheckId: {{ conformanceLogTempCheckId }} <br>
-  conformanceFilterTempCheckId: {{ conformanceFilterTempCheckId }} <br>
-  conformanceLogCreateCheckId: {{ conformanceLogCreateCheckId }} <br>
-  conformanceFilterCreateCheckId: {{ conformanceFilterCreateCheckId }} <br> -->
   <main class="h-screen-main relative">
     <div class="h-full relative bg-neutral-50">
       <ConformanceSidebar></ConformanceSidebar>
@@ -57,14 +51,18 @@ export default {
             this.conformanceLogCreateCheckId = params.checkId;
             // 為複寫 Modal 取得 fileName
             await this.filesStore.fetchConformanceLog();
-            await this.allConformanceLog.forEach(file => this.conformanceFileName = file.id == this.conformanceLogCreateCheckId ? file.name : null);
+            await this.allConformanceLog.forEach(file => {
+              if(file.id == this.conformanceLogCreateCheckId) return this.conformanceFileName = file.name;
+            });
             break;
           case 'filter':
             this.conformanceFilterId = params.checkFileId;
             this.conformanceFilterCreateCheckId = params.checkId;
             // 為複寫 Modal 取得 fileName
             await this.filesStore.fetchConformanceFilter();
-            await this.allConformanceFilter.forEach(file => this.conformanceFileName = file.id == this.conformanceFilterCreateCheckId ? file.name : null);
+            await this.allConformanceFilter.forEach(file => {
+              if(file.id == this.conformanceFilterCreateCheckId) return this.conformanceFileName = file.name;
+            });
         }
         await this.conformanceStore.getConformanceReport();
         break;
diff --git a/src/views/Discover/Map/index.vue b/src/views/Discover/Map/index.vue
index 3bf12f1..a5de30b 100644
--- a/src/views/Discover/Map/index.vue
+++ b/src/views/Discover/Map/index.vue
@@ -67,9 +67,9 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases, postRuleData } = storeToRefs(allMapDataStore);
 
-    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore, cases }
+    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore, cases, postRuleData  }
   },
   props:['type', 'checkType', 'checkId', 'checkFileId'], // 來自 router 的 props
   components: {
@@ -387,5 +387,13 @@ export default {
       this.sidebarState = boolean;
     });
   },
+  beforeUnmount() {
+    this.logId = null;
+    this.createFilterId = null;
+    this.tempFilterId = null;
+    this.temporaryData = [];
+    this.postRuleData = [];
+    this.ruleData = [];
+  }
 }
 </script>
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 7c3623c..af8fe8f 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -31,17 +31,6 @@ export default {
 
     return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, allMapDataStore };
   },
-  watch: {
-    $route: function(to, from) {
-      // 離開 Map Log 頁要將 Funnel 的規則刪除, Map Filter 會帶上次儲存的 Funnel, 所以不用做
-      if(from.name === 'Map' && from.params.type === 'log') {
-        this.tempFilterId = null;
-        this.temporaryData = [];
-        this.postRuleData = [];
-        this.ruleData = [];
-      }
-    }
-  },
   components: {
     Header,
     Navbar,
@@ -58,14 +47,14 @@ export default {
     this.checkLogin();
   },
   beforeRouteUpdate(to, from, next) {
-    // 離開 Discover 頁時判斷是否有無資料和需要存檔
-    if ((from.name === 'Map') && this.tempFilterId) {
+    // 離開 Map 頁時判斷是否有無資料和需要存檔
+    if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
       // 傳給 Map，通知 Sidebar 要關閉。
       this.$emitter.emit('leaveFilter', false);
       leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
-    } else {
-      next();
-    }
+    } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+      leaveFilter(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
+    } else next();
   },
 };
 </script>