diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js index fc4ed81c5..07f88cccc 100644 --- a/public/js/components/filter/Filter.js +++ b/public/js/components/filter/Filter.js @@ -91,7 +91,6 @@ export const CoreFilterCmpt = { dataset: null, datasetMetadata: null, selectedFields: null, - notSelectedFields: null, filterFields: null, availableFilters: null, @@ -103,6 +102,8 @@ export const CoreFilterCmpt = { fetchCmptApiFunctionParams: null, fetchCmptDataFetched: null, + fetchResult: null, + tabulator: null, tableBuilt: false, tabulatorHasSelector: false, @@ -118,6 +119,11 @@ export const CoreFilterCmpt = { }; }, computed: { + notSelectedFields() { + if (!this.fields || !this.selectedFields) + return null; + return this.fields.filter(x => this.selectedFields.indexOf(x) === -1) + }, filteredData() { if (!this.dataset) return []; @@ -215,6 +221,32 @@ export const CoreFilterCmpt = { await this.$p.loadCategory('ui'); placeholder = this.$p.t('ui/keineDatenVorhanden'); } + + if (!this.tableOnly) { + // prefetch data to get fields & selectedFields for filteredColumns & filteredData + await new Promise(resolve => { + const filterId = window.location.hash ? window.location.hash.slice(1) : null; + + const resolvePromiseFunc = data => { + this.setRenderData(data); + resolve(); + }; + // get the filter data + if (filterId === null) + this.startFetchCmpt( + wsParams => this.$api.call(ApiFilter.getFilter(wsParams)), + null, + resolvePromiseFunc + ); + else + this.startFetchCmpt( + wsParams => this.$api.call(ApiFilter.getFilterById(wsParams)), + { filterId }, + resolvePromiseFunc + ); + }); + } + // Define a default tabulator options in case it was not provided let tabulatorOptions = {...{ layout: "fitDataStretchFrozen", @@ -236,6 +268,11 @@ export const CoreFilterCmpt = { if (!this.tableOnly) { tabulatorOptions.data = this.filteredData; tabulatorOptions.columns = this.filteredColumns; + } else { + tabulatorOptions.columns.forEach(col => { + if (col.visible === undefined) + col.visible = true; + }); } if (tabulatorOptions.selectable || (tabulatorOptions.columns && tabulatorOptions.columns.filter(el => el.formatter == 'rowSelection').length)) @@ -355,18 +392,14 @@ export const CoreFilterCmpt = { this.render ); }, - /** - * - */ - render(response) { - let data = response; + setRenderData(data) { + this.fetchResult = data; this.filterName = data.filterName; this.dataset = data.dataset; this.datasetMetadata = data.datasetMetadata; this.fields = data.fields; this.selectedFields = data.selectedFields; - this.notSelectedFields = this.fields.filter(x => this.selectedFields.indexOf(x) === -1); this.filterFields = []; for (let i = 0; i < data.datasetMetadata.length; i++) @@ -383,6 +416,14 @@ export const CoreFilterCmpt = { } } } + }, + /** + * + */ + render(response) { + let data = response; + + this.setRenderData(data); // If the side menu is active if (this.sideMenu === true) @@ -623,11 +664,10 @@ export const CoreFilterCmpt = { this.$emit('uuidDefined', this.uuid) }, mounted() { - this.initTabulator().then(() => { if (!this.tableOnly) { this.selectedFilter = window.location.hash ? window.location.hash.slice(1) : null; - this.getFilter(); // get the filter data + this.render(this.fetchResult); } });