data management page shows all user data statistics

src/lib/services.js

@@ -167,6 +167,9 @@ export default {
             password
         });
     },
+    getUserDataStatistics: () => {
+        return axios.get('v1/data/statistics.json');
+    },
     clearData: ({ password }) => {
         return axios.post('v1/data/clear.json', {
             password

src/locales/en.js

@@ -811,6 +811,7 @@ export default {
     'Are you sure you want to delete this account?': 'Are you sure you want to delete this account?',
     'Unable to delete this account': 'Unable to delete this account',
     'Transaction': 'Transaction',
+    'Transactions': 'Transactions',
     'Add Transaction': 'Add Transaction',
     'Edit Transaction': 'Edit Transaction',
     'Modify Balance': 'Modify Balance',
@@ -897,6 +898,7 @@ export default {
     'Your profile has been successfully updated': 'Your profile has been successfully updated',
     'Unable to update user profile': 'Unable to update user profile',
     'Data Management': 'Data Management',
+    'Unable to get user statistics data': 'Unable to get user statistics data',
     'Export Data': 'Export Data',
     'Clear User Data': 'Clear User Data',
     'Are you sure you want to clear all data?': 'Are you sure you want to clear all data?',

src/locales/zh_Hans.js

@@ -811,6 +811,7 @@ export default {
     'Are you sure you want to delete this account?': '您确定要删除该账户？',
     'Unable to delete this account': '无法删除该账户',
     'Transaction': '交易',
+    'Transactions': '交易',
     'Add Transaction': '添加交易',
     'Edit Transaction': '编辑交易',
     'Modify Balance': '修改余额',
@@ -897,6 +898,7 @@ export default {
     'Your profile has been successfully updated': '您的用户信息更新成功',
     'Unable to update user profile': '无法更新用户信息',
     'Data Management': '数据管理',
+    'Unable to get user statistics data': '无法获取用户统计数据',
     'Export Data': '导出数据',
     'Clear User Data': '清除用户数据',
     'Are you sure you want to clear all data?': '您确定要清除所有数据？',

src/store/index.js

@@ -67,6 +67,7 @@ import {
     logout,
     getCurrentUserProfile,
     updateUserProfile,
+    getUserDataStatistics,
     clearUserData,
     clearUserInfoState,
     resetState,
@@ -945,6 +946,7 @@ const stores = {
         logout,
         getCurrentUserProfile,
         updateUserProfile,
+        getUserDataStatistics,
         clearUserData,
         clearUserInfoState,
         resetState,

src/store/user.js

@@ -282,6 +282,31 @@ export function updateUserProfile(context, { profile, currentPassword }) {
     });
 }
 
+export function getUserDataStatistics() {
+    return new Promise((resolve, reject) => {
+        services.getUserDataStatistics().then(response => {
+            const data = response.data;
+
+            if (!data || !data.success || !data.result) {
+                reject({ message: 'Unable to get user statistics data' });
+                return;
+            }
+
+            resolve(data.result);
+        }).catch(error => {
+            logger.error('failed to get user statistics data', 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 user statistics data' });
+            } else {
+                reject(error);
+            }
+        });
+    });
+}
+
 export function clearUserData(context, { password }) {
     return new Promise((resolve, reject) => {
         services.clearData({

src/views/mobile/users/DataManagement.vue

@@ -1,7 +1,29 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar :title="$t('Data Management')" :back-link="$t('Back')"></f7-navbar>
 
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list>
+                    <f7-list-item title="Accounts" after="Count"></f7-list-item>
+                    <f7-list-item title="Transaction Categories" after="Count"></f7-list-item>
+                    <f7-list-item title="Transaction Tags" after="Count"></f7-list-item>
+                    <f7-list-item title="Transactions" after="Count"></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('Accounts')" :after="dataStatistics.totalAccountCount"></f7-list-item>
+                    <f7-list-item :title="$t('Transaction Categories')" :after="dataStatistics.totalTransactionCategoryCount"></f7-list-item>
+                    <f7-list-item :title="$t('Transaction Tags')" :after="dataStatistics.totalTransactionTagCount"></f7-list-item>
+                    <f7-list-item :title="$t('Transactions')" :after="dataStatistics.totalTransactionCount"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
         <f7-card>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
@@ -26,6 +48,9 @@
 export default {
     data() {
         return {
+            loading: true,
+            loadingError: null,
+            dataStatistics: null,
             currentPasswordForClearData: '',
             clearingData: false,
             showInputPasswordSheetForClearData: false,
@@ -39,7 +64,27 @@ export default {
             return this.$settings.isDataExportingEnabled();
         }
     },
+    created() {
+        const self = this;
+
+        self.loading = true;
+
+        self.$store.dispatch('getUserDataStatistics').then(dataStatistics => {
+            self.dataStatistics = dataStatistics;
+            self.loading = false;
+        }).catch(error => {
+            if (error.processed) {
+                self.loading = false;
+            } else {
+                self.loadingError = error;
+                self.$toast(error.message || error);
+            }
+        });
+    },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         clearData(password) {
             const self = this;