migrate user data management page to composition API and typescript

src/models/data_management.ts

@@ -3,11 +3,21 @@ export interface ClearDataRequest {
 }
 
 export interface DataStatisticsResponse {
-    readonly totalAccountCount: number;
-    readonly totalTransactionCategoryCount: number;
-    readonly totalTransactionTagCount: number;
-    readonly totalTransactionCount: number;
-    readonly totalTransactionPictureCount: number;
-    readonly totalTransactionTemplateCount: number;
-    readonly totalScheduledTransactionCount: number;
+    readonly totalAccountCount: string;
+    readonly totalTransactionCategoryCount: string;
+    readonly totalTransactionTagCount: string;
+    readonly totalTransactionCount: string;
+    readonly totalTransactionPictureCount: string;
+    readonly totalTransactionTemplateCount: string;
+    readonly totalScheduledTransactionCount: string;
+}
+
+export interface DisplayDataStatistics {
+    readonly totalAccountCount: string;
+    readonly totalTransactionCategoryCount: string;
+    readonly totalTransactionTagCount: string;
+    readonly totalTransactionCount: string;
+    readonly totalTransactionPictureCount: string;
+    readonly totalTransactionTemplateCount: string;
+    readonly totalScheduledTransactionCount: string;
 }

src/views/base/users/DataManagementPageBase.ts

@@ -0,0 +1,52 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+import type { DataStatisticsResponse, DisplayDataStatistics } from '@/models/data_management.ts';
+
+export function useDataManagementPageBase() {
+    const { tt, appendDigitGroupingSymbol } = useI18n();
+
+    const userStore = useUserStore();
+
+    const dataStatistics = ref<DataStatisticsResponse | null>(null);
+
+    const displayDataStatistics = computed<DisplayDataStatistics | null>(() => {
+        if (!dataStatistics.value) {
+            return null;
+        }
+
+        return {
+            totalTransactionCount: appendDigitGroupingSymbol(dataStatistics.value.totalTransactionCount),
+            totalAccountCount: appendDigitGroupingSymbol(dataStatistics.value.totalAccountCount),
+            totalTransactionCategoryCount: appendDigitGroupingSymbol(dataStatistics.value.totalTransactionCategoryCount),
+            totalTransactionTagCount: appendDigitGroupingSymbol(dataStatistics.value.totalTransactionTagCount),
+            totalTransactionPictureCount: appendDigitGroupingSymbol(dataStatistics.value.totalTransactionPictureCount),
+            totalTransactionTemplateCount: appendDigitGroupingSymbol(dataStatistics.value.totalTransactionTemplateCount),
+            totalScheduledTransactionCount: appendDigitGroupingSymbol(dataStatistics.value.totalScheduledTransactionCount)
+        };
+    });
+
+    function getExportFileName(fileExtension: string): string {
+        const nickname = userStore.currentUserNickname;
+
+        if (nickname) {
+            return tt('dataExport.exportFilename', {
+                nickname: nickname
+            }) + '.' + fileExtension;
+        }
+
+        return tt('dataExport.defaultExportFilename') + '.' + fileExtension;
+    }
+
+    return {
+        // states
+        dataStatistics,
+        // computed states
+        displayDataStatistics,
+        // functions
+        getExportFileName
+    }
+}

src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue

@@ -4,14 +4,14 @@
             <v-card :class="{ 'disabled': loadingDataStatistics }">
                 <template #title>
                     <div class="d-flex align-center">
-                        <span>{{ $t('Data Management') }}</span>
+                        <span>{{ tt('Data Management') }}</span>
                         <v-btn density="compact" color="default" variant="text" size="24"
                                class="ml-2" :icon="true" :loading="loadingDataStatistics" @click="reloadUserDataStatistics(true)">
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
                             <v-icon :icon="icons.refresh" size="24" />
-                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                            <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                     </div>
                 </template>
@@ -70,7 +70,7 @@
                                 </div>
 
                                 <div class="d-flex flex-column">
-                                    <span class="text-caption">{{ $t(item.title) }}</span>
+                                    <span class="text-caption">{{ tt(item.title) }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
                                     <span class="text-xl" v-if="!loadingDataStatistics">{{ item.count }}</span>
                                 </div>
@@ -81,25 +81,24 @@
             </v-card>
         </v-col>
 
-        <v-col cols="12" v-if="isDataExportingEnabled">
-            <v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
+        <v-col cols="12" v-if="isDataExportingEnabled()">
+            <v-card :class="{ 'disabled': exportingData }" :title="tt('Export Data')">
                 <v-card-text>
-                    <span class="text-body-1">{{ $t('Export all transaction data to file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
+                    <span class="text-body-1">{{ tt('Export all transaction data to file.') }}&nbsp;{{ tt('It may take a long time, please wait for a few minutes.') }}</span>
                 </v-card-text>
 
                 <v-card-text class="d-flex flex-wrap gap-4">
-                    <v-btn-group variant="elevated" density="comfortable" color="primary"
-                                  :disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'">
-                        <v-btn>
-                            {{ $t('Export Data') }}
+                    <v-btn-group variant="elevated" density="comfortable" color="primary">
+                        <v-btn :disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'">
+                            {{ tt('Export Data') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="exportingData"></v-progress-circular>
                             <v-menu activator="parent">
                                 <v-list :disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'">
                                     <v-list-item @click="exportData('csv')">
-                                        <v-list-item-title>{{ $t('CSV (Comma-separated values) File') }}</v-list-item-title>
+                                        <v-list-item-title>{{ tt('CSV (Comma-separated values) File') }}</v-list-item-title>
                                     </v-list-item>
                                     <v-list-item @click="exportData('tsv')">
-                                        <v-list-item-title>{{ $t('TSV (Tab-separated values) File') }}</v-list-item-title>
+                                        <v-list-item-title>{{ tt('TSV (Tab-separated values) File') }}</v-list-item-title>
                                     </v-list-item>
                                 </v-list>
                             </v-menu>
@@ -112,14 +111,14 @@
         <v-col cols="12">
             <v-card :class="{ 'disabled': clearingData }">
                 <template #title>
-                    <span class="text-error">{{ $t('Danger Zone') }}</span>
+                    <span class="text-error">{{ tt('Danger Zone') }}</span>
                 </template>
 
                 <v-form>
                     <v-card-text class="py-0">
                     <span class="text-body-1 text-error">
                         <v-icon :icon="icons.alert"/>
-                        {{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please enter your current password to confirm.') }}
+                        {{ tt('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please enter your current password to confirm.') }}
                     </span>
                     </v-card-text>
 
@@ -133,7 +132,7 @@
                                     variant="underlined"
                                     color="error"
                                     :disabled="loadingDataStatistics || clearingData"
-                                    :placeholder="$t('Current Password')"
+                                    :placeholder="tt('Current Password')"
                                     v-model="currentPasswordForClearData"
                                     @keyup.enter="clearData"
                                 />
@@ -143,7 +142,7 @@
 
                     <v-card-text class="d-flex flex-wrap gap-4">
                         <v-btn color="error" :disabled="loadingDataStatistics || !currentPasswordForClearData || clearingData" @click="clearData">
-                            {{ $t('Clear User Data') }}
+                            {{ tt('Clear User Data') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="clearingData"></v-progress-circular>
                         </v-btn>
                     </v-card-text>
@@ -156,10 +155,16 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useDataManagementPageBase } from '@/views/base/users/DataManagementPageBase.ts';
+
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import { isEquals } from '@/lib/common.ts';
@@ -178,140 +183,107 @@ import {
     mdiAlert
 } from '@mdi/js';
 
-export default {
-    data() {
-        return {
-            loadingDataStatistics: true,
-            dataStatistics: null,
-            exportingData: false,
-            currentPasswordForClearData: '',
-            clearingData: false,
-            icons: {
-                refresh: mdiRefresh,
-                transactions: mdiListBoxOutline,
-                accounts: mdiCreditCardOutline,
-                categories: mdiViewDashboardOutline,
-                tags: mdiTagOutline,
-                pictures: mdiImage,
-                templates: mdiClipboardTextOutline,
-                scheduledTransactions: mdiClipboardTextClockOutline,
-                alert: mdiAlert
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+const { tt } = useI18n();
+const { dataStatistics, displayDataStatistics, getExportFileName } = useDataManagementPageBase();
+
+const rootStore = useRootStore();
+const userStore = useUserStore();
+
+const icons = {
+    refresh: mdiRefresh,
+    transactions: mdiListBoxOutline,
+    accounts: mdiCreditCardOutline,
+    categories: mdiViewDashboardOutline,
+    tags: mdiTagOutline,
+    pictures: mdiImage,
+    templates: mdiClipboardTextOutline,
+    scheduledTransactions: mdiClipboardTextClockOutline,
+    alert: mdiAlert
+};
+
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const loadingDataStatistics = ref<boolean>(true);
+const exportingData = ref<boolean>(false);
+const currentPasswordForClearData = ref<string>('');
+const clearingData = ref<boolean>(false);
+
+function reloadUserDataStatistics(force: boolean): void {
+    loadingDataStatistics.value = true;
+
+    userStore.getUserDataStatistics().then(dataStatisticsResponse => {
+        if (force) {
+            if (isEquals(dataStatistics.value, dataStatisticsResponse)) {
+                snackbar.value?.showMessage('Data is up to date');
+            } else {
+                snackbar.value?.showMessage('Data has been updated');
             }
         }
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore),
-        displayDataStatistics() {
-            const self = this;
 
-            if (!self.dataStatistics) {
-                return null;
-            }
+        dataStatistics.value = dataStatisticsResponse;
+        loadingDataStatistics.value = false;
+    }).catch(error => {
+        loadingDataStatistics.value = false;
 
-            return {
-                totalTransactionCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCount),
-                totalAccountCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalAccountCount),
-                totalTransactionCategoryCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCategoryCount),
-                totalTransactionTagCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionTagCount),
-                totalTransactionPictureCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionPictureCount),
-                totalTransactionTemplateCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionTemplateCount),
-                totalScheduledTransactionCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalScheduledTransactionCount)
-            };
-        },
-        isDataExportingEnabled() {
-            return isDataExportingEnabled();
+        if (!error.processed) {
+            snackbar.value?.showError(error);
         }
-    },
-    created() {
-        this.reloadUserDataStatistics(false);
-    },
-    methods: {
-        reloadUserDataStatistics(force) {
-            const self = this;
-
-            self.loadingDataStatistics = true;
-
-            self.userStore.getUserDataStatistics().then(dataStatistics => {
-                if (force) {
-                    if (isEquals(self.dataStatistics, dataStatistics)) {
-                        self.$refs.snackbar.showMessage('Data is up to date');
-                    } else {
-                        self.$refs.snackbar.showMessage('Data has been updated');
-                    }
-                }
-
-                self.dataStatistics = dataStatistics;
-                self.loadingDataStatistics = false;
-            }).catch(error => {
-                self.loadingDataStatistics = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        exportData(fileType) {
-            const self = this;
-
-            if (self.exportingData) {
-                return;
-            }
-
-            self.exportingData = true;
-
-            self.userStore.getExportedUserData(fileType).then(data => {
-                startDownloadFile(self.getExportFileName(fileType), data);
-                self.exportingData = false;
-            }).catch(error => {
-                self.exportingData = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        clearData() {
-            const self = this;
-
-            if (!self.currentPasswordForClearData) {
-                self.$refs.snackbar.showMessage('Current password cannot be blank');
-                return;
-            }
-
-            if (self.clearingData) {
-                return;
-            }
-
-            self.$refs.confirmDialog.open('Are you sure you want to clear all data?', { color: 'error' }).then(() => {
-                self.clearingData = true;
-
-                self.rootStore.clearUserData({
-                    password: self.currentPasswordForClearData
-                }).then(() => {
-                    self.clearingData = false;
-
-                    self.$refs.snackbar.showMessage('All user data has been cleared');
-                    self.reloadUserDataStatistics();
-                }).catch(error => {
-                    self.clearingData = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        getExportFileName(fileExtension) {
-            const nickname = this.userStore.currentUserNickname;
-
-            if (nickname) {
-                return this.$t('dataExport.exportFilename', {
-                    nickname: nickname
-                }) + '.' + fileExtension;
-            }
-
-            return this.$t('dataExport.defaultExportFilename') + '.' + fileExtension;
-        }
-    }
+    });
 }
+
+function exportData(fileType: string): void {
+    if (exportingData.value) {
+        return;
+    }
+
+    exportingData.value = true;
+
+    userStore.getExportedUserData(fileType).then(data => {
+        startDownloadFile(getExportFileName(fileType), data);
+        exportingData.value = false;
+    }).catch(error => {
+        exportingData.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function clearData(): void {
+    if (!currentPasswordForClearData.value) {
+        snackbar.value?.showMessage('Current password cannot be blank');
+        return;
+    }
+
+    if (clearingData.value) {
+        return;
+    }
+
+    confirmDialog.value?.open('Are you sure you want to clear all data?', { color: 'error' }).then(() => {
+        clearingData.value = true;
+
+        rootStore.clearUserData({
+            password: currentPasswordForClearData.value
+        }).then(() => {
+            clearingData.value = false;
+            currentPasswordForClearData.value = '';
+
+            snackbar.value?.showMessage('All user data has been cleared');
+            reloadUserDataStatistics(false);
+        }).catch(error => {
+            clearingData.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
+reloadUserDataStatistics(false);
 </script>

src/views/mobile/users/DataManagementPage.vue

@@ -1,6 +1,6 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
-        <f7-navbar :title="$t('Data Management')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('Data Management')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
             <f7-list-item title="Transactions" after="Count"></f7-list-item>
@@ -13,20 +13,20 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical" v-else-if="!loading">
-            <f7-list-item :title="$t('Transactions')" :after="displayDataStatistics.totalTransactionCount"></f7-list-item>
-            <f7-list-item :title="$t('Accounts')" :after="displayDataStatistics.totalAccountCount"></f7-list-item>
-            <f7-list-item :title="$t('Transaction Categories')" :after="displayDataStatistics.totalTransactionCategoryCount"></f7-list-item>
-            <f7-list-item :title="$t('Transaction Tags')" :after="displayDataStatistics.totalTransactionTagCount"></f7-list-item>
-            <f7-list-item :title="$t('Transaction Pictures')" :after="displayDataStatistics.totalTransactionPictureCount"></f7-list-item>
-            <f7-list-item :title="$t('Transaction Templates')" :after="displayDataStatistics.totalTransactionTemplateCount"></f7-list-item>
-            <f7-list-item :title="$t('Scheduled Transactions')" :after="displayDataStatistics.totalScheduledTransactionCount"></f7-list-item>
+            <f7-list-item :title="tt('Transactions')" :after="displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Accounts')" :after="displayDataStatistics ? displayDataStatistics.totalAccountCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Transaction Categories')" :after="displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Transaction Tags')" :after="displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Transaction Pictures')" :after="displayDataStatistics ? displayDataStatistics.totalTransactionPictureCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Transaction Templates')" :after="displayDataStatistics ? displayDataStatistics.totalTransactionTemplateCount : '-'"></f7-list-item>
+            <f7-list-item :title="tt('Scheduled Transactions')" :after="displayDataStatistics ? displayDataStatistics.totalScheduledTransactionCount : '-'"></f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical" :class="{ 'disabled': loading }">
             <f7-list-button :class="{ 'disabled': !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0' }"
-                            v-if="isDataExportingEnabled"
-                            @click="exportedData = null; showExportDataSheet = true">{{ $t('Export Data') }}</f7-list-button>
-            <f7-list-button color="red" @click="clearData(null)">{{ $t('Clear User Data') }}</f7-list-button>
+                            v-if="isDataExportingEnabled()"
+                            @click="exportedData = null; showExportDataSheet = true">{{ tt('Export Data') }}</f7-list-button>
+            <f7-list-button color="red" @click="clearData(null)">{{ tt('Clear User Data') }}</f7-list-button>
         </f7-list>
 
         <f7-sheet swipe-handler=".swipe-handler" style="height:auto"
@@ -36,33 +36,33 @@
             <div class="swipe-handler" style="z-index: 10"></div>
             <f7-page-content class="margin-top no-padding-top">
                 <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div class="ebk-sheet-title"><b>{{ $t('Are you sure you want to export all transaction data to file?') }}</b></div>
+                    <div class="ebk-sheet-title"><b>{{ tt('Are you sure you want to export all transaction data to file?') }}</b></div>
                 </div>
                 <div class="padding-bottom padding-horizontal">
                     <f7-list class="export-file-type-list no-margin" dividers>
                         <f7-list-item radio radio-icon="start" :class="{ 'disabled': exportingData || exportedData }"
-                                      :title="$t('CSV (Comma-separated values) File')"
+                                      :title="tt('CSV (Comma-separated values) File')"
                                       :checked="exportFileType === 'csv'" @change="exportFileType = 'csv'">
                         </f7-list-item>
                         <f7-list-item radio radio-icon="start" :class="{ 'disabled': exportingData || exportedData }"
-                                      :title="$t('TSV (Tab-separated values) File')"
+                                      :title="tt('TSV (Tab-separated values) File')"
                                       :checked="exportFileType === 'tsv'" @change="exportFileType = 'tsv'">
                         </f7-list-item>
                     </f7-list>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('It may take a long time, please wait for a few minutes.') }}</p>
-                    <f7-button large fill :class="{ 'disabled': exportingData }" :text="$t('Continue')" @click="exportData" v-if="!exportedData"></f7-button>
-                    <f7-button large fill external :text="$t('Save Data')" :download="exportFileName" :href="exportedData" target="_blank" v-if="exportedData"></f7-button>
+                    <p class="no-margin-top margin-bottom-half">{{ tt('It may take a long time, please wait for a few minutes.') }}</p>
+                    <f7-button large fill :class="{ 'disabled': exportingData }" :text="tt('Continue')" @click="exportData" v-if="!exportedData"></f7-button>
+                    <f7-button large fill external :text="tt('Save Data')" :download="exportFileName" :href="exportedData" target="_blank" v-if="exportedData"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link :class="{ 'disabled': exportingData }" @click="showExportDataSheet = false" :text="$t('Cancel')"></f7-link>
+                        <f7-link :class="{ 'disabled': exportingData }" @click="showExportDataSheet = false" :text="tt('Cancel')"></f7-link>
                     </div>
                 </div>
             </f7-page-content>
         </f7-sheet>
 
-        <password-input-sheet :title="$t('Are you sure you want to clear all data?')"
-                              :hint="$t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please enter your current password to confirm.')"
+        <password-input-sheet :title="tt('Are you sure you want to clear all data?')"
+                              :hint="tt('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please enter your current password to confirm.')"
                               :confirm-disabled="clearingData"
                               :cancel-disabled="clearingData"
                               color="red"
@@ -73,152 +73,113 @@
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useDataManagementPageBase } from '@/views/base/users/DataManagementPageBase.ts';
+
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import { isDataExportingEnabled } from '@/lib/server_settings.ts';
 
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            loading: true,
-            loadingError: null,
-            dataStatistics: null,
-            exportFileType: 'csv',
-            exportingData: false,
-            exportedData: null,
-            currentPasswordForClearData: '',
-            clearingData: false,
-            showExportDataSheet: false,
-            showInputPasswordSheetForClearData: false,
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore),
-        displayDataStatistics() {
-            const self = this;
+const { tt } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();
+const { dataStatistics, displayDataStatistics, getExportFileName } = useDataManagementPageBase();
 
-            if (!self.dataStatistics) {
-                return null;
-            }
+const rootStore = useRootStore();
+const userStore = useUserStore();
 
-            return {
-                totalTransactionCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCount),
-                totalAccountCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalAccountCount),
-                totalTransactionCategoryCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCategoryCount),
-                totalTransactionTagCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionTagCount),
-                totalTransactionPictureCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionPictureCount),
-                totalTransactionTemplateCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionTemplateCount),
-                totalScheduledTransactionCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalScheduledTransactionCount)
-            };
-        },
-        isDataExportingEnabled() {
-            return isDataExportingEnabled();
-        },
-        exportFileName() {
-            const nickname = this.userStore.currentUserNickname;
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-            if (nickname) {
-                return this.$t('dataExport.exportFilename', {
-                    nickname: nickname
-                }) + '.' + this.exportFileType;
-            }
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
+const exportFileType = ref<string>('csv');
+const exportingData = ref<boolean>(false);
+const exportedData = ref<string | null>(null);
+const currentPasswordForClearData = ref<string>('');
+const clearingData = ref<boolean>(false);
+const showExportDataSheet = ref<boolean>(false);
+const showInputPasswordSheetForClearData = ref<boolean>(false);
 
-            return this.$t('dataExport.defaultExportFilename') + '.' + this.exportFileType;
-        },
-    },
-    created() {
-        const self = this;
+const exportFileName = computed(() => getExportFileName(exportFileType.value));
 
-        self.loading = true;
+function reloadUserDataStatistics(): void {
+    loading.value = true;
 
-        self.userStore.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(this.f7router, 'loadingError');
-        },
-        exportData() {
-            const self = this;
+    userStore.getUserDataStatistics().then(dataStatisticsResponse => {
+        dataStatistics.value = dataStatisticsResponse;
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
 
-            self.$showLoading();
-            self.exportingData = true;
+function exportData(): void {
+    showLoading();
+    exportingData.value = true;
 
-            self.userStore.getExportedUserData(self.exportFileType).then(data => {
-                self.exportedData = URL.createObjectURL(data);
-                self.exportingData = false;
-                self.$hideLoading();
-            }).catch(error => {
-                self.exportedData = null;
-                self.exportingData = false;
-                self.$hideLoading();
+    userStore.getExportedUserData(exportFileType.value).then(data => {
+        exportedData.value = URL.createObjectURL(data);
+        exportingData.value = false;
+        hideLoading();
+    }).catch(error => {
+        exportedData.value = null;
+        exportingData.value = false;
+        hideLoading();
 
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        clearData(password) {
-            const self = this;
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
 
-            if (!password) {
-                self.currentPasswordForClearData = '';
-                self.showInputPasswordSheetForClearData = true;
-                return;
-            }
-
-            self.clearingData = true;
-            self.$showLoading(() => self.clearingData);
-
-            self.rootStore.clearUserData({
-                password: password
-            }).then(() => {
-                self.clearingData = false;
-                self.$hideLoading();
-
-                self.showInputPasswordSheetForClearData = false;
-                self.$toast('All user data has been cleared');
-
-                self.loading = true;
-
-                self.userStore.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);
-                    }
-                });
-            }).catch(error => {
-                self.clearingData = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
+function clearData(password: string | null): void {
+    if (!password) {
+        currentPasswordForClearData.value = '';
+        showInputPasswordSheetForClearData.value = true;
+        return;
     }
-};
+
+    clearingData.value = true;
+    showLoading(() => clearingData.value);
+
+    rootStore.clearUserData({
+        password: password
+    }).then(() => {
+        clearingData.value = false;
+        currentPasswordForClearData.value = '';
+        hideLoading();
+
+        showInputPasswordSheetForClearData.value = false;
+        showToast('All user data has been cleared');
+
+        reloadUserDataStatistics();
+    }).catch(error => {
+        clearingData.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+}
+
+reloadUserDataStatistics();
 </script>
 
 <style>