mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 15:37:33 +08:00
migrate user data management page to composition API and typescript
This commit is contained in:
MaysWind
@@ -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.') }} {{ $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.') }} {{ 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>
|
||||
|
||||
Reference in New Issue
Block a user