From 9539237c3dd385001ca9b47b363bc63854f23b61 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Thu, 6 Jun 2024 09:25:26 +0800
Subject: [PATCH] refactor (slight, although many files)

---
 .../Conformance/ConformanceSidebar.vue        |  21 +++-
 .../ConformanceTimeRange.vue                  | 114 +++++++++++++-----
 .../ConformanceSidebar/TimeRangeDuration.vue  |   2 +-
 src/components/Navbar.vue                     |   4 +-
 src/components/durationjs.vue                 |  13 +-
 src/stores/conformance.js                     |  26 ++--
 src/stores/conformanceData.js                 |  25 ++++
 src/stores/pageAdmin.js                       |   2 +-
 8 files changed, 162 insertions(+), 45 deletions(-)
 create mode 100644 src/stores/conformanceData.js

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 7c100fe..7d766f0 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -502,6 +502,9 @@ export default {
     },
   },
   watch: {
+    selectCfmPtPSEStart (newValue) {
+      // console.log('watch selectCfmPtPSEStart', newValue);
+    },
     isSubmittedData: function(newValue) {
       this.isSubmittedData = newValue;
     },
@@ -1098,6 +1101,7 @@ export default {
                   this.isSubmitTimeCfmPtPEnd.rule = this.selectDurationTime;
                   break;
                 case 'From & To':
+console.log('this.selectCfmPtPSEStart', this.selectCfmPtPSEStart); //TODO:
                   dataToSave = {
                     start: this.selectCfmPtPSEStart,
                     end: this.selectCfmPtPSEEnd,
@@ -1343,11 +1347,16 @@ export default {
             this.selectCfmPtPEnd = data.task;
             break;
           case 'cfmPtPSEStart':
-            if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) this.selectCfmPtPSEEnd = null;
+            if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) {
+              this.selectCfmPtPSEEnd = null;
+            }
+console.log('TODO: data.task', data.task);
             this.selectCfmPtPSEStart = data.task;
             break;
           case 'cfmPtPSEEnd':
-            if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd) this.selectCfmPtPSEStart = null;
+            if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd) {
+              this.selectCfmPtPSEStart = null;
+            }
             this.selectCfmPtPSEEnd = data.task;
             break;
           // Waiting time
@@ -1358,11 +1367,15 @@ export default {
             this.selectCfmWtEteEnd = data.task;
             break;
           case 'cfmWtEteSEStart':
-            if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) this.selectCfmWtEteSEEnd = null;
+            if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) {
+              this.selectCfmWtEteSEEnd = null;
+            }
             this.selectCfmWtEteSEStart = data.task;
             break;
           case 'cfmWtEteSEEnd':
-            if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd) this.selectCfmWtEteSEStart = null;
+            if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd) {
+              this.selectCfmWtEteSEStart = null;
+            }
             this.selectCfmWtEteSEEnd = data.task;
             break;
           case 'cfmWtPStart':
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index a61e8cd..2cd7312 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -1,31 +1,69 @@
 <template>
-<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
+<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time' 
+  || selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
   <p class="h2">Time Range</p>
   <div class=" text-sm leading-normal">
-    <!-- Activity duration -->
-    <TimeRangeDuration
-    v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+      <!-- Activity duration -->
+      <TimeRangeDuration
+      v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
      <!-- Processing time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
+         @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
      <!-- Waiting time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
+      && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
      <!-- Cycle time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
+      && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds" 
+        @max-total-seconds="maxTotalSeconds" />
   </div>
 </div>
 </template>
@@ -37,11 +75,29 @@ import ConformanceStore from '@/stores/conformance.js';
 export default {
   setup() {
     const conformanceStore = ConformanceStore();
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
+      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
+      cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
+      cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
+      cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
+      cfmWtEteWhole, cfmCtEteWhole
+    } = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole }
+    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
+      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
+      cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
+      cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
+      cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
+      cfmWtEteWhole, cfmCtEteWhole
+    };
   },
-  props: ['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart', 'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart', 'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll', 'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE', 'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll', 'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'],
+  props: ['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
+  'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart',
+  'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll',
+  'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE',
+  'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll',
+   'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'
+  ],
   data() {
     return {
       timeDuration: null, // Activity duration
@@ -198,12 +254,16 @@ export default {
         case 'cfmPtPSEStart':
           this.selectCfmPtPSEStart = data.task;
           this.timeCfmPtPSE = {min: 0, max: 0};
-          if(this.selectCfmPtPSEEnd) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
+          if(this.selectCfmPtPSEEnd) {
+            this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
+          }
           break;
         case 'cfmPtPSEEnd':
           this.selectCfmPtPSEEnd = data.task;
           this.timeCfmPtPSE = {min: 0, max: 0};
-          if(this.selectCfmPtPSEStart) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
+          if(this.selectCfmPtPSEStart) {
+            this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
+          }
           break;
         // Waiting time
         case 'cfmWtEteStart':
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index fa23640..c5634db 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between items-center" id="cyp-timerange">
+  <div id="timeranges_s_e_container" class="flex justify-between items-center">
     <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
       @total-seconds="minTotalSeconds" :value="durationMin">
     </Durationjs>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 18b9d96..921ce92 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -145,7 +145,7 @@ export default {
       this.filterName = newVal;
     },
     activePageComputedByRoute (newVal) {
-      console.log('activePageComputedByRoute newVal', newVal);
+      // console.log('activePageComputedByRoute newVal', newVal);
     }
   },
   mounted() {
@@ -162,7 +162,7 @@ export default {
      * @param {event} event 選取 Navbar 選項後傳入的值
      */
     onNavItemBtnClick(event) {
-      console.log('onNavItemBtnClick');
+      // console.log('onNavItemBtnClick');
       let type;
       let fileId;
       let isCheckPage;
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index 7a08d45..e07ee3e 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -4,14 +4,18 @@
     <div v-if="totalSeconds === 0" class="text-center">
       <p>0</p>
     </div>
-    <div v-else class="flex justify-center items-center gap-1" id="cyp-timerange-show">
+    <!-- 這一段不是彈窗而是固定在畫面上的時間內容 -->
+    <div id="cyp-timerange-show" v-else class="flex justify-center items-center gap-1">
       <p v-show="days != 0">{{ days }}d</p>
       <p v-show="hours != 0">{{ hours }}h</p>
       <p v-show="minutes != 0">{{ minutes }}m</p>
       <p v-show="seconds != 0">{{ seconds }}s</p>
     </div>
   </div>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect"
+  <!-- 以下這段落是使用者點開來才會彈出的畫面 -->
+  <div id="dhms_input_popup_container" 
+    class="duration-container absolute left-0 top-full translate-y-2"
+    v-show="openTimeSelect"
     v-closable="{id: size, handler: onClose}">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
@@ -81,7 +85,7 @@ export default {
   },
   data() {
     return {
-      display: 'dhms',
+      display: 'dhms', // d: day; h: hour; m: month; s: second.
       seconds: 0,
       minutes: 0,
       hours: 0,
@@ -211,8 +215,11 @@ export default {
      * @param {event} event input 傳入的事件
      */
     onKeyUp(event) {
+      // 正規表達式 \D 即不是 0-9 的字符
       event.target.value = event.target.value.replace(/\D/g, '');
 
+      // 38：上箭頭鍵（Arrow Up）
+      // 40：下箭頭鍵（Arrow Down）
       if (event.keyCode === 38 || event.keyCode === 40) {
         this.actionUpDown(event.target, event.keyCode === 38, true);
       };
diff --git a/src/stores/conformance.js b/src/stores/conformance.js
index 6247add..0ea0bf7 100644
--- a/src/stores/conformance.js
+++ b/src/stores/conformance.js
@@ -193,9 +193,12 @@ export default defineStore('conformanceStore', {
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
-      if(filterId !== null) api = `/api/filter-checks/params?filter_id=${filterId}`;
-      else api = `/api/log-checks/params?log_id=${logId}`;
-
+      if(filterId !== null) {
+        api = `/api/filter-checks/params?filter_id=${filterId}`;
+      }
+      else {
+        api = `/api/log-checks/params?log_id=${logId}`;
+      }
       try {
         const response = await this.$axios.get(api);
         this.allConformanceTask = response.data.tasks;
@@ -218,13 +221,22 @@ export default defineStore('conformanceStore', {
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
-      if(filterId !== null) api = `/api/temp-filter-checks?filter_id=${filterId}`;
-      else api = `/api/temp-log-checks?log_id=${logId}`;
+      if(filterId !== null) {
+        api = `/api/temp-filter-checks?filter_id=${filterId}`;
+      }
+      else {
+        api = `/api/temp-log-checks?log_id=${logId}`;
+      }
 
       try {
+        console.log("addConformanceCheckId() axios data", data)
         const response = await this.$axios.post(api, data);
-        if(filterId !== null) this.conformanceFilterTempCheckId = response.data.id;
-        else this.conformanceLogTempCheckId = response.data.id;
+        if(filterId !== null) {
+          this.conformanceFilterTempCheckId = response.data.id;
+        }
+        else {
+          this.conformanceLogTempCheckId = response.data.id;
+        }
       } catch(error) {
         apiError(error, 'Failed to add the Temporary Check for a file.');
       }
diff --git a/src/stores/conformanceData.js b/src/stores/conformanceData.js
new file mode 100644
index 0000000..2907dd2
--- /dev/null
+++ b/src/stores/conformanceData.js
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+
+export default defineStore('conformanceDataStore', {
+  state: () => ({
+      dataToSave: {
+        start: null,
+        end: null,
+        min: null,
+        max: null,
+        type: null,
+        task: null,
+      },
+  }),
+  getters: {
+  },
+  actions: {
+    /**
+     * Set conformance input data which are fed to backend later.
+     * @param {object} userInputObj 
+     */
+    setConformanceData(userInputObj){
+      this.dataToSave = {...userInputObj};
+    },
+  },
+})
\ No newline at end of file
diff --git a/src/stores/pageAdmin.js b/src/stores/pageAdmin.js
index bb74e69..03882e7 100644
--- a/src/stores/pageAdmin.js
+++ b/src/stores/pageAdmin.js
@@ -37,7 +37,7 @@ export default defineStore('pageAdminStore', {
     },
     /**
      * Specify previous page state value.
-     * @param {*} prevPage 
+     * @param {string} prevPage 
      */
     setPrevioiusPage(prevPage) {
       // console.log('setPrevioiusPage()', prevPage);