From b897b163aa47facfac9d343dcb31379cfc0a91ff Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 28 Aug 2023 17:01:26 +0800
Subject: [PATCH] Conformance: time duration component fix bug.

---
 .../ConformanceTimeRange.vue                  | 35 ++++---
 .../ConformanceSidebar/ResultDot.vue          |  2 +-
 .../Discover/Conformance/MoreModal.vue        |  7 ++
 src/components/durationjs.vue                 | 99 ++++++++-----------
 src/stores/conformance.js                     | 18 +++-
 5 files changed, 90 insertions(+), 71 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index fe8bf43..04a8efc 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -5,12 +5,9 @@
     <p>min: {{ timeData.min }}</p>
     <p>max: {{ timeData.max }}</p>
     <div class="flex justify-between items-center">
-      <!-- <Durationjs :max="max" :min="min" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
+      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
         <span>~</span>
-      <Durationjs :max="max" :min="min" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs> -->
-      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" ></Durationjs>
-        <span>~</span>
-      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" ></Durationjs>
+      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
     </div>
   </div>
 </div>
@@ -26,23 +23,33 @@ export default {
         min: 0,
         max: 0,
       },
+      timeRangeMin: 0,
+      timeRangeMax: 0,
     }
   },
   components: {
     Durationjs,
   },
-  computed: { // 一定得用 computed 傳遞資料，不要拿父元件 props 的數值，不然子元件會交互影響。
+  computed: {
     minVuemin() {
-      return this.time ? this.time.min : 0;
+      let min = 0;
+      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
+      return min;
     },
     minVuemax() {
-      return this.time ? this.time.max : 0;
+      let max = 0;
+      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
+      return max;
     },
     maxVuemin() {
-      return this.time ? this.time.min : 0;
+      let min = 0;
+      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
+      return min;
     },
     maxVuemax() {
-      return this.time ? this.time.max : 0;
+      let max = 0;
+      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
+      return max;
     },
   },
   watch: {
@@ -57,15 +64,17 @@ export default {
           min: newValue.min,
           max: newValue.max
         };
-      };
+      }
     },
   },
   methods: {
     minTotalSeconds(e) {
-      // console.log('min:', e);
+      console.log('min:', e);
+      this.timeRangeMin = e;
     },
     maxTotalSeconds(e) {
-      // console.log('max:', e);
+      console.log('max:', e);
+      this.timeRangeMax = e;
     },
   },
 }
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
index 12afe02..d25587d 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
@@ -19,7 +19,7 @@ export default {
   watch: {
     timeResultData: {
       handler(newValue) {
-        console.log(newValue);
+        // console.log(newValue);
         this.data = newValue;
       },
       immediate: true,
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index a825059..d4013cb 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -43,6 +43,7 @@
             <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
+        {{ caseData }}
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
             <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
               <div v-for="(col, index) in columnData" :key="index">
@@ -100,6 +101,12 @@ export default {
       if(this.infiniteData !== null){
         const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
         data.forEach(item => {
+          // item.facets.forEach((facet, index) => {
+          //   console.log(facet.value);
+          //   item[`fac_${index}`] = facet.value.join(', '); // 建立新的 key-value pair
+          // });
+          // delete item.facets; // 刪除原本的 attributes 屬性
+
           item.attributes.forEach((attribute, index) => {
             item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
           });
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index 12cf6fa..667877e 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -1,15 +1,12 @@
 <template>
 <div class=" relative">
-  <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
+  <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
     <p>{{ days }}d</p>
     <p>{{ hours }}h</p>
     <p>{{ minutes }}m</p>
     <p>{{ seconds }}s</p>
   </div>
-  <p>maxTotal: {{ maxTotal }}</p>
-  <p>minTotal: {{ minTotal }}</p>
-  <p>size: {{ size }}</p>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTiemSelect">
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -69,13 +66,7 @@ export default {
       minTotal: null,
       inputTypes: [],
       lastInput: null,
-      openTiemSelect: false,
-      // tUnits: {
-      //   s: { dsp: 's', inc: 1, val: 0, max: 60, rate: 1, min: 0 },
-      //   m: { dsp: 'm', inc: 1, val: 0, max: 60, rate: 60, min: 0 },
-      //   h: { dsp: 'h', inc: 1, val: 0, max: 24, rate: 3600, min: 0 },
-      //   d: { dsp: 'd', inc: 1, val: 0, max: this.maxDays, rate: 86400, min: this.minDays }
-      // },
+      openTimeSelect: false,
     };
   },
   computed: {
@@ -101,15 +92,20 @@ export default {
     },
   },
   watch: {
-    max: function(newValue, oldValue) {
+    max: {
+      handler: function(newValue, oldValue) {
       this.maxTotal = newValue;
       this.size === 'max' && newValue !== oldValue ? this.createData() : null;
-
     },
-    min: function(newValue, oldValue) {
-      this.minTotal = newValue;
-      this.size === 'min' && newValue !== oldValue ? this.createData() : null;
+      immediate: true,
     },
+    min: {
+      handler: function(newValue, oldValue) {
+        this.minTotal = newValue;
+        this.size === 'min' && newValue !== oldValue ? this.createData() : null;
+      },
+      immediate: true,
+    }
   },
   methods: {
     onFocus(event) {
@@ -126,8 +122,11 @@ export default {
       const inputValue = parseInt(event.target.value, 10);
       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');
-      else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
+      if(inputValue > max) {
+        event.target.value = max.toString().padStart(2, '0');
+        this.totalSeconds = this.maxTotal;
+        this.secondToDate(this.maxTotal, 'max');
+      }else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
 
       // 數值更新, tUnits 也更新, 並計算 totalSeconds
       const dsp = event.target.dataset.tunit;
@@ -179,9 +178,9 @@ export default {
             newVal = '00';
           } else {
             newVal = '00';
-          };
-        };
-      };
+          }
+        }
+      }
 
       input.value = newVal.toString().padStart(2, '0');
       switch (tUnit) {
@@ -214,12 +213,6 @@ export default {
     },
     calculateTotalSeconds() {
       let totalSeconds = 0;
-      let tUnits = {
-          s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
-          m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
-          h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
-          d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays },
-        };
 
       for (const unit in this.tUnits) {
         const val = parseInt(this.tUnits[unit].val, 10);
@@ -228,47 +221,41 @@ export default {
         }
       }
 
-      // 大於最大值時要等於最大值
-      console.log(totalSeconds);
-      if(totalSeconds >= this.maxTotal){
-        console.log('>max');
+      if(totalSeconds >= this.maxTotal){ // 大於最大值時要等於最大值
         totalSeconds = this.maxTotal;
-        this.tUnits = tUnits;
-      } else if (totalSeconds <= this.minTotal) {
-        console.log('<min');
-        // 小於最小值時要等於最小值
+      } else if (totalSeconds <= this.minTotal) { // 小於最小值時要等於最小值
         totalSeconds = this.minTotal;
-        this.tUnits = tUnits;
         this.secondToDate(this.minTotal, 'min');
       } else {
         this.totalSeconds = totalSeconds;
       };
-      // this.$emit('total-seconds', this.totalSeconds);
+      this.$emit('total-seconds', this.totalSeconds);
     },
-    createData() {
-      // let size = 'min';
+    async createData() {
       let size = this.size;
 
-      switch (size) {
-        case 'max':
-          this.secondToDate(this.minTotal, 'min');
-          this.secondToDate(this.maxTotal, 'max');
-          this.totalSeconds = this.maxTotal;
-          break;
-        case 'min':
-          this.secondToDate(this.maxTotal, 'max');
-          this.secondToDate(this.minTotal, 'min');
-          this.totalSeconds = this.minTotal;
-          break;
-        default:
-          break;
-      };
-      // this.$emit('total-seconds', this.totalSeconds);
+      if (this.maxTotal !== await null && this.minTotal !== await null) {
+        switch (size) {
+          case 'max':
+            this.secondToDate(this.minTotal, 'min');
+            this.secondToDate(this.maxTotal, 'max');
+            this.totalSeconds =  this.maxTotal;
+            break;
+          case 'min':
+            this.secondToDate(this.maxTotal, 'max');
+            this.secondToDate(this.minTotal, 'min');
+            this.totalSeconds =  this.minTotal;
+            break;
+          default:
+            break;
+        }
+        this.$emit('total-seconds', this.totalSeconds);
+      }
     },
   },
   mounted() {
     this.inputTypes = this.display.split('');
-    this.createData();
+    // this.createData();
   },
 };
 </script>
diff --git a/src/stores/conformance.js b/src/stores/conformance.js
index bf03184..d773ae2 100644
--- a/src/stores/conformance.js
+++ b/src/stores/conformance.js
@@ -148,6 +148,22 @@ export default defineStore('conformanceStore', {
         state.allLoopCases.map(c => {
           c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
           c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
+          // if(c.facets) {
+            // c.facets = '111';
+            // c.facets.map(att => {
+            //   switch(att.type) {
+            //     case 'float-list':
+            //       console.log(att.value);
+            //       att.value ='111'
+            //       // att.value = att.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
+            //       // att.value = att.value.join(', ');
+            //       break;
+            //     default:
+            //       break;
+            //   };
+            //   return att;
+            // });
+          // };
           c.attributes.map(att => {
             switch (att.type) {
               case 'date':
@@ -160,7 +176,7 @@ export default defineStore('conformanceStore', {
                 break;
             }
             return att;
-          })
+          });
           return c;
         });
       };