migrate date range selection sheet / dialog to composition API and typescript

2026-05-15 07:27:33 +08:00 · 2025-01-11 15:44:16 +08:00
parent 89b233e51b
commit 3e6a054913
10 changed files with 457 additions and 300 deletions
@@ -0,0 +1,138 @@
+import { ref, computed } from 'vue';
+
+import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, DateRange } from '@/core/datetime.ts';
+import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import {
+    getCurrentUnixTime,
+    getCurrentYear,
+    getUnixTime,
+    getLocalDatetimeFromUnixTime,
+    getTodayFirstUnixTime,
+    getDummyUnixTimeForLocalUsage,
+    getActualUnixTimeForStore,
+    getTimezoneOffsetMinutes,
+    getBrowserTimezoneOffsetMinutes,
+    getDateRangeByDateType
+} from '@/lib/datetime.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+export interface CommonDateRangeSelectionProps {
+    minTime?: number;
+    maxTime?: number;
+    title?: string;
+    hint?: string;
+    show: boolean;
+}
+
+function getDateRangeFromProps(props: CommonDateRangeSelectionProps): { minDate: number; maxDate: number } {
+    let minDate = getTodayFirstUnixTime();
+    let maxDate = getCurrentUnixTime();
+
+    if (props.minTime) {
+        minDate = props.minTime;
+    }
+
+    if (props.maxTime) {
+        maxDate = props.maxTime;
+    }
+
+    return {
+        minDate,
+        maxDate
+    };
+}
+
+export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps) {
+    const { tt, getAllMinWeekdayNames, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat } = useI18n();
+    const userStore = useUserStore();
+    const { minDate, maxDate } = getDateRangeFromProps(props);
+
+    const yearRange = ref<number[]>([
+        2000,
+        getCurrentYear() + 1
+    ]);
+
+    const dateRange = ref<Date[]>([
+        getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(minDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
+        getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(maxDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
+    ]);
+
+    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
+    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+    const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
+    const beginDateTime = computed<string>(() => {
+        const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+        return formatUnixTimeToLongDateTime(actualBeginUnixTime);
+    });
+    const endDateTime = computed<string>(() => {
+        const actualEndUnixTime = getActualUnixTimeForStore(getUnixTime(dateRange.value[1]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+        return formatUnixTimeToLongDateTime(actualEndUnixTime);
+    });
+    const presetRanges = computed<PresetDateRange[]>(() => {
+        const presetRanges:PresetDateRange[] = [];
+
+        [
+            DateRange.Today,
+            DateRange.LastSevenDays,
+            DateRange.LastThirtyDays,
+            DateRange.ThisWeek,
+            DateRange.ThisMonth,
+            DateRange.ThisYear
+        ].forEach(dateRangeType => {
+            const dateRange = getDateRangeByDateType(dateRangeType.type, firstDayOfWeek.value) as TimeRangeAndDateType;
+
+            presetRanges.push({
+                label: tt(dateRangeType.name),
+                value: [
+                    getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(dateRange.minTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
+                    getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(dateRange.maxTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
+                ]
+            });
+        });
+
+        return presetRanges;
+    });
+
+    function getFinalDateRange(): UnixTimeRange | null {
+        if (!dateRange.value[0] || !dateRange.value[1]) {
+            return null;
+        }
+
+        const currentMinDate = dateRange.value[0];
+        const currentMaxDate = dateRange.value[1];
+
+        let minUnixTime = getUnixTime(currentMinDate);
+        let maxUnixTime = getUnixTime(currentMaxDate);
+
+        if (minUnixTime < 0 || maxUnixTime < 0) {
+            throw new Error('Date is too early');
+        }
+
+        minUnixTime = getActualUnixTimeForStore(minUnixTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+        maxUnixTime = getActualUnixTimeForStore(maxUnixTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+
+        return {
+            minUnixTime,
+            maxUnixTime
+        };
+    }
+
+    return {
+        // states
+        yearRange,
+        dateRange,
+        // computed states
+        dayNames,
+        isYearFirst,
+        is24Hour,
+        beginDateTime,
+        endDateTime,
+        presetRanges,
+        // functions
+        getFinalDateRange
+    };
+}