From 7e362d8740d34c8f1512724480d2a7f875c08b79 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Fri, 7 Jun 2024 15:31:53 +0800
Subject: [PATCH] fix #217; this time finally found the root cause. If user
 didn't click any start-end radio button this time, the start, end value might
 be null as their initial values are. So we need to use the earliest value
 stored in pinia. (In ActRadio.vue created phase)

---
 .../Conformance/ConformanceSidebar.vue        | 14 +++++---
 .../ConformanceSidebar/ActRadio.vue           | 26 +++++++++++---
 .../ConformanceTimeRange.vue                  | 12 +++++--
 src/components/durationjs.vue                 | 20 +++++++++--
 src/stores/conformanceInput.js                | 34 ++++++++++++++++---
 5 files changed, 86 insertions(+), 20 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index f0445c7..662fb81 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -124,8 +124,8 @@
 <script>
 import { storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import { mapState, } from 'pinia';
-import conformanceInputStore from '@/stores/conformanceInput';
+import { mapState, mapActions, } 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';
@@ -502,7 +502,7 @@ export default {
       return this.isMainBtnDisabled = disabledBool;
       
     },
-    ...mapState(conformanceInputStore, ['inputDataToSave']),
+    ...mapState(ConformanceInputStore, ['activityRadioData']),
   },
   watch: {
     isSubmittedData: function(newValue) {
@@ -1101,9 +1101,12 @@ export default {
                   this.isSubmitTimeCfmPtPEnd.rule = this.selectDurationTime;
                   break;
                 case 'From & To':
+                  // If user didn't click any start-end radio button this time,
+                  // the start, end value might be null as their initial values are.
+                  // So we need to use the earliest value stored in pinia.
                   dataToSave = {
-                    start: this.selectCfmPtPSEStart,
-                    end: this.selectCfmPtPSEEnd,
+                    start: this.selectCfmPtPSEStart ? this.selectCfmPtPSEStart : this.activityRadioData.task[0],
+                    end: this.selectCfmPtPSEEnd ? this.selectCfmPtPSEEnd : this.activityRadioData.task[this.activityRadioData.task.length - 1],
                     min: this.selectDurationTime.min,
                     max: this.selectDurationTime.max,
                     type: 'processing-time-partial-start-end',
@@ -1427,6 +1430,7 @@ export default {
         }
       });
     },
+   ...mapActions(ConformanceInputStore, [''])
   },
   created() {
     this.isShowBarOpen = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true;
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
index fc033cf..6950145 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -10,6 +10,8 @@
   </div>
 </template>
 <script>
+import { mapActions, } from 'pinia';
+import ConformanceInputStore from "@/stores/conformanceInput";
 import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
 
 export default {
@@ -32,18 +34,31 @@ export default {
       this.selectedRadio = newValue;
     },
   },
+  computed: {
+    inputActivityRadioData: {
+      get(){
+        return {
+          category: this.category,
+          task: this.selectedRadio, // For example, "a", or "出院"
+      };
+      },
+    } ,
+  },
   methods: {
     /**
      * 將選取的 Activity 傳出去
      */
     actRadioData() {
       this.localSelect = null;
-      this.$emitter.emit('actRadioData', {
-        category: this.category,
-        task: this.selectedRadio, // For example, "a", or "出院"
-      });
+      this.$emitter.emit('actRadioData', this.inputActivityRadioData);
       this.$emit('selected-task', this.selectedRadio);
-    }
+      this.setActivityRadioStartEndData(this.inputActivityRadioData.task);
+    },
+    setGlobalActivityRadioDataState(){
+      //this.title: value might be "From" or "To"
+      this.setActivityRadioStartEndData(this.inputActivityRadioData.task, this.title);
+    },
+    ...mapActions(ConformanceInputStore, ['setActivityRadioStartEndData']),
   },
   created() {
     sortNumEngZhtw(this.sortData);
@@ -52,6 +67,7 @@ export default {
     this.$emitter.on('reset', (data) => {
       this.selectedRadio = data;
     });
+    this.setGlobalActivityRadioDataState();
   },
 }
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index 2cd7312..c04f974 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -165,17 +165,23 @@ export default {
       switch (category) {
         case 'act':
           data.forEach(i => {
-            if(i.label === task) result = i.duration;
+            if(i.label === task) {
+              result = i.duration;
+            }
           });
           break;
         case 'single':
           data.forEach(i => {
-            if(i.task === task) result = i.time;
+            if(i.task === task) {
+              result = i.time;
+            }
           });
           break;
         case 'double':
           data.forEach(i => {
-            if(i.start === task && i.end === taskTwo) result = i.time;
+            if(i.start === task && i.end === taskTwo) {
+              result = i.time;
+            }
           });
           break;
         case 'all':
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index 771972b..d0e4ac9 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -28,8 +28,9 @@
         :maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
         :value="tUnits[unit].val.toString().padStart(2, '0')"
         @focus="onFocus"
-        @blur="onBlur"
+        @change="onChange"
         @keyup="onKeyUp"
+        v-model="inputTimeFields[index]"
       />
       <label class="duration">{{ tUnits[unit].dsp }}</label>
     </div>
@@ -127,6 +128,16 @@ export default {
         }
       },
     },
+    inputTimeFields: {
+      get() {
+        let paddedTimeFields = [];
+        this.inputTypes.map(inputTypeUnit => {
+          // Pad the dd/hh/mm/ss field string to 2 digits and add it to the list
+          paddedTimeFields.push(this.tUnits[inputTypeUnit].val.toString().padStart(2, '0'));
+        });
+        return paddedTimeFields;
+      },
+    }
   },
   watch: {
     max: {
@@ -176,7 +187,7 @@ export default {
      * when blur update input value and show number
      * @param {event} event input 傳入的事件
      */
-    onBlur(event) {
+    onChange(event) {
       let baseInputValue = event.target.value;
       let decoratedInputValue;
       // 讓前綴數字自動補 0
@@ -184,6 +195,7 @@ export default {
       event.target.value = '00' :
       // event.target.value = event.target.value.toString().padStart(2, '0'); // 前綴要補 0
       event.target.value = event.target.value.toString();
+      decoratedInputValue = event.target.value.toString();
 
       // 手 key 數值大於最大值時，要等於最大值
       // 先將字串轉為數字才能比大小
@@ -283,7 +295,9 @@ export default {
           this.seconds = input.value;
           break;
       };
-      if (selectIt) input.select();
+      if (selectIt) {
+        input.select();
+      }
       this.calculateTotalSeconds();
     },
     /**
diff --git a/src/stores/conformanceInput.js b/src/stores/conformanceInput.js
index 8c353b4..0092c27 100644
--- a/src/stores/conformanceInput.js
+++ b/src/stores/conformanceInput.js
@@ -4,17 +4,45 @@ import moment from 'moment';
 export default defineStore('conformanceInputStore', {
   state: () => ({
     inputDataToSave: {
-        inputStart: null,
+        inputStart: null, // 有待釐清，start 是活動的開始，還是時間的開始?
         inputEnd: null,
         min: null,
         max: null,
         type: null,
         task: null,
-      },
+    },
+    activityRadioData: {
+      category: null,
+      task: ['', ''],
+    },
   }),
   getters: {
   },
   actions: {
+    /**
+     * Set input activity radio data
+     * @param {object} actRadioData 
+     */
+    setActivityRadioStartEndData(actRadioData) {
+      this.activityRadioData = actRadioData;
+    },
+    /**
+     * Sets the activity radio global state for either the start ('From') or end ('To') of a task.
+     * @param {object} actRadioData 
+     * @param {string} fromToStr 'From' or 'To'
+     */
+    setActivityRadioStartEndData(actRadioData, fromToStr){
+      switch(fromToStr) {
+        case 'From':
+          this.activityRadioData.task[0] = actRadioData;
+          break;
+        case 'To':
+          this.activityRadioData.task[this.activityRadioData.task.length - 1] = actRadioData;
+          break;
+        default:
+          break;
+      }
+    },
     /**
      * Temporarily set conformance input data which is probably fed to backend later.
      * @param {object} userInputObj 
@@ -27,7 +55,6 @@ export default defineStore('conformanceInputStore', {
      * @param {string} startStr 
      */
     setConformanceInputStart(startStr){
-      console.log('startStr', startStr);
       this.inputDataToSave.inputStart = moment(startStr).format('YYYY-MM-DDTHH:mm:ss');
     },
     /**
@@ -35,7 +62,6 @@ export default defineStore('conformanceInputStore', {
      * @param {string} startStr 
      */
     setConformanceInputEnd(endStr){
-      console.log('endStr', endStr);
       this.inputDataToSave.inputEnd = moment(endStr).format('YYYY-MM-DDTHH:mm:ss');
     },
   },