Conformance: time duration component done.

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

@@ -2,10 +2,8 @@
 <div class="mt-2">
   <p class="h2">Time Range</p>
   <div class=" text-sm leading-normal">
-    <p>min: {{ timeData.min }}</p>
-    <p>max: {{ timeData.max }}</p>
     <div class="flex justify-between items-center">
-      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
+      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
         <span>~</span>
       <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
     </div>
@@ -25,35 +23,19 @@ export default {
       },
       timeRangeMin: 0,
       timeRangeMax: 0,
+      minVuemin: 0,
+      minVuemax: 0,
+      maxVuemin: 0,
+      maxVuemax: 0,
+      updateMax: null,
     }
   },
   components: {
     Durationjs,
   },
-  computed: {
-    minVuemin() {
-      let min = 0;
-      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
-      return min;
-    },
-    minVuemax() {
-      let max = 0;
-      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
-      return max;
-    },
-    maxVuemin() {
-      let min = 0;
-      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
-      return min;
-    },
-    maxVuemax() {
-      let max = 0;
-      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
-      return max;
-    },
-  },
   watch: {
-    time: function(newValue, oldValue) {
+    time: {
+      handler: function(newValue, oldValue) {
         if(newValue == null) {
           this.timeData = {
             min: 0,
@@ -64,17 +46,27 @@ export default {
             min: newValue.min,
             max: newValue.max
           };
+          this.setTimeValue();
         }
       },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
+    setTimeValue() {
+      // 深拷貝原始 timeData 的內容
+      this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
+      this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
+      this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
+      this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
+    },
     minTotalSeconds(e) {
-      console.log('min:', e);
       this.timeRangeMin = e;
     },
     maxTotalSeconds(e) {
-      console.log('max:', e);
       this.timeRangeMax = e;
+      this.updateMax = e;
     },
   },
 }

src/components/durationjs.vue

@@ -46,6 +46,13 @@ export default {
         return value >= 0;
       },
     },
+    updateMax: {
+      type: Number,
+      required: false,
+      validator(value) {
+        return value >= 0;
+      },
+    },
     size: {
       type: String,
       default: false,
@@ -105,7 +112,14 @@ export default {
         this.size === 'min' && newValue !== oldValue ? this.createData() : null;
       },
       immediate: true,
-    }
+    },
+    // min 的最大值要等於 max 的總秒數
+    updateMax: {
+      handler: function(newValue, oldValue) {
+        this.maxTotal = newValue;
+        newValue !== oldValue ? this.createData() : null;
+      },
+    },
   },
   methods: {
     onFocus(event) {
@@ -233,7 +247,6 @@ export default {
     },
     async createData() {
       let size = this.size;
-
       if (this.maxTotal !== await null && this.minTotal !== await null) {
         switch (size) {
           case 'max':
@@ -255,7 +268,6 @@ export default {
   },
   mounted() {
     this.inputTypes = this.display.split('');
-    // this.createData();
   },
 };
 </script>