add date filter for trend analysis

2026-05-15 23:47:33 +08:00 · 2024-06-02 22:07:02 +08:00
parent c34887240e
commit 809172bf34
7 changed files with 459 additions and 45 deletions
@@ -0,0 +1,197 @@
+<template>
+    <v-dialog class="month-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h4 class="text-h4">{{ title }}</h4>
+                </div>
+            </template>
+            <template #subtitle>
+                <div class="text-body-1 text-center text-wrap mt-6">
+                    <p v-if="hint">{{ hint }}</p>
+                    <span v-if="beginDateTime && endDateTime">
+                        <span>{{ beginDateTime }}</span>
+                        <span> - </span>
+                        <span>{{ endDateTime }}</span>
+                    </span>
+                    <slot></slot>
+                </div>
+            </template>
+            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
+                <v-row class="match-height">
+                    <v-col cols="12" md="6">
+                        <vue-date-picker inline month-picker auto-apply
+                                         month-name-format="long"
+                                         :clearable="false"
+                                         :dark="isDarkMode"
+                                         :year-range="yearRange"
+                                         :year-first="isYearFirst"
+                                         :partial-range="false"
+                                         v-model="startTime">
+                            <template #month="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                            <template #month-overlay-value="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                        </vue-date-picker>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <vue-date-picker inline month-picker auto-apply
+                                         month-name-format="long"
+                                         :clearable="false"
+                                         :dark="isDarkMode"
+                                         :year-range="yearRange"
+                                         :year-first="isYearFirst"
+                                         :partial-range="false"
+                                         v-model="endTime">
+                            <template #month="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                            <template #month-overlay-value="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                        </vue-date-picker>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="!startTime || !endTime" @click="confirm">{{ $t('OK') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { useTheme } from 'vuetify';
+
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+
+import {
+    getYearMonthObjectFromString,
+    getYearMonthStringFromObject,
+    getCurrentUnixTime,
+    getCurrentDateTime,
+    getThisYearFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
+    getYear
+} from '@/lib/datetime.js';
+
+export default {
+    props: [
+        'minTime',
+        'maxTime',
+        'title',
+        'hint',
+        'persistent',
+        'show'
+    ],
+    emits: [
+        'update:show',
+        'dateRange:change'
+    ],
+    data() {
+        const self = this;
+        let minDate = getThisYearFirstUnixTime();
+        let maxDate = getCurrentUnixTime();
+
+        if (self.minTime) {
+            minDate = getYearMonthObjectFromString(self.minTime);
+        }
+
+        if (self.maxTime) {
+            maxDate = getYearMonthObjectFromString(self.maxTime);
+        }
+
+        return {
+            yearRange: [
+                2000,
+                getYear(getCurrentDateTime()) + 1
+            ],
+            startTime: minDate,
+            endTime: maxDate
+        }
+    },
+    computed: {
+        ...mapStores(useUserStore),
+        showState: {
+            get: function () {
+                return this.show;
+            },
+            set: function (value) {
+                this.$emit('update:show', value);
+            }
+        },
+        isDarkMode() {
+            return this.globalTheme.global.name.value === 'dark';
+        },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
+        beginDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.startTime));
+        },
+        endDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.endTime));
+        }
+    },
+    watch: {
+        'minTime': function (newValue) {
+            if (newValue) {
+                this.startTime = getYearMonthObjectFromString(newValue);
+            }
+        },
+        'maxTime': function (newValue) {
+            if (newValue) {
+                this.endTime = getYearMonthObjectFromString(newValue);
+            }
+        }
+    },
+    setup() {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    },
+    methods: {
+        confirm() {
+            if (!this.startTime || !this.endTime) {
+                return;
+            }
+
+            if (this.startTime.year <= 0 || this.startTime.month < 0 || this.endTime.year <= 0 || this.endTime.month < 0) {
+                this.$toast('Date is too early');
+                return;
+            }
+
+            const minYearMonth = getYearMonthStringFromObject(this.startTime);
+            const maxYearMonth = getYearMonthStringFromObject(this.endTime);
+
+            this.$emit('dateRange:change', minYearMonth, maxYearMonth);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
+        }
+    }
+}
+</script>
+
+<style>
+.month-range-selection-dialog .dp__preset_ranges {
+    white-space: nowrap !important;
+}
+
+.month-range-selection-dialog .dp__overlay {
+    width: 100% !important;
+    height: 100% !important;
+}
+</style>