ソースを参照

HUE-9485 [frontend] Expose clear on the DateRangePicker component

Johan Ahlen 5 年 前
コミット
f333248b55
1 ファイル変更16 行追加2 行削除
  1. 16 2
      desktop/core/src/desktop/js/components/DateRangePicker.vue

+ 16 - 2
desktop/core/src/desktop/js/components/DateRangePicker.vue

@@ -136,6 +136,8 @@
     ]
   ];
 
+  const DEFAULT_RANGE = RANGE_SETS[0][0];
+
   @Component({
     components: { Datepicker, DropdownPanel, HueButton, HueLink }
   })
@@ -144,7 +146,7 @@
     inline?: boolean;
 
     rangeSets = RANGE_SETS;
-    selectedRange: Range = RANGE_SETS[0][0];
+    selectedRange: Range = DEFAULT_RANGE;
 
     customRange: Range = {
       title: I18n('Custom Range'),
@@ -165,6 +167,14 @@
       }
     }
 
+    // TODO: Switch to v-model and value prop
+    clear(): void {
+      if (this.selectedRange !== DEFAULT_RANGE) {
+        this.selectedRange = DEFAULT_RANGE;
+        this.notify();
+      }
+    }
+
     setCustomFrom(from?: Date): void {
       if (from) {
         Vue.set(this.customRange, 'from', from.valueOf());
@@ -185,7 +195,7 @@
       }
     }
 
-    apply(closePanel: () => void): void {
+    notify(): void {
       let range: Range;
       if (this.selectedRange.custom) {
         range = {
@@ -203,6 +213,10 @@
         };
       }
       this.$emit('date-range-changed', range);
+    }
+
+    apply(closePanel: () => void): void {
+      this.notify();
       closePanel();
     }
   }