From adcdb2bdc0e8533eba813199d932725294609d31 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 22 Jul 2024 13:52:48 +0800
Subject: [PATCH] refactor NavBar.vue

---
 src/components/Navbar.vue                     | 108 +++++++++---------
 src/components/icons/IconChecked.vue          |   8 +-
 src/main.ts                                   |   1 -
 src/module/alertModal.js                      |   9 +-
 .../ModalAccountEditCreate.vue                |   1 +
 src/views/Compare/Dashboard/Compare.vue       |   2 +
 src/views/Discover/Map/Map.vue                |   2 +-
 src/views/Discover/Performance/FreqChart.vue  |  10 +-
 src/views/Discover/Performance/index.vue      |   1 -
 src/views/MainContainer.vue                   |   1 -
 10 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 801c133..5402b6e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -272,63 +272,25 @@ export default {
     /**
      * Save button' modal
      */
-    async saveModal() {
-      // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
-      let isSaved;
-      // 傳給 Map，通知 Sidebar 要關閉。
-      this.$emitter.emit('saveModal', false);
-      // 判斷在哪個子頁面
-      switch (this.$route.name) {
+     async saveModal() {
+    // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
+    let isSaved;
+    // 傳給 Map，通知 Sidebar 要關閉。
+    this.$emitter.emit('saveModal', false);
+
+    switch (this.$route.name) {
         case 'Map':
-          // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
-          // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
-          if(this.createFilterId) {
-            await this.allMapDataStore.updataFilter();
-            if(this.isUpdataFilter) {
-              await savedSuccessfully(this.filterName);
-            }              
-          }else if(this.logId){
-            isSaved = await saveFilter(this.allMapDataStore.addFilterId);
-            // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
-            if(isSaved) {
-              this.setActivePage('MAP');
-              await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
-            }
-          };
-          break;
+            await this.handleMapSave();
+            break;
         case 'CheckMap':
-          // 無論 parentLog, parentFilter，做新 filter 皆另存新檔
-          isSaved = await saveFilter(this.allMapDataStore.addFilterId);
-          // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
-          if(isSaved) {
-            this.setActivePage('MAP');
-            await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
-          }          
-          break;
+            await this.handleCheckMapSave();
+            break;
         case 'Conformance':
         case 'CheckConformance':
-          // 先判斷有沒有 check Id，有就儲存 return，沒有就往下走
-          // 沒有 check Id, 有暫存 temp Id 可以另存新檔
-          if(this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId){
-            await this.conformanceStore.updataConformance();
-            if(this.isUpdataConformance) {
-              await savedSuccessfully(this.conformanceFileName);
-            }
-          } else {
-            isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
-            // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
-            if(isSaved) {
-              if(this.conformanceLogId) {
-                this.setActivePage('CONFORMANCE');
-                await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
-              }
-              else if(this.conformanceFilterId) {
-                this.setActivePage('CONFORMANCE');
-                await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
-              }
-            }
-          }
-          break;
+            await this.handleConformanceSave();
+            break;
+        default:
+            break;
       }
     },
     /**
@@ -339,6 +301,46 @@ export default {
         this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
       }
     },
+    async handleMapSave() {
+      if (this.createFilterId) {
+        await this.allMapDataStore.updataFilter();
+        if (this.isUpdataFilter) {
+            await savedSuccessfully(this.filterName);
+          }
+      } else if (this.logId) {
+        const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
+        if (isSaved) {
+            this.setActivePage('MAP');
+            await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
+        }
+      }
+    },
+    async handleCheckMapSave() {
+      const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
+      if (isSaved) {
+          this.setActivePage('MAP');
+          await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
+      }
+    },
+    async handleConformanceSave() {
+      if (this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId) {
+          await this.conformanceStore.updataConformance();
+          if (this.isUpdataConformance) {
+              await savedSuccessfully(this.conformanceFileName);
+          }
+      } else {
+          const isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
+          if (isSaved) {
+              if (this.conformanceLogId) {
+                  this.setActivePage('CONFORMANCE');
+                  await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
+              } else if (this.conformanceFilterId) {
+                  this.setActivePage('CONFORMANCE');
+                  await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
+              }
+          }
+      }
+    },
     ...mapActions(PageAdminStore, [
       'setPendingActivePage',
       'setPrevioiusPage',
diff --git a/src/components/icons/IconChecked.vue b/src/components/icons/IconChecked.vue
index abe3e0b..c4a5893 100644
--- a/src/components/icons/IconChecked.vue
+++ b/src/components/icons/IconChecked.vue
@@ -1,15 +1,15 @@
 <template>
     <div
         class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
-        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
-        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
-        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
+        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
+        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
+        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
     </div>
     
 </template>
 
 <script>
-import { defineComponent, computed, ref, } from 'vue';
+import { defineComponent, computed, } from 'vue';
 import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
 import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
 import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
diff --git a/src/main.ts b/src/main.ts
index 683723c..72f4c8a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -22,7 +22,6 @@ import 'sweetalert2/dist/sweetalert2.min.css';
 // import PrimeVue
 import PrimeVue from 'primevue/config';
 import 'primevue/resources/themes/saga-blue/theme.css'; //theme
-// import 'primevue/resources/primevue.min.css'; //core css 官網更新 3.40 後移除基礎樣式
 import 'primeicons/primeicons.css'; //icons
 import Sidebar from 'primevue/sidebar';
 import Button from 'primevue/button';
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 257a1dc..a2de726 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -57,10 +57,11 @@ export async function saveFilter(addFilterId, next = null) {
     return true;
   } else { // 點擊取消或空白處，為存檔失敗。
     pageAdminStore.keepPreviousPage();
-    // console.log("現在 pageAdminStore.activePage", pageAdminStore.activePage);
 
     // Not every time we have nontrivial next value
-    next !== null ? next(false) : 1;
+    if (next !== null) {
+      next(false);
+  }
     return false;
   }
 }
@@ -106,8 +107,6 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   });
 
   if(result.isConfirmed) {
-    // console.log('popup confirm case', );
-
     if(allMapDataStore.createFilterId) {
       await allMapDataStore.updataFilter();
       if(allMapDataStore.isUpdataFilter) {
@@ -503,9 +502,7 @@ export async function leaveAccountManagementToRemind(){
     }
   });
   if(result.isConfirmed) {
-    //TODO: Call Pinia Save Backend API
   } else {
-    //TODO: 
     modalStore.openModal();
   }
 };
\ No newline at end of file
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 17ed9cc..0d94643 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -259,6 +259,7 @@ export default defineComponent({
                     });
                     await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
                     isEditable.value = false;
+                    break;
                 default:
                 break;
             }
diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue
index b1b2c84..9de8b6e 100644
--- a/src/views/Compare/Dashboard/Compare.vue
+++ b/src/views/Compare/Dashboard/Compare.vue
@@ -635,6 +635,7 @@ console.log("TODO:", datasetsPrimary, )
           };
           break;
         case 'count':
+        default:
           primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
           primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
             let value = context.parsed.y;
@@ -1210,6 +1211,7 @@ console.log("TODO:", datasetsPrimary, )
         },
       };
       switch (xUnit) {
+        case 'dummy': //sonar-qube
         case 'date':
         default:
           primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index dde02b9..4f535dc 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -55,7 +55,7 @@
 <script>
 import { onBeforeMount, computed } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue
index e1f5a65..1bc69f9 100644
--- a/src/views/Discover/Performance/FreqChart.vue
+++ b/src/views/Discover/Performance/FreqChart.vue
@@ -85,7 +85,6 @@ export default {
   }, 
   setup(props) {
 
-    const customizedScaleOption = computed(() => {});
     const primeVueSetDataState = ref(null);
     const primeVueSetOptionsState = ref(null);
     const colorPrimary = ref('#0099FF');
@@ -123,7 +122,7 @@ export default {
             ticks: {
               ...scaleObjectToAlter.x.ticks,
                 callback: function(value, index) {
-                  // console.log('根據不同的級距客製化 x 軸的時間刻度');
+                  // 根據不同的級距客製化 x 軸的時間刻度
                   return ticksOfXAxis[index];
                 },
             },
@@ -173,13 +172,9 @@ export default {
       let datasetsSecondary; // For Compare page case
       let minX = chartData?.x_axis?.min;
       let maxX = chartData?.x_axis?.max;
-      let maxY = chartData?.y_axis?.max;
       let xData;
       let primeVueSetData = {};
       let primeVueSetOption = {};
-      const getMoment = (time)=> {
-        return Moment(time).format('YYYY/M/D hh:mm:ss')
-      };
 
       // 考慮 chartData.data 的dimension
       // 當我們遇到了 Compare 頁面的案例
@@ -253,11 +248,8 @@ export default {
             titleFont: {weight: 'normal'},
             callbacks: {
               label: function(tooltipItem) {
-                  // 取得顏色
-                  const color = tooltipItem.dataset.borderColor;
                   // 取得數據
                   const label = tooltipItem.dataset.label || '';
-                  const value = tooltipItem.raw || '';
 
                   // 建立一個小方塊顯示顏色
                   return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 898f6f5..d288454 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -118,7 +118,6 @@
                 <ul>
                   <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
-                    <!-- <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" /> -->
                     <FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"
                       pageName="Performance"
                     />
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 7797425..3c769d3 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -36,7 +36,6 @@ export default {
     const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
     const router = useRouter();
-``
     const setHighlightedNavItemOnLanding = () => {
       const currentPath = router.currentRoute.value.path;
       const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');