Discover: Save button done.

src/components/Navbar.vue

@@ -36,7 +36,7 @@
         <!-- Other Page: Save and Download -->
         <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
         <div v-else class="space-x-4">
-          <button class="btn btn-sm btn-neutral" @click="showAlert">Save</button>
+          <button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']" :disabled="disabledSave" @click="showAlert">Save</button>
           <button class="btn btn-sm btn-neutral">Download</button>
         </div>
       </div>
@@ -45,10 +45,12 @@
 </template>
 
 <script>
+import { storeToRefs } from 'pinia';
 import filesStore from '@/stores/files.js';
+import AllMapDataStore from '@/stores/allMapData.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { saveFilter } from '@/module/alertModal.js';
 
 export default {
   data() {
@@ -60,21 +62,28 @@ export default {
         DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
       },
       navViewName: 'FILES',
-      sweetVal: '',
     };
   },
+  computed: {
+    // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+    disabledSave: function () {
+      return this.tempFilterId ? false : true;
+    }
+  },
   watch: {
     '$route':'getNavViewName',
   },
   setup() {
     const store = filesStore();
     const allMapDataStore = AllMapDataStore();
+    const { tempFilterId } = storeToRefs(allMapDataStore);
 
-    return { store, allMapDataStore}
+    return { store, allMapDataStore, tempFilterId}
   },
   components: {
     IconSearch,
     IconSetting,
+    saveFilter
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
@@ -87,95 +96,11 @@ export default {
     getNavViewName() {
       this.navViewName = this.$route.name.toUpperCase();
     },
-    async showAlert() {
+    showAlert() {
-      const customClass = {
-        htmlContainer: '!w-[564px]',
-        title: '!text-xl !font-semibold !mb-2',
-        htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
-        inputLabel: '!text-sm !font-normal',
-        input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
-        validationMessage: '!bg-neutral-10 !text-danger',
-        confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
-        cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
-      };
-
       // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
 
-      // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
-      if(!this.allMapDataStore.tempFilterId) return this.$toast.error('Unable to overwrite original file.');
-
      // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
-      const { value, isConfirmed } = await this.$swal({
+      saveFilter(this.allMapDataStore.addFilterId);
-        title: 'SAVE NEW FILTER',
-        input: 'text',
-        inputPlaceholder: 'Enter Filter Name.',
-        inputValue: this.sweetVal,
-        inputValidator: (value) => {
-          if (!value) return 'You need to write something!';
-          this.sweetVal = value;
-        },
-        icon: 'info',
-        iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
-        iconColor: '#0099FF',
-        reverseButtons:true,
-        confirmButtonColor: '#0099FF',
-        showCancelButton: true,
-        cancelButtonColor: '#94a3b8',
-        customClass: customClass,
-      });
-      // 存檔成功
-      if(isConfirmed){
-        // 打API
-        let logId = this.$route.params.logId;
-        const api = `/api/filters?log_id=${logId}`;
-        let createFilterObj = {
-          name: value,
-          rules: this.allMapDataStore.postRuleData
-        };
-
-        try {
-          const response = await this.axios.post(api, createFilterObj)
-          let createFilterId = response.data.id;
-
-        }catch(error) {
-          console.dir(error);
-        }
-      }
-      if (value) {
-        await this.$swal({
-          title: 'SAVE COMPLETE',
-          html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
-          showConfirmButton: false,
-          icon: 'success',
-          iconColor: '#0099FF',
-          customClass: customClass
-        })
-      };
-      // 有 aplly all 的話，是否存檔? 是:另存新檔或存檔 不是:離開
-      const result = await this.$swal({
-        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){
-        // 有 createFilterId 直接存檔
-        // 跳存檔成功 model
-        console.log('存檔');
-      }else if(result.dismiss === 'cancel'){
-        console.log('離開 discover');
-      }else if(result.dismiss === 'backdrop'){
-        console.log('停留在原本的頁面');
-      };
-      // 最後清空
-      this.sweetVal = '';
     }
   },
 }

src/module/alertModal.js

@@ -0,0 +1,77 @@
+import Swal from 'sweetalert2'
+
+const customClass = {
+  htmlContainer: '!w-[564px]',
+  title: '!text-xl !font-semibold !mb-2',
+  htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
+  inputLabel: '!text-sm !font-normal',
+  input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
+  validationMessage: '!bg-neutral-10 !text-danger',
+  confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
+  cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
+};
+
+// 帶入參數 pinia aciton this.sweetVal
+export async function saveFilter(addFilterId) {
+  let filterName = '';
+  const { value, isConfirmed } = await Swal.fire({
+    title: 'SAVE NEW FILTER',
+    input: 'text',
+    inputPlaceholder: 'Enter Filter Name.',
+    inputValue: filterName,
+    inputValidator: (value) => {
+      if (!value) return 'You need to write something!';
+      filterName = value;
+    },
+    icon: 'info',
+    iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+    iconColor: '#0099FF',
+    reverseButtons:true,
+    confirmButtonColor: '#0099FF',
+    showCancelButton: true,
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass,
+  });
+  // 存檔成功
+  if(isConfirmed) await addFilterId(filterName);
+  // 顯示儲存完成
+  if (value) {
+    await Swal.fire({
+      title: 'SAVE COMPLETE',
+      html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
+      showConfirmButton: false,
+      icon: 'success',
+      iconColor: '#0099FF',
+      customClass: customClass
+    })
+  };
+  // 清空欄位
+  filterName = '';
+}
+
+export async function leaveFilter(next, addFilterId) {
+  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)
+    next();
+  }
+  else if(result.dismiss === 'cancel') {
+    next();
+  }
+  else if(result.dismiss === 'backdrop') {
+    next(false);
+  }
+
+}

src/stores/allMapData.js

@@ -15,6 +15,7 @@ export default defineStore('allMapDataStore', {
     logId: null,
     traceId: 1,
     tempFilterId: null,
+    createFilterId: null,
     allProcessMap: {},
     allBpmn: {},
     allStats: {},
@@ -216,6 +217,28 @@ export default defineStore('allMapDataStore', {
         await delay(500);
         $toast.default('Failed to add the Temporary Filters.',{position: 'bottom'});
       };
+    },
+    async addFilterId(value) {
+      let logId = this.logId;
+      const api = `/api/filters?log_id=${logId}`;
+      let createFilterObj = {
+        name: value,
+        rules: this.postRuleData
+      };
+
+      try {
+        const response = await this.$axios.post(api, createFilterObj)
+        this.createFilterId = response.data.id;
+        this.tempFilterId = null;
+      }catch(error) {
+        this.httpStatus = error.request.status;
+        await delay();
+        loading.isLoading = true;
+        await delay(1000);
+        loading.isLoading = false;
+        await delay(500);
+        $toast.default('Failed to load the Filters.',{position: 'bottom'});
+      };
     }
   },
 })

src/views/MainContainer.vue

@@ -18,6 +18,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
 import Loading from '@/components/Loading.vue';
+import { saveFilter, leaveFilter } from '@/module/alertModal.js';
 
 export default {
   name: 'MainContainer',
@@ -26,9 +27,9 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { checkLogin } = loginStore;
-    const { tempFilterId, temporaryData, postRuleData } = storeToRefs(allMapDataStore);
+    const { tempFilterId, createFilterId, temporaryData, postRuleData } = storeToRefs(allMapDataStore);
 
-    return { checkLogin, loadingStore, temporaryData, tempFilterId, postRuleData };
+    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, allMapDataStore };
   },
   watch: {
     $route: function(to, from) {
@@ -37,27 +38,14 @@ export default {
         this.temporaryData = []
         this.postRuleData = []
       }
-      // console.log(to, from);
-      // if(to.name === 'Discover'){
-      //   this.$swal({
-      //       title: '請問是否要離開頁面?',
-      //       showCancelButton: true,
-      //       confirmButtonText: '是',
-      //       cancelButtonText: '否',
-      //     }).then((result) => {
-      //       if (result.isConfirmed) {
-      //         window.history.back() // 或 window.close()
-      //       } else {
-      //         console.log('no')
-      //       }
-      //     })
-      // }
     }
   },
   components: {
     Header,
     Navbar,
     Loading,
+    saveFilter,
+    leaveFilter
   },
   created() {
     /**
@@ -71,26 +59,10 @@ export default {
     this.checkLogin();
   },
   beforeRouteUpdate(to, from, next) {
-    if (from.name === 'Discover') {
+    if (from.name === 'Discover' && this.tempFilterId) {
-      this.$swal({
+      leaveFilter(next, this.allMapDataStore.addFilterId)
-        title: '請問是否要離開頁面?',
-        icon: 'warning',
-        showCancelButton: true,
-        confirmButtonColor: '#3085d6',
-        cancelButtonColor: '#d33',
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-      }).then((result) => {
-        if (result.isConfirmed) {
-          console.log('yes')
-          next()
     } else {
-          console.log('no')
+      next();
-          next(false)
-        }
-      })
-    } else {
-      next()
     }
   },
 };