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

src/components/base/MonthRangeSelectionBase.ts

@@ -0,0 +1,99 @@
+import { ref, computed } from 'vue';
+
+import type { YearMonth } from '@/core/datetime.ts';
+
+import {
+    getYearMonthObjectFromUnixTime,
+    getYearMonthObjectFromString,
+    getYearMonthStringFromObject,
+    getCurrentUnixTime,
+    getCurrentYear,
+    getThisYearFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime
+} from '@/lib/datetime.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+export interface CommonMonthRangeSelectionProps {
+    minTime?: string;
+    maxTime?: string;
+    title?: string;
+    hint?: string;
+    show: boolean;
+}
+
+function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: YearMonth; maxDate: YearMonth } {
+    let minDate: YearMonth = getYearMonthObjectFromUnixTime(getThisYearFirstUnixTime());
+    let maxDate: YearMonth = getYearMonthObjectFromUnixTime(getCurrentUnixTime());
+
+    if (props.minTime) {
+        const yearMonth = getYearMonthObjectFromString(props.minTime);
+
+        if (yearMonth) {
+            minDate = yearMonth;
+        }
+    }
+
+    if (props.maxTime) {
+        const yearMonth = getYearMonthObjectFromString(props.maxTime);
+
+        if (yearMonth) {
+            maxDate = yearMonth;
+        }
+    }
+
+    return {
+        minDate,
+        maxDate
+    };
+}
+
+export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps) {
+    const { formatUnixTimeToLongYearMonth, isLongDateMonthAfterYear } = useI18n();
+    const { minDate, maxDate } = getMonthRangeFromProps(props);
+
+    const yearRange = ref<number[]>([
+        2000,
+        getCurrentYear() + 1
+    ]);
+
+    const dateRange = ref<YearMonth[]>([
+        minDate,
+        maxDate
+    ]);
+
+    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+    const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0])));
+    const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1])));
+
+    function getFinalMonthRange(): { minYearMonth: string, maxYearMonth: string } | null {
+        if (!dateRange.value[0] || !dateRange.value[1]) {
+            return null;
+        }
+
+        if (dateRange.value[0].year <= 0 || dateRange.value[0].month < 0 || dateRange.value[1].year <= 0 || dateRange.value[1].month < 0) {
+            throw new Error('Date is too early');
+        }
+
+        const minYearMonth = getYearMonthStringFromObject(dateRange.value[0]);
+        const maxYearMonth = getYearMonthStringFromObject(dateRange.value[1]);
+
+        return {
+            minYearMonth,
+            maxYearMonth
+        };
+    }
+
+    return {
+        // states
+        yearRange,
+        dateRange,
+        // computed states
+        isYearFirst,
+        beginDateTime,
+        endDateTime,
+        // functions
+        getFinalMonthRange
+    };
+}

src/components/desktop/MonthRangeSelectionDialog.vue

@@ -26,7 +26,7 @@
                                          :dark="isDarkMode"
                                          :year-range="yearRange"
                                          :year-first="isYearFirst"
-                                         v-model="startTime">
+                                         v-model="dateRange[0]">
                             <template #month="{ text }">
                                 {{ getMonthShortName(text) }}
                             </template>
@@ -42,7 +42,7 @@
                                          :dark="isDarkMode"
                                          :year-range="yearRange"
                                          :year-first="isYearFirst"
-                                         v-model="endTime">
+                                         v-model="dateRange[1]">
                             <template #month="{ text }">
                                 {{ getMonthShortName(text) }}
                             </template>
@@ -55,132 +55,86 @@
             </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 :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
-                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>
     </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
-import { useUserStore } from '@/stores/user.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
 
 import { ThemeType } from '@/core/theme.ts';
-import {
+import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
-    getYearMonthObjectFromString,
-    getYearMonthStringFromObject,
-    getCurrentUnixTime,
-    getCurrentYear,
-    getThisYearFirstUnixTime,
-    getYearMonthFirstUnixTime,
-    getYearMonthLastUnixTime
-} from '@/lib/datetime.ts';
 
-export default {
+interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
-    props: [
+    persistent?: boolean;
-        'minTime',
+}
-        'maxTime',
-        'title',
-        'hint',
-        'persistent',
-        'show'
-    ],
-    emits: [
-        'update:show',
-        'dateRange:change'
-    ],
-    data() {
-        const self = this;
-        let minDate = getThisYearFirstUnixTime();
-        let maxDate = getCurrentUnixTime();
 
-        if (self.minTime) {
+const props = defineProps<DesktopMonthRangeSelectionProps>();
-            minDate = getYearMonthObjectFromString(self.minTime);
+const emit = defineEmits<{
+    (e: 'update:show', value: boolean): void;
+    (e: 'dateRange:change', minYearMonth: string, maxYearMonth: string): void;
+    (e: 'error', message: string): void;
+}>();
+
+const theme = useTheme();
+const { tt, getMonthShortName } = useI18n();
+
+const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
+
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const showState = computed<boolean>({
+    get: () => props.show || false,
+    set: (value) => emit('update:show', value)
+});
+
+function confirm(): void {
+    try {
+        const finalMonthRange = getFinalMonthRange();
+
+        if (!finalMonthRange) {
+            return;
         }
 
-        if (self.maxTime) {
+        emit('dateRange:change', finalMonthRange.minYearMonth, finalMonthRange.maxYearMonth);
-            maxDate = getYearMonthObjectFromString(self.maxTime);
+    } catch (ex: unknown) {
-        }
+        if (ex instanceof Error) {
-
+            emit('error', ex.message);
-        return {
-            yearRange: [
-                2000,
-                getCurrentYear() + 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 === ThemeType.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);
         }
     }
 }
+
+function cancel(): void {
+    emit('update:show', false);
+}
+
+watch(() => props.minTime, (newValue) => {
+    if (newValue) {
+        const yearMonth = getYearMonthObjectFromString(newValue);
+
+        if (yearMonth) {
+            dateRange.value[0] = yearMonth;
+        }
+    }
+});
+
+watch(() => props.maxTime, (newValue) => {
+    if (newValue) {
+        const yearMonth = getYearMonthObjectFromString(newValue);
+
+        if (yearMonth) {
+            dateRange.value[1] = yearMonth;
+        }
+    }
+});
 </script>
 
 <style>

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -32,124 +32,84 @@
                 </vue-date-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
-                           :text="$t('Continue')"
+                           :text="tt('Continue')"
                            @click="confirm">
                 </f7-button>
                 <div class="margin-top text-align-center">
-                    <f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
+                    <f7-link @click="cancel" :text="tt('Cancel')"></f7-link>
                 </div>
             </div>
         </f7-page-content>
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { computed } from 'vue';
-import { useUserStore } from '@/stores/user.ts';
 
-import {
+import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
-    getYearMonthObjectFromString,
-    getYearMonthStringFromObject,
-    getCurrentUnixTime,
-    getCurrentYear,
-    getThisYearFirstUnixTime,
-    getYearMonthFirstUnixTime,
-    getYearMonthLastUnixTime
-} from '@/lib/datetime.ts';
 
-export default {
+import { useI18n } from '@/locales/helpers.ts';
-    props: [
+import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
-        'minTime',
+import { useEnvironmentsStore } from '@/stores/environment.ts';
-        'maxTime',
-        'title',
-        'hint',
-        'show'
-    ],
-    emits: [
-        'update:show',
-        'dateRange:change'
-    ],
-    data() {
-        const self = this;
-        let minDate = getThisYearFirstUnixTime();
-        let maxDate = getCurrentUnixTime();
 
-        if (self.minTime) {
+import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
-            minDate = getYearMonthObjectFromString(self.minTime);
+
+const props = defineProps<CommonMonthRangeSelectionProps>();
+const emit = defineEmits<{
+    (e: 'update:show', value: boolean): void;
+    (e: 'dateRange:change', minYearMonth: string, maxYearMonth: string): void;
+}>();
+
+const { tt, getMonthShortName } = useI18n();
+const { showToast } = useI18nUIComponents();
+
+const environmentsStore = useEnvironmentsStore();
+
+const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
+
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
+
+function confirm(): void {
+    try {
+        const finalMonthRange = getFinalMonthRange();
+
+        if (!finalMonthRange) {
+            return;
         }
 
-        if (self.maxTime) {
+        emit('dateRange:change', finalMonthRange.minYearMonth, finalMonthRange.maxYearMonth);
-            maxDate = getYearMonthObjectFromString(self.maxTime);
+    } catch (ex: unknown) {
-        }
+        if (ex instanceof Error) {
-
+            showToast(ex.message);
-        return {
-            yearRange: [
-                2000,
-                getCurrentYear() + 1
-            ],
-            dateRange: [
-                minDate,
-                maxDate
-            ]
-        }
-    },
-    computed: {
-        ...mapStores(useUserStore),
-        isDarkMode() {
-            return this.$root.isDarkMode;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        isYearFirst() {
-            return this.$locale.isLongDateMonthAfterYear(this.userStore);
-        },
-        is24Hour() {
-            return this.$locale.isLongTime24HourFormat(this.userStore);
-        },
-        beginDateTime() {
-            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.dateRange[0]));
-        },
-        endDateTime() {
-            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.dateRange[1]));
-        }
-    },
-    methods: {
-        onSheetOpen() {
-            if (this.minTime) {
-                this.dateRange[0] = getYearMonthObjectFromString(this.minTime);
-            }
-
-            if (this.maxTime) {
-                this.dateRange[1] = getYearMonthObjectFromString(this.maxTime);
-            }
-        },
-        onSheetClosed() {
-            this.$emit('update:show', false);
-        },
-        confirm() {
-            if (!this.dateRange[0] || !this.dateRange[1]) {
-                return;
-            }
-
-            if (this.dateRange[0].year <= 0 || this.dateRange[0].month < 0 || this.dateRange[1].year <= 0 || this.dateRange[1].month < 0) {
-                this.$toast('Date is too early');
-                return;
-            }
-
-            const minYearMonth = getYearMonthStringFromObject(this.dateRange[0]);
-            const maxYearMonth = getYearMonthStringFromObject(this.dateRange[1]);
-
-            this.$emit('dateRange:change', minYearMonth, maxYearMonth);
-        },
-        cancel() {
-            this.$emit('update:show', false);
-        },
-        getMonthShortName(month) {
-            return this.$locale.getMonthShortName(month);
         }
     }
 }
+
+function cancel(): void {
+    emit('update:show', false);
+}
+
+function onSheetOpen(): void {
+    if (props.minTime) {
+        const yearMonth = getYearMonthObjectFromString(props.minTime);
+
+        if (yearMonth) {
+            dateRange.value[0] = yearMonth;
+        }
+    }
+
+    if (props.maxTime) {
+        const yearMonth = getYearMonthObjectFromString(props.maxTime);
+
+        if (yearMonth) {
+            dateRange.value[1] = yearMonth;
+        }
+    }
+}
+
+function onSheetClosed(): void {
+    emit('update:show', false);
+}
 </script>
 
 <style>

src/lib/datetime.ts

@@ -38,6 +38,15 @@ export function isYearMonthValid(year: number, month: number): boolean {
     return year > 0 && month >= 0 && month <= 11;
 }
 
+export function getYearMonthObjectFromUnixTime(unixTime: number): YearMonth {
+    const datetime = moment.unix(unixTime);
+
+    return {
+        year: datetime.year(),
+        month: datetime.month()
+    };
+}
+
 export function getYearMonthObjectFromString(yearMonth: string): YearMonth | null {
     if (!isString(yearMonth)) {
         return null;

src/views/desktop/statistics/TransactionPage.vue

@@ -294,7 +294,8 @@
                                   :min-time="query.trendChartStartYearMonth"
                                   :max-time="query.trendChartEndYearMonth"
                                   v-model:show="showCustomMonthRangeDialog"
-                                  @dateRange:change="setCustomDateFilter" />
+                                  @dateRange:change="setCustomDateFilter"
+                                  @error="showError" />
 
     <v-dialog width="800" v-model="showFilterAccountDialog">
         <account-filter-settings-card type="statisticsCurrent" :dialog-mode="true"