add category preset for desktop page

src/lib/common.js

@@ -77,6 +77,24 @@ export function isEquals(obj1, obj2) {
     }
 }
 
+export function getObjectOwnFieldCount(object) {
+    let count = 0;
+
+    if (!object || !isObject(object)) {
+        return count;
+    }
+
+    for (let field in object) {
+        if (!Object.prototype.hasOwnProperty.call(object, field)) {
+            continue;
+        }
+
+        count++;
+    }
+
+    return count;
+}
+
 export function appendThousandsSeparator(value, enable) {
     if (!enable || value.length <= 3) {
         return value;
@@ -284,6 +302,24 @@ export function copyArrayTo(fromArray, toArray) {
     return toArray;
 }
 
+export function categoriedArrayToPlainArray(object) {
+    const ret = [];
+
+    for (let field in object) {
+        if (!Object.prototype.hasOwnProperty.call(object, field)) {
+            continue;
+        }
+
+        const array = object[field];
+
+        for (let i = 0; i < array.length; i++) {
+            ret.push(array[i]);
+        }
+    }
+
+    return ret;
+}
+
 export function arrangeArrayWithNewStartIndex(array, startIndex) {
     if (startIndex <= 0 || startIndex >= array.length) {
         return array;

src/lib/i18n.js

@@ -4,11 +4,13 @@ import { defaultLanguage, allLanguages } from '@/locales/index.js';
 import datetime from '@/consts/datetime.js';
 import timezone from '@/consts/timezone.js';
 import currency from '@/consts/currency.js';
+import category from '@/consts/category.js';
 import statistics from '@/consts/statistics.js';
 
 import {
     isString,
-    isNumber
+    isNumber,
+    copyArrayTo
 } from './common.js';
 
 import {
@@ -747,6 +749,61 @@ function getAllTransactionEditScopeTypes(translateFn) {
     }];
 }
 
+function getAllTransactionDefaultCategories(categoryType, locale, translateFn) {
+    const allCategories = {};
+    const categoryTypes = [];
+
+    if (categoryType === 0) {
+        for (let i = category.allCategoryTypes.Income; i <= category.allCategoryTypes.Transfer; i++) {
+            categoryTypes.push(i);
+        }
+    } else {
+        categoryTypes.push(categoryType);
+    }
+
+    for (let i = 0; i < categoryTypes.length; i++) {
+        const categories = [];
+        const categoryType = categoryTypes[i];
+        let defaultCategories = [];
+
+        if (categoryType === category.allCategoryTypes.Income) {
+            defaultCategories = copyArrayTo(category.defaultIncomeCategories, []);
+        } else if (categoryType === category.allCategoryTypes.Expense) {
+            defaultCategories = copyArrayTo(category.defaultExpenseCategories, []);
+        } else if (categoryType === category.allCategoryTypes.Transfer) {
+            defaultCategories = copyArrayTo(category.defaultTransferCategories, []);
+        }
+
+        for (let j = 0; j < defaultCategories.length; j++) {
+            const category = defaultCategories[j];
+
+            const submitCategory = {
+                name: translateFn('category.' + category.name, locale),
+                type: 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: translateFn('category.' + subCategory.name, locale),
+                    type: categoryType,
+                    icon: subCategory.categoryIconId,
+                    color: subCategory.color
+                });
+            }
+
+            categories.push(submitCategory);
+        }
+
+        allCategories[categoryType] = categories;
+    }
+
+    return allCategories;
+}
+
 function getAllDisplayExchangeRates(exchangeRatesData, translateFn) {
     if (!exchangeRatesData || !exchangeRatesData.exchangeRates) {
         return [];
@@ -1069,6 +1126,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
         getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
         getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
+        getAllTransactionDefaultCategories: (categoryType, locale) => getAllTransactionDefaultCategories(categoryType, locale, i18nGlobal.t),
         getAllDisplayExchangeRates: (exchangeRatesData) => getAllDisplayExchangeRates(exchangeRatesData, i18nGlobal.t),
         getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
         getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),

src/views/desktop/SignupPage.vue

@@ -179,15 +179,15 @@
                                 </v-row>
 
                                 <div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories || submitting }" style="max-height: 323px">
-                                    <v-row :key="categoryType" v-for="(categories, categoryType) in presetCategories">
+                                    <v-row :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
                                         <v-col cols="12" md="12">
                                             <h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4>
 
                                             <v-expansion-panels class="border rounded" variant="accordion" multiple>
                                                 <v-expansion-panel :key="idx" v-for="(category, idx) in categories">
                                                     <v-expansion-panel-title class="py-0">
-                                                        <ItemIcon icon-type="category" :icon-id="category.categoryIconId" :color="category.color"></ItemIcon>
+                                                        <ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
-                                                        <span class="ml-3">{{ $t('category.' + category.name) }}</span>
+                                                        <span class="ml-3">{{ category.name }}</span>
                                                     </v-expansion-panel-title>
                                                     <v-expansion-panel-text v-if="category.subCategories.length">
                                                         <v-list rounded density="comfortable" class="pa-0">
@@ -195,9 +195,9 @@
                                                                       v-for="(subCategory, subIdx) in category.subCategories">
                                                                 <v-list-item>
                                                                     <template #prepend>
-                                                                        <ItemIcon icon-type="category" :icon-id="subCategory.categoryIconId" :color="subCategory.color"></ItemIcon>
+                                                                        <ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
                                                                     </template>
-                                                                    <span class="ml-3">{{ $t('category.' + subCategory.name) }}</span>
+                                                                    <span class="ml-3">{{ subCategory.name }}</span>
                                                                 </v-list-item>
                                                                 <v-divider v-if="subIdx !== category.subCategories.length - 1"/>
                                                             </template>
@@ -250,7 +250,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import assetConstants from '@/consts/asset.js';
 import categoryConstants from '@/consts/category.js';
-import { copyArrayTo } from '@/lib/common.js';
+import { categoriedArrayToPlainArray } from '@/lib/common.js';
 
 import {
     mdiArrowLeft,
@@ -280,11 +280,6 @@ export default {
             isPasswordVisible: false,
             isConfirmPasswordVisible: false,
             submitting: false,
-            presetCategories: {
-                [categoryConstants.allCategoryTypes.Income]: copyArrayTo(categoryConstants.defaultIncomeCategories, []),
-                [categoryConstants.allCategoryTypes.Expense]: copyArrayTo(categoryConstants.defaultExpenseCategories, []),
-                [categoryConstants.allCategoryTypes.Transfer]: copyArrayTo(categoryConstants.defaultTransferCategories, [])
-            },
             usePresetCategories: false,
             icons: {
                 previous: mdiArrowLeft,
@@ -309,6 +304,9 @@ export default {
         allWeekDays() {
             return this.$locale.getAllWeekDays();
         },
+        allPresetCategories() {
+            return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
+        },
         currentLocale: {
             get: function () {
                 return this.$locale.getCurrentLanguageCode();
@@ -418,39 +416,10 @@ export default {
 
             self.submitting = true;
 
-            const allCategories = [];
+            let submitCategories = [];
 
             if (self.usePresetCategories) {
-                for (let categoryType in self.presetCategories) {
+                submitCategories = categoriedArrayToPlainArray(self.allPresetCategories);
-                    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),
-                            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),
-                                type: parseInt(categoryType),
-                                icon: subCategory.categoryIconId,
-                                color: subCategory.color
-                            });
-                        }
-
-                        allCategories.push(submitCategory);
-                    }
-                }
             }
 
             self.rootStore.register({
@@ -487,7 +456,7 @@ export default {
                 }
 
                 self.transactionCategoriesStore.addCategories({
-                    categories: allCategories
+                    categories: submitCategories
                 }).then(() => {
                     self.submitting = false;
 

src/views/mobile/SignupPage.vue

@@ -127,24 +127,24 @@
                     </f7-nav-right>
                 </f7-navbar>
                 <f7-block class="no-padding no-margin"
-                          :key="categoryType" v-for="(categories, categoryType) in presetCategories">
+                          :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
                     <f7-block-title class="margin-top margin-horizontal">{{ getCategoryTypeName(categoryType) }}</f7-block-title>
                     <f7-list strong inset dividers v-if="showPresetCategories">
-                        <f7-list-item :title="$t('category.' + category.name)"
+                        <f7-list-item :title="category.name"
                                       :accordion-item="!!category.subCategories.length"
                                       :key="idx"
                                       v-for="(category, idx) in categories">
                             <template #media>
-                                <ItemIcon icon-type="category" :icon-id="category.categoryIconId" :color="category.color"></ItemIcon>
+                                <ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
                             </template>
 
                             <f7-accordion-content v-if="category.subCategories.length" class="padding-left">
                                 <f7-list>
-                                    <f7-list-item :title="$t('category.' + subCategory.name)"
+                                    <f7-list-item :title="subCategory.name"
                                                   :key="subIdx"
                                                   v-for="(subCategory, subIdx) in category.subCategories">
                                         <template #media>
-                                            <ItemIcon icon-type="category" :icon-id="subCategory.categoryIconId" :color="subCategory.color"></ItemIcon>
+                                            <ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
                                         </template>
                                     </f7-list-item>
                                 </f7-list>
@@ -181,7 +181,7 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import categoryConstants from '@/consts/category.js';
-import { getNameByKeyValue, copyArrayTo } from '@/lib/common.js';
+import { getNameByKeyValue, categoriedArrayToPlainArray } from '@/lib/common.js';
 
 export default {
     props: [
@@ -203,11 +203,6 @@ export default {
                 firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
             },
             submitting: false,
-            presetCategories: {
-                [categoryConstants.allCategoryTypes.Income]: copyArrayTo(categoryConstants.defaultIncomeCategories, []),
-                [categoryConstants.allCategoryTypes.Expense]: copyArrayTo(categoryConstants.defaultExpenseCategories, []),
-                [categoryConstants.allCategoryTypes.Transfer]: copyArrayTo(categoryConstants.defaultTransferCategories, [])
-            },
             usePresetCategories: false,
             showPresetCategories: false,
             showPresetCategoriesMoreActionSheet: false,
@@ -225,6 +220,9 @@ export default {
         allWeekDays() {
             return this.$locale.getAllWeekDays();
         },
+        allPresetCategories() {
+            return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
+        },
         currentLocale: {
             get: function () {
                 return this.$locale.getCurrentLanguageCode();
@@ -305,39 +303,10 @@ export default {
             self.submitting = true;
             self.$showLoading(() => self.submitting);
 
-            const allCategories = [];
+            let submitCategories = [];
 
             if (self.usePresetCategories) {
-                for (let categoryType in self.presetCategories) {
+                submitCategories = categoriedArrayToPlainArray(self.allPresetCategories);
-                    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),
-                            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),
-                                type: parseInt(categoryType),
-                                icon: subCategory.categoryIconId,
-                                color: subCategory.color
-                            });
-                        }
-
-                        allCategories.push(submitCategory);
-                    }
-                }
             }
 
             self.rootStore.register({
@@ -376,7 +345,7 @@ export default {
                 }
 
                 self.transactionCategoriesStore.addCategories({
-                    categories: allCategories
+                    categories: submitCategories
                 }).then(() => {
                     self.submitting = false;
                     self.$hideLoading();

src/views/mobile/categories/PresetPage.vue

@@ -4,30 +4,30 @@
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Default Categories')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link icon-f7="ellipsis" v-if="allCategories && allCategories.length" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" v-if="isPresetHasCategories" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="$t('Save')" :class="{ 'disabled': submitting }" v-if="allCategories && allCategories.length" @click="save"></f7-link>
+                <f7-link :text="$t('Save')" :class="{ 'disabled': submitting }" v-if="isPresetHasCategories" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
-        <f7-block class="no-padding no-margin" :key="categoryInfo.type" v-for="categoryInfo in allCategories">
+        <f7-block class="no-padding no-margin" :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
-            <f7-block-title class="margin-top margin-horizontal">{{ getCategoryTypeName(categoryInfo.type) }}</f7-block-title>
+            <f7-block-title class="margin-top margin-horizontal">{{ getCategoryTypeName(categoryType) }}</f7-block-title>
 
             <f7-list strong inset dividers class="margin-top">
-                <f7-list-item :title="$t('category.' + category.name, currentLocale)"
+                <f7-list-item :title="category.name"
                               :accordion-item="!!category.subCategories.length"
                               :key="idx"
-                              v-for="(category, idx) in categoryInfo.categories">
+                              v-for="(category, idx) in categories">
                     <template #media>
-                        <ItemIcon icon-type="category" :icon-id="category.categoryIconId" :color="category.color"></ItemIcon>
+                        <ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
                     </template>
 
                     <f7-accordion-content v-if="category.subCategories.length" class="padding-left">
                         <f7-list>
-                            <f7-list-item :title="$t('category.' + subCategory.name, currentLocale)"
+                            <f7-list-item :title="subCategory.name"
                                           :key="subIdx"
                                           v-for="(subCategory, subIdx) in category.subCategories">
                                 <template #media>
-                                    <ItemIcon icon-type="category" :icon-id="subCategory.categoryIconId" :color="subCategory.color"></ItemIcon>
+                                    <ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
                                 </template>
                             </f7-list-item>
                         </f7-list>
@@ -59,7 +59,7 @@ import { mapStores } from 'pinia';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 
 import categoryConstants from '@/consts/category.js';
-import { copyArrayTo } from '@/lib/common.js';
+import { getObjectOwnFieldCount, categoriedArrayToPlainArray } from '@/lib/common.js';
 
 export default {
     props: [
@@ -73,7 +73,6 @@ export default {
             loadingError: null,
             currentLocale: self.$locale.getCurrentLanguageCode(),
             categoryType: 0,
-            allCategories: [],
             submitting: false,
             showMoreActionSheet: false,
             showChangeLocaleSheet: false
@@ -83,6 +82,12 @@ export default {
         ...mapStores(useTransactionCategoriesStore),
         allLanguages() {
             return this.$locale.getAllLanguageInfos();
+        },
+        allPresetCategories() {
+            return this.$locale.getAllTransactionDefaultCategories(this.categoryType, this.currentLocale);
+        },
+        isPresetHasCategories() {
+            return getObjectOwnFieldCount(this.allPresetCategories);
         }
     },
     created() {
@@ -97,39 +102,12 @@ export default {
             self.categoryType !== categoryConstants.allCategoryTypes.Transfer) {
             self.$toast('Parameter Invalid');
             self.loadingError = 'Parameter Invalid';
-            return;
-        }
-
-        if (self.categoryType === 0) {
-            for (let i = 1; i <= 3; i++) {
-                self.allCategories.push({
-                    type: i,
-                    categories: copyArrayTo(self.getDefaultCategories(i), [])
-                });
-            }
-        } else {
-            self.allCategories.push({
-                type: self.categoryType,
-                categories: copyArrayTo(self.getDefaultCategories(self.categoryType), [])
-            });
         }
     },
     methods: {
         onPageAfterIn() {
             this.$routeBackOnError(this.f7router, 'loadingError');
         },
-        getDefaultCategories(categoryType) {
-            switch (categoryType) {
-                case categoryConstants.allCategoryTypes.Income:
-                    return categoryConstants.defaultIncomeCategories;
-                case categoryConstants.allCategoryTypes.Expense:
-                    return categoryConstants.defaultExpenseCategories;
-                case categoryConstants.allCategoryTypes.Transfer:
-                    return categoryConstants.defaultTransferCategories;
-                default:
-                    return [];
-            }
-        },
         save() {
             const self = this;
             const router = self.f7router;
@@ -137,37 +115,10 @@ export default {
             self.submitting = true;
             self.$showLoading(() => self.submitting);
 
-            const categories = [];
+            const submitCategories = categoriedArrayToPlainArray(self.allPresetCategories);
-
-            for (let i = 0; i < self.allCategories.length; i++) {
-                const categoryInfo = self.allCategories[i];
-
-                for (let j = 0; j < categoryInfo.categories.length; j++) {
-                    const category = categoryInfo.categories[j];
-                    const submitCategory = {
-                        name: self.$t('category.' + category.name, self.currentLocale),
-                        type: categoryInfo.type,
-                        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: categoryInfo.type,
-                            icon: subCategory.categoryIconId,
-                            color: subCategory.color
-                        });
-                    }
-
-                    categories.push(submitCategory);
-                }
-            }
 
             self.transactionCategoriesStore.addCategories({
-                categories: categories
+                categories: submitCategories
             }).then(() => {
                 self.submitting = false;
                 self.$hideLoading();
@@ -185,11 +136,11 @@ export default {
         },
         getCategoryTypeName(categoryType) {
             switch (categoryType) {
-                case categoryConstants.allCategoryTypes.Income:
+                case categoryConstants.allCategoryTypes.Income.toString():
                     return this.$t('Income Categories');
-                case categoryConstants.allCategoryTypes.Expense:
+                case categoryConstants.allCategoryTypes.Expense.toString():
                     return this.$t('Expense Categories');
-                case categoryConstants.allCategoryTypes.Transfer:
+                case categoryConstants.allCategoryTypes.Transfer.toString():
                     return this.$t('Transfer Categories');
                 default:
                     return this.$t('Transaction Categories');