code refactor

src/lib/services.js

@@ -244,8 +244,8 @@ export default {
             id
         });
     },
-    getAllTransactionCategories: ({ type, parentId }) => {
-        return axios.get('v1/transaction/categories/list.json?type=' + (type || '0') + '&parent_id=' + (parentId || parentId === 0 ? parentId : '-1'));
+    getAllTransactionCategories: () => {
+        return axios.get('v1/transaction/categories/list.json');
     },
     getTransactionCategory: ({ id }) => {
         return axios.get('v1/transaction/categories/get.json?id=' + id);

src/store/index.js

@@ -18,6 +18,11 @@ import {
     UPDATE_ACCOUNT_LIST_INVALID_STATE,
 
     LOAD_TRANSACTION_CATEGORY_LIST,
+    ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST,
+    SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST,
+    CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST,
+    UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST,
+    REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST,
     UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE,
 
     LOAD_TRANSACTION_TAG_LIST,
@@ -46,7 +51,7 @@ const stores = {
         allAccountsMap: {},
         allCategorizedAccounts: {},
         accountListStateInvalid: true,
-        allTransactionCategories: [],
+        allTransactionCategories: {},
         allTransactionCategoriesMap: {},
         transactionCategoryListStateInvalid: true,
         allTransactionTags: [],
@@ -69,7 +74,7 @@ const stores = {
             state.allAccountsMap = {};
             state.allCategorizedAccounts = {};
             state.accountListStateInvalid = true;
-            state.allTransactionCategories = [];
+            state.allTransactionCategories = {};
             state.allTransactionCategoriesMap = {};
             state.allTransactionTags = [];
             state.allTransactionTagsMap = {};
@@ -203,13 +208,101 @@ const stores = {
         [UPDATE_ACCOUNT_LIST_INVALID_STATE] (state, invalidState) {
             state.accountListStateInvalid = invalidState;
         },
-        [LOAD_TRANSACTION_CATEGORY_LIST] (state, categories) {
-            state.allTransactionCategories = categories;
+        [LOAD_TRANSACTION_CATEGORY_LIST] (state, allCategories) {
+            state.allTransactionCategories = allCategories;
             state.allTransactionCategoriesMap = {};
 
-            for (let i = 0; i < categories.length; i++) {
-                const category = categories[i];
-                state.allTransactionCategoriesMap[category.id] = category;
+            for (let categoryType in allCategories) {
+                if (!Object.prototype.hasOwnProperty.call(allCategories, categoryType)) {
+                    continue;
+                }
+
+                const categories = allCategories[categoryType];
+
+                for (let i = 0; i < categories.length; i++) {
+                    const category = categories[i];
+                    state.allTransactionCategoriesMap[category.id] = category;
+
+                    for (let j = 0; j < category.subCategories.length; j++) {
+                        const subCategory = category.subCategories[j];
+                        state.allTransactionCategoriesMap[subCategory.id] = subCategory;
+                    }
+                }
+            }
+        },
+        [ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST] (state, category) {
+            let categoryList = null;
+
+            if (!category.parentId || category.parentId === '0') {
+                categoryList = state.allTransactionCategories[category.type];
+            } else if (state.allTransactionCategoriesMap[category.parentId]) {
+                categoryList = state.allTransactionCategoriesMap[category.parentId].subCategories;
+            }
+
+            if (categoryList) {
+                categoryList.push(category);
+            }
+
+            state.allTransactionCategoriesMap[category.id] = category;
+        },
+        [SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST] (state, category) {
+            let categoryList = null;
+
+            if (!category.parentId || category.parentId === '0') {
+                categoryList = state.allTransactionCategories[category.type];
+            } else if (state.allTransactionCategoriesMap[category.parentId]) {
+                categoryList = state.allTransactionCategoriesMap[category.parentId].subCategories;
+            }
+
+            if (categoryList) {
+                for (let i = 0; i < categoryList.length; i++) {
+                    if (categoryList[i].id === category.id) {
+                        categoryList.splice(i, 1, category);
+                        break;
+                    }
+                }
+            }
+
+            state.allTransactionCategoriesMap[category.id] = category;
+        },
+        [CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST] (state, { category, from, to }) {
+            let categoryList = null;
+
+            if (!category.parentId || category.parentId === '0') {
+                categoryList = state.allTransactionCategories[category.type];
+            } else if (state.allTransactionCategoriesMap[category.parentId]) {
+                categoryList = state.allTransactionCategoriesMap[category.parentId].subCategories;
+            }
+
+            if (categoryList) {
+                categoryList.splice(to, 0, categoryList.splice(from, 1)[0]);
+            }
+        },
+        [UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST] (state, { category, hidden }) {
+            if (state.allTransactionCategoriesMap[category.id]) {
+                state.allTransactionCategoriesMap[category.id].hidden = hidden;
+            }
+        },
+        [REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST] (state, category) {
+            let categoryList = null;
+
+            if (!category.parentId || category.parentId === '0') {
+                categoryList = state.allTransactionCategories[category.type];
+            } else if (state.allTransactionCategoriesMap[category.parentId]) {
+                categoryList = state.allTransactionCategoriesMap[category.parentId].subCategories;
+            }
+
+            if (categoryList) {
+                for (let i = 0; i < categoryList.length; i++) {
+                    if (categoryList[i].id === category.id) {
+                        categoryList.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+
+            if (state.allTransactionCategoriesMap[category.id]) {
+                delete state.allTransactionCategoriesMap[category.id];
             }
         },
         [UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE] (state, invalidState) {
@@ -293,7 +386,14 @@ const stores = {
         hideAccount: account.hideAccount,
         deleteAccount: account.deleteAccount,
 
-        addTransactionCategoryBatch: transactionCategory.addTransactionCategoryBatch,
+        loadAllCategories: transactionCategory.loadAllCategories,
+        getCategory: transactionCategory.getCategory,
+        saveCategory: transactionCategory.saveCategory,
+        addCategories: transactionCategory.addCategories,
+        changeCategoryDisplayOrder: transactionCategory.changeCategoryDisplayOrder,
+        updateCategoryDisplayOrders: transactionCategory.updateCategoryDisplayOrders,
+        hideCategory: transactionCategory.hideCategory,
+        deleteCategory: transactionCategory.deleteCategory,
 
         loadAllTags: transactionTag.loadAllTags,
         saveTag: transactionTag.saveTag,

src/store/mutations.js

@@ -14,6 +14,11 @@ 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 ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST = 'ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST';
+export const SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST = 'SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST';
+export const CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST = 'CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST';
+export const UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST = 'UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST';
+export const REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST = 'REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST';
 export const UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE = 'UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE';
 
 export const LOAD_TRANSACTION_TAG_LIST = 'LOAD_TRANSACTION_TAG_LIST';

src/store/transactionCategory.js

@@ -1,11 +1,162 @@
+import categoryContants from '../consts/category.js';
 import services from '../lib/services.js';
 import logger from '../lib/logger.js';
 
 import {
+    LOAD_TRANSACTION_CATEGORY_LIST,
+    ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST,
+    SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST,
+    CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST,
+    UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST,
+    REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST,
     UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE,
 } from './mutations.js';
 
-function addTransactionCategoryBatch(context, { categories }) {
+function loadAllCategories(context, { force }) {
+    if (!force && !context.state.transactionCategoryListStateInvalid) {
+        return new Promise((resolve) => {
+            resolve(context.state.allTransactionCategories);
+        });
+    }
+
+    return new Promise((resolve, reject) => {
+        services.getAllTransactionCategories().then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to get category list' });
+                return;
+            }
+
+            if (!data.result[categoryContants.allCategoryTypes.Income]) {
+                data.result[categoryContants.allCategoryTypes.Income] = [];
+            }
+
+            if (!data.result[categoryContants.allCategoryTypes.Expense]) {
+                data.result[categoryContants.allCategoryTypes.Expense] = [];
+            }
+
+            if (!data.result[categoryContants.allCategoryTypes.Transfer]) {
+                data.result[categoryContants.allCategoryTypes.Transfer] = [];
+            }
+
+            for (let categoryType in data.result) {
+                if (!Object.prototype.hasOwnProperty.call(data.result, categoryType)) {
+                    continue;
+                }
+
+                const categories = data.result[categoryType];
+
+                for (let i = 0; i < categories.length; i++) {
+                    const category = categories[i];
+
+                    if (!category.subCategories) {
+                        category.subCategories = [];
+                    }
+                }
+            }
+
+            context.commit(LOAD_TRANSACTION_CATEGORY_LIST, data.result);
+            context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE, false);
+
+            resolve(data.result);
+        }).catch(error => {
+            if (force) {
+                logger.error('failed to force load category list', error);
+            } else {
+                logger.error('failed to load category list', error);
+            }
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                reject({ message: 'Unable to get category list' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+function getCategory(context, { categoryId }) {
+    return new Promise((resolve, reject) => {
+        services.getTransactionCategory({
+            id: categoryId
+        }).then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to get category' });
+                return;
+            }
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to load category info', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                reject({ message: 'Unable to get category' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+function saveCategory(context, { category }) {
+    return new Promise((resolve, reject) => {
+        let promise = null;
+
+        if (!category.id) {
+            promise = services.addTransactionCategory(category);
+        } else {
+            promise = services.modifyTransactionCategory(category);
+        }
+
+        promise.then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                if (!category.id) {
+                    reject({ message: 'Unable to add category' });
+                } else {
+                    reject({ message: 'Unable to save category' });
+                }
+                return;
+            }
+
+            if (!data.result.subCategories) {
+                data.result.subCategories = [];
+            }
+
+            if (!category.id) {
+                context.commit(ADD_CATEGORY_TO_TRANSACTION_CATEGORY_LIST, data.result);
+            } else {
+                context.commit(SAVE_CATEGORY_IN_TRANSACTION_CATEGORY_LIST, data.result);
+            }
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to save category', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                if (!category.id) {
+                    reject({ message: 'Unable to add category' });
+                } else {
+                    reject({ message: 'Unable to save category' });
+                }
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+function addCategories(context, { categories }) {
     return new Promise((resolve, reject) => {
         services.addTransactionCategoryBatch({
             categories: categories
@@ -17,7 +168,7 @@ function addTransactionCategoryBatch(context, { categories }) {
                 return;
             }
 
-            context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE);
+            context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE, true);
 
             resolve(data.result);
         }).catch(error => {
@@ -34,6 +185,172 @@ function addTransactionCategoryBatch(context, { categories }) {
     });
 }
 
-export default {
-    addTransactionCategoryBatch,
+function changeCategoryDisplayOrder(context, { categoryId, from, to }) {
+    const category = context.state.allTransactionCategoriesMap[categoryId];
+
+    return new Promise((resolve, reject) => {
+        if (!category) {
+            reject({ message: 'Unable to move category' });
+            return;
+        }
+
+        if (!category.parentId || category.parentId === '0') {
+            if (!context.state.allTransactionCategories[category.type] ||
+                !context.state.allTransactionCategories[category.type][to]) {
+                reject({ message: 'Unable to move category' });
+                return;
+            }
+        } else {
+            if (!context.state.allTransactionCategoriesMap[category.parentId].subCategories ||
+                !context.state.allTransactionCategoriesMap[category.parentId].subCategories[to]) {
+                reject({ message: 'Unable to move category' });
+                return;
+            }
+        }
+
+        context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE, true);
+        context.commit(CHANGE_CATEGORY_DISPLAY_ORDER_IN_CATEGORY_LIST, {
+            category: category,
+            from: from,
+            to: to
+        });
+
+        resolve();
+    });
+}
+
+function updateCategoryDisplayOrders(context, { type, parentId }) {
+    const newDisplayOrders = [];
+
+    let categoryList = null;
+
+    if (!parentId || parentId === '0') {
+        categoryList = context.state.allTransactionCategories[type];
+    } else if (context.state.allTransactionCategoriesMap[parentId]) {
+        categoryList = context.state.allTransactionCategoriesMap[parentId].subCategories;
+    }
+
+    if (categoryList) {
+        for (let i = 0; i < categoryList.length; i++) {
+            newDisplayOrders.push({
+                id: categoryList[i].id,
+                displayOrder: i + 1
+            });
+        }
+    }
+
+    return new Promise((resolve, reject) => {
+        services.moveTransactionCategory({
+            newDisplayOrders: newDisplayOrders
+        }).then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to move category' });
+                return;
+            }
+
+            context.commit(UPDATE_TRANSACTION_CATEGORY_LIST_INVALID_STATE, false);
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to save categories display order', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                reject({ message: 'Unable to move category' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+function hideCategory(context, { category, hidden }) {
+    return new Promise((resolve, reject) => {
+        services.hideTransactionCategory({
+            id: category.id,
+            hidden: hidden
+        }).then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                if (hidden) {
+                    reject({ message: 'Unable to hide this category' });
+                } else {
+                    reject({ message: 'Unable to unhide this category' });
+                }
+
+                return;
+            }
+
+            context.commit(UPDATE_CATEGORY_VISIBILITY_IN_TRANSACTION_CATEGORY_LIST, {
+                category: category,
+                hidden: hidden
+            });
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to change category visibility', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                if (hidden) {
+                    reject({ message: 'Unable to hide this category' });
+                } else {
+                    reject({ message: 'Unable to unhide this category' });
+                }
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+function deleteCategory(context, { category, beforeResolve }) {
+    return new Promise((resolve, reject) => {
+        services.deleteTransactionCategory({
+            id: category.id
+        }).then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to delete this category' });
+                return;
+            }
+
+            if (beforeResolve) {
+                beforeResolve(() => {
+                    context.commit(REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST, category);
+                });
+            } else {
+                context.commit(REMOVE_CATEGORY_FROM_TRANSACTION_CATEGORYLIST, category);
+            }
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to delete category', error);
+
+            if (error.response && error.response.data && error.response.data.errorMessage) {
+                reject({ error: error.response.data });
+            } else if (!error.processed) {
+                reject({ message: 'Unable to delete this category' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
+export default {
+    loadAllCategories,
+    getCategory,
+    saveCategory,
+    addCategories,
+    changeCategoryDisplayOrder,
+    updateCategoryDisplayOrders,
+    hideCategory,
+    deleteCategory,
 }

src/views/mobile/Signup.vue

@@ -328,7 +328,7 @@ export default {
                     return;
                 }
 
-                self.$store.dispatch('addTransactionCategoryBatch', {
+                self.$store.dispatch('addCategories', {
                     categories: allCategories
                 }).then(() => {
                     self.submitting = false;

src/views/mobile/categories/All.vue

@@ -1,8 +1,18 @@
 <template>
-    <f7-page>
+    <f7-page ptr @ptr:refresh="reload">
         <f7-navbar :title="$t('Transaction Categories')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-card>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list>
+                    <f7-list-item title="Expense" link="#"></f7-list-item>
+                    <f7-list-item title="Income" link="#"></f7-list-item>
+                    <f7-list-item title="Transfer" link="#"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
+        <f7-card v-else-if="!loading">
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Expense')" link="/category/list?type=2"></f7-list-item>
@@ -13,3 +23,54 @@
         </f7-card>
     </f7-page>
 </template>
+
+
+<script>
+export default {
+    data() {
+        return {
+            loading: true
+        };
+    },
+    created() {
+        const self = this;
+        const router = self.$f7router;
+
+        self.loading = true;
+
+        self.$store.dispatch('loadAllCategories', {
+            force: false
+        }).then(() => {
+            self.loading = false;
+        }).catch(error => {
+            self.logining = false;
+
+            if (!error.processed) {
+                self.$toast(error.message || error);
+                router.back();
+            }
+        });
+    },
+    methods: {
+        reload(done) {
+            const self = this;
+
+            self.$store.dispatch('loadAllCategories', {
+                force: true
+            }).then(() => {
+                if (done) {
+                    done();
+                }
+            }).catch(error => {
+                if (done) {
+                    done();
+                }
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        }
+    }
+}
+</script>

src/views/mobile/categories/Edit.vue

@@ -150,18 +150,9 @@ export default {
             self.loading = true;
 
             self.editCategoryId = query.id;
-            self.$services.getTransactionCategory({
-                id: self.editCategoryId
-            }).then(response => {
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    self.$toast('Unable to get category');
-                    router.back();
-                    return;
-                }
-
-                const category = data.result;
+            self.$store.dispatch('getCategory', {
+                categoryId: self.editCategoryId
+            }).then(category => {
                 self.category.id = category.id;
                 self.category.type = category.type;
                 self.category.parentId = category.type.parentId;
@@ -173,13 +164,10 @@ export default {
 
                 self.loading = false;
             }).catch(error => {
-                self.$logger.error('failed to load category info', error);
+                self.loading = false;
 
-                if (error.response && error.response.data && error.response.data.errorMessage) {
-                    self.$toast({ error: error.response.data });
-                    router.back();
-                } else if (!error.processed) {
-                    self.$toast('Unable to get category');
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                     router.back();
                 }
             });
@@ -221,29 +209,16 @@ export default {
                 comment: self.category.comment
             };
 
-            let promise = null;
-
-            if (!self.editCategoryId) {
-                promise = self.$services.addTransactionCategory(submitCategory);
-            } else {
+            if (self.editCategoryId) {
                 submitCategory.id = self.category.id;
                 submitCategory.hidden = !self.category.visible;
-                promise = self.$services.modifyTransactionCategory(submitCategory);
             }
 
-            promise.then(response => {
+            self.$store.dispatch('saveCategory', {
+                category: submitCategory
+            }).then(() => {
                 self.submitting = false;
                 self.$hideLoading();
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    if (!self.editCategoryId) {
-                        self.$toast('Unable to add category');
-                    } else {
-                        self.$toast('Unable to save category');
-                    }
-                    return;
-                }
 
                 if (!self.editCategoryId) {
                     self.$toast('You have added a new category');
@@ -253,19 +228,11 @@ export default {
 
                 router.back();
             }).catch(error => {
-                self.$logger.error('failed to save category', 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) {
-                    if (!self.editCategoryId) {
-                        self.$toast('Unable to add category');
-                    } else {
-                        self.$toast('Unable to save category');
-                    }
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                 }
             });
         }

src/views/mobile/categories/List.vue

@@ -92,7 +92,6 @@
 export default {
     data() {
         return {
-            categories: [],
             hasSubCategories: false,
             categoryType: 0,
             categoryId: '',
@@ -107,6 +106,23 @@ export default {
         };
     },
     computed: {
+        categories() {
+            if (!this.categoryId || this.categoryId === '' || this.categoryId === '0') {
+                if (!this.$store.state.allTransactionCategories || !this.$store.state.allTransactionCategories[this.categoryType]) {
+                    return [];
+                }
+
+                return this.$store.state.allTransactionCategories[this.categoryType];
+            } else if (this.categoryId && this.categoryId !== '' && this.categoryId !== '0') {
+                if (!this.$store.state.allTransactionCategoriesMap || !this.$store.state.allTransactionCategoriesMap[this.categoryId]) {
+                    return [];
+                }
+
+                return this.$store.state.allTransactionCategoriesMap[this.categoryId].subCategories;
+            } else {
+                return [];
+            }
+        },
         title() {
             let title = '';
 
@@ -171,44 +187,23 @@ export default {
 
         self.loading = true;
 
-        self.$services.getAllTransactionCategories({
-            type: self.categoryType,
-            parentId: self.categoryId
-        }).then(response => {
-            const data = response.data;
-
-            if (!data || !data.success || !data.result) {
-                self.$toast('Unable to get category list');
-                router.back();
-                return;
-            }
-
-            if (data.result[self.categoryType]) {
-                self.categories = data.result[self.categoryType];
-            } else {
-                self.categories = [];
-            }
-
+        self.$store.dispatch('loadAllCategories', {
+            force: false
+        }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.$logger.error('failed to load category list', error);
+            self.logining = false;
 
-            if (error.response && error.response.data && error.response.data.errorMessage) {
-                self.$toast({ error: error.response.data });
-                router.back();
-            } else if (!error.processed) {
-                self.$toast('Unable to get category list');
+            if (!error.processed) {
+                self.$toast(error.message || error);
                 router.back();
             }
         });
     },
     methods: {
         onPageAfterIn() {
-            const self = this;
-            const previousRoute = self.$f7router.previousRoute;
-
-            if (previousRoute && (previousRoute.path === '/category/add' || previousRoute.path === '/category/edit' || previousRoute.path === '/category/preset') && !self.loading) {
-                self.reload(null);
+            if (this.$store.state.transactionCategoryListStateInvalid && !this.loading) {
+                this.reload(null);
             }
         },
         reload(done) {
@@ -219,37 +214,19 @@ export default {
 
             const self = this;
 
-            self.$services.getAllTransactionCategories({
-                type: self.categoryType,
-                parentId: self.categoryId
-            }).then(response => {
+            self.$store.dispatch('loadAllCategories', {
+                force: true
+            }).then(() => {
                 if (done) {
                     done();
                 }
-
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    self.$toast('Unable to get category list');
-                    return;
-                }
-
-                if (data.result[self.categoryType]) {
-                    self.categories = data.result[self.categoryType];
-                } else {
-                    self.categories = [];
-                }
             }).catch(error => {
-                self.$logger.error('failed to reload category list', error);
-
                 if (done) {
                     done();
                 }
 
-                if (error.response && error.response.data && error.response.data.errorMessage) {
-                    self.$toast({ error: error.response.data });
-                } else if (!error.processed) {
-                    self.$toast('Unable to get category list');
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                 }
             });
         },
@@ -263,33 +240,27 @@ export default {
             this.displayOrderModified = false;
         },
         onSort(event) {
+            const self = this;
+
             if (!event || !event.el || !event.el.id || event.el.id.indexOf('category_') !== 0) {
                 this.$toast('Unable to move category');
                 return;
             }
 
             const id = event.el.id.substr(9); // category_
-            let category = null;
 
-            for (let i = 0; i < this.categories.length; i++) {
-                if (this.categories[i].id === id) {
-                    category = this.categories[i];
-                    break;
-                }
-            }
-
-            if (!category || !this.categories[event.to]) {
-                this.$toast('Unable to move category');
-                return;
-            }
-
-            this.categories.splice(event.to, 0, this.categories.splice(event.from, 1)[0]);
-
-            this.displayOrderModified = true;
+            self.$store.dispatch('changeCategoryDisplayOrder', {
+                categoryId: id,
+                from: event.from,
+                to: event.to
+            }).then(() => {
+                self.displayOrderModified = true;
+            }).catch(error => {
+                self.$toast(error.message || error);
+            });
         },
         saveSortResult() {
             const self = this;
-            const newDisplayOrders = [];
 
             if (!self.displayOrderModified) {
                 self.showHidden = false;
@@ -298,42 +269,24 @@ export default {
             }
 
             self.displayOrderSaving = true;
-
-            for (let i = 0; i < self.categories.length; i++) {
-                newDisplayOrders.push({
-                    id: self.categories[i].id,
-                    displayOrder: i + 1
-                });
-            }
-
             self.$showLoading();
 
-            self.$services.moveTransactionCategory({
-                newDisplayOrders: newDisplayOrders
-            }).then(response => {
+            self.$store.dispatch('updateCategoryDisplayOrders', {
+                type: self.categoryType,
+                parentId: self.categoryId,
+            }).then(() => {
                 self.displayOrderSaving = false;
                 self.$hideLoading();
 
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    self.$toast('Unable to move category');
-                    return;
-                }
-
                 self.showHidden = false;
                 self.sortable = false;
                 self.displayOrderModified = false;
             }).catch(error => {
-                self.$logger.error('failed to save categories display order', error);
-
                 self.displayOrderSaving = 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 move category');
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                 }
             });
         },
@@ -345,37 +298,16 @@ export default {
 
             self.$showLoading();
 
-            self.$services.hideTransactionCategory({
-                id: category.id,
+            self.$store.dispatch('hideCategory', {
+                category: category,
                 hidden: hidden
-            }).then(response => {
+            }).then(() => {
                 self.$hideLoading();
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    if (hidden) {
-                        self.$toast('Unable to hide this category');
-                    } else {
-                        self.$toast('Unable to unhide this category');
-                    }
-
-                    return;
-                }
-
-                category.hidden = hidden;
             }).catch(error => {
-                self.$logger.error('failed to change category visibility', error);
-
                 self.$hideLoading();
 
-                if (error.response && error.response.data && error.response.data.errorMessage) {
-                    self.$toast({ error: error.response.data });
-                } else if (!error.processed) {
-                    if (hidden) {
-                        self.$toast('Unable to hide this category');
-                    } else {
-                        self.$toast('Unable to unhide this category');
-                    }
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                 }
             });
         },
@@ -399,33 +331,20 @@ export default {
             self.categoryToDelete = null;
             self.$showLoading();
 
-            self.$services.deleteTransactionCategory({
-                id: category.id
-            }).then(response => {
-                self.$hideLoading();
-                const data = response.data;
-
-                if (!data || !data.success || !data.result) {
-                    self.$toast('Unable to delete this category');
-                    return;
+            self.$store.dispatch('deleteCategory', {
+                category: category,
+                beforeResolve: (done) => {
+                    app.swipeout.delete($$(`#${self.$options.filters.categoryDomId(category)}`), () => {
+                        done();
+                    });
                 }
-
-                app.swipeout.delete($$(`#${self.$options.filters.categoryDomId(category)}`), () => {
-                    for (let i = 0; i < self.categories.length; i++) {
-                        if (self.categories[i].id === category.id) {
-                            self.categories.splice(i, 1);
-                        }
-                    }
-                });
+            }).then(() => {
+                self.$hideLoading();
             }).catch(error => {
-                self.$logger.error('failed to delete category', error);
-
                 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 delete this category');
+                if (!error.processed) {
+                    self.$toast(error.message || error);
                 }
             });
         }

src/views/mobile/categories/Preset.vue

@@ -159,7 +159,7 @@ export default {
                 }
             }
 
-            self.$store.dispatch('addTransactionCategoryBatch', {
+            self.$store.dispatch('addCategories', {
                 categories: categories
             }).then(() => {
                 self.submitting = false;