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)
2024-06-07 15:31:53 +08:00
parent 88082c3b8a
commit 7e362d8740
5 changed files with 86 additions and 20 deletions
--- 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;
--- 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>
--- 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':
--- 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();
    },
    /**
--- 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');
    },
  },