support export to tsv file

This commit is contained in:
MaysWind
2023-10-29 17:30:20 +08:00
parent 429e270a9e
commit dc837c430f
14 changed files with 443 additions and 295 deletions
+8 -2
View File
@@ -214,8 +214,14 @@ export default {
getUserDataStatistics: () => {
return axios.get('v1/data/statistics.json');
},
getExportedUserData: () => {
return axios.get('v1/data/export.csv');
getExportedUserData: (fileType) => {
if (fileType === 'csv') {
return axios.get('v1/data/export.csv');
} else if (fileType === 'tsv') {
return axios.get('v1/data/export.tsv');
} else {
return Promise.reject('Parameter Invalid');
}
},
clearData: ({ password }) => {
return axios.post('v1/data/clear.json', {
+5 -2
View File
@@ -560,6 +560,7 @@ export default {
'api not found': 'Failed to request api',
'not implemented': 'Not implemented',
'system is busy': 'System is busy',
'not supported': 'Not supported',
'database operation failed': 'Database operation failed',
'SMTP server is not enabled': 'SMTP server is not enabled',
'incomplete or incorrect submission': 'Incomplete or incorrect submission',
@@ -1087,9 +1088,11 @@ export default {
'Data Management': 'Data Management',
'Unable to get user statistics data': 'Unable to get user statistics data',
'Export Data': 'Export Data',
'Export Data To CSV File': 'Export Data To CSV File',
'Export Data To TSV File': 'Export Data To TSV File',
'Clear User Data': 'Clear User Data',
'Export all data to csv file.': 'Export all data to csv file.',
'Are you sure you want to export all data to csv file?': 'Are you sure you want to export all data to csv file?',
'Export all data to file.': 'Export all data to file.',
'Are you sure you want to export all data to file?': 'Are you sure you want to export all data to file?',
'It may take a long time, please wait for a few minutes.': 'It may take a long time, please wait for a few minutes.',
'Unable to get exported user data': 'Unable to get exported user data',
'Save Data': 'Save Data',
+5 -2
View File
@@ -560,6 +560,7 @@ export default {
'api not found': '接口调用失败',
'not implemented': '未实现',
'system is busy': '系统繁忙',
'not supported': '不支持',
'database operation failed': '数据库操作失败',
'SMTP server is not enabled': 'SMTP 服务器没有启用',
'incomplete or incorrect submission': '提交不完整或不正确',
@@ -1087,9 +1088,11 @@ export default {
'Data Management': '数据管理',
'Unable to get user statistics data': '无法获取用户统计数据',
'Export Data': '导出数据',
'Export Data To CSV File': '导出数据到 CSV 文件',
'Export Data To TSV File': '导出数据到 TSV 文件',
'Clear User Data': '清除用户数据',
'Export all data to csv file.': '导出所有数据到 csv 文件。',
'Are you sure you want to export all data to csv file?': '您确定要导出所有数据到 csv 文件?',
'Export all data to file.': '导出所有数据到文件。',
'Are you sure you want to export all data to file?': '您确定要导出所有数据到文件?',
'It may take a long time, please wait for a few minutes.': '这可能花费一些时间,请稍等几分钟。',
'Unable to get exported user data': '无法获取导出的用户数据',
'Save Data': '保存数据',
+10 -5
View File
@@ -131,12 +131,17 @@ export const useUserStore = defineStore('user', {
});
});
},
getExportedUserData() {
getExportedUserData(fileType) {
return new Promise((resolve, reject) => {
services.getExportedUserData().then(response => {
if (response && response.headers && response.headers['content-type'] !== 'text/csv') {
reject({ message: 'Unable to get exported user data' });
return;
services.getExportedUserData(fileType).then(response => {
if (response && response.headers) {
if (fileType === 'csv' && response.headers['content-type'] !== 'text/csv') {
reject({ message: 'Unable to get exported user data' });
return;
} else if (fileType === 'tsv' && response.headers['content-type'] !== 'text/tab-separated-values') {
reject({ message: 'Unable to get exported user data' });
return;
}
}
const blob = new Blob([response.data], { type: response.headers['content-type'] });
@@ -85,14 +85,27 @@
<v-col cols="12" v-if="isDataExportingEnabled">
<v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
<v-card-text>
<span class="text-body-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
<span class="text-body-1">{{ $t('Export all data to file.') }}&nbsp;{{ $t('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 :disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'" @click="exportData">
{{ $t('Export Data') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="exportingData"></v-progress-circular>
</v-btn>
<v-btn-group variant="elevated" density="comfortable" color="primary"
:disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'">
<v-btn>
{{ $t('Export Data') }}
<v-progress-circular indeterminate size="24" 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('Export Data To CSV File') }}</v-list-item-title>
</v-list-item>
<v-list-item @click="exportData('tsv')">
<v-list-item-title>{{ $t('Export Data To TSV File') }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
</v-btn-group>
</v-card-text>
</v-card>
</v-col>
@@ -209,17 +222,6 @@ export default {
},
isDataExportingEnabled() {
return isDataExportingEnabled();
},
exportFileName() {
const nickname = this.userStore.currentUserNickname;
if (nickname) {
return this.$t('dataExport.exportFilename', {
nickname: nickname
}) + '.csv';
}
return this.$t('dataExport.defaultExportFilename') + '.csv';
}
},
created() {
@@ -250,7 +252,7 @@ export default {
}
});
},
exportData() {
exportData(fileType) {
const self = this;
if (self.exportingData) {
@@ -259,8 +261,8 @@ export default {
self.exportingData = true;
self.userStore.getExportedUserData().then(data => {
startDownloadFile(self.exportFileName, data);
self.userStore.getExportedUserData(fileType).then(data => {
startDownloadFile(self.getExportFileName(fileType), data);
self.exportingData = false;
}).catch(error => {
self.exportingData = false;
@@ -301,6 +303,17 @@ export default {
}
});
});
},
getExportFileName(fileExtension) {
const nickname = this.userStore.currentUserNickname;
if (nickname) {
return this.$t('dataExport.exportFilename', {
nickname: nickname
}) + '.' + fileExtension;
}
return this.$t('dataExport.defaultExportFilename') + '.' + fileExtension;
}
}
}
+23 -4
View File
@@ -30,7 +30,19 @@
<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 data to csv file?') }}</b></div>
<div class="ebk-sheet-title"><b>{{ $t('Are you sure you want to export all 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('Export Data To CSV File')"
:checked="exportFileType === 'csv'" @change="exportFileType = 'csv'">
</f7-list-item>
<f7-list-item radio radio-icon="start" :class="{ 'disabled': exportingData || exportedData }"
:title="$t('Export Data To TSV 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>
@@ -73,6 +85,7 @@ export default {
loading: true,
loadingError: null,
dataStatistics: null,
exportFileType: 'csv',
exportingData: false,
exportedData: null,
currentPasswordForClearData: '',
@@ -109,10 +122,10 @@ export default {
if (nickname) {
return this.$t('dataExport.exportFilename', {
nickname: nickname
}) + '.csv';
}) + '.' + this.exportFileType;
}
return this.$t('dataExport.defaultExportFilename') + '.csv';
return this.$t('dataExport.defaultExportFilename') + '.' + this.exportFileType;
},
},
created() {
@@ -142,7 +155,7 @@ export default {
self.$showLoading();
self.exportingData = true;
self.userStore.getExportedUserData().then(data => {
self.userStore.getExportedUserData(self.exportFileType).then(data => {
self.exportedData = URL.createObjectURL(data);
self.exportingData = false;
self.$hideLoading();
@@ -202,3 +215,9 @@ export default {
}
};
</script>
<style>
.export-file-type-list.list > ul > li > .item-content {
padding-left: 0;
}
</style>