adds bootstrapVersion flag to the tableWidget options to render bootstrap3 classes or bootstrap5 classes

This commit is contained in:
SimonGschnell
2024-03-19 15:29:28 +01:00
parent acac5dfc65
commit de15d43bb7
5 changed files with 67 additions and 53 deletions
+2
View File
@@ -26,6 +26,8 @@ class TableWidgetLib
{
const TABLE_UNIQUE_ID = 'tableUniqueId'; // TableWidget unique id
const TABLE_BOOTSTRAP_VERSION = 'bootstrapVersion'; // TableWidget bootstrap version
// TableWidget session name
const SESSION_NAME = 'FHC_TABLE_WIDGET';
@@ -172,6 +172,7 @@ $query.= ' FROM anrechnungen
$filterWidgetArray = array(
'query' => $query,
'bootstrapVersion' => 5,
'tableUniqueId' => 'approveAnrechnungUebersicht',
'requiredPermissions' => 'lehre/anrechnung_genehmigen',
'datasetRepresentation' => 'tabulator',
+13 -1
View File
@@ -35,6 +35,9 @@ class TableWidget extends Widget
// Required permissions to use this TableWidget
private $_requiredPermissions;
// optional bootstrap version can be set to use different bootstrap classes
private $_bootstrapVersion=3;
// SQL statement
private $_query;
@@ -92,8 +95,9 @@ class TableWidget extends Widget
*/
public function display($widgetData)
{
$this->view(self::WIDGET_URL_TABLE, array(
'tableUniqueId' => $widgetData[TableWidgetLib::TABLE_UNIQUE_ID]
'tableUniqueId' => $widgetData[TableWidgetLib::TABLE_UNIQUE_ID],
)); // GUI starts here
}
@@ -135,6 +139,7 @@ class TableWidget extends Widget
// Initialize class properties
$this->_requiredPermissions = null;
$this->_bootstrapVersion = null;
$this->_reloadDataset = true; // by default the dataset is NOT cached in session
$this->_query = null;
$this->_additionalColumns = null;
@@ -154,6 +159,12 @@ class TableWidget extends Widget
$this->_requiredPermissions = $args[TableWidgetLib::REQUIRED_PERMISSIONS];
}
// Retrieved the optional tableWindget Bootstrap version
if (isset($args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION]) && !isEmptyString($args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION]))
{
$this->_bootstrapVersion = $args[TableWidgetLib::TABLE_BOOTSTRAP_VERSION];
}
// How to retrieve data for the table: SQL statement or a result from DB
if (isset($args[TableWidgetLib::QUERY]))
{
@@ -349,6 +360,7 @@ class TableWidget extends Widget
$this->tablewidgetlib->setSession(
array(
TableWidgetLib::TABLE_UNIQUE_ID => $tableUniqueId, // table unique id
TableWidgetLib::TABLE_BOOTSTRAP_VERSION => $this->_bootstrapVersion, // bootstrap version for tableWidget
TableWidgetLib::SESSION_FIELDS => $this->tablewidgetlib->getExecutedQueryListFields(), // all the fields of the dataset
TableWidgetLib::SESSION_COLUMNS_ALIASES => $this->_columnsAliases, // all the fields aliases
TableWidgetLib::SESSION_ADDITIONAL_COLUMNS => $this->_additionalColumns, // additional columns
+51 -20
View File
@@ -20,6 +20,7 @@ var FHC_TableWidget = {
_datasetRepresentation: null, // contains the current data representation
_bootstrapVersion:3,
//------------------------------------------------------------------------------------------------------------------
// Public methods
@@ -152,6 +153,8 @@ var FHC_TableWidget = {
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
@@ -163,6 +166,7 @@ var FHC_TableWidget = {
FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
},
@@ -766,6 +770,11 @@ var FHC_TableWidget = {
}
},
_setBootstrapVersion: function(data) {
_bootstrapVersion = data.bootstrapVersion
},
_getTableWidgetUniqueIdArray: function() {
var tableWidgetUniqueIdArray = [];
@@ -817,17 +826,17 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
tabulatorHeaderHTML += '<div class="btn-toolbar pull-right" role="toolbar">';
tabulatorHeaderHTML += '<div class="btn-group" role="group">';
tabulatorHeaderHTML += '' +
'<button id="download-csv" class="btn btn-default" type="button" ' +
`<button id="download-csv" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button" ` +
'data-toggle="tooltip" data-placement="left" title="Download CSV">' +
'<small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i>' +
'</button>';
tabulatorHeaderHTML += '' +
'<button id="help" class="btn btn-default" type="button" ' +
`<button id="help" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button" ` +
'data-toggle="collapse tooltip" data-target="tabulatorHelp-'+ tableUniqueId + '" data-placement="left" ' +
'title="' + FHC_PhrasesLib.t("ui", "hilfe") + '"><i class="fa fa-question"></i>' +
'</button>';
tabulatorHeaderHTML += '' +
'<button id="settings" class="btn btn-default" type="button" ' +
`<button id="settings" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button" ` +
'data-toggle="collapse tooltip" data-target="tabulatorSettings-'+ tableUniqueId + '" data-placement="left" ' +
'title="' + FHC_PhrasesLib.t("ui", "tabelleneinstellungen") + '" ' +
'aria-expanded="false" aria-controls="tabulatorSettings-'+ tableUniqueId + '">' +
@@ -848,15 +857,15 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
var tabulatorHeaderCollapseHTML = '';
// CollapseHTML 'Settings'
if(_bootstrapVersion==3){
tabulatorHeaderCollapseHTML += '<div class="row">';
tabulatorHeaderCollapseHTML += '<div class="col-lg-12 collapse" id="tabulatorSettings-'+ tableUniqueId + '">';
tabulatorHeaderCollapseHTML += '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
tabulatorHeaderCollapseHTML += '<div class="panel panel-default">';
tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
tabulatorHeaderCollapseHTML += `<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">`;
tabulatorHeaderCollapseHTML += `<div class="panel panel-default">`;
tabulatorHeaderCollapseHTML += `<div class="panel-heading" role="tab" id="headingOne">`;
tabulatorHeaderCollapseHTML += '<h5 class="panel-title">';
tabulatorHeaderCollapseHTML += '' +
'<a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" ' +
'<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
'href="#selectColumns-' + tableUniqueId + '" ' +
'aria-expanded="false" aria-controls="selectColumns">' +
FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
@@ -867,7 +876,24 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
'role="tabpanel" aria-labelledby="headingOne">';
tabulatorHeaderCollapseHTML += '<div class="panel-body">';
tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
}else{
tabulatorHeaderCollapseHTML += '<div class="row">';
tabulatorHeaderCollapseHTML += '<div class="col-12 collapse" id="tabulatorSettings-'+ tableUniqueId + '">';
tabulatorHeaderCollapseHTML += `<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">`;
tabulatorHeaderCollapseHTML += `<div class="accordion-item">`;
tabulatorHeaderCollapseHTML += `<h5 class="accordion-header" role="tab" id="headingOne">`;
tabulatorHeaderCollapseHTML += '' +
'<a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" ' +
'href="#selectColumns-' + tableUniqueId + '" ' +
'aria-expanded="false" aria-controls="selectColumns">' +
FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
'</a>';
tabulatorHeaderCollapseHTML += '</h5>';
tabulatorHeaderCollapseHTML += '<div id="selectColumns-' + tableUniqueId + '" class="accordion-collapse collapse show" ' +
'role="tabpanel" aria-labelledby="headingOne" data-bs-parent="#accordion">';
tabulatorHeaderCollapseHTML += '<div class="accordion-body">';
tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
}
// Create column picker (Spalten einstellen)
tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column)
{
@@ -882,25 +908,28 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
{
if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0)
{
tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
tabulatorHeaderCollapseHTML += `<button type="button" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} btn-sm btn-select-col ` + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
}
}
// Else provide all tabulator fields as pickable columns
else
{
tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
tabulatorHeaderCollapseHTML += `<button type="button" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} btn-sm btn-select-col ` + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
}
});
tabulatorHeaderCollapseHTML += '</div>'; // end btn-group
tabulatorHeaderCollapseHTML += '</div>'; // end panel-body
tabulatorHeaderCollapseHTML += '</div>'; // end panel-collapse
tabulatorHeaderCollapseHTML += '</div>'; // end panel
tabulatorHeaderCollapseHTML += '</div>'; // end btn-group
tabulatorHeaderCollapseHTML += '</div>'; // end panel-body / accordion-body
tabulatorHeaderCollapseHTML += '</div>'; // end panel-collapse / accordion-collapse
tabulatorHeaderCollapseHTML += '</div>'; // end panel / accordion-item
tabulatorHeaderCollapseHTML += '</div>'; // end panel-group
tabulatorHeaderCollapseHTML += ' </div>'; // end col
tabulatorHeaderCollapseHTML += ' </div>'; // end row
tabulatorHeaderCollapseHTML += '</div>'; // end panel-group / accordion
tabulatorHeaderCollapseHTML += ' </div>'; // end col
tabulatorHeaderCollapseHTML += ' </div>'; // end row
return tabulatorHeaderCollapseHTML;
}
@@ -916,11 +945,13 @@ function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
tabulatorFooterHTML += '<div class="btn-toolbar" role="toolbar">';
tabulatorFooterHTML += '<div class="btn-group" role="group">';
tabulatorFooterHTML += '' +
'<button id="select-all" class="btn btn-default pull-left" type="button">'
// pull-right is a fontawesome class that adds float right style
`<button id="select-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">`
+ FHC_PhrasesLib.t("ui", "alleAuswaehlen") + '' +
'</button>';
tabulatorFooterHTML += '' +
'<button id="deselect-all" class="btn btn-default pull-left" type="button">'
// pull-right is a fontawesome class that adds float right style
`<button id="deselect-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">`
+ FHC_PhrasesLib.t("ui", "alleAbwaehlen") + '' +
'</button>';
tabulatorFooterHTML += '' +
-32
View File
@@ -1,32 +0,0 @@
function(t) {
var e = a(this);
if (!e.is(".disabled, :disabled")) {
var i = l(e),
o = i.hasClass("open");
if (s(), !o) {
"ontouchstart" in document.documentElement && !i.closest(".navbar-nav").length && a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click", s);
var n = {
relatedTarget: this
};
if (i.trigger(t = a.Event("show.bs.dropdown", n)), t.isDefaultPrevented()) return;
e.trigger("focus").attr("aria-expanded", "true"), i.toggleClass("open").trigger(a.Event("shown.bs.dropdown", n))
}
return !1
}
},
function(t) {
if (/(38|40|27|32)/.test(t.which) && !/input|textarea/i.test(t.target.tagName)) {
var e = a(this);
if (t.preventDefault(), t.stopPropagation(), !e.is(".disabled, :disabled")) {
var i = l(e),
o = i.hasClass("open");
if (!o && 27 != t.which || o && 27 == t.which) return 27 == t.which && i.find(r).trigger("focus"), e.trigger("click");
var n = i.find(".dropdown-menu li:not(.disabled):visible a");
if (n.length) {
var s = n.index(t.target);
38 == t.which && 0 < s && s--, 40 == t.which && s < n.length - 1 && s++, ~s || (s = 0), n.eq(s).trigger("focus")
}
}
}
}