MaysWind
290 lines
12 KiB
Vue
290 lines
12 KiB
Vue
<template>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-card :class="{ 'disabled': loadingDataStatistics }">
|
|
<template #title>
|
|
<div class="d-flex align-center">
|
|
<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">{{ tt('Refresh') }}</v-tooltip>
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="6" sm="3" :key="idx" v-for="(item, idx) in [
|
|
{
|
|
title: 'Transactions',
|
|
count: displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-',
|
|
icon: icons.transactions,
|
|
color: 'info-darken-1'
|
|
},
|
|
{
|
|
title: 'Accounts',
|
|
count: displayDataStatistics ? displayDataStatistics.totalAccountCount : '-',
|
|
icon: icons.accounts,
|
|
color: 'primary'
|
|
},
|
|
{
|
|
title: 'Transaction Categories',
|
|
count: displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-',
|
|
icon: icons.categories,
|
|
color: 'teal'
|
|
},
|
|
{
|
|
title: 'Transaction Tags',
|
|
count: displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-',
|
|
icon: icons.tags,
|
|
color: 'secondary'
|
|
},
|
|
{
|
|
title: 'Transaction Pictures',
|
|
count: displayDataStatistics ? displayDataStatistics.totalTransactionPictureCount : '-',
|
|
icon: icons.pictures,
|
|
color: 'error-darken-1'
|
|
},
|
|
{
|
|
title: 'Transaction Templates',
|
|
count: displayDataStatistics ? displayDataStatistics.totalTransactionTemplateCount : '-',
|
|
icon: icons.templates,
|
|
color: 'secondary-darken-1'
|
|
},
|
|
{
|
|
title: 'Scheduled Transactions',
|
|
count: displayDataStatistics ? displayDataStatistics.totalScheduledTransactionCount : '-',
|
|
icon: icons.scheduledTransactions,
|
|
color: 'success-darken-1'
|
|
}
|
|
]">
|
|
<div class="d-flex align-center">
|
|
<div class="me-3">
|
|
<v-avatar rounded :color="item.color" size="42" class="elevation-1">
|
|
<v-icon size="24" :icon="item.icon"/>
|
|
</v-avatar>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column">
|
|
<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>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" v-if="isDataExportingEnabled()">
|
|
<v-card :class="{ 'disabled': exportingData }" :title="tt('Export Data')">
|
|
<v-card-text>
|
|
<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">
|
|
<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>{{ tt('CSV (Comma-separated values) File') }}</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="exportData('tsv')">
|
|
<v-list-item-title>{{ tt('TSV (Tab-separated values) File') }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
<v-card :class="{ 'disabled': clearingData }">
|
|
<template #title>
|
|
<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"/>
|
|
{{ 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>
|
|
|
|
<v-card-text class="pb-0">
|
|
<v-row class="mb-3">
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
autocomplete="current-password"
|
|
ref="currentPasswordInput"
|
|
type="password"
|
|
variant="underlined"
|
|
color="error"
|
|
:disabled="loadingDataStatistics || clearingData"
|
|
:placeholder="tt('Current Password')"
|
|
v-model="currentPasswordForClearData"
|
|
@keyup.enter="clearData"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-text class="d-flex flex-wrap gap-4">
|
|
<v-btn color="error" :disabled="loadingDataStatistics || !currentPasswordForClearData || clearingData" @click="clearData">
|
|
{{ tt('Clear User Data') }}
|
|
<v-progress-circular indeterminate size="22" class="ml-2" v-if="clearingData"></v-progress-circular>
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<confirm-dialog ref="confirmDialog"/>
|
|
<snack-bar ref="snackbar" />
|
|
</template>
|
|
|
|
<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.ts';
|
|
import { useUserStore } from '@/stores/user.ts';
|
|
|
|
import { isEquals } from '@/lib/common.ts';
|
|
import { isDataExportingEnabled } from '@/lib/server_settings.ts';
|
|
import { startDownloadFile } from '@/lib/ui/common.ts';
|
|
|
|
import {
|
|
mdiRefresh,
|
|
mdiListBoxOutline,
|
|
mdiCreditCardOutline,
|
|
mdiViewDashboardOutline,
|
|
mdiTagOutline,
|
|
mdiClipboardTextOutline,
|
|
mdiImage,
|
|
mdiClipboardTextClockOutline,
|
|
mdiAlert
|
|
} from '@mdi/js';
|
|
|
|
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');
|
|
}
|
|
}
|
|
|
|
dataStatistics.value = dataStatisticsResponse;
|
|
loadingDataStatistics.value = false;
|
|
}).catch(error => {
|
|
loadingDataStatistics.value = false;
|
|
|
|
if (!error.processed) {
|
|
snackbar.value?.showError(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
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>
|