support custom first day of week

2026-05-17 00:12:11 +08:00 · 2021-01-31 20:09:03 +08:00
parent e06fba3f8b
commit 61267af634
15 changed files with 262 additions and 81 deletions
@@ -173,9 +173,10 @@ export default {
        const self = this;

        return {
-            dateRange: self.getCurrentDateRange(),
            loading: true,
-            showAmountInHomePage: this.$settings.isShowAmountInHomePage()
+            todayFirstUnixTime: self.$utilities.getTodayFirstUnixTime(),
+            todayLastUnixTime: self.$utilities.getTodayLastUnixTime(),
+            showAmountInHomePage: self.$settings.isShowAmountInHomePage()
        };
    },
    computed: {
@@ -185,6 +186,39 @@ export default {
        defaultCurrency() {
            return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
        },
+        firstDayOfWeek() {
+            if (this.$utilities.isNumber(this.$store.getters.currentUserFirstDayOfWeek)) {
+                return this.$store.getters.currentUserFirstDayOfWeek;
+            }
+
+            if (this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')]) {
+                return this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')].type;
+            }
+
+            return 0;
+        },
+        dateRange() {
+            const self = this;
+
+            return {
+                today: {
+                    startTime: self.todayFirstUnixTime,
+                    endTime: self.todayLastUnixTime
+                },
+                thisWeek: {
+                    startTime: self.$utilities.getThisWeekFirstUnixTime(self.firstDayOfWeek),
+                    endTime: self.$utilities.getThisWeekLastUnixTime(self.firstDayOfWeek)
+                },
+                thisMonth: {
+                    startTime: self.$utilities.getThisMonthFirstUnixTime(),
+                    endTime: self.$utilities.getThisMonthLastUnixTime()
+                },
+                thisYear: {
+                    startTime: self.$utilities.getThisYearFirstUnixTime(),
+                    endTime: self.$utilities.getThisYearLastUnixTime()
+                }
+            };
+        },
        thisMonthAmount() {
            if (!this.$store.state.transactionOverview || !this.$store.state.transactionOverview.thisMonth) {
                return {
@@ -221,14 +255,16 @@ export default {
        onPageAfterIn() {
            this.showAmountInHomePage = this.$settings.isShowAmountInHomePage();

-            const newDateRange = this.getCurrentDateRange();
+            let dateChanged = false;

-            if (newDateRange.today.startTime !== this.dateRange.today.startTime ||
-                newDateRange.today.endTime !== this.dateRange.today.endTime) {
-                this.dateRange = newDateRange;
+            if (this.todayFirstUnixTime !== this.$utilities.getTodayFirstUnixTime()) {
+                dateChanged = true;
+
+                this.todayFirstUnixTime = this.$utilities.getTodayFirstUnixTime();
+                this.todayLastUnixTime = this.$utilities.getTodayLastUnixTime();
            }

-            if (this.$store.state.transactionOverviewStateInvalid && !this.loading) {
+            if ((dateChanged || this.$store.state.transactionOverviewStateInvalid) && !this.loading) {
                this.reload(null);
            }
        },
@@ -256,28 +292,6 @@ export default {
        toggleShowAmountInHomePage() {
            this.showAmountInHomePage = !this.showAmountInHomePage;
            this.$settings.setShowAmountInHomePage(this.showAmountInHomePage);
-        },
-        getCurrentDateRange() {
-            const self = this;
-
-            return {
-                today: {
-                    startTime: self.$utilities.getTodayFirstUnixTime(),
-                    endTime: self.$utilities.getTodayLastUnixTime()
-                },
-                thisWeek: {
-                    startTime: self.$utilities.getThisWeekFirstUnixTime(),
-                    endTime: self.$utilities.getThisWeekLastUnixTime()
-                },
-                thisMonth: {
-                    startTime: self.$utilities.getThisMonthFirstUnixTime(),
-                    endTime: self.$utilities.getThisMonthLastUnixTime()
-                },
-                thisYear: {
-                    startTime: self.$utilities.getThisYearFirstUnixTime(),
-                    endTime: self.$utilities.getThisYearLastUnixTime()
-                }
-            };
        }
    },
    filters: {
@@ -92,6 +92,18 @@
                                    :value="currency.code">{{ currency.displayName }}</option>
                        </select>
                    </f7-list-item>
+
+                    <f7-list-item
+                        :key="currentLocale + '_firstDayOfWeek'"
+                        :title="$t('First Day of Week')"
+                        smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
+                    >
+                        <select v-model="user.firstDayOfWeek">
+                            <option v-for="weekDay in allWeekDays"
+                                    :key="weekDay.type"
+                                    :value="weekDay.type">{{ `datetime.${weekDay.name}.long` | localized }}</option>
+                        </select>
+                    </f7-list-item>
                </f7-list>
            </f7-card-content>
        </f7-card>
@@ -185,7 +197,8 @@ export default {
                confirmPassword: '',
                email: '',
                nickname: '',
-                defaultCurrency: self.$t('default.currency')
+                defaultCurrency: self.$t('default.currency'),
+                firstDayOfWeek: self.$constants.datetime.allWeekDays[self.$t('default.firstDayOfWeek')] ? self.$constants.datetime.allWeekDays[self.$t('default.firstDayOfWeek')].type : 0
            },
            submitting: false,
            presetCategories: {
@@ -206,6 +219,9 @@ export default {
        allCurrencies() {
            return this.$locale.getAllCurrencies();
        },
+        allWeekDays() {
+            return this.$constants.datetime.allWeekDays;
+        },
        currentLocale: {
            get: function () {
                return this.$i18n.locale;
@@ -233,6 +233,17 @@ export default {

            return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
        },
+        firstDayOfWeek() {
+            if (this.$utilities.isNumber(this.$store.getters.currentUserFirstDayOfWeek)) {
+                return this.$store.getters.currentUserFirstDayOfWeek;
+            }
+
+            if (this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')]) {
+                return this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')].type;
+            }
+
+            return 0;
+        },
        query() {
            return this.$store.state.transactionStatisticsFilter;
        },
@@ -389,7 +400,7 @@ export default {
        const self = this;
        const router = self.$f7router;

-        const dateRange = self.$utilities.getDateRangeByDateType(self.query.dateType);
+        const dateRange = self.$utilities.getDateRangeByDateType(self.query.dateType, self.firstDayOfWeek);

        self.$store.dispatch('initTransactionStatisticsFilter', {
            dateType: dateRange ? dateRange.dateType : undefined,
@@ -455,7 +466,7 @@ export default {
                return;
            }

-            const dateRange = this.$utilities.getDateRangeByDateType(dateType);
+            const dateRange = this.$utilities.getDateRangeByDateType(dateType, this.firstDayOfWeek);

            if (!dateRange) {
                return;
@@ -499,7 +510,7 @@ export default {
                }

                const dateRangeType = this.$constants.datetime.allDateRanges[dateRangeField];
-                const dateRange = this.$utilities.getDateRangeByDateType(dateRangeType.type);
+                const dateRange = this.$utilities.getDateRangeByDateType(dateRangeType.type, this.firstDayOfWeek);

                if (dateRange && dateRange.minTime === newDateRange.minTime && dateRange.maxTime === newDateRange.maxTime) {
                    newDateType = dateRangeType.type;
@@ -392,6 +392,17 @@ export default {

            return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
        },
+        firstDayOfWeek() {
+            if (this.$utilities.isNumber(this.$store.getters.currentUserFirstDayOfWeek)) {
+                return this.$store.getters.currentUserFirstDayOfWeek;
+            }
+
+            if (this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')]) {
+                return this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')].type;
+            }
+
+            return 0;
+        },
        query() {
            return this.$store.state.transactionsFilter;
        },
@@ -425,7 +436,7 @@ export default {
        const self = this;
        const query = self.$f7route.query;

-        let dateRange = self.$utilities.getDateRangeByDateType(query.dateType ? parseInt(query.dateType) : undefined);
+        let dateRange = self.$utilities.getDateRangeByDateType(query.dateType ? parseInt(query.dateType) : undefined, self.firstDayOfWeek);

        if (!dateRange &&
            query.dateType === self.$constants.datetime.allDateRanges.Custom.type.toString() &&
@@ -535,7 +546,7 @@ export default {
                return;
            }

-            const dateRange = this.$utilities.getDateRangeByDateType(dateType);
+            const dateRange = this.$utilities.getDateRangeByDateType(dateType, this.firstDayOfWeek);

            if (!dateRange) {
                return;
@@ -16,6 +16,7 @@
                    <f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
                    <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
                    <f7-list-item title="Default Currency" after="Currency"></f7-list-item>
+                    <f7-list-item title="First Day of Week" after="Week Day"></f7-list-item>
                </f7-list>
            </f7-card-content>
        </f7-card>
@@ -74,6 +75,17 @@
                        </select>
                    </f7-list-item>

+                    <f7-list-item
+                        :title="$t('First Day of Week')"
+                        smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
+                    >
+                        <select autocomplete="transaction-currency" v-model="newProfile.firstDayOfWeek">
+                            <option v-for="weekDay in allWeekDays"
+                                    :key="weekDay.type"
+                                    :value="weekDay.type">{{ `datetime.${weekDay.name}.long` | localized }}</option>
+                        </select>
+                    </f7-list-item>
+
                    <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
                </f7-list>
            </f7-card-content>
@@ -99,12 +111,14 @@ export default {
                confirmPassword: '',
                email: '',
                nickname: '',
-                defaultCurrency: ''
+                defaultCurrency: '',
+                firstDayOfWeek: 0
            },
            oldProfile: {
                email: '',
                nickname: '',
-                defaultCurrency: ''
+                defaultCurrency: '',
+                firstDayOfWeek: 0
            },
            currentPassword: '',
            loading: true,
@@ -116,6 +130,9 @@ export default {
        allCurrencies() {
            return this.$locale.getAllCurrencies();
        },
+        allWeekDays() {
+            return this.$constants.datetime.allWeekDays;
+        },
        inputIsNotChanged() {
            return !!this.inputIsNotChangedProblemMessage;
        },
@@ -128,7 +145,8 @@ export default {
            } else if (!this.newProfile.password && !this.newProfile.confirmPassword &&
                this.newProfile.email === this.oldProfile.email &&
                this.newProfile.nickname === this.oldProfile.nickname &&
-                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency) {
+                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
+                this.newProfile.firstDayOfWeek === this.oldProfile.firstDayOfWeek) {
                return 'Nothing has been modified';
            } else if (!this.newProfile.password && this.newProfile.confirmPassword) {
                return 'Password cannot be empty';
@@ -162,10 +180,12 @@ export default {
            self.oldProfile.email = profile.email;
            self.oldProfile.nickname = profile.nickname;
            self.oldProfile.defaultCurrency = profile.defaultCurrency;
+            self.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;

            self.newProfile.email = self.oldProfile.email
            self.newProfile.nickname = self.oldProfile.nickname;
            self.newProfile.defaultCurrency = self.oldProfile.defaultCurrency;
+            self.newProfile.firstDayOfWeek = self.oldProfile.firstDayOfWeek;

            self.loading = false;
        }).catch(error => {