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
@@ -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>