web/satellite: migrated DateRangeSelection component to use composition API

Migrated component to use SFC composition API.

Change-Id: I224fffc827f8be53aa8e0389334224b367b7ee71

web/satellite/src/components/project/dashboard/DateRangeSelection.vue

@@ -18,61 +18,57 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { computed } from 'vue';
 
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { useStore } from '@/utils/hooks';
 
 import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
 
 import DatepickerIcon from '@/../static/images/project/datepicker.svg';
 
-// @vue/component
+const props = withDefaults(defineProps<{
-@Component({
+    since: Date,
-    components: {
+    before: Date,
-        DatepickerIcon,
+    isOpen: boolean,
-        VDateRangePicker,
+    onDatePick: (dateRange: Date[]) => void,
-    },
+    toggle: () => void;
-})
+}>(), {
+    since: () => new Date(),
+    before: () => new Date(),
+    isOpen: false,
+    onDatePick: () => {},
+    toggle: () => {},
+});
 
-export default class DateRangeSelection extends Vue {
+const store = useStore();
-    @Prop({ default: new Date() })
-    public readonly since: Date;
-    @Prop({ default: new Date() })
-    public readonly before: Date;
-    @Prop({ default: () => () => {} })
-    public readonly onDatePick: (dateRange: Date[]) => void;
-    @Prop({ default: () => () => {} })
-    public readonly toggle: () => void;
-    @Prop({ default: false })
-    public readonly isOpen: boolean;
 
-    /**
+/**
-     * Closes duration picker.
+ * Returns formatted date range string.
-     */
+ */
-    public closePicker(): void {
+const dateRangeLabel = computed((): string => {
-        this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
+    if (props.since.getTime() === props.before.getTime()) {
+        return props.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
     }
 
-    /**
+    const sinceFormattedString = props.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
-     * Returns formatted date range string.
+    const beforeFormattedString = props.before.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
-     */
+    return `${sinceFormattedString} - ${beforeFormattedString}`;
-    public get dateRangeLabel(): string {
+});
-        if (this.since.getTime() === this.before.getTime()) {
-            return this.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
-        }
 
-        const sinceFormattedString = this.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
+/**
-        const beforeFormattedString = this.before.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
+ * Returns date range to be displayed in date range picker.
-        return `${sinceFormattedString} - ${beforeFormattedString}`;
+ */
-    }
+const pickerDateRange = computed((): Date[] => {
+    return [props.since, props.before];
+});
 
-    /**
+/**
-     * Returns date range to be displayed in date range picker.
+ * Closes duration picker.
-     */
+ */
-    public get pickerDateRange(): Date[] {
+function closePicker(): void {
-        return [this.since, this.before];
+    store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
-    }
 }
 </script>