WIP #217 don't know why it seems to work though

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -124,6 +124,8 @@
 <script>
 import { storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
+import { mapState, } from 'pinia';
+import conformanceInputStore from '@/stores/conformanceInput';
 import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
@@ -500,11 +502,9 @@ export default {
       return this.isMainBtnDisabled = disabledBool;
       
     },
+    ...mapState(conformanceInputStore, ['inputDataToSave']),
   },
   watch: {
-    selectCfmPtPSEStart (newValue) {
-      // console.log('watch selectCfmPtPSEStart', newValue);
-    },
     isSubmittedData: function(newValue) {
       this.isSubmittedData = newValue;
     },
@@ -1101,12 +1101,12 @@ 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,
                     min: this.selectDurationTime.min,
                     max: this.selectDurationTime.max,
+                    task: [],
                     type: 'processing-time-partial-start-end',
                   };
                   this.isSubmitReset();
@@ -1350,7 +1350,6 @@ console.log('this.selectCfmPtPSEStart', this.selectCfmPtPSEStart); //TODO:
             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':

src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue

@@ -40,7 +40,7 @@ export default {
       this.localSelect = null;
       this.$emitter.emit('actRadioData', {
         category: this.category,
-        task: this.selectedRadio,
+        task: this.selectedRadio, // For example, "a", or "出院"
       });
       this.$emit('selected-task', this.selectedRadio);
     }

src/components/durationjs.vue

@@ -13,14 +13,14 @@
     </div>
   </div>
   <!-- 以下這段落是使用者點開來才會彈出的畫面 -->
-  <div id="dhms_input_popup_container" 
+  <div class="duration-container absolute left-0 top-full translate-y-2
-    class="duration-container absolute left-0 top-full translate-y-2"
+    dhms-input-popup-container"
     v-show="openTimeSelect"
     v-closable="{id: size, handler: onClose}">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
-        class="duration duration-val"
+        class="duration duration-val input-dhms-field"
         :data-index="index"
         :data-tunit="unit"
         :data-max="tUnits[unit].max"
@@ -38,6 +38,9 @@
 </template>
 
 <script>
+import { mapActions, } from 'pinia';
+import ConformanceInputStore from '@/stores/conformanceInput';
+
 export default {
   props: {
     max: {
@@ -175,6 +178,7 @@ export default {
      */
     onBlur(event) {
       let baseInputValue = event.target.value;
+      let decoratedInputValue;
       // 讓前綴數字自動補 0
       isNaN(event.target.value) ?
       event.target.value = '00' :
@@ -187,24 +191,25 @@ export default {
       const max = parseInt(event.target.dataset.max, 10); // 設定最大值
       const min = parseInt(event.target.dataset.min, 10);
       if(inputValue > max) {
-        event.target.value = max.toString().padStart(2, '0');
+        decoratedInputValue = max.toString().padStart(2, '0');
-      }else if(inputValue < min) event.target.value= min.toString();
+      }else if(inputValue < min) {
-
+        decoratedInputValue= min.toString();
+      }
       // 數值更新, tUnits 也更新, 並計算 totalSeconds
       const dsp = event.target.dataset.tunit;
-      this.tUnits[dsp].val = event.target.value;
+      this.tUnits[dsp].val = decoratedInputValue;
       switch (dsp) {
         case 'd':
           this.days = baseInputValue;
           break;
         case 'h':
-          this.hours = event.target.value;
+          this.hours = decoratedInputValue;
           break;
         case 'm':
-          this.minutes = event.target.value;
+          this.minutes = decoratedInputValue;
           break;
         case 's':
-          this.seconds = event.target.value;
+          this.seconds = decoratedInputValue;
           break;
       };
 
@@ -236,27 +241,6 @@ export default {
 
       newVal = isNaN(newVal) ? 0 : newVal;
 
-      // if (newVal <= 0 || newVal > this.tUnits[tUnit].max) {
-      //   if (newVal === 0 || (newVal < 0 && input.dataset.index < 1)) {
-      //     newVal = '00';
-      //   } else if (input.dataset.index >= 1) {
-      //     const nextUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
-      //     let nextUnitVal = parseInt(nextUnit.value);
-
-      //     if (newVal < 0 && nextUnitVal > 0) {
-      //       nextUnit.value = nextUnitVal - 1;
-      //       nextUnit.dispatchEvent(new Event('blur'));
-      //       newVal = this.tUnits[tUnit].max;
-      //     } else if (newVal > 0) {
-      //       nextUnit.value = nextUnitVal + 1;
-      //       nextUnit.dispatchEvent(new Event('blur'));
-      //       newVal = '00';
-      //     } else {
-      //       newVal = '00';
-      //     }
-      //   }
-      // }
-
       if(goUp) {
         // 箭頭向上，數字加一
         newVal += this.tUnits[tUnit].inc;
@@ -315,8 +299,12 @@ export default {
         this.hours = (Math.floor(totalSeconds / 3600)) % 24;
         this.days = Math.floor(totalSeconds / (3600 * 24));
 
-        if(size === 'max') this.maxDays = Math.floor(totalSeconds / (3600 * 24));
+        if(size === 'max') {
-        else if(size === 'min') this.minDays = Math.floor(totalSeconds / (3600 * 24));
+          this.maxDays = Math.floor(totalSeconds / (3600 * 24));
+        }
+        else if(size === 'min') {
+          this.minDays = Math.floor(totalSeconds / (3600 * 24));
+        }
       };
     },
     /**
@@ -377,6 +365,9 @@ export default {
         }
       }
     },
+    ...mapActions(
+      ConformanceInputStore,[]
+    ),
   },
   created() {
     this.$emitter.on('reset', (data) => {
@@ -395,7 +386,9 @@ export default {
             target = target.parentElement;
           };
           const isClickOutside = target?.id !== value.id && !el.contains(e.target)
-          if (isClickOutside) value.handler();
+          if (isClickOutside) {
+            value.handler();
+          }
           e.stopPropagation();
         }
         document.addEventListener('click', handleOutsideClick);

src/stores/conformance.js

@@ -229,7 +229,6 @@ export default defineStore('conformanceStore', {
       }
 
       try {
-        console.log("addConformanceCheckId() axios data", data)
         const response = await this.$axios.post(api, data);
         if(filterId !== null) {
           this.conformanceFilterTempCheckId = response.data.id;
@@ -253,10 +252,18 @@ export default defineStore('conformanceStore', {
       let api = '';
 
       // 先判斷 Temp 再判斷原 ID；先判斷 filter 檔，再判斷 log 檔。
-      if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}`;
+      if(filterTempCheckId !== null) {
-      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}`;
+        api = `/api/temp-filter-checks/${filterTempCheckId}`;
-      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}`;
+      }
-      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`;
+      else if(logTempCheckId !== null) {
+        api = `/api/temp-log-checks/${logTempCheckId}`;
+      }
+      else if(filterCreateCheckId !== null) {
+        api = `/api/filter-checks/${filterCreateCheckId}`;
+      }
+      else if(logCreateCheckId !== null) {
+        api = `/api/log-checks/${logCreateCheckId}`;
+      }
 
       try {
         const response = await this.$axios.get(api);
@@ -277,10 +284,18 @@ export default defineStore('conformanceStore', {
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
-      if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}`;
+      if(filterTempCheckId !== null) {
-      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`;
+        api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}`;
-      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}`;
+      }
-      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}`;
+      else if(logTempCheckId !== null) {
+        api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`;
+      }
+      else if(filterCreateCheckId !== null) {
+        api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}`;
+      }
+      else if(logCreateCheckId !== null) {
+        api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}`;
+      }
 
       try {
         const response = await this.$axios.get(api);
@@ -303,10 +318,18 @@ export default defineStore('conformanceStore', {
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
-      if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      if(filterTempCheckId !== null) {
-      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+        api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
-      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      }
-      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(logTempCheckId !== null) {
+        api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      }
+      else if(filterCreateCheckId !== null) {
+        api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      }
+      else if(logCreateCheckId !== null) {
+        api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      }
 
       try {
         const response = await this.$axios.get(api);

src/stores/conformanceData.js

@@ -1,39 +0,0 @@
-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};
-    },
-    /**
-     * Set the starting time of time range to be saved later
-     * @param {string} startStr 
-     */
-    setConformanceDataStart(startStr){
-      this.dataToSave.start = startStr;
-    },
-    /**
-     * Set the ending time of time range to be saved later
-     * @param {string} startStr 
-     */
-    setConformanceDataEnd(endStr){
-      this.dataToSave.end = endStr;
-    },
-  },
-})

src/stores/conformanceInput.js

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import moment from 'moment';
+
+export default defineStore('conformanceInputStore', {
+  state: () => ({
+    inputDataToSave: {
+        inputStart: null,
+        inputEnd: null,
+        min: null,
+        max: null,
+        type: null,
+        task: null,
+      },
+  }),
+  getters: {
+  },
+  actions: {
+    /**
+     * Temporarily set conformance input data which is probably fed to backend later.
+     * @param {object} userInputObj 
+     */
+    setConformanceUserInput(userInputObj){
+      this.inputDataToSave = {...userInputObj};
+    },
+    /**
+     * Set the starting time of time range to be saved later
+     * @param {string} startStr 
+     */
+    setConformanceInputStart(startStr){
+      console.log('startStr', startStr);
+      this.inputDataToSave.inputStart = moment(startStr).format('YYYY-MM-DDTHH:mm:ss');
+    },
+    /**
+     * Set the ending time of time range to be saved later
+     * @param {string} startStr 
+     */
+    setConformanceInputEnd(endStr){
+      console.log('endStr', endStr);
+      this.inputDataToSave.inputEnd = moment(endStr).format('YYYY-MM-DDTHH:mm:ss');
+    },
+  },
+})