migrate schedule frequency select / selection sheet to composition API and typescript

2025-01-12 00:48:03 +08:00
parent 75a96e871a
commit b517409229
5 changed files with 283 additions and 239 deletions
@@ -0,0 +1,64 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { sortNumbersArray } from '@/lib/common.ts';
+
+export interface CommonScheduleFrequencySelectionProps {
+    type: number;
+    modelValue: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    label?: string;
+}
+
+export interface AvailableMonthDay {
+    day: number;
+    displayName: string;
+}
+
+export function useScheduleFrequencySelectionBase() {
+    const { getAllWeekDays, getAllTransactionScheduledFrequencyTypes, getMonthdayShortName } = useI18n();
+    const userStore = useUserStore();
+
+    const allTransactionScheduledFrequencyTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionScheduledFrequencyTypes());
+    const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays(userStore.currentUserFirstDayOfWeek));
+
+    const allAvailableMonthDays = computed<AvailableMonthDay[]>(() => {
+        const allAvailableDays = [];
+
+        for (let i = 1; i <= 28; i++) {
+            allAvailableDays.push({
+                day: i,
+                displayName: getMonthdayShortName(i),
+            });
+        }
+
+        return allAvailableDays;
+    });
+
+    function getFrequencyValues(value: string): number[] {
+        const values = value.split(',');
+        const ret: number[] = [];
+
+        for (let i = 0; i < values.length; i++) {
+            if (values[i]) {
+                ret.push(parseInt(values[i]));
+            }
+        }
+
+        return sortNumbersArray(ret);
+    }
+
+    return {
+        // computed states
+        allTransactionScheduledFrequencyTypes,
+        allWeekDays,
+        allAvailableMonthDays,
+        // functions
+        getFrequencyValues
+    };
+}
@@ -25,11 +25,11 @@
                    </v-list>
                </div>
                <div class="schedule-frequency-value-container">
-                    <v-list v-if="frequencyType === allTemplateScheduledFrequencyTypes.Disabled.type">
-                        <v-list-item :title="$t('None')"></v-list-item>
+                    <v-list v-if="frequencyType === ScheduledTemplateFrequencyType.Disabled.type">
+                        <v-list-item :title="tt('None')"></v-list-item>
                    </v-list>
                    <v-list select-strategy="classic" v-model:selected="frequencyValue"
-                            v-else-if="frequencyType === allTemplateScheduledFrequencyTypes.Weekly.type">
+                            v-else-if="frequencyType === ScheduledTemplateFrequencyType.Weekly.type">
                        <v-list-item :key="weekDay.type" :value="weekDay.type" :title="weekDay.displayName"
                                     :class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(weekDay.type) }"
                                     v-for="weekDay in allWeekDays">
@@ -39,7 +39,7 @@
                        </v-list-item>
                    </v-list>
                    <v-list select-strategy="classic" v-model:selected="frequencyValue"
-                            v-else-if="frequencyType === allTemplateScheduledFrequencyTypes.Monthly.type">
+                            v-else-if="frequencyType === ScheduledTemplateFrequencyType.Monthly.type">
                        <v-list-item :key="monthDay.day" :value="monthDay.day" :title="monthDay.displayName"
                                     :class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(monthDay.day) }"
                                     v-for="monthDay in allAvailableMonthDays">
@@ -54,137 +54,102 @@
    </v-select>
 </template>

-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed, nextTick, useTemplateRef } from 'vue';
+
+import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useUserStore } from '@/stores/user.ts';

 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';

-export default {
-    props: [
-        'type',
-        'modelValue',
-        'disabled',
-        'readonly',
-        'label'
-    ],
-    emits: [
-        'update:type',
-        'update:modelValue'
-    ],
-    data() {
-        return {
-            menuState: false
-        }
-    },
-    computed: {
-        ...mapStores(useUserStore),
-        allTransactionScheduledFrequencyTypes() {
-            return this.$locale.getAllTransactionScheduledFrequencyTypes();
-        },
-        allTemplateScheduledFrequencyTypes() {
-            return ScheduledTemplateFrequencyType.all();
-        },
-        allWeekDays() {
-            return this.$locale.getAllWeekDays(this.firstDayOfWeek);
-        },
-        allAvailableMonthDays() {
-            const allAvailableDays = [];
+const props = defineProps<CommonScheduleFrequencySelectionProps>();
+const emit = defineEmits<{
+    (e: 'update:type', value: number): void;
+    (e: 'update:modelValue', value: string): void;
+}>();

-            for (let i = 1; i <= 28; i++) {
-                allAvailableDays.push({
-                    day: i,
-                    displayName: this.$locale.getMonthdayShortName(i),
-                });
-            }
+const { tt, getMultiMonthdayShortNames, getMultiWeekdayLongNames } = useI18n();

-            return allAvailableDays;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        frequencyType: {
-            get: function () {
-                return this.type;
-            },
-            set: function (value) {
-                if (this.type !== value) {
-                    this.$emit('update:type', value);
+const userStore = useUserStore();

-                    if (value === ScheduledTemplateFrequencyType.Weekly.type) {
-                        this.frequencyValue = [this.firstDayOfWeek];
-                    } else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
-                        this.frequencyValue = [1];
-                    } else {
-                        this.frequencyValue = [];
-                    }
-                }
-            }
-        },
-        frequencyValue: {
-            get: function () {
-                const values = this.modelValue.split(',');
-                const ret = [];
+const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();

-                for (let i = 0; i < values.length; i++) {
-                    if (values[i]) {
-                        ret.push(parseInt(values[i]));
-                    }
-                }
+const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');

-                return sortNumbersArray(ret);
-            },
-            set: function (value) {
-                this.$emit('update:modelValue', sortNumbersArray(value).join(','));
-            }
-        },
-        displayFrequency() {
-            if (this.type === ScheduledTemplateFrequencyType.Disabled.type) {
-                return this.$t('Disabled');
-            } else if (this.type === ScheduledTemplateFrequencyType.Weekly.type) {
-                if (this.frequencyValue.length) {
-                    return this.$t('format.misc.everyMultiDaysOfWeek', {
-                        days: this.$locale.getMultiWeekdayLongNames(this.frequencyValue, this.firstDayOfWeek)
-                    });
-                } else {
-                    return this.$t('Weekly');
-                }
-            } else if (this.type === ScheduledTemplateFrequencyType.Monthly.type) {
-                if (this.frequencyValue.length) {
-                    return this.$t('format.misc.everyMultiDaysOfMonth', {
-                        days: this.$locale.getMultiMonthdayShortNames(this.frequencyValue)
-                    });
-                } else {
-                    return this.$t('Monthly');
-                }
+const menuState = ref<boolean>(false);
+
+const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+
+const frequencyType = computed<number>({
+    get: () => props.type,
+    set: (value: number) => {
+        if (props.type !== value) {
+            emit('update:type', value);
+
+            if (value === ScheduledTemplateFrequencyType.Weekly.type) {
+                frequencyValue.value = [firstDayOfWeek.value];
+            } else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
+                frequencyValue.value = [1];
            } else {
-                return '';
+                frequencyValue.value = [];
            }
        }
-    },
-    methods: {
-        onMenuStateChanged(state) {
-            const self = this;
+    }
+});

-            if (state) {
-                self.$nextTick(() => {
-                    if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
-                        scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected');
-                    }
-                });
-            }
-        },
-        isFrequencyValueSelected(value) {
-            for (let i = 0; i < this.frequencyValue.length; i++) {
-                if (this.frequencyValue[i] === value) {
-                    return true;
-                }
-            }
+const frequencyValue = computed<number[]>({
+    get: () => getFrequencyValues(props.modelValue),
+    set: (value: number[]) => {
+        emit('update:modelValue', sortNumbersArray(value).join(','));
+    }
+});

-            return false;
+const displayFrequency = computed<string>(() => {
+    if (frequencyType.value === ScheduledTemplateFrequencyType.Disabled.type) {
+        return tt('Disabled');
+    } else if (frequencyType.value === ScheduledTemplateFrequencyType.Weekly.type) {
+        if (frequencyValue.value.length) {
+            return tt('format.misc.everyMultiDaysOfWeek', {
+                days: getMultiWeekdayLongNames(frequencyValue.value, firstDayOfWeek.value)
+            });
+        } else {
+            return tt('Weekly');
        }
+    } else if (frequencyType.value === ScheduledTemplateFrequencyType.Monthly.type) {
+        if (frequencyValue.value.length) {
+            return tt('format.misc.everyMultiDaysOfMonth', {
+                days: getMultiMonthdayShortNames(frequencyValue.value)
+            });
+        } else {
+            return tt('Monthly');
+        }
+    } else {
+        return '';
+    }
+});
+
+function isFrequencyValueSelected(value: number): boolean {
+    for (let i = 0; i < frequencyValue.value.length; i++) {
+        if (frequencyValue.value[i] === value) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function onMenuStateChanged(state: boolean): void {
+    if (state) {
+        nextTick(() => {
+            if (dropdownMenu.value && dropdownMenu.value.parentElement) {
+                scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected');
+            }
+        });
    }
 }
 </script>
@@ -4,10 +4,10 @@
        <f7-toolbar>
            <div class="swipe-handler"></div>
            <div class="left">
-                <f7-link sheet-close :text="$t('Cancel')"></f7-link>
+                <f7-link sheet-close :text="tt('Cancel')"></f7-link>
            </div>
            <div class="right">
-                <f7-link :text="$t('Done')" @click="save"></f7-link>
+                <f7-link :text="tt('Done')" @click="save"></f7-link>
            </div>
        </f7-toolbar>
        <f7-page-content>
@@ -30,11 +30,11 @@
                <div>
                    <div class="schedule-frequency-value-container">
                        <f7-list dividers class="schedule-frequency-value-list no-margin-vertical"
-                                 v-if="currentFrequencyType === allTemplateScheduledFrequencyTypes.Disabled.type">
-                            <f7-list-item :title="$t('None')"></f7-list-item>
+                                 v-if="currentFrequencyType === ScheduledTemplateFrequencyType.Disabled.type">
+                            <f7-list-item :title="tt('None')"></f7-list-item>
                        </f7-list>
                        <f7-list dividers class="schedule-frequency-value-list no-margin-vertical"
-                                 v-if="currentFrequencyType === allTemplateScheduledFrequencyTypes.Weekly.type">
+                                 v-if="currentFrequencyType === ScheduledTemplateFrequencyType.Weekly.type">
                            <f7-list-item checkbox
                                          :class="isChecked(weekDay.type) ? 'list-item-selected' : ''"
                                          :key="weekDay.type"
@@ -46,7 +46,7 @@
                            </f7-list-item>
                        </f7-list>
                        <f7-list dividers class="schedule-frequency-value-list no-margin-vertical"
-                                 v-if="currentFrequencyType === allTemplateScheduledFrequencyTypes.Monthly.type">
+                                 v-if="currentFrequencyType === ScheduledTemplateFrequencyType.Monthly.type">
                            <f7-list-item checkbox
                                          :class="isChecked(monthDay.day) ? 'list-item-selected' : ''"
                                          :key="monthDay.day"
@@ -64,136 +64,99 @@
    </f7-sheet>
 </template>

-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useUserStore } from '@/stores/user.ts';

 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';

-export default {
-    props: [
-        'type',
-        'modelValue',
-        'disabled',
-        'readonly',
-        'label',
-        'show'
-    ],
-    emits: [
-        'update:type',
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const self = this;
+interface MobileScheduleFrequencySelectionProps extends CommonScheduleFrequencySelectionProps {
+    show: boolean;
+}

-        return {
-            currentFrequencyType: self.type,
-            currentFrequencyValue: self.getFrequencyValues(self.modelValue)
-        }
-    },
-    computed: {
-        ...mapStores(useUserStore),
-        allTransactionScheduledFrequencyTypes() {
-            return this.$locale.getAllTransactionScheduledFrequencyTypes();
-        },
-        allTemplateScheduledFrequencyTypes() {
-            return ScheduledTemplateFrequencyType.all();
-        },
-        allWeekDays() {
-            return this.$locale.getAllWeekDays(this.firstDayOfWeek);
-        },
-        allAvailableMonthDays() {
-            const allAvailableDays = [];
+const props = defineProps<MobileScheduleFrequencySelectionProps>();
+const emit = defineEmits<{
+    (e: 'update:type', value: number): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+}>();

-            for (let i = 1; i <= 28; i++) {
-                allAvailableDays.push({
-                    day: i,
-                    displayName: this.$locale.getMonthdayShortName(i),
-                });
-            }
+const { tt } = useI18n();

-            return allAvailableDays;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        }
-    },
-    methods: {
-        onSheetOpen(event) {
-            this.currentFrequencyType = this.type;
-            this.currentFrequencyValue = this.getFrequencyValues(this.modelValue);
-            scrollToSelectedItem(event.$el, '.schedule-frequency-value-container', 'li.list-item-selected');
-        },
-        onSheetClosed() {
-            this.close();
-        },
-        changeFrequencyType(value) {
-            if (this.currentFrequencyType !== value) {
-                this.currentFrequencyType = value;
+const userStore = useUserStore();

-                if (value === ScheduledTemplateFrequencyType.Weekly.type) {
-                    this.currentFrequencyValue = [this.firstDayOfWeek];
-                } else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
-                    this.currentFrequencyValue = [1];
-                } else {
-                    this.currentFrequencyValue = [];
-                }
-            }
-        },
-        changeFrequencyValue(e) {
-            const value = parseInt(e.target.value);
+const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();

-            if (e.target.checked) {
-                for (let i = 0; i < this.currentFrequencyValue.length; i++) {
-                    if (this.currentFrequencyValue[i] === value) {
-                        return;
-                    }
-                }
+const currentFrequencyType = ref<number>(props.type);
+const currentFrequencyValue = ref<number[]>(getFrequencyValues(props.modelValue));

-                this.currentFrequencyValue.push(value);
-            } else {
-                for (let i = 0; i < this.currentFrequencyValue.length; i++) {
-                    if (this.currentFrequencyValue[i] === value) {
-                        this.currentFrequencyValue.splice(i, 1);
-                        break;
-                    }
-                }
-            }
-        },
-        save() {
-            this.$emit('update:type', this.currentFrequencyType);
-            this.$emit('update:modelValue', sortNumbersArray(this.currentFrequencyValue).join(','));
-            this.$emit('update:show', false);
-        },
-        close() {
-            this.$emit('update:show', false);
-        },
-        isChecked(value) {
-            for (let i = 0; i < this.currentFrequencyValue.length; i++) {
-                if (this.currentFrequencyValue[i] === value) {
-                    return true;
-                }
-            }
+const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);

-            return false;
-        },
-        getFrequencyValues(value) {
-            const values = value.split(',');
-            const ret = [];
+function isChecked(value: number): boolean {
+    return currentFrequencyValue.value.indexOf(value) >= 0;
+}

-            for (let i = 0; i < values.length; i++) {
-                if (values[i]) {
-                    ret.push(parseInt(values[i]));
-                }
-            }
+function changeFrequencyType(value: number): void {
+    if (currentFrequencyType.value !== value) {
+        currentFrequencyType.value = value;

-            return sortNumbersArray(ret);
+        if (value === ScheduledTemplateFrequencyType.Weekly.type) {
+            currentFrequencyValue.value = [firstDayOfWeek.value];
+        } else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
+            currentFrequencyValue.value = [1];
+        } else {
+            currentFrequencyValue.value = [];
        }
    }
 }
+
+function changeFrequencyValue(e: Event): void {
+    const value = parseInt((e.target as HTMLInputElement).value);
+
+    if ((e.target as HTMLInputElement).checked) {
+        for (let i = 0; i < currentFrequencyValue.value.length; i++) {
+            if (currentFrequencyValue.value[i] === value) {
+                return;
+            }
+        }
+
+        currentFrequencyValue.value.push(value);
+    } else {
+        for (let i = 0; i < currentFrequencyValue.value.length; i++) {
+            if (currentFrequencyValue.value[i] === value) {
+                currentFrequencyValue.value.splice(i, 1);
+                break;
+            }
+        }
+    }
+}
+
+function save() {
+    emit('update:type', currentFrequencyType.value);
+    emit('update:modelValue', sortNumbersArray(currentFrequencyValue.value).join(','));
+    emit('update:show', false);
+}
+
+function close() {
+    emit('update:show', false);
+}
+
+function onSheetOpen(event: { $el: Framework7Dom }): void {
+    currentFrequencyType.value = props.type;
+    currentFrequencyValue.value = getFrequencyValues(props.modelValue);
+    scrollToSelectedItem(event.$el, '.schedule-frequency-value-container', 'li.list-item-selected');
+}
+
+function onSheetClosed() {
+    close();
+}
 </script>

 <style>
@@ -1,4 +1,4 @@
-import type { TypeAndName } from './base.ts';
+import type { TypeAndName, TypeAndDisplayName } from './base.ts';

 type AccountTypeName = 'SingleAccount' | 'MultiSubAccounts';

@@ -74,3 +74,9 @@ export class AccountCategory implements TypeAndName {
        return AccountCategory.allInstancesByType[type];
    }
 }
+
+export interface LocalizedAccountCategory extends TypeAndDisplayName {
+    readonly type: number;
+    readonly displayName: string;
+    readonly defaultAccountIconId: string;
+}
@@ -1,7 +1,7 @@
 import { useI18n as useVueI18n } from 'vue-i18n';
 import moment from 'moment-timezone';

-import type { TypeAndDisplayName } from '@/core/base.ts';
+import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';

 import { type LanguageInfo, allLanguages, DEFAULT_LANGUAGE } from '@/locales/index.ts';

@@ -17,6 +17,10 @@ import {
    LongTimeFormat,
    ShortTimeFormat
 } from '@/core/datetime.ts';
+import { type LocalizedAccountCategory, AccountType, AccountCategory } from '@/core/account.ts';
+import { TransactionEditScopeType, TransactionTagFilterType } from '@/core/transaction.ts';
+import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
+import { StatisticsAnalysisType, CategoricalChartType, TrendChartType, ChartDataType, ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';

 import type { LocaleDefaultSettings } from '@/core/setting.ts';
 import type { ErrorResponse } from '@/core/api.ts';
@@ -214,6 +218,21 @@ export function useI18n() {
        return localizedParameters;
    }

+    function getLocalizedDisplayNameAndType(typeAndNames: TypeAndName[]): TypeAndDisplayName[] {
+        const ret: TypeAndDisplayName[] = [];
+
+        for (let i = 0; i < typeAndNames.length; i++) {
+            const nameAndType = typeAndNames[i];
+
+            ret.push({
+                type: nameAndType.type,
+                displayName: t(nameAndType.name)
+            });
+        }
+
+        return ret;
+    }
+
    function getAllMonthNames(type: string): string[] {
        const ret = [];
        const allMonths = Month.values();
@@ -421,6 +440,23 @@ export function useI18n() {
        return ret;
    }

+    function getAllAccountCategories(): LocalizedAccountCategory[] {
+        const ret: LocalizedAccountCategory[] = [];
+        const allCategories = AccountCategory.values();
+
+        for (let i = 0; i < allCategories.length; i++) {
+            const accountCategory = allCategories[i];
+
+            ret.push({
+                type: accountCategory.type,
+                displayName: t(accountCategory.name),
+                defaultAccountIconId: accountCategory.defaultAccountIconId
+            });
+        }
+
+        return ret;
+    }
+
    function getMonthShortName(monthName: string): string {
        return t(`datetime.${monthName}.short`);
    }
@@ -623,6 +659,16 @@ export function useI18n() {
        getAllShortWeekdayNames,
        getAllMinWeekdayNames,
        getAllWeekDays,
+        getAllAccountCategories: () => getAllAccountCategories(),
+        getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
+        getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),
+        getAllTrendChartTypes: () => getLocalizedDisplayNameAndType(TrendChartType.values()),
+        getAllStatisticsChartDataTypes: (analysisType: StatisticsAnalysisType) => getLocalizedDisplayNameAndType(ChartDataType.values(analysisType)),
+        getAllStatisticsSortingTypes: () => getLocalizedDisplayNameAndType(ChartSortingType.values()),
+        getAllStatisticsDateAggregationTypes: () => getLocalizedDisplayNameAndType(ChartDateAggregationType.values()),
+        getAllTransactionEditScopeTypes: () => getLocalizedDisplayNameAndType(TransactionEditScopeType.values()),
+        getAllTransactionTagFilterTypes: () => getLocalizedDisplayNameAndType(TransactionTagFilterType.values()),
+        getAllTransactionScheduledFrequencyTypes: () => getLocalizedDisplayNameAndType(ScheduledTemplateFrequencyType.values()),
        getMonthShortName,
        getMonthLongName,
        getMonthdayOrdinal,