allow user choosing whether add preset categories in registration page

2021-01-07 17:29:24 +08:00
parent d073550aa7
commit aec708cdd3
7 changed files with 266 additions and 30 deletions
@@ -587,8 +587,10 @@ export default {
    'Show Account Balance': 'Show Account Balance',
    'Enable Animate': 'Enable Animate',
    'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
+    'Use preset transaction categories': 'Use preset transaction categories',
+    'Preset Categories': 'Preset Categories',
    'You have been successfully registered': 'You have been successfully registered',
-    'Do you want to initialize transaction categories now?': 'Do you want to initialize transaction categories now?',
+    'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.',
    'Unable to sign up': 'Unable to sign up',
    'User registration is disabled': 'User registration is disabled',
    'Unable to get user profile': 'Unable to get user profile',
@@ -638,8 +640,9 @@ export default {
    'Unable to get category': 'Unable to get category',
    'Unable to add category': 'Unable to add category',
    'Unable to save category': 'Unable to save category',
+    'Unable to add preset categories': 'Unable to add preset categories',
    'You have added a new category': 'You have added a new category',
-    'You have added default categories': 'You have added default categories',
+    'You have added preset categories': 'You have added preset categories',
    'You have saved this category': 'You have saved this category',
    'Transaction Tags': 'Transaction Tags',
    'Tag Title': 'Tag Title',
@@ -587,8 +587,10 @@ export default {
    'Show Account Balance': '显示账户余额',
    'Enable Animate': '启用动画',
    'Enable Auto Dark Mode': '启用自动深色模式',
+    'Use preset transaction categories': '使用预设交易分类',
+    'Preset Categories': '预设分类',
    'You have been successfully registered': '注册成功',
-    'Do you want to initialize transaction categories now?': '您是否想现在初始化交易分类？',
+    'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': '注册成功，但是添加预设分类时出错。您可以随时在设置页面中重新添加预设分类。',
    'Unable to sign up': '无法注册',
    'User registration is disabled': '用户注册已禁用',
    'Unable to get user profile': '无法获取用户信息',
@@ -638,8 +640,9 @@ export default {
    'Unable to get category': '无法获取分类',
    'Unable to add category': '无法添加分类',
    'Unable to save category': '无法保存分类',
+    'Unable to add preset categories': '无法添加预设分类',
    'You have added a new category': '您已经添加新分类',
-    'You have added default categories': '您已经添加默认分类',
+    'You have added preset categories': '您已经添加预设分类',
    'You have saved this category': '您已经保存该分类',
    'Transaction Tags': '交易标签',
    'Tag Title': '标签标题',
@@ -18,6 +18,7 @@ import {
    UPDATE_ACCOUNT_LIST_INVALID_STATE,

    LOAD_TRANSACTION_CATEGORY_LIST,
+    UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE,

    LOAD_TRANSACTION_TAG_LIST,
    ADD_TAG_TO_TRANSACTION_TAG_LIST,
@@ -33,6 +34,7 @@ import twoFactorAuth from './twoFactorAuth.js';
 import token from './token.js';
 import exchangeRates from './exchangeRates.js';
 import account from './account.js';
+import transactionCategory from './transactionCategory.js';
 import transactionTag from './transactionTag.js';

 const stores = {
@@ -46,6 +48,7 @@ const stores = {
        accountListStateInvalid: true,
        allTransactionCategories: [],
        allTransactionCategoriesMap: {},
+        transactionCategoryListStateInvalid: true,
        allTransactionTags: [],
        allTransactionTagsMap: {},
        transactionTagListStateInvalid: true,
@@ -209,6 +212,9 @@ const stores = {
                state.allTransactionCategoriesMap[category.id] = category;
            }
        },
+        [UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE] (state, invalidState) {
+            state.transactionCategoryListStateInvalid = invalidState;
+        },
        [LOAD_TRANSACTION_TAG_LIST] (state, tags) {
            state.allTransactionTags = tags;
            state.allTransactionTagsMap = {};
@@ -265,16 +271,20 @@ const stores = {
        updateUserProfile: user.updateUserProfile,
        clearUserInfoState: user.clearUserInfoState,
        resetState: user.resetState,
+
        get2FAStatus: twoFactorAuth.get2FAStatus,
        enable2FA: twoFactorAuth.enable2FA,
        confirmEnable2FA: twoFactorAuth.confirmEnable2FA,
        disable2FA: twoFactorAuth.disable2FA,
        regenerate2FARecoveryCode: twoFactorAuth.regenerate2FARecoveryCode,
+
        getAllTokens: token.getAllTokens,
        refreshTokenAndRevokeOldToken: token.refreshTokenAndRevokeOldToken,
        revokeToken: token.revokeToken,
        revokeAllTokens: token.revokeAllTokens,
+
        getLatestExchangeRates: exchangeRates.getLatestExchangeRates,
+
        loadAllAccounts: account.loadAllAccounts,
        saveAccount: account.saveAccount,
        getAccount: account.getAccount,
@@ -282,6 +292,9 @@ const stores = {
        updateAccountDisplayOrders: account.updateAccountDisplayOrders,
        hideAccount: account.hideAccount,
        deleteAccount: account.deleteAccount,
+
+        addTransactionCategoryBatch: transactionCategory.addTransactionCategoryBatch,
+
        loadAllTags: transactionTag.loadAllTags,
        saveTag: transactionTag.saveTag,
        changeTagDisplayOrder: transactionTag.changeTagDisplayOrder,
@@ -14,6 +14,7 @@ export const REMOVE_ACCOUNT_FROM_ACCOUNT_LIST = 'REMOVE_ACCOUNT_FROM_ACCOUNT_LIS
 export const UPDATE_ACCOUNT_LIST_INVALID_STATE = 'UPDATE_ACCOUNT_LIST_INVALID_STATE';

 export const LOAD_TRANSACTION_CATEGORY_LIST = 'LOAD_TRANSACTION_CATEGORY_LIST';
+export const UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE = 'UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE';

 export const LOAD_TRANSACTION_TAG_LIST = 'LOAD_TRANSACTION_TAG_LIST';
 export const ADD_TAG_TO_TRANSACTION_TAG_LIST = 'ADD_TAG_TO_TRANSACTION_TAG_LIST';
@@ -0,0 +1,39 @@
+import services from '../lib/services.js';
+import logger from '../lib/logger.js';
+
+import {
+    UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE,
+} from './mutations.js';
+
+function addTransactionCategoryBatch(context, { categories }) {
+    return new Promise((resolve, reject) => {
+        services.addTransactionCategoryBatch({
+            categories: categories
+        }).then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to add preset categories' });
+                return;
+            }
+
+            context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE);
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to add preset categories', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                reject({ message: 'Unable to add preset categories' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+export default {
+    addTransactionCategoryBatch,
+}
@@ -70,7 +70,20 @@
            <f7-card-content class="no-safe-areas" :padding="false">
                <f7-list form>
                    <f7-list-item
-                        :header="$t('Default Currency')"
+                        :key="currentLocale + '_lang'"
+                        :title="$t('Language')"
+                        smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
+                    >
+                        <select v-model="currentLocale">
+                            <option v-for="(lang, locale) in allLanguages"
+                                    :key="locale"
+                                    :value="locale">{{ lang.displayName }}</option>
+                        </select>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :key="currentLocale + '_currency'"
+                        :title="$t('Default Currency')"
                        smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
                    >
                        <select autocomplete="transaction-currency" v-model="user.defaultCurrency">
@@ -82,6 +95,78 @@
                </f7-list>
            </f7-card-content>
        </f7-card>
+
+        <f7-card>
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list form>
+                    <f7-list-item :title="$t('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
+                        <f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
+        <f7-popup :opened="showPresetCategories" @popup:closed="showPresetCategories = false">
+            <f7-page>
+                <f7-navbar :title="$t('Preset Categories')">
+                    <f7-nav-right>
+                        <f7-link icon-f7="ellipsis" @click="showPresetCategoriesMoreActionSheet = true"></f7-link>
+                        <f7-link popup-close :text="$t('Close')"></f7-link>
+                    </f7-nav-right>
+                </f7-navbar>
+                <f7-card v-for="(categories, categoryType) in presetCategories" :key="categoryType">
+                    <f7-card-header>
+                        <small :style="{ opacity: 0.6 }">
+                            <span>{{ categoryType | categoryTypeName($constants.category.allCategoryTypes) | t }}</span>
+                        </small>
+                    </f7-card-header>
+                    <f7-card-content class="no-safe-areas" :padding="false">
+                        <f7-list v-if="showPresetCategories">
+                            <f7-list-item v-for="(category, idx) in categories"
+                                          :key="idx"
+                                          :accordion-item="!!category.subCategories.length"
+                                          :title="$t('category.' + category.name, currentLocale)">
+                                <f7-icon slot="media"
+                                         :icon="category.categoryIconId | categoryIcon"
+                                         :style="category.color | categoryIconStyle('var(--default-icon-color)')">
+                                </f7-icon>
+
+                                <f7-accordion-content v-if="category.subCategories.length" class="padding-left">
+                                    <f7-list>
+                                        <f7-list-item v-for="(subCategory, subIdx) in category.subCategories"
+                                                      :key="subIdx"
+                                                      :title="$t('category.' + subCategory.name, currentLocale)">
+                                            <f7-icon slot="media"
+                                                     :icon="subCategory.categoryIconId | categoryIcon"
+                                                     :style="subCategory.color | categoryIconStyle('var(--default-icon-color)')">
+                                            </f7-icon>
+                                        </f7-list-item>
+                                    </f7-list>
+                                </f7-accordion-content>
+                            </f7-list-item>
+                        </f7-list>
+                    </f7-card-content>
+                </f7-card>
+            </f7-page>
+
+            <f7-actions close-by-outside-click close-on-escape :opened="showPresetCategoriesMoreActionSheet" @actions:closed="showPresetCategoriesMoreActionSheet = false">
+                <f7-actions-group>
+                    <f7-actions-button close @click="usePresetCategories = true; showPresetCategories = false" v-if="!usePresetCategories">{{ $t('Enable') }}</f7-actions-button>
+                    <f7-actions-button close @click="usePresetCategories = false; showPresetCategories = false" v-if="usePresetCategories">{{ $t('Disable') }}</f7-actions-button>
+                    <f7-actions-button @click="showPresetCategoriesChangeLocaleSheet = true">{{ $t('Change Language') }}</f7-actions-button>
+                </f7-actions-group>
+                <f7-actions-group>
+                    <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                </f7-actions-group>
+            </f7-actions>
+
+            <list-item-selection-sheet value-type="index"
+                                       title-field="displayName"
+                                       :items="allLanguages"
+                                       :show.sync="showPresetCategoriesChangeLocaleSheet"
+                                       v-model="currentLocale">
+            </list-item-selection-sheet>
+        </f7-popup>
    </f7-page>
 </template>

@@ -99,13 +184,39 @@ export default {
                nickname: '',
                defaultCurrency: self.$t('default.currency')
            },
-            submitting: false
+            submitting: false,
+            presetCategories: {
+                [self.$constants.category.allCategoryTypes.Income]: self.$utilities.copyArrayTo(self.$constants.category.defaultIncomeCategories, []),
+                [self.$constants.category.allCategoryTypes.Expense]: self.$utilities.copyArrayTo(self.$constants.category.defaultExpenseCategories, []),
+                [self.$constants.category.allCategoryTypes.Transfer]: self.$utilities.copyArrayTo(self.$constants.category.defaultTransferCategories, [])
+            },
+            usePresetCategories: false,
+            showPresetCategories: false,
+            showPresetCategoriesMoreActionSheet: false,
+            showPresetCategoriesChangeLocaleSheet: false
        };
    },
    computed: {
+        allLanguages() {
+            return this.$locale.getAllLanguages();
+        },
        allCurrencies() {
            return this.$locale.getAllCurrencies();
        },
+        currentLocale: {
+            get: function () {
+                return this.$i18n.locale;
+            },
+            set: function (value) {
+                const isCurrencyDefault = this.user.defaultCurrency === this.$t('default.currency');
+
+                this.$locale.setLanguage(value);
+
+                if (isCurrencyDefault) {
+                    this.user.defaultCurrency = this.$t('default.currency');
+                }
+            }
+        },
        inputIsEmpty() {
            return !!this.inputEmptyProblemMessage;
        },
@@ -152,23 +263,85 @@ export default {
            self.submitting = true;
            self.$showLoading(() => self.submitting);

+            const allCategories = [];
+
+            if (self.usePresetCategories) {
+                for (let categoryType in self.presetCategories) {
+                    if (!Object.prototype.hasOwnProperty.call(self.presetCategories, categoryType)) {
+                        continue;
+                    }
+
+                    const categories = self.presetCategories[categoryType];
+
+                    for (let j = 0; j < categories.length; j++) {
+                        const category = categories[j];
+                        const submitCategory = {
+                            name: self.$t('category.' + category.name, self.currentLocale),
+                            type: parseInt(categoryType),
+                            icon: category.categoryIconId,
+                            color: category.color,
+                            subCategories: []
+                        }
+
+                        for (let k = 0; k < category.subCategories.length; k++) {
+                            const subCategory = category.subCategories[k];
+                            submitCategory.subCategories.push({
+                                name: self.$t('category.' + subCategory.name, self.currentLocale),
+                                type: parseInt(categoryType),
+                                icon: subCategory.categoryIconId,
+                                color: subCategory.color
+                            });
+                        }
+
+                        allCategories.push(submitCategory);
+                    }
+                }
+            }
+
            self.$store.dispatch('register', {
                user: self.user
            }).then(() => {
-                self.submitting = false;
-                self.$hideLoading();
+                if (!self.$user.isUserLogined()) {
+                    self.submitting = false;
+                    self.$hideLoading();

-                if (self.$user.isUserLogined()) {
-                    if (self.$settings.isAutoUpdateExchangeRatesData()) {
-                        self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
+                    if (self.usePresetCategories) {
+                        self.$toast('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
+                    } else {
+                        self.$toast('You have been successfully registered');
                    }
+
+                    router.navigate('/');
+                    return;
                }

-                self.$toast('You have been successfully registered');
-                router.navigate('/');
+                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                    self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
+                }

-                self.$confirm('Do you want to initialize transaction categories now?', () => {
-                    router.navigate('/category/default?type=0');
+                if (!self.usePresetCategories) {
+                    self.submitting = false;
+                    self.$hideLoading();
+
+                    self.$toast('You have been successfully registered');
+                    router.navigate('/');
+                    return;
+                }
+
+                self.$store.dispatch('addTransactionCategoryBatch', {
+                    categories: allCategories
+                }).then(() => {
+                    self.submitting = false;
+                    self.$hideLoading();
+
+                    self.$toast('You have been successfully registered');
+                    router.navigate('/');
+                }).catch(() => {
+                    self.submitting = false;
+                    self.$hideLoading();
+
+                    self.$toast('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
+                    router.navigate('/');
                });
            }).catch(error => {
                self.submitting = false;
@@ -179,6 +352,20 @@ export default {
                }
            });
        }
+    },
+    filters: {
+        categoryTypeName(categoryType, allCategoryTypes) {
+            switch (categoryType) {
+                case allCategoryTypes.Income.toString():
+                    return 'Income Categories';
+                case allCategoryTypes.Expense.toString():
+                    return 'Expense Categories';
+                case allCategoryTypes.Transfer.toString():
+                    return 'Transfer Categories';
+                default:
+                    return 'Transaction Categories';
+            }
+        }
    }
 };
 </script>
@@ -159,30 +159,20 @@ export default {
                }
            }

-            self.$services.addTransactionCategoryBatch({
+            self.$store.dispatch('addTransactionCategoryBatch', {
                categories: categories
-            }).then(response => {
+            }).then(() => {
                self.submitting = false;
                self.$hideLoading();
-                const data = response.data;

-                if (!data || !data.success || !data.result) {
-                    self.$toast('Unable to add category');
-                    return;
-                }
-
-                self.$toast('You have added default categories');
+                self.$toast('You have added preset categories');
                router.back();
            }).catch(error => {
-                self.$logger.error('failed to save default categories', error);
-
                self.submitting = false;
                self.$hideLoading();

-                if (error.response && error.response.data && error.response.data.errorMessage) {
-                    self.$toast({ error: error.response.data });
-                } else if (!error.processed) {
-                    self.$toast('Unable to add category');
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                }
            });
        }