From daf432fe8d1f23da6fb56b297b659c571c616077 Mon Sep 17 00:00:00 2001 From: Harald Bamberger Date: Fri, 15 Nov 2024 15:14:15 +0100 Subject: [PATCH 01/12] port changes made for BS3 => BS5 to version of current master to get rid of many whitespace and code formating changes and only have functional changes --- public/js/TableWidget.js | 1831 +++++++++++++++++++------------------- 1 file changed, 918 insertions(+), 913 deletions(-) diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 4d9d66574..7cf778669 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -14,755 +14,764 @@ const DATASET_REP_TABULATOR = "tabulator"; * FHC_TableWidget this object is used to render the GUI of a table widget and to operate with it */ var FHC_TableWidget = { - //------------------------------------------------------------------------------------------------------------------ - // Properties - - _datasetRepresentation: null, // contains the current data representation - - _bootstrapVersion: 3, - //------------------------------------------------------------------------------------------------------------------ - // Public methods - - /** - * To display the TableWidget using the loaded data prenset in the session - */ - display: function () { - FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget); - }, - - /** - * Alias call to method display only to inprove the readability of the code - */ - refresh: function () { - FHC_TableWidget.display(); - }, - - //------------------------------------------------------------------------------------------------------------------ - // Private methods - - /** - * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT - */ - _getTableUniqueIdPrefix: function () { - return ( - FHC_JS_DATA_STORAGE_OBJECT.called_path + - "/" + - FHC_JS_DATA_STORAGE_OBJECT.called_method - ); - }, - - /** - * Utility method that checks if data contains an error and print that to the console - * otherwise the TableWidget GUI is refreshed - */ - _failOrRefresh: function (data, textStatus, jqXHR) { - if (FHC_AjaxClient.isError(data)) { - console.log(FHC_AjaxClient.getError(data)); - } else { - FHC_TableWidget.refresh(); - } - }, - - /** - * Utility method that checks if data contains an error and print that to the console - * otherwise the page is reloaded - */ - _failOrReload: function (data, textStatus, jqXHR) { - if (FHC_AjaxClient.isError(data)) { - console.log(FHC_AjaxClient.getError(data)); - } else { - location.reload(); - } - }, - - /** - * To reset the Table Widget GUI - */ - _resetGUI: function (tableWidgetDiv) { - // If the choosen dataset representation is tablesorter - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) { - tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html(""); - tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html(""); - } - - // If the choosen dataset representation is pivotUI - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) { - tableWidgetDiv.find("#tableWidgetPivotUI").html(""); - } - - // If the choosen dataset representation is tabulator - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) { - tableWidgetDiv.find("#tableWidgetTabulator").html(""); - } - }, - - /** - * To get via Ajax all the data related to the TableWidget present in the given page - * If the parameter renderFunction is a valid function, is called on success - */ - _getTables: function (renderFunction) { - var tableWidgetUniqueIdArray = - FHC_TableWidget._getTableWidgetUniqueIdArray(); - - for ( - var tableWidgetsCounter = 0; - tableWidgetsCounter < tableWidgetUniqueIdArray.length; - tableWidgetsCounter++ - ) { - FHC_AjaxClient.ajaxCallGet( - "widgets/Tables/getTable", - { - tableUniqueId: - FHC_TableWidget._getTableUniqueIdPrefix() + - "/" + - tableWidgetUniqueIdArray[tableWidgetsCounter], - }, - { - successCallback: function (data, textStatus, jqXHR) { - if (FHC_AjaxClient.hasData(data)) { - if (typeof renderFunction == "function") { - renderFunction(FHC_AjaxClient.getData(data)); - } - } else { - console.log(FHC_AjaxClient.getError(data)); - } - }, - } - ); - } - }, - - /** - * This method calls all the other methods needed to rendere the GUI for a TableWidget - * The parameter data contains all the data about the TableWidget and it is given as parameter - * to all the methods that here are called - * NOTE: think very carefully before changing the order of the calls - */ - _renderTableWidget: function (data) { - FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen - - FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget - - var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]'); - - FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off - - FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI - - FHC_TableWidget._renderDataset(tableWidgetDiv, data); - - FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off - - FHC_TableWidget._onTableBuilt(tableWidgetDiv, data); - }, - - _onTableBuilt: function (tableWidgetDiv, data) { - var options = FHC_TableWidget._getRepresentationOptions(data); - - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("on", "tableBuilt", () => { - if ( - typeof options.tableWidgetHeader == "undefined" || - (typeof options.tableWidgetHeader != "undefined" && - options.tableWidgetHeader != false) - ) { - // renders the table headers - var tabulatorHeaderCollapseHTML = - _renderTabulatorHeaderCollapseHTML(tableWidgetDiv); - tableWidgetDiv - .find("#tableWidgetHeader") - .after(tabulatorHeaderCollapseHTML); - } - - // makes the table headers toggle visibility when clicking on them - tableWidgetDiv.find(".btn-select-col").on("click", function () { - var selected = this.value; - - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("toggleColumn", selected); - - // toggle class to color button as selected / deselected - $(this).toggleClass("btn-select-col-selected").blur(); // blur removes automatic focus - }); - }); - }, - - /** - * Turns all the events off - * NOTE: must be aligned to _turnOnEvents - */ - _turnOffEvents: function (tableWidgetDiv) { - // If the choosen dataset representation is tablesorter - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) { - FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter - } - }, - - /** - * Turns all the events on - * NOTE: must be aligned to _turnOffEvents - */ - _turnOnEvents: function (tableWidgetDiv) { - var tableUniqueId = tableWidgetDiv.attr("tableUniqueId"); - - // If the choosen dataset representation is tablesorter - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) { - FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter - } - - // If the choosen dataset representation is tabulator - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) { - // --------------------------------------------------------------------------------------------------------- - // Add events to the elements - // --------------------------------------------------------------------------------------------------------- - - // Click-Event to download csv - tableWidgetDiv.find("#download-csv").on("click", function () { - // BOM for correct UTF-8 char output - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("download", "csv", "data.csv", { bom: true }); - }); - - // Click-Event to toggle the collapsable help panel - tableWidgetDiv.find("#help").on("click", function () { - // Hide the collapsable settings panel, if it actually shown - $("#tabulatorSettings-" + tableUniqueId).collapse("hide"); - - // Toggle the collapsable help panel - $("#tabulatorHelp-" + tableUniqueId).collapse("toggle"); - }); - - // Click-Event to toggle the collapsable settings panel - tableWidgetDiv.find("#settings").on("click", function () { - // Hide the collapsable help panel, if it actually shown - $("#tabulatorHelp-" + tableUniqueId).collapse("hide"); - - // Toggle the collapsable settings panel - $("#tabulatorSettings-" + tableUniqueId).collapse("toggle"); - }); - - /* Beautify button group behaviour - * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels - * Also remove the disturbing button focus behaviour - */ - $(".btn-group > .btn").click(function () { - if ($(this).hasClass("active")) { - $(this).removeClass("active").css("outline", "none"); - } else { - $(this) - .addClass("active") - .css("outline", "none") - .siblings() - .removeClass("active"); - } - }); - - /** - * Click-Event to select all rows - * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton. - */ - if (typeof tableWidgetHook_selectAllButton == "function") { - tableWidgetDiv.find("#select-all").on("click", function () { - tableWidgetHook_selectAllButton(tableWidgetDiv); - }); - } else { - tableWidgetDiv.find("#select-all").on("click", function () { - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("selectRow", true); - }); - } - - // Click-Event to deselect all rows - tableWidgetDiv.find("#deselect-all").on("click", function () { - tableWidgetDiv.find("#tableWidgetTabulator").tabulator("deselectRow"); - }); - - // Click-Event to toggle column-picker columns - //! this event was moved to the _onTableBuilt function - } - }, - - _renderDataset: function (tableWidgetDiv, data) { - // If the choosen dataset representation is tablesorter then... - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) { - FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI - } - - // If the choosen dataset representation is pivotUI then... - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) { - FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI - } - - // If the choosen dataset representation is tabulator then... - if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) { - FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI - } - }, - - /** - * Renders the tablesorter for the TableWidget - * The data to be displayed are retrived from the parameter data - */ - _renderDatasetTablesorter: function (tableWidgetDiv, data) { - if ( - data.hasOwnProperty("checkboxes") && - data.checkboxes != null && - data.checkboxes.trim() != "" - ) { - tableWidgetDiv - .find("#tableWidgetTableDataset > thead > tr") - .append("Select"); - } - - var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data); - - for (var i = 0; i < arrayFieldsToDisplay.length; i++) { - var columnName = arrayFieldsToDisplay[i]; - - tableWidgetDiv - .find("#tableWidgetTableDataset > thead > tr") - .append("" + columnName + ""); - } - - if ( - data.hasOwnProperty("additionalColumns") && - $.isArray(data.additionalColumns) - ) { - for (var i = 0; i < data.additionalColumns.length; i++) { - var columnName = data.additionalColumns[i]; - - tableWidgetDiv - .find("#tableWidgetTableDataset > thead > tr") - .append("" + columnName + ""); - } - } - - if (arrayFieldsToDisplay.length > 0) { - if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) { - if (data.checkboxes != null && data.checkboxes != "") { - // select checkbox range with shift key - if ( - typeof tableWidgetDiv.find("#tableWidgetTableDataset") - .checkboxes === "function" - ) - tableWidgetDiv - .find("#tableWidgetTableDataset") - .checkboxes("range", true); - } - if (data.dataset.length == 0) { - // Display placeholder if Table is empty - var numColumns = arrayFieldsToDisplay.length; - if ( - data.hasOwnProperty("additionalColumns") && - $.isArray(data.additionalColumns) - ) { - numColumns += data.additionalColumns.length; - } - var strHtml = ''; - strHtml += FHC_PhrasesLib.t("ui", "keineDatenVorhanden"); - strHtml += ""; - tableWidgetDiv - .find("#tableWidgetTableDataset > tbody") - .append(strHtml); - } else { - for (var i = 0; i < data.dataset.length; i++) { - var record = data.dataset[i]; - - if ($.isEmptyObject(record)) { - continue; - } - - var strHtml = ""; - - if (data.checkboxes != null && data.checkboxes != "") { - strHtml += ""; - strHtml += - ""; - strHtml += ""; - } - - $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) { - if (record.hasOwnProperty(data.fields[i])) { - strHtml += "" + record[data.fields[i]] + ""; - } - }); - - if ( - data.additionalColumns != null && - $.isArray(data.additionalColumns) - ) { - $.each(data.additionalColumns, function (i, additionalColumn) { - if (record.hasOwnProperty(additionalColumn)) { - strHtml += "" + record[additionalColumn] + ""; - } - }); - } - - strHtml += ""; - - tableWidgetDiv - .find("#tableWidgetTableDataset > tbody") - .append(strHtml); - } - } - } - } - }, - - /** - * Enable the tablesorter libs to render the dataset table with sorting features - */ - _enableTableSorter: function (tableWidgetDiv) { - var tableWidgetTablesorter = tableWidgetDiv.find( - "#tableWidgetTableDataset" - ); - - // Checks if the table contains data (rows) - if ( - tableWidgetTablesorter.find("tbody:empty").length == 0 && - tableWidgetTablesorter.find("tr:empty").length == 0 && - tableWidgetTablesorter.hasClass("table-condensed") - ) { - tableWidgetTablesorter.tablesorter({ - dateFormat: "ddmmyyyy", - widgets: ["zebra", "filter"], - widgetOptions: { - filter_saveFilters: true, - }, - }); - - $.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null); - } - }, - - /** - * Disable the tablesorter - */ - _disableTablesorter: function (tableWidgetDiv) { - tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable"); - }, - - /** - * Renders the pivotUI for the TableWidget - * The data to be displayed are retrived from the parameter data - */ - _renderDatasetPivotUI: function (tableWidgetDiv, data) { - // Checks if options were given and returns them - var options = FHC_TableWidget._getRepresentationOptions(data); - - // Manipulation for the representation! - var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data); - - // If there are fields to be displayed... - if (arrayFieldsToDisplay.length > 0) { - // ...if there are data to be displayed... - if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) { - // Build the array of objects used by pivotUI and store it in pivotUIData - var pivotUIData = []; - - // Loops through data - for (var i = 0; i < data.dataset.length; i++) { - var record = data.dataset[i]; // Single record - var tmpObj = {}; // New object that represents a record - - // Loops through columns of a record - $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) { - if (record.hasOwnProperty(data.fields[i])) { - tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias - } - }); - - // If additional columns are present... - if ( - data.additionalColumns != null && - $.isArray(data.additionalColumns) - ) { - // ...loops through them - $.each(data.additionalColumns, function (i, additionalColumn) { - if (record.hasOwnProperty(additionalColumn)) { - tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column - } - }); - } - - pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData - } - - // Renders the pivotUI - tableWidgetDiv - .find("#tableWidgetPivotUI") - .pivotUI(pivotUIData, options); - } - } - }, - - /** - * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used - */ - _getFieldsToDisplay: function (data) { - var arrayFieldsToDisplay = []; - - if (data.hasOwnProperty("fields") && $.isArray(data.fields)) { - if ( - data.hasOwnProperty("columnsAliases") && - $.isArray(data.columnsAliases) - ) { - for (var sfc = 0; sfc < data.fields.length; sfc++) { - for (var fc = 0; fc < data.fields.length; fc++) { - if (data.fields[sfc] == data.fields[fc]) { - arrayFieldsToDisplay[sfc] = data.columnsAliases[fc]; - } - } - } - } else { - arrayFieldsToDisplay = data.fields; - } - } - - return arrayFieldsToDisplay; - }, - - /** - * Renders the tabulator for the TableWidget - * The data to be displayed are retrived from the parameter data - */ - _renderDatasetTabulator: function (tableWidgetDiv, data) { - // Checks if options were given and returns them - var options = FHC_TableWidget._getRepresentationOptions(data); - // Checks if record fields definitions were given and returns them - var recordFieldsDefinitions = - FHC_TableWidget._getRepresentationFieldsDefinitions(data); - - // Manipulation for the representation! - var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns( - data, - recordFieldsDefinitions - ); - - if (arrayTabulatorColumns.length > 0) { - // ...if there are data to be displayed... - if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) { - if (options == null) options = {}; - options.columnDefaults={ - ...(options.columnDefaults||{}), - headerTooltip: - typeof options.columnDefaults?.tooltipsHeader == "undefined" - ? true - : options.columnDefaults?.tooltipsHeader, - }; - - - options.columns = arrayTabulatorColumns; - options.data = data.dataset; - options.persistence = - typeof options.persistence == "undefined" - ? true - : options.persistence; // enables persistence (default store in localStorage if available, else in cookie) - options.persistenceID = - typeof options.persistenceID == "undefined" - ? data.tableUniqueId - : options.persistenceID; // persistenceID to store persistence data seperately for multiple tables - options.movableColumns = - typeof options.movableColumns == "undefined" - ? true - : options.movableColumns; // allows changing column order - - options.placeholder = _func_placeholder(); // display text when table is empty - - // Renders the tabulator - tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options); - - //! callbacks that need to be attached after the table has built in tabulator version 5+ - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("on", "rowSelectionChanged", _func_rowSelectionChanged); - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator( - "on", - "columnVisibilityChanged", - _func_columnVisibilityChanged - ); - } - } - - // ------------------------------------------------------------------------------------------------------------- - // Render TableWidget Header and -Footer - // ------------------------------------------------------------------------------------------------------------- - - // Render tableWidgetHeader - - if ( - typeof options.tableWidgetHeader == "undefined" || - (typeof options.tableWidgetHeader != "undefined" && - options.tableWidgetHeader != false) - ) { - var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv); - tableWidgetDiv.find("#tableWidgetHeader").append(tabulatorHeaderHTML); - } - - /** - * tableWidgetFooter is NOT rendered by default. - * tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions. - * Setup options like this: - * tableWidgetFooter: { - * selectButtons: true // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function - * } - */ - if ( - typeof options.tableWidgetFooter != "undefined" && - options.tableWidgetFooter != null - ) { - var tabulatorFooterHTML = _renderTabulatorFooterHTML( - options.tableWidgetFooter - ); - tableWidgetDiv.find("#tableWidgetFooter").append(tabulatorFooterHTML); - } - }, - - /** - * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used - */ - _getTabulatorColumns: function (data, recordFieldsDefinitions) { - var fieldsToDisplayTabulator = []; - - if (data.hasOwnProperty("fields") && $.isArray(data.fields)) { - for (var sfc = 0; sfc < data.fields.length; sfc++) { - for (var fc = 0; fc < data.fields.length; fc++) { - if (data.fields[sfc] == data.fields[fc]) { - // Build the array of objects (columns) used by tabulator and store it in tabulatorColumns - var tmpColumnObj = {}; // New object that represents a column - - // If was given a definition for this field then use it! - if ( - recordFieldsDefinitions != null && - recordFieldsDefinitions.hasOwnProperty(data.fields[sfc]) - ) { - tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]]; - } - - tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name - - // If there is an alias for this field use it to give a title to this field (header) - if ( - data.hasOwnProperty("columnsAliases") && - $.isArray(data.columnsAliases) - ) { - tmpColumnObj.title = data.columnsAliases[fc]; - } // otherwise use the field name itself - else { - tmpColumnObj.title = data.fields[sfc]; - } - - fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns - } - } - } - } - - // If additional columns are present... - if ( - data.hasOwnProperty("additionalColumns") && - data.additionalColumns != null && - $.isArray(data.additionalColumns) - ) { - // ...loops through them - $.each(data.additionalColumns, function (i, additionalColumn) { - var tmpColumnObj = {}; // New object that represents a column - - // If was given a definition for this field then use it! - if ( - recordFieldsDefinitions != null && - recordFieldsDefinitions.hasOwnProperty(additionalColumn) - ) { - tmpColumnObj = recordFieldsDefinitions[additionalColumn]; - } - - tmpColumnObj.title = additionalColumn; // Give a title to this field (header) - tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name - - fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns - }); - } - - return fieldsToDisplayTabulator; - }, - - /** - * Gets options for the representation - */ - _getRepresentationOptions: function (data) { - var options = {}; // eventually contains options fot the representation - - // Checks if options were given - if ( - data.hasOwnProperty("datasetRepresentationOptions") && - data.datasetRepresentationOptions != "" - ) { - var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code - - // If it is an object then can be used - if (typeof tmpOptions == "object") { - options = tmpOptions; - } - } - - return options; - }, - - /** - * Gets record fields definitions to represent the dataset - */ - _getRepresentationFieldsDefinitions: function (data) { - var fieldsDefinitions = {}; // eventually contains record fields definitions - // Checks if record fields definitions was given as parameter - if ( - data.hasOwnProperty("datasetRepresentationFieldsDefinitions") && - data.datasetRepresentationFieldsDefinitions != "" - ) { - var tmpFDefs = eval( - "(" + data.datasetRepresentationFieldsDefinitions + ")" - ); // and converts them from string to javascript code - - // If it is an object then can be used - if (typeof tmpFDefs == "object") { - fieldsDefinitions = tmpFDefs; - } - } - - return fieldsDefinitions; - }, - - /** - * Set what type of dataset representation was choosen - */ - _setDatasetRepresentation: function (data) { - if (data.hasOwnProperty("datasetRepresentation")) { - FHC_TableWidget._datasetRepresentation = data.datasetRepresentation; - } - }, - - _setBootstrapVersion: function (data) { - _bootstrapVersion = data.bootstrapVersion; - }, - - _getTableWidgetUniqueIdArray: function () { - var tableWidgetUniqueIdArray = []; - - $("div[id*='divTableWidgetDataset']").each(function (i, e) { - tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue); - }); - - return tableWidgetUniqueIdArray; - }, + + //------------------------------------------------------------------------------------------------------------------ + // Properties + + _datasetRepresentation: null, // contains the current data representation + + _bootstrapVersion: 3, + //------------------------------------------------------------------------------------------------------------------ + // Public methods + + /** + * To display the TableWidget using the loaded data prenset in the session + */ + display: function() { + + FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget); + }, + + /** + * Alias call to method display only to inprove the readability of the code + */ + refresh: function() { + + FHC_TableWidget.display(); + }, + + //------------------------------------------------------------------------------------------------------------------ + // Private methods + + /** + * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT + */ + _getTableUniqueIdPrefix: function() { + + return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method; + }, + + /** + * Utility method that checks if data contains an error and print that to the console + * otherwise the TableWidget GUI is refreshed + */ + _failOrRefresh: function(data, textStatus, jqXHR) { + + if (FHC_AjaxClient.isError(data)) + { + console.log(FHC_AjaxClient.getError(data)); + } + else + { + FHC_TableWidget.refresh(); + } + }, + + /** + * Utility method that checks if data contains an error and print that to the console + * otherwise the page is reloaded + */ + _failOrReload: function(data, textStatus, jqXHR) { + + if (FHC_AjaxClient.isError(data)) + { + console.log(FHC_AjaxClient.getError(data)); + } + else + { + location.reload(); + } + }, + + /** + * To reset the Table Widget GUI + */ + _resetGUI: function(tableWidgetDiv) { + + // If the choosen dataset representation is tablesorter + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) + { + tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html(""); + tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html(""); + } + + // If the choosen dataset representation is pivotUI + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) + { + tableWidgetDiv.find("#tableWidgetPivotUI").html(""); + } + + // If the choosen dataset representation is tabulator + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) + { + tableWidgetDiv.find("#tableWidgetTabulator").html(""); + } + }, + + /** + * To get via Ajax all the data related to the TableWidget present in the given page + * If the parameter renderFunction is a valid function, is called on success + */ + _getTables: function(renderFunction) { + + var tableWidgetUniqueIdArray = FHC_TableWidget._getTableWidgetUniqueIdArray(); + + for (var tableWidgetsCounter = 0; tableWidgetsCounter < tableWidgetUniqueIdArray.length; tableWidgetsCounter++) + { + FHC_AjaxClient.ajaxCallGet( + "widgets/Tables/getTable", + { + tableUniqueId: FHC_TableWidget._getTableUniqueIdPrefix() + "/" + tableWidgetUniqueIdArray[tableWidgetsCounter] + }, + { + successCallback: function(data, textStatus, jqXHR) { + + if (FHC_AjaxClient.hasData(data)) + { + if (typeof renderFunction == "function") + { + renderFunction(FHC_AjaxClient.getData(data)); + } + } + else + { + console.log(FHC_AjaxClient.getError(data)); + } + } + } + ); + } + }, + + /** + * This method calls all the other methods needed to rendere the GUI for a TableWidget + * The parameter data contains all the data about the TableWidget and it is given as parameter + * to all the methods that here are called + * NOTE: think very carefully before changing the order of the calls + */ + _renderTableWidget: function(data) { + + FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen + + FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget + + var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]'); + + FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off + + FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI + + FHC_TableWidget._renderDataset(tableWidgetDiv, data); + + FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off + + FHC_TableWidget._onTableBuilt(tableWidgetDiv, data); + }, + + _onTableBuilt: function (tableWidgetDiv, data) { + var options = FHC_TableWidget._getRepresentationOptions(data); + + tableWidgetDiv + .find("#tableWidgetTabulator") + .tabulator("on", "tableBuilt", () => { + if ( + typeof options.tableWidgetHeader == "undefined" || + (typeof options.tableWidgetHeader != "undefined" && + options.tableWidgetHeader != false) + ) { + // renders the table headers + var tabulatorHeaderCollapseHTML = + _renderTabulatorHeaderCollapseHTML(tableWidgetDiv); + tableWidgetDiv + .find("#tableWidgetHeader") + .after(tabulatorHeaderCollapseHTML); + } + + // makes the table headers toggle visibility when clicking on them + tableWidgetDiv.find(".btn-select-col").on("click", function () { + var selected = this.value; + + tableWidgetDiv + .find("#tableWidgetTabulator") + .tabulator("toggleColumn", selected); + + // toggle class to color button as selected / deselected + $(this).toggleClass("btn-select-col-selected").blur(); // blur removes automatic focus + }); + }); + }, + + /** + * Turns all the events off + * NOTE: must be aligned to _turnOnEvents + */ + _turnOffEvents: function(tableWidgetDiv) { + + // If the choosen dataset representation is tablesorter + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) + { + FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter + } + }, + + /** + * Turns all the events on + * NOTE: must be aligned to _turnOffEvents + */ + _turnOnEvents: function(tableWidgetDiv) { + + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); + + // If the choosen dataset representation is tablesorter + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) + { + FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter + } + + // If the choosen dataset representation is tabulator + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) + { + // --------------------------------------------------------------------------------------------------------- + // Add events to the elements + // --------------------------------------------------------------------------------------------------------- + + // Click-Event to download csv + tableWidgetDiv.find('#download-csv').on('click', function() + { + // BOM for correct UTF-8 char output + tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true}); + }) + + // Click-Event to toggle the collapsable help panel + tableWidgetDiv.find('#help').on('click', function() + { + // Hide the collapsable settings panel, if it actually shown + $('#tabulatorSettings-' + tableUniqueId).collapse('hide'); + + // Toggle the collapsable help panel + $('#tabulatorHelp-' + tableUniqueId).collapse('toggle'); + }) + + // Click-Event to toggle the collapsable settings panel + tableWidgetDiv.find('#settings').on('click', function() + { + // Hide the collapsable help panel, if it actually shown + $('#tabulatorHelp-' + tableUniqueId).collapse('hide'); + + // Toggle the collapsable settings panel + $('#tabulatorSettings-' + tableUniqueId).collapse('toggle'); + }) + + /* Beautify button group behaviour + * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels + * Also remove the disturbing button focus behaviour + */ + $(".btn-group > .btn").click(function(){ + if ($(this).hasClass("active")) + { + $(this).removeClass('active').css('outline', 'none'); + } + else + { + $(this).addClass("active").css('outline', 'none').siblings().removeClass("active"); + } + }); + + /** + * Click-Event to select all rows + * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton. + */ + if (typeof tableWidgetHook_selectAllButton == 'function') + { + tableWidgetDiv.find('#select-all').on('click', function() { + tableWidgetHook_selectAllButton(tableWidgetDiv); + }); + } + else + { + tableWidgetDiv.find('#select-all').on('click', function() { + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', true); + }); + } + + // Click-Event to deselect all rows + tableWidgetDiv.find('#deselect-all').on('click', function() + { + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('deselectRow'); + }) + + // Click-Event to toggle column-picker columns + //! this event was moved to the _onTableBuilt function + } + }, + + _renderDataset: function(tableWidgetDiv, data) { + + // If the choosen dataset representation is tablesorter then... + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) + { + FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI + } + + // If the choosen dataset representation is pivotUI then... + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) + { + FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI + } + + // If the choosen dataset representation is tabulator then... + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) + { + FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI + } + }, + + /** + * Renders the tablesorter for the TableWidget + * The data to be displayed are retrived from the parameter data + */ + _renderDatasetTablesorter: function(tableWidgetDiv, data) { + + if (data.hasOwnProperty("checkboxes") && data.checkboxes != null && data.checkboxes.trim() != "") + { + tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("Select"); + } + + var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data); + + for (var i = 0; i < arrayFieldsToDisplay.length; i++) + { + var columnName = arrayFieldsToDisplay[i]; + + tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("" + columnName + ""); + } + + if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns)) + { + for (var i = 0; i < data.additionalColumns.length; i++) + { + var columnName = data.additionalColumns[i]; + + tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("" + columnName + ""); + } + } + + if (arrayFieldsToDisplay.length > 0) + { + if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) + { + if (data.checkboxes != null && data.checkboxes != "") + { + // select checkbox range with shift key + if (typeof tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes === 'function') + tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes("range", true); + } + if (data.dataset.length == 0) + { + // Display placeholder if Table is empty + var numColumns = arrayFieldsToDisplay.length; + if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns)) + { + numColumns += data.additionalColumns.length; + } + var strHtml = ''; + strHtml += FHC_PhrasesLib.t('ui', 'keineDatenVorhanden'); + strHtml += ''; + tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml); + } + else + { + for (var i = 0; i < data.dataset.length; i++) + { + var record = data.dataset[i]; + + if ($.isEmptyObject(record)) + { + continue; + } + + var strHtml = ""; + + if (data.checkboxes != null && data.checkboxes != "") + { + strHtml += ""; + strHtml += ""; + strHtml += ""; + } + + $.each(arrayFieldsToDisplay, function(i, fieldToDisplay) { + + if (record.hasOwnProperty(data.fields[i])) + { + strHtml += "" + record[data.fields[i]] + ""; + } + }); + + if (data.additionalColumns != null && $.isArray(data.additionalColumns)) + { + $.each(data.additionalColumns, function(i, additionalColumn) { + + if (record.hasOwnProperty(additionalColumn)) + { + strHtml += "" + record[additionalColumn] + ""; + } + }); + } + + strHtml += ""; + + tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml); + } + } + } + } + }, + + /** + * Enable the tablesorter libs to render the dataset table with sorting features + */ + _enableTableSorter: function(tableWidgetDiv) { + + var tableWidgetTablesorter = tableWidgetDiv.find("#tableWidgetTableDataset"); + + // Checks if the table contains data (rows) + if (tableWidgetTablesorter.find("tbody:empty").length == 0 + && tableWidgetTablesorter.find("tr:empty").length == 0 + && tableWidgetTablesorter.hasClass("table-condensed")) + { + tableWidgetTablesorter.tablesorter({ + dateFormat: "ddmmyyyy", + widgets: ["zebra", "filter"], + widgetOptions: { + filter_saveFilters : true + } + }); + + $.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null); + } + }, + + /** + * Disable the tablesorter + */ + _disableTablesorter: function(tableWidgetDiv) { + + tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable"); + }, + + /** + * Renders the pivotUI for the TableWidget + * The data to be displayed are retrived from the parameter data + */ + _renderDatasetPivotUI: function(tableWidgetDiv, data) { + + // Checks if options were given and returns them + var options = FHC_TableWidget._getRepresentationOptions(data); + + // Manipulation for the representation! + var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data); + + // If there are fields to be displayed... + if (arrayFieldsToDisplay.length > 0) + { + // ...if there are data to be displayed... + if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) + { + // Build the array of objects used by pivotUI and store it in pivotUIData + var pivotUIData = []; + + // Loops through data + for (var i = 0; i < data.dataset.length; i++) + { + var record = data.dataset[i]; // Single record + var tmpObj = {}; // New object that represents a record + + // Loops through columns of a record + $.each(arrayFieldsToDisplay, function(i, fieldToDisplay) { + + if (record.hasOwnProperty(data.fields[i])) + { + tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias + } + }); + + // If additional columns are present... + if (data.additionalColumns != null && $.isArray(data.additionalColumns)) + { + // ...loops through them + $.each(data.additionalColumns, function(i, additionalColumn) { + + if (record.hasOwnProperty(additionalColumn)) + { + tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column + } + }); + } + + pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData + } + + // Renders the pivotUI + tableWidgetDiv.find("#tableWidgetPivotUI").pivotUI( + pivotUIData, + options + ); + } + } + }, + + /** + * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used + */ + _getFieldsToDisplay: function(data) { + + var arrayFieldsToDisplay = []; + + if (data.hasOwnProperty("fields") && $.isArray(data.fields)) + { + if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases)) + { + for (var sfc = 0; sfc < data.fields.length; sfc++) + { + for (var fc = 0; fc < data.fields.length; fc++) + { + if (data.fields[sfc] == data.fields[fc]) + { + arrayFieldsToDisplay[sfc] = data.columnsAliases[fc]; + } + } + } + } + else + { + arrayFieldsToDisplay = data.fields; + } + } + + return arrayFieldsToDisplay; + }, + + /** + * Renders the tabulator for the TableWidget + * The data to be displayed are retrived from the parameter data + */ + _renderDatasetTabulator: function(tableWidgetDiv, data) { + + // Checks if options were given and returns them + var options = FHC_TableWidget._getRepresentationOptions(data); + // Checks if record fields definitions were given and returns them + var recordFieldsDefinitions = FHC_TableWidget._getRepresentationFieldsDefinitions(data); + + // Manipulation for the representation! + var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(data, recordFieldsDefinitions); + + if (arrayTabulatorColumns.length > 0) + { + // ...if there are data to be displayed... + if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) + { + if (options == null) options = {}; + options.columnDefaults={ + ...(options.columnDefaults||{}), + headerTooltip: + typeof options.columnDefaults?.tooltipsHeader == "undefined" + ? true + : options.columnDefaults?.tooltipsHeader, + }; + + + options.columns = arrayTabulatorColumns; + options.data = data.dataset; + options.persistence = (typeof options.persistence == 'undefined') ? true : options.persistence; // enables persistence (default store in localStorage if available, else in cookie) + options.persistenceID = (typeof options.persistenceID == 'undefined') ? data.tableUniqueId : options.persistenceID; // persistenceID to store persistence data seperately for multiple tables + options.movableColumns = (typeof options.movableColumns == 'undefined') ? true : options.movableColumns; // allows changing column order + options.tooltipsHeader = (typeof options.tooltipsHeader == 'undefined') ? true : options.tooltipsHeader; // set header tooltip with column title + options.placeholder = _func_placeholder(); // display text when table is empty + + // Renders the tabulator + tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options); + + //! callbacks that need to be attached after the table has built in tabulator version 5+ + tableWidgetDiv + .find("#tableWidgetTabulator") + .tabulator("on", "rowSelectionChanged", _func_rowSelectionChanged); + tableWidgetDiv + .find("#tableWidgetTabulator") + .tabulator( + "on", + "columnVisibilityChanged", + _func_columnVisibilityChanged + ); + } + } + + // ------------------------------------------------------------------------------------------------------------- + // Render TableWidget Header and -Footer + // ------------------------------------------------------------------------------------------------------------- + + // Render tableWidgetHeader + if (typeof options.tableWidgetHeader == 'undefined' || + (typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false)) + { + var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv); + tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML); + + // Render the collapsable div triggered by button in tableWidgetHeader + var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv); + tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML); + } + + /** + * tableWidgetFooter is NOT rendered by default. + * tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions. + * Setup options like this: + * tableWidgetFooter: { + * selectButtons: true // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function + * } + */ + if (typeof options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null) + { + var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter); + tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML); + } + }, + + /** + * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used + */ + _getTabulatorColumns: function(data, recordFieldsDefinitions) { + + var fieldsToDisplayTabulator = []; + + if (data.hasOwnProperty("fields") && $.isArray(data.fields)) + { + for (var sfc = 0; sfc < data.fields.length; sfc++) + { + for (var fc = 0; fc < data.fields.length; fc++) + { + if (data.fields[sfc] == data.fields[fc]) + { + // Build the array of objects (columns) used by tabulator and store it in tabulatorColumns + var tmpColumnObj = {}; // New object that represents a column + + // If was given a definition for this field then use it! + if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(data.fields[sfc])) + { + tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]]; + } + + tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name + + // If there is an alias for this field use it to give a title to this field (header) + if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases)) + { + tmpColumnObj.title = data.columnsAliases[fc]; + } + else // otherwise use the field name itself + { + tmpColumnObj.title = data.fields[sfc]; + } + + fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns + } + } + } + } + + // If additional columns are present... + if (data.hasOwnProperty("additionalColumns") && data.additionalColumns != null && $.isArray(data.additionalColumns)) + { + // ...loops through them + $.each(data.additionalColumns, function(i, additionalColumn) { + + var tmpColumnObj = {}; // New object that represents a column + + // If was given a definition for this field then use it! + if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(additionalColumn)) + { + tmpColumnObj = recordFieldsDefinitions[additionalColumn]; + } + + tmpColumnObj.title = additionalColumn; // Give a title to this field (header) + tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name + + fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns + }); + } + + return fieldsToDisplayTabulator; + }, + + /** + * Gets options for the representation + */ + _getRepresentationOptions: function(data) { + + var options = {}; // eventually contains options fot the representation + + // Checks if options were given + if (data.hasOwnProperty("datasetRepresentationOptions") && data.datasetRepresentationOptions != "") + { + var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code + + // If it is an object then can be used + if (typeof tmpOptions == "object") + { + options = tmpOptions; + } + } + + return options; + }, + + /** + * Gets record fields definitions to represent the dataset + */ + _getRepresentationFieldsDefinitions: function(data) { + + var fieldsDefinitions = {}; // eventually contains record fields definitions + + // Checks if record fields definitions was given as parameter + if (data.hasOwnProperty("datasetRepresentationFieldsDefinitions") && data.datasetRepresentationFieldsDefinitions != "") + { + var tmpFDefs = eval("(" + data.datasetRepresentationFieldsDefinitions + ")"); // and converts them from string to javascript code + + // If it is an object then can be used + if (typeof tmpFDefs == "object") + { + fieldsDefinitions = tmpFDefs; + } + } + + return fieldsDefinitions; + }, + + /** + * Set what type of dataset representation was choosen + */ + _setDatasetRepresentation: function(data) { + + if (data.hasOwnProperty("datasetRepresentation")) + { + FHC_TableWidget._datasetRepresentation = data.datasetRepresentation; + } + }, + + _setBootstrapVersion: function (data) { + _bootstrapVersion = data.bootstrapVersion; + }, + + _getTableWidgetUniqueIdArray: function() { + + var tableWidgetUniqueIdArray = []; + + $("div[id*='divTableWidgetDataset']").each(function(i, e) { + + tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue); + }); + + return tableWidgetUniqueIdArray; + } }; //********************************************************************************************************************** @@ -772,202 +781,198 @@ var FHC_TableWidget = { * Processed when row selection changed. * Displays number of selected rows on row selection change. */ -function _func_rowSelectionChanged(data, rows) { - $("#number-selected").html( - "Ausgewählte Zeilen: " + rows.length + "" - ); +function _func_rowSelectionChanged (data, rows){ + + $('#number-selected').html("Ausgewählte Zeilen: " + rows.length + ""); } /* Processed when columns visibility changed (e.g. using the column picker). * Redraws the table to expand columns to table width. */ -function _func_columnVisibilityChanged(column, visible) { - var table = column.getTable(); +function _func_columnVisibilityChanged(column, visible){ - table.redraw(); + var table = column.getTable(); + + table.redraw(); } /* * Displays text when table is empty */ -function _func_placeholder() { - return "

" + FHC_PhrasesLib.t("ui", "keineDatenVorhanden") + "

"; +function _func_placeholder(){ + return '

' + FHC_PhrasesLib.t('ui', 'keineDatenVorhanden') + '

'; } // Returns TableWidget Header HTML (download-, setting button...) -function _renderTabulatorHeaderHTML(tableWidgetDiv) { - var tableUniqueId = tableWidgetDiv.attr("tableUniqueId"); +function _renderTabulatorHeaderHTML(tableWidgetDiv){ - var tabulatorHeaderHTML = ""; - tabulatorHeaderHTML += `
-
- - - - - - -
-
- `; + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); - return tabulatorHeaderHTML; + var outerdivattr = 'class="btn-toolbar d-flex justify-content-end mb-2"'; + var buttonclass = 'btn-outline-secondary'; + if(_bootstrapVersion == 3) { + outerdivattr = 'class="btn-toolbar pull-right" style="margin-bottom:0.5rem;"'; + buttonclass = 'btn-default'; + } + + var tabulatorHeaderHTML = ''; + tabulatorHeaderHTML += '
'; + tabulatorHeaderHTML += '
'; + tabulatorHeaderHTML += '' + + ''; + tabulatorHeaderHTML += '' + + ''; + tabulatorHeaderHTML += '' + + ''; + tabulatorHeaderHTML += '
'; + tabulatorHeaderHTML += '
'; + tabulatorHeaderHTML += '


'; + + return tabulatorHeaderHTML; } // Returns collapsable HTML element for TableWidget header buttons -function _renderTabulatorHeaderCollapseHTML( - tableWidgetDiv, - arrayTabulatorColumns -) { - var tableUniqueId = tableWidgetDiv.attr("tableUniqueId"); +function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ - var tabulatorHeaderCollapseHTML = ""; + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); - // CollapseHTML 'Settings' - if (_bootstrapVersion == 3) { - tabulatorHeaderCollapseHTML += ` -
-
-
-
- -
-
-
`; - } else { - tabulatorHeaderCollapseHTML += `
-
-
-
- -
-
-
`; - } - // Create column picker (Spalten einstellen) - tableWidgetDiv - .find("#tableWidgetTabulator") - .tabulator("getColumns") - .forEach(function (column) { - var field = column.getField(); - var title = column.getDefinition().title; - var btn_select_col_selected = column.isVisible() - ? "btn-select-col-selected" - : ""; + var tabulatorHeaderCollapseHTML = ''; - // If certain columns should be excluded from the column picker (define them in a blacklist array) - if ( - typeof tableWidgetBlacklistArray_columnUnselectable != "undefined" && - Array.isArray(tableWidgetBlacklistArray_columnUnselectable) && - tableWidgetBlacklistArray_columnUnselectable.length - ) { - if ( - $.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0 - ) { - tabulatorHeaderCollapseHTML += ``; - } - } - // Else provide all tabulator fields as pickable columns - else { - tabulatorHeaderCollapseHTML += ``; - } - }); + var colclass = 'col-12 mb-2 collapse'; + var accordionclass = 'accordion'; + var accordionitemclass = 'accordion-item'; + var accordionheaderclass = 'accordion-header'; + var accordionh5class = ''; + var accordiondataattr = 'data-bs-toggle="collapse" data-bs-parent="#accordion"'; + var accordioncollapseclass = 'accordion-collapse'; + var accordionbodyclass = 'accordion-body'; + var btngrpclass = 'd-flex flex-row flex-wrap btn-group'; + var buttonstyle = 'flex:0 0 auto'; + var buttonclass = 'btn-outline-secondary flex-shrink-1'; + if(_bootstrapVersion == 3) { + colclass = 'col-lg-12 collapse'; + accordionclass = 'panel-group'; + accordionitemclass = 'panel panel-default'; + accordionheaderclass = 'panel-heading'; + accordionh5class = 'panel-title'; + accordiondataattr = 'data-toggle="collapse" data-parent="#accordion"'; + accordioncollapseclass = 'panel-collapse'; + accordionbodyclass = 'panel-body'; + btngrpclass = 'btn-group'; + buttonstyle = ''; + buttonclass = 'btn-default'; + } - tabulatorHeaderCollapseHTML += "
"; // end btn-group - tabulatorHeaderCollapseHTML += "
"; // end panel-body / accordion-body - tabulatorHeaderCollapseHTML += "
"; // end panel-collapse / accordion-collapse - tabulatorHeaderCollapseHTML += "
"; // end panel / accordion-item - tabulatorHeaderCollapseHTML += "
"; // end panel-group / accordion - tabulatorHeaderCollapseHTML += "
"; // end col - tabulatorHeaderCollapseHTML += "
"; // end row + // CollapseHTML 'Settings' + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; - return tabulatorHeaderCollapseHTML; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += ''; // end panel-heading / accordion-header + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + + // Create column picker (Spalten einstellen) + tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column) + { + var field = column.getField(); + var title = column.getDefinition().title; + var btn_select_col_selected = column.isVisible() ? 'btn-select-col-selected' : ''; + + // If certain columns should be excluded from the column picker (define them in a blacklist array) + if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' && + Array.isArray(tableWidgetBlacklistArray_columnUnselectable) && + tableWidgetBlacklistArray_columnUnselectable.length) + { + if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0) + { + tabulatorHeaderCollapseHTML += ''; + } + } + // Else provide all tabulator fields as pickable columns + else + { + tabulatorHeaderCollapseHTML += ''; + } + }); + + tabulatorHeaderCollapseHTML += '
'; // end btn-group + tabulatorHeaderCollapseHTML += '
'; // end panel-body / accordion-body + tabulatorHeaderCollapseHTML += '
'; // end panel-collapse / accordion-collapse + tabulatorHeaderCollapseHTML += '
'; // end panel / accordion-item + + tabulatorHeaderCollapseHTML += '
'; // end panel-group / accordion + tabulatorHeaderCollapseHTML += '
'; // end col + tabulatorHeaderCollapseHTML += '
'; // end row + + return tabulatorHeaderCollapseHTML; } // Returns TableWidget Footer HTML (de-/select buttons,...) -function _renderTabulatorFooterHTML(tableWidgetFooterOptions) { - var tabulatorFooterHTML = ""; +function _renderTabulatorFooterHTML(tableWidgetFooterOptions){ - // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons - if ( - typeof tableWidgetFooterOptions.selectButtons != "undefined" && - tableWidgetFooterOptions.selectButtons == true - ) { - tabulatorFooterHTML += ` -

`; - } + var tabulatorFooterHTML = ''; - return tabulatorFooterHTML; + var outerdivattr = 'class="btn-toolbar mt-4"'; + var buttonclass = 'btn-outline-secondary float-start'; + if(_bootstrapVersion == 3) { + outerdivattr = 'style="margin-top:1.5rem;" class="btn-toolbar"'; + buttonclass = 'btn-default pull-left'; + } + + // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons + if (typeof tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true) + { + tabulatorFooterHTML += '
'; + tabulatorFooterHTML += '
'; + tabulatorFooterHTML += '' + + ''; + tabulatorFooterHTML += '' + + ''; + tabulatorFooterHTML += '' + + '' + + FHC_PhrasesLib.t("ui", "ausgewaehlteZeilen") + ': 0' + + ''; + tabulatorFooterHTML += '
'; + tabulatorFooterHTML += '
'; + tabulatorFooterHTML += '

'; + } + + return tabulatorFooterHTML; } /** * When JQuery is up */ -$(document).ready(function () { - FHC_TableWidget.display(); +$(document).ready(function() { + + FHC_TableWidget.display(); + }); From 488847984eed33abd77ca2e09529f3aacfc019f8 Mon Sep 17 00:00:00 2001 From: Harald Bamberger Date: Fri, 15 Nov 2024 15:19:09 +0100 Subject: [PATCH 02/12] change property downloadTitle to titleDownload for Tabulator 5, call tabulator redraw at the end of tableInit callback to ensure renderStart callbacks are run --- public/js/lehre/lehrauftrag/acceptLehrauftrag.js | 3 ++- public/js/lehre/lehrauftrag/approveLehrauftrag.js | 3 ++- public/js/lehre/lehrauftrag/orderLehrauftrag.js | 10 +++++----- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js index b1142ff34..af523fd9f 100644 --- a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js @@ -172,7 +172,7 @@ function func_tableBuilt(table) { field: "status", width: 40, hozAlign: "center", - downloadTitle: "Status", + titleDownload: "Status", formatter: status_formatter, tooltip: status_tooltip, }, @@ -477,6 +477,7 @@ $(function () { default: break; } + tabulatorInstance.redraw(true); }); var canPromise = !!window.Promise; diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js index 3d8993fc3..4edd749f9 100644 --- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js @@ -216,7 +216,7 @@ function func_tableBuilt(table) { field: "status", width: 40, hozAlign: "center", - downloadTitle: "Status", + titleDownload: "Status", formatter: status_formatter, tooltip: status_tooltip, }, @@ -488,6 +488,7 @@ $(function () { $("#tableWidgetTabulator").tabulator("on", "rowUpdated", (row) => func_rowUpdated(row) ); + $("#tableWidgetTabulator").tabulator("redraw", true); }); // Redraw table on resize to fit tabulators height to windows height diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js index 847a863f8..f4bf912c7 100644 --- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js @@ -245,7 +245,7 @@ function func_tableBuilt(table) { field: "status", width: 40, hozAlign: "center", - downloadTitle: "Status", + titleDownload: "Status", formatter: status_formatter, tooltip: status_tooltip, }, @@ -548,10 +548,10 @@ $(function () { func_renderStarted(tabulatorInstance); }); - // event dataLoaded needs to be attached as a callback to the tableBuilt event in tabulator5 - $("#tableWidgetTabulator").tabulator("on", "dataLoaded", (data) => { - func_dataLoaded(data, tabulatorInstance); - }); + // set initial filter + func_dataLoaded(null, tabulatorInstance); + + $("#tableWidgetTabulator").tabulator("redraw", true); }); // Redraw table on resize to fit tabulators height to windows height From 16cba022e29422816138040c2d305367f9298f8f Mon Sep 17 00:00:00 2001 From: Harald Bamberger Date: Fri, 15 Nov 2024 15:21:46 +0100 Subject: [PATCH 03/12] add css class to be able to reset tabulator fontsize to 14px for vilesci pages, set active and focus class for filter buttons to new combined button, add css rules to make tooltips on cells in unselectable rows work again --- .../lehre/lehrauftrag/orderLehrauftrag.php | 8 +++++--- public/css/Tabulator5.css | 17 +++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php index 04f7391ce..6806aa401 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php @@ -178,7 +178,9 @@ $this->load->view(
+
load->view('lehre/lehrauftrag/orderLehrauftragData.php'); ?> +
@@ -187,14 +189,14 @@ $this->load->view(