diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php index f0d8e14f1..fbab8490a 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php @@ -9,7 +9,9 @@ $this->load->view( 'bootstrap3' => true, 'fontawesome4' => true, 'sbadmintemplate3' => true, - 'tabulator4' => true, + 'tabulator5' => true, + 'tabulator5JQuery' => true, + 'cis'=> true, 'momentjs2' => true, 'ajaxlib' => true, 'dialoglib' => true, diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php index 85b663d4a..fd756ffb7 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php @@ -376,7 +376,6 @@ $filterWidgetArray = array( layout:"fitColumns", // fit columns to width of table layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated - headerFilterPlaceholder: " ", groupBy:"lehrveranstaltung_id", groupToggleElement:"header", //toggle group on click anywhere in the group header groupHeader: function(value, count, data, group){ @@ -390,24 +389,15 @@ $filterWidgetArray = array( selectableCheck: function(row){ return func_selectableCheck(row); }, - rowUpdated:function(row){ - func_rowUpdated(row); - }, rowFormatter:function(row){ func_rowFormatter(row); - }, - renderStarted:function(){ - func_renderStarted(this); - }, - tableBuilt: function(){ - func_tableBuilt(this); - }, - dataLoaded: function(data){ - func_dataLoaded(data, this); }, tableWidgetFooter: { selectButtons: true - } + }, + columnDefaults:{ + headerFilterPlaceholder:" ", + } }', // tabulator properties 'datasetRepFieldsDefs' => '{ // column status is built dynamically in funcTableBuilt() diff --git a/public/css/Tabulator5.css b/public/css/Tabulator5.css index 863ae867f..a60b175d8 100644 --- a/public/css/Tabulator5.css +++ b/public/css/Tabulator5.css @@ -88,6 +88,10 @@ } +/* special bootstrap5 styling for tableWidget and their accordion-item ::after content */ +.accordion-button::after{ + content:none !important; +} .tabulator-cell .btn { diff --git a/public/css/cis_bs5.css b/public/css/cis_bs5.css index 48a5bfb1b..91c5aea9d 100644 --- a/public/css/cis_bs5.css +++ b/public/css/cis_bs5.css @@ -64,6 +64,7 @@ h6, .h6 { .tabulator { font-size: var(--bs-body-font-size); + } .fhc-container .tabulator { @@ -93,6 +94,50 @@ h6, .h6 { background-color: #ececec; } + +/* using bootstrap background classes to style the background color of tabulator rows */ +/* bg-warning */ +/* odd-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-warning, +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-warning { + background-color: #fcf8e3; + +} +/* even-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-warning, +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-warning { + background-color: #fcf8e3; + +} + +/* bg-success */ +/* odd-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-success, +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-success { + background-color: #dff0d8; + +} +/* even-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-success, +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-success { + background-color: #dff0d8; + +} + +/* bg-info */ +/* odd-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-frozen.bg-info, +.fhc-container .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell.bg-info { + background-color: #d9edf7; + +} +/* even-rows */ +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-frozen.bg-info, +.fhc-container .tabulator .tabulator-row.tabulator-row-even .tabulator-cell.bg-info { + background-color: #d9edf7; + +} + .fhc-container .tabulator .tabulator-col, .fhc-container .tabulator .tabulator-cell { border-right: 1px solid #dee2e6; diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js index ef11e38d2..f40742617 100644 --- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js @@ -178,7 +178,7 @@ function func_rowFormatter(row){ cell.getElement().classList.add('bg-success') // akzeptiert } - // Die default Farbe wird bereits in Tabulator5.css file festgesetzt + // default color is already set in the Tabulator5.css file that gets loaded the Header flag tabulator5 // row.getElement().style["background-color"] = COLOR_LIGHTGREY; // default }); diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js index 06db3ce60..e1be95d7f 100644 --- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js @@ -48,7 +48,11 @@ var mut_formatStringDate = function(value, data, type, params, component) { // ----------------------------------------------------------------------------------------------------------------- // Formats null values to a string number '0.00' -var form_formatNulltoStringNumber = function(cell, formatterParams){ +var form_formatNulltoStringNumber = function(cell, formatterParams, onRendered){ + //cell - the cell component + //formatterParams - parameters set for the column + //onRendered - function to call when the formatter has been rendered + if (cell.getValue() == null){ if (formatterParams.precision == 1) { @@ -195,10 +199,10 @@ function func_rowFormatter(row){ { cell.getElement().classList.add('bg-success') // akzeptiert } - else - { - row.getElement().style["background-color"] = COLOR_LIGHTGREY; // default - } + + // default color is already set in the Tabulator5.css file that gets loaded the Header flag tabulator5 + // row.getElement().style["background-color"] = COLOR_LIGHTGREY; // default + }); } @@ -246,7 +250,7 @@ function func_selectableCheck(row){ // Adds column status function func_tableBuilt(table) { // Add status column to table - table.addColumn( + table.tabulator("addColumn", { title: "", field: "status", @@ -437,7 +441,10 @@ status_formatter = function(cell, formatterParams, onRendered){ }; // Generates status tooltip -status_tooltip = function(cell){ +status_tooltip = function(e, cell, onRendered){ + //e - mouseover event + //cell - cell component + //onRendered - onRendered callback registration function var is_dummy = (cell.getRow().getData().personalnummer <= 0 && cell.getRow().getData().personalnummer != null); var is_mitarbeiter = cell.getRow().getData().mitarbeiter_uid != null; @@ -523,7 +530,11 @@ status_tooltip = function(cell){ } // Generates bestellt tooltip -bestellt_tooltip = function(cell){ +bestellt_tooltip = function(e, cell, onRendered){ + //e - mouseover event + //cell - cell component + //onRendered - onRendered callback registration function + if (cell.getRow().getData().bestellt_von != null) { return FHC_PhrasesLib.t("ui", "bestelltVon") + cell.getRow().getData().bestellt_von; @@ -531,14 +542,22 @@ bestellt_tooltip = function(cell){ } // Generates erteilt tooltip -erteilt_tooltip = function(cell){ +erteilt_tooltip = function(e, cell, onRendered){ + //e - mouseover event + //cell - cell component + //onRendered - onRendered callback registration function + if (cell.getRow().getData().erteilt_von != null) { return FHC_PhrasesLib.t("ui", "erteiltVon") + cell.getRow().getData().erteilt_von; } } // Generates akzeptiert tooltip -akzeptiert_tooltip = function(cell){ +akzeptiert_tooltip = function(e, cell, onRendered){ + //e - mouseover event + //cell - cell component + //onRendered - onRendered callback registration function + if (cell.getRow().getData().akzeptiert_von != null) { return FHC_PhrasesLib.t("ui", "angenommenVon") + cell.getRow().getData().akzeptiert_von; } @@ -546,6 +565,22 @@ akzeptiert_tooltip = function(cell){ $(function() { + // tableInit is called in the jquery_wrapper when the tableBuilt event was finished + $(document).on("tableInit", function(event,tabulatorInstance) { + + func_tableBuilt($("#tableWidgetTabulator")) + + // event rowUpdated needs to be attached as a callback to the tableBuilt event in tabulator5 + $("#tableWidgetTabulator").tabulator("on","rowUpdated",(row)=>{func_rowUpdated(row)}); + + // event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5 + $("#tableWidgetTabulator").tabulator("on","renderStarted",()=>{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)}); + + }); + // Redraw table on resize to fit tabulators height to windows height window.addEventListener('resize', function(){ $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);