From a63a79ab91a2a2233e974328ad0e7ff0efc327ae Mon Sep 17 00:00:00 2001 From: cgfhtw Date: Fri, 7 Apr 2023 14:10:30 +0200 Subject: [PATCH] add param tableOnly & save for multiple components on one page --- public/js/components/filter/Filter.js | 247 +++++++++++++++----------- 1 file changed, 142 insertions(+), 105 deletions(-) diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js index e153042ad..7a46fd629 100644 --- a/public/js/components/filter/Filter.js +++ b/public/js/components/filter/Filter.js @@ -23,6 +23,8 @@ import {CoreFetchCmpt} from '../../components/Fetch.js'; const FILTER_COMPONENT_NEW_FILTER = 'Filter Component New Filter'; const FILTER_COMPONENT_NEW_FILTER_TYPE = 'Filter Component New Filter Type'; +var _uuid = 0; + /** * */ @@ -42,10 +44,12 @@ export const CoreFilterCmpt = { required: true }, tabulatorOptions: Object, - tabulatorEvents: Array + tabulatorEvents: Array, + tableOnly: Boolean }, data: function() { return { + uuid: 0, // FilterCmpt properties filterName: null, fields: null, @@ -54,7 +58,6 @@ export const CoreFilterCmpt = { selectedFields: null, notSelectedFields: null, filterFields: null, - columnsAlias: null, availableFilters: null, @@ -64,104 +67,136 @@ export const CoreFilterCmpt = { fetchCmptApiFunctionParams: null, fetchCmptDataFetched: null, - tabulator: null + tabulator: null, + tableBuilt: false }; }, - created: function() { - this.getFilter(); // get the filter data - }, - updated: function() { - // - let dataset = JSON.parse(JSON.stringify(this.dataset)); - let fields = JSON.parse(JSON.stringify(this.fields)); - let selectedFields = JSON.parse(JSON.stringify(this.selectedFields)); + computed: { + filteredData() { + if (!this.dataset) + return []; + return JSON.parse(JSON.stringify(this.dataset)); + }, + filteredColumns() { + let fields = JSON.parse(JSON.stringify(this.fields)) || []; + let selectedFields = JSON.parse(JSON.stringify(this.selectedFields)) || []; - // - let columns = null; + let columns = null; - // If the tabulator options has been provided and it contains the property columns - if (this.tabulatorOptions != null && this.tabulatorOptions.hasOwnProperty('columns')) - { - columns = this.tabulatorOptions.columns; - } + // If the tabulator options has been provided and it contains the property columns + if (this.tabulatorOptions && this.tabulatorOptions.hasOwnProperty('columns')) + columns = this.tabulatorOptions.columns; - // If columns is not an array or it is an array with less elements then the array fields - if (!Array.isArray(columns) || (Array.isArray(columns) && columns.length < fields.length)) - { - columns = []; // set it as an empty array - - // Loop throught all the retrieved columns from database - for (let i = 0; i < fields.length; i++) + // If columns is not an array or it is an array with less elements then the array fields + if (!Array.isArray(columns) || (Array.isArray(columns) && columns.length < fields.length)) { - // Create a new column having the title equal to the field name - let column = { - title: fields[i], - field: fields[i] - }; + columns = []; // set it as an empty array - // If the column has to be displayed or not - selectedFields.indexOf(fields[i]) >= 0 ? column.visible = true : column.visible = false; - - // Add the new column to the list of columns - columns.push(column); - } - } - else // the property columns has been provided in the tabulator options - { - // Loop throught the property columns of the tabulator options - for (let i = 0; i < columns.length; i++) - { - // If the column has to be displayed or not - selectedFields.indexOf(columns[i].field) >= 0 ? columns[i].visible = true : columns[i].visible = false; - - if (columns[i].hasOwnProperty('resizable')) + // Loop throught all the retrieved columns from database + for (let field of fields) { - columns[i].visible ? columns[i].resizable = true : columns[i].resizable = false; - } + // Create a new column having the title equal to the field name + let column = { + title: field, + field: field + }; + + // If the column has to be displayed or not + column.visible = selectedFields.indexOf(field) >= 0; + + // Add the new column to the list of columns + columns.push(column); + } } - } - - this.columnsAlias = columns; - - // Define a default tabulator options in case it was not provided - let tabulatorOptions = { - height: 500, - layout: "fitColumns", - movableColumns: true, - reactiveData: true, - columns: columns, - data: JSON.parse(JSON.stringify(this.dataset)) - }; - - // If it was provided - if (this.tabulatorOptions != null) - { - // Then copy it... - tabulatorOptions = this.tabulatorOptions; - // ...and overwrite the properties data, reactiveData, movableColumns and columns - tabulatorOptions.data = JSON.parse(JSON.stringify(this.dataset)); - tabulatorOptions.columns = columns; - tabulatorOptions.reactiveData = true; - tabulatorOptions.movableColumns = true; - } - - // Start the tabulator with the buid options - this.tabulator = new Tabulator( - "#filterTableDataset", - tabulatorOptions - ); - - // If event handlers have been provided - if (Array.isArray(this.tabulatorEvents) && this.tabulatorEvents.length > 0) - { - // Attach all the provided event handlers to the started tabulator - for (let i = 0; i < this.tabulatorEvents.length; i++) + else // the property columns has been provided in the tabulator options { - this.tabulator.on(this.tabulatorEvents[i].event, this.tabulatorEvents[i].handler); + // Loop throught the property columns of the tabulator options + for (let col of columns) + { + // If the column has to be displayed or not + col.visible = selectedFields.indexOf(col.field) >= 0; + + if (col.hasOwnProperty('resizable')) + col.resizable = col.visible; + } } + + return columns; + }, + fieldNames() { + if (!this.tableBuilt) + return {}; + return this.tabulator.getColumns().reduce((res, col) => { + res[col.getField()] = col.getDefinition().title; + return res; + }, {}); + }, + idExtra() { + if (!this.uuid) + return ''; + return '-' + this.uuid; } }, + beforeCreate() { + if (!this.tableOnly == !this.filterType) + console.warn('You can not have a filter-type in table-only mode!'); + }, + created() { + this.uuid = _uuid++; + if (!this.tableOnly) + this.getFilter(); // get the filter data + }, + mounted() { + this.initTabulator(); + }, methods: { + initTabulator() { + // Define a default tabulator options in case it was not provided + let tabulatorOptions = {...{ + height: 500, + layout: "fitColumns", + movableColumns: true, + reactiveData: true + }, ...(this.tabulatorOptions || {})}; + + if (!this.tableOnly) { + tabulatorOptions.data = this.filteredData; + tabulatorOptions.columns = this.filteredColumns; + } + + // Start the tabulator with the build options + this.tabulator = new Tabulator( + this.$refs.table, + tabulatorOptions + ); + // If event handlers have been provided + if (Array.isArray(this.tabulatorEvents) && this.tabulatorEvents.length > 0) + { + // Attach all the provided event handlers to the started tabulator + for (let evt of this.tabulatorEvents) + this.tabulator.on(evt.event, evt.handler); + } + this.tabulator.on('tableBuilt', () => this.tableBuilt = true); + if (this.tableOnly) { + this.tabulator.on('tableBuilt', () => { + const cols = this.tabulator.getColumns(); + this.fields = cols.map(col => col.getField()); + this.selectedFields = cols.filter(col => col.isVisible()).map(col => col.getField()); + }); + } + }, + updateTabulator() { + if (this.tabulator) { + if (this.tableBuilt) + this._updateTabulator(); + else + this.tabulator.on('tableBuilt', this._updateTabulator); + } + }, + _updateTabulator() { + this.tabulator.setData(this.filteredData); + this.tabulator.setColumns(this.filteredColumns); + }, /** * */ @@ -209,6 +244,7 @@ export const CoreFilterCmpt = { { this.setDropDownMenu(data); } + this.updateTabulator(); } else { @@ -335,7 +371,7 @@ export const CoreFilterCmpt = { this.startFetchCmpt( CoreFilterAPIs.saveCustomFilter, { - customFilterName: document.getElementById('customFilterName').value + customFilterName: this.$refscustomFilterName.value }, this.getFilter ); @@ -463,22 +499,22 @@ export const CoreFilterCmpt = { /* * */ - handlerToggleSelectedField: function(event) { + handlerToggleSelectedField(field) { // If it is a selected field - if (this.selectedFields.indexOf(event.target.innerText) != -1) + if (this.selectedFields.indexOf(field) != -1) { // then hide it - this.tabulator.hideColumn(event.target.innerText); + this.tabulator.hideColumn(field); // and remove it from the this.selectedFields property - this.selectedFields.splice(this.selectedFields.indexOf(event.target.innerText), 1); + this.selectedFields.splice(this.selectedFields.indexOf(field), 1); } else // otherwise { // show it - this.tabulator.showColumn(event.target.innerText); + this.tabulator.showColumn(field); // and add it to the this.selectedFields property - this.selectedFields.push(event.target.innerText); + this.selectedFields.push(field); } }, /** @@ -527,6 +563,7 @@ export const CoreFilterCmpt = { template: ` -
+
- [ {{ filterName }} ] - - + [ {{ filterName }} ] + +
-
+
@@ -558,9 +595,9 @@ export const CoreFilterCmpt = {
- {{ fieldToDisplay }} + {{ fieldNames[fieldToDisplay] || fieldToDisplay }}
@@ -568,7 +605,7 @@ export const CoreFilterCmpt = {
-
+
@@ -591,7 +628,7 @@ export const CoreFilterCmpt = {
-
+