Issue #151: Done.

src/components/Header.vue

@@ -5,7 +5,7 @@
           <DspLogo />
       </figure>
       <div class="flex justify-between items-center" v-show="showMember">
-        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOut">
+        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
         <!-- <figure>
@@ -19,9 +19,12 @@
 </template>
 
 <script>
+import { storeToRefs } from 'pinia';
 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 { logoutLeave } from '@/module/alertModal.js';
 
 export default {
   data() {
@@ -32,15 +35,26 @@ export default {
   setup() {
     const store = loginStore();
     const { logOut } = store;
+    const allMapDataStore = AllMapDataStore();
+    const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
 
-    return {
+    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, allMapDataStore}
-      logOut,
-    }
   },
   components: {
     DspLogo,
     IconMember
   },
+  methods: {
+    logOutButton() {
+      if (this.$route.name === 'Map' && this.$route.params.type === 'log') {
+        this.tempFilterId = null;
+        this.temporaryData = [];
+        this.postRuleData = [];
+        this.ruleData = [];
+      };
+      this.logOut();
+    },
+  },
   mounted() {
     this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;
   }

src/module/alertModal.js

@@ -1,5 +1,6 @@
 import Swal from 'sweetalert2';
 import AllMapDataStore from '@/stores/allMapData.js';
+import LoginStore from '@/stores/login.js';
 
 const customClass = {
   htmlContainer: '!w-[564px]',
@@ -70,13 +71,42 @@ export async function leaveFilter(next, addFilterId, toPath) {
   if(result.isConfirmed) {
     await saveFilter(addFilterId)
     next(toPath);
-  }
+  } else if(result.dismiss === 'cancel') {
-  else if(result.dismiss === 'cancel') {
     allMapDataStore.tempFilterId = null;
     next(toPath);
-  }
+  } else if(result.dismiss === 'backdrop') {
-  else if(result.dismiss === 'backdrop') {
     next(false);
   }
+};
 
+export async function logoutLeave(addFilterId) {
+  const allMapDataStore = AllMapDataStore();
+  const loginStore = LoginStore();
+  const result = await Swal.fire({
+    title: 'ARE YOU SURE TO LEAVE MAP?',
+    html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
+    icon: 'warning',
+    iconColor: '#FF3366',
+    reverseButtons:true,
+    confirmButtonText: 'Save as',
+    confirmButtonColor: '#FF3366',
+    showCancelButton: true,
+    cancelButtonText: 'OK',
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass
+  })
+  if(result.isConfirmed) {
+    await saveFilter(addFilterId);
+    // allMapDataStore.tempFilterId = await null;
+    // allMapDataStore.temporaryData = await [];
+    // allMapDataStore.postRuleData = await [];
+    // allMapDataStore.ruleData = await [];
+    // await loginStore.logOut()
+  } else if(result.dismiss === 'cancel') {
+    allMapDataStore.tempFilterId = await null;
+    // allMapDataStore.temporaryData = await [];
+    // allMapDataStore.postRuleData = await [];
+    // allMapDataStore.ruleData = await [];
+    await loginStore.logOut()
+  }
 }

src/router/index.js

@@ -80,11 +80,11 @@ const router = createRouter({
 router.beforeEach((to, from) => {
   // to: Route: 即將要進入的目標 路由物件
   // from: Route: 當前導航正要離開的路由
-  let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); // 是否登入
+  let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。
 
   // 當路由到 login 時，有登入要跳轉至home
   if (to.name === 'Login') {
-   if (isCookie) router.push({ name: 'Files' });
+   if (isRemoveCookie) router.push({ name: 'Files' });
   }
  });
 

src/views/Files/index.vue

@@ -134,18 +134,25 @@
       enterDiscover(file){
         let type;
         let fileId;
+        let params;
 
-        if(file.fileType === 'Log'){
+        switch (file.fileType) {
+          case 'Log':
             this.createFilterId = null;
             fileId = file.id;
             type = 'log';
-          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
+            params = { type: type, fileId: fileId };
-        }
+            this.$router.push({name: 'Map', params: { type: type, fileId: fileId, state: params }});
-        else if(file.fileType === 'Filter') {
+            break;
+          case 'Filter':
             this.createFilterId = file.id;
             fileId = file.id;
             type = 'filter';
-          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
+            params = { type: type, fileId: fileId };
+            this.$router.push({name: 'Map', params: params, state: params});
+            break;
+          default:
+            break;
         }
       }
     },