As the title suggests i cant for the life of me find a way to give the exported file a name except "Pivot"
The HTML/Vue part only has the Pivot and a select dropdown that filters by date and that works fine, it's only the export that i'm struggling with
<template>
<v-card>
<v-progress-linear
v-if="loading"
class="position-absolute"
style="z-index: 1"
color="red"
height="10"
indeterminate></v-progress-linear>
<v-card-title style="text-align:center"> Reports </v-card-title>
<v-card-text v-if="!loading">
<v-row>
<v-col cols="3" offset="1">
<v-select
v-model="selectedDate"
:items="reportdates"
label="Period:"
item-title="rd_date_label"
item-value="rd_date"
density="compact"
hide-details>
</v-select>
</v-col>
</v-row>
<br />
<v-row>
<Pivot id="pivotid"
ref="pivotref"
height="650px"
:report="report"
:toolbar="toolbar"
:beforetoolbarcreated="beforetoolbarcreated">
</Pivot>
</v-row>
</v-card-text>
</v-card>
</template>
Javascript part with my methods and data structure
<script>
import { mapGetters } from 'vuex'
import 'webdatarocks/webdatarocks.css'
import Pivot from "../../Common/Pivot.vue";
import '../../Common/webdatarocks.css';
export default {
name: 'Reports',
props: {
curDate: String,
},
components: {
Pivot
},
computed: {
...mapGetters (['reportdates', 'worktask']),
},
mounted() {
},
created() {
this.loadingData();
},
data() {
return {
isAdmin: null,
loading: false,
loaded: {
reportdates: false,
worktask: false,
},
selectedDate: null,
datachanged: null,
toolbar: true,
beforetoolbarcreated: this.customizeToolbar,
report: {
dataSource: {
data: [],
},
formats: [{
name: "hours",
maxDecimalPlaces: 2,
maxSymbols: 20,
textAlign: "right"
}],
slice: {
rows: [{
uniqueName: "Employee"
}
// ,{
// uniqueName: "Date"
// },
],
columns: [
{
uniqueName: "Client"
},
{
uniqueName: "[Measures]"
},],
measures: [{
uniqueName: "Hours",
aggregation: "sum",
format: "hours"
}]
},
options: {
grid: {
type: "compact",
title: "",
showFilter: true,
showHeaders: true,
showTotals: true,
showGrandTotals: "on",
showHierarchies: true,
showHierarchyCaptions: true,
showReportFiltersArea: true
},
configuratorActive: false,
configuratorButton: true,
showAggregations: true,
showCalculatedValuesButton: true,
drillThrough: true,
showDrillThroughConfigurator: true,
sorting: "on",
datePattern: "dd/MM/yyyy",
dateTimePattern: "dd/MM/yyyy HH:mm:ss",
saveAllFormats: false,
showDefaultSlice: true,
defaultHierarchySortName: "asc",
},
}
}
},
watch: {
reportdates() {
this.loaded.reportdates = true;
let fdate = this.reportdates.find(r => r.rd_date_label === this.curDate);
this.selectedDate = fdate.rd_date;
this.checkLoading();
},
worktask() {
this.loaded.worktask = true;
this.checkLoading();
//console.log('worktask: ' + this.worktask.length);
this.report.dataSource.data = this.getJSONData();
},
async selectedDate() {
//console.log('selectedDate: ' + this.selectedDate);
let fdate = this.reportdates.find(r => r.rd_date_label === this.curDate);
let tUserEmail = window.Laravel.user.email;
let tUserId = window.Laravel.user.id;
if(window.Laravel.user.role === "USR"){
if (fdate.rd_date == this.selectedDate) {
this.report.dataSource.data = [];
this.$store.dispatch('fetchWorkTaskReportDataUser', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
} else {
let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
const params = Object.assign({}, this.$route.params);
params.curDate = dstr;
await this.$router.push({ params });
this.$router.go();
}
}else{
if (fdate.rd_date == this.selectedDate) {
this.report.dataSource.data = [];
this.$store.dispatch('fetchWorkTaskReportData', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
} else {
let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
const params = Object.assign({}, this.$route.params);
params.curDate = dstr;
await this.$router.push({ params });
this.$router.go();
}
}
// if (fdate.rd_date == this.selectedDate) {
// this.report.dataSource.data = [];
// this.$store.dispatch('fetchWorkTaskReportDataUser', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
// } else {
// let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
// const params = Object.assign({}, this.$route.params);
// params.curDate = dstr;
// await this.$router.push({ params });
// this.$router.go();
// }
}
},
methods: {
loadingData() {
this.loading = true;
// let tUserId = window.Laravel.user.id;
// if(window.Laravel.user.role === "ADM"){
// console.log("Admin");
// this.$store.dispatch('fetchReportDates',{
// tUserId : tUserId,
// });
// }else{
// console.log("User");
// this.$store.dispatch('fetchReportDatesUser',{
// tUserId : tUserId,
// })}
this.$store.dispatch('fetchReportDates',{
// tUserId : tUserId,
})
},
checkLoading() {
this.loading = !(this.loaded.reportdates && this.loaded.worktask);
},
getText(item) {
return item;
},
customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function() {
delete tabs[0];
delete tabs[1];
delete tabs[2];
delete tabs[7];
return tabs;
}
},
getJSONData() {
return this.worktask
for(let r=0; r < this.worktask.length; r++){
returns.push(this.worktask[r]);
}
return returns;
},
},
}
