|
|
@@ -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>
|