[ui] Vue 3 - Migrated DateRangePicker component

cloudera · Feb 17, 2021 · 6d9a4f9 · 6d9a4f9
1 parent 0c98ad3
commit 6d9a4f9
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 75 deletions.
diff --git a/desktop/core/src/desktop/js/components/DateRangePicker.test.ts b/desktop/core/src/desktop/js/components/DateRangePicker.test.ts
@@ -21,7 +21,9 @@ import DateRangePicker from './DateRangePicker.vue';
 describe('DateRangePicker.vue', () => {
   it('should render', () => {
     const wrapper = shallowMount(DateRangePicker, {
-      stubs: { 'dropdown-panel': DropdownPanel }
+      global: {
+        stubs: { 'dropdown-panel': DropdownPanel }
+      }
     });
     expect(wrapper.element).toMatchSnapshot();
   });

diff --git a/desktop/core/src/desktop/js/components/DateRangePicker.vue b/desktop/core/src/desktop/js/components/DateRangePicker.vue
@@ -76,15 +76,14 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent } from 'vue';
+
   import { Range } from './DateRangePicker';
   import { DateTime } from 'luxon';
   import Datepicker from 'vuejs-datepicker';
   import HueLink from './HueLink.vue';
   import HueButton from './HueButton.vue';
   import I18n from '../utils/i18n';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
   import DropdownPanel from './dropdown/DropdownPanel.vue';
 
   const SECOND = 1000;
@@ -138,88 +137,122 @@
 
   const DEFAULT_RANGE = RANGE_SETS[0][0];
 
-  @Component({
-    components: { Datepicker, DropdownPanel, HueButton, HueLink }
-  })
-  export default class DateRangePicker extends Vue {
-    @Prop({ required: false, default: false })
-    inline?: boolean;
-
-    rangeSets = RANGE_SETS;
-    selectedRange: Range = DEFAULT_RANGE;
-
-    customRange: Range = {
-      title: I18n('Custom Range'),
-      from: RANGE_NOW.toMillis() - this.selectedRange.from,
-      to: RANGE_NOW.toMillis(),
-      custom: true
-    };
-
-    get customFrom(): number | undefined {
-      if (this.selectedRange.custom) {
-        return this.selectedRange.from;
+  export default defineComponent({
+    components: {
+      Datepicker,
+      DropdownPanel,
+      HueButton,
+      HueLink
+    },
+
+    props: {
+      inline: {
+        type: Boolean,
+        required: false,
+        default: false
       }
-    }
+    },
 
-    get customTo(): number | undefined {
-      if (this.selectedRange.custom) {
-        return this.selectedRange.to;
-      }
-    }
+    emits: ['date-range-changed'],
 
-    // TODO: Switch to v-model and value prop
-    clear(): void {
-      if (this.selectedRange !== DEFAULT_RANGE) {
-        this.selectedRange = DEFAULT_RANGE;
-        this.notify();
-      }
-    }
+    setup(): {
+      rangeSets: Range[][];
 
-    setCustomFrom(from?: Date): void {
-      if (from) {
-        Vue.set(this.customRange, 'from', from.valueOf());
-        if (this.customRange.from > this.customRange.to) {
-          Vue.set(this.customRange, 'to', this.customRange.from);
+      customRange: Range;
+    } {
+      return {
+        rangeSets: RANGE_SETS,
+
+        customRange: {
+          title: I18n('Custom Range'),
+          from: RANGE_NOW.toMillis() - DEFAULT_RANGE.from,
+          to: RANGE_NOW.toMillis(),
+          custom: true
         }
-        this.selectedRange = this.customRange;
-      }
-    }
+      };
+    },
+
+    data(): {
+      selectedRange: Range;
+    } {
+      return {
+        selectedRange: DEFAULT_RANGE
+      };
+    },
+
+    computed: {
+      customFrom(): number | undefined {
+        if (this.selectedRange.custom) {
+          return this.selectedRange.from;
+        }
+        return undefined;
+      },
 
-    setCustomTo(to?: Date): void {
-      if (to) {
-        Vue.set(this.customRange, 'to', to.valueOf());
-        if (this.customRange.to < this.customRange.from) {
-          Vue.set(this.customRange, 'from', this.customRange.to);
+      customTo(): number | undefined {
+        if (this.selectedRange.custom) {
+          return this.selectedRange.to;
         }
-        this.selectedRange = this.customRange;
+        return undefined;
       }
-    }
+    },
+
+    methods: {
+      // TODO: Switch to v-model and value prop
+      clear(): void {
+        if (this.selectedRange !== DEFAULT_RANGE) {
+          this.selectedRange = DEFAULT_RANGE;
+          this.notify();
+        }
+      },
 
-    notify(): void {
-      let range: Range;
-      if (this.selectedRange.custom) {
-        range = {
-          title: this.selectedRange.title,
-          from: DateTime.fromMillis(this.selectedRange.from).startOf('day').valueOf(),
-          to: DateTime.fromMillis(this.selectedRange.to).endOf('day').valueOf(),
-          custom: true
-        };
-      } else {
-        const now = DateTime.utc().valueOf();
-        range = {
-          title: this.selectedRange.title,
-          from: now - this.selectedRange.from,
-          to: now - this.selectedRange.to
-        };
-      }
-      this.$emit('date-range-changed', range);
-    }
+      setCustomFrom(from?: Date): void {
+        if (from) {
+          this.customRange.from = from.valueOf();
+          if (this.customRange.from > this.customRange.to) {
+            this.customRange.to = this.customRange.from;
+          }
+          this.selectedRange = this.customRange;
+          this.$forceUpdate();
+        }
+      },
 
-    apply(closePanel: () => void): void {
-      this.notify();
-      closePanel();
+      setCustomTo(to?: Date): void {
+        if (to) {
+          this.customRange.to = to.valueOf();
+          if (this.customRange.to < this.customRange.from) {
+            this.customRange.from = this.customRange.to;
+          }
+          this.selectedRange = this.customRange;
+          this.$forceUpdate();
+        }
+      },
+
+      notify(): void {
+        let range: Range;
+        if (this.selectedRange.custom) {
+          range = {
+            title: this.selectedRange.title,
+            from: DateTime.fromMillis(this.selectedRange.from).startOf('day').valueOf(),
+            to: DateTime.fromMillis(this.selectedRange.to).endOf('day').valueOf(),
+            custom: true
+          };
+        } else {
+          const now = DateTime.utc().valueOf();
+          range = {
+            title: this.selectedRange.title,
+            from: now - this.selectedRange.from,
+            to: now - this.selectedRange.to
+          };
+        }
+        this.$emit('date-range-changed', range);
+      },
+
+      apply(closePanel: () => void): void {
+        this.notify();
+        closePanel();
+      }
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>