mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
adds bootstrapVersion flag to the tableWidget options to render bootstrap3 classes or bootstrap5 classes
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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
@@ -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 </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 += '' +
|
||||
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user