migrating approveLehrauftrag to tabulator5

This commit is contained in:
SimonGschnell
2024-03-21 13:42:43 +01:00
parent 47dfb66b8d
commit a8c60c105d
5 changed files with 78 additions and 31 deletions
@@ -6,7 +6,7 @@ $this->load->view(
'jquery3' => true,
'jqueryui1' => true,
'jquerycheckboxes1' => true,
'bootstrap5' => true,
'bootstrap3' => true,
'fontawesome4' => true,
'sbadmintemplate3' => true,
'tabulator5' => true,
@@ -90,13 +90,9 @@ $this->load->view(
)
),
'customJSs' => array(
'public/js/bootstrapper.js',
'public/js/lehre/lehrauftrag/approveLehrauftrag.js'
),
'customCSSs' => array(
'public/css/navbar.css'
)
)
)
);
?>
@@ -404,7 +404,7 @@ $filterWidgetArray = array(
vertrag_id: {visible: false},
vertrag_stunden: {visible: false},
vertrag_betrag: {visible: false},
mitarbeiter_uid: {visible: false, headerFilter:"input"},
mitarbeiter_uid: {visible: false, headerFilter:"input"},func_initialFilter
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
+51
View File
@@ -39,6 +39,57 @@
z-index: 999999;
}
/* using bootstrap background classes to style the background color of tabulator rows */
/* bg-warning */
/* odd-rows */
.tabulator-headers .tabulator-frozen.bg-warning,
.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-warning,
.tabulator-row.tabulator-row-odd .tabulator-cell.bg-warning {
background-color: #fcf8e3;
}
/* even-rows */
.tabulator-headers .tabulator-frozen.bg-warning,
.tabulator-row.tabulator-row-even .tabulator-frozen.bg-warning,
.tabulator-row.tabulator-row-even .tabulator-cell.bg-warning {
background-color: #fcf8e3;
}
/* bg-success */
/* odd-rows */
.tabulator-headers .tabulator-frozen.bg-success,
.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-success,
.tabulator-row.tabulator-row-odd .tabulator-cell.bg-success {
background-color: #dff0d8;
}
/* even-rows */
.tabulator-headers .tabulator-frozen.bg-success,
.tabulator-row.tabulator-row-even .tabulator-frozen.bg-success,
.tabulator-row.tabulator-row-even .tabulator-cell.bg-success {
background-color: #dff0d8;
}
/* bg-info */
/* odd-rows */
.tabulator-headers .tabulator-frozen.bg-info,
.tabulator-row.tabulator-row-odd .tabulator-frozen.bg-info,
.tabulator-row.tabulator-row-odd .tabulator-cell.bg-info {
background-color: #d9edf7;
}
/* even-rows */
.tabulator-headers .tabulator-frozen.bg-info,
.tabulator-row.tabulator-row-even .tabulator-frozen.bg-info,
.tabulator-row.tabulator-row-even .tabulator-cell.bg-info {
background-color: #d9edf7;
}
.tabulator-cell .btn {
padding: 0 .5rem;
max-height: 22px;
+2 -2
View File
@@ -931,10 +931,10 @@ function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
tabulatorFooterHTML +=
`<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button id="select-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">
<button id="select-all" class="btn ${_bootstrapVersion==3?'btn-default pull-left':'btn-outline-secondary float-start'} " type="button">
${FHC_PhrasesLib.t("ui", "alleAuswaehlen")}
</button>
<button id="deselect-all" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'} pull-right" type="button">
<button id="deselect-all" class="btn ${_bootstrapVersion==3?'btn-default pull-left':'btn-outline-secondary float-start'} " type="button">
${FHC_PhrasesLib.t("ui", "alleAbwaehlen")}
</button>
<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">
@@ -177,10 +177,10 @@ function func_rowFormatter(row){
{
cell.getElement().classList.add('bg-success') // akzeptiert
}
else
{
row.getElement().style["background-color"] = COLOR_LIGHTGREY; // default
}
// Die default Farbe wird bereits in Tabulator5.css file festgesetzt
// row.getElement().style["background-color"] = COLOR_LIGHTGREY; // default
});
}
@@ -225,7 +225,7 @@ function func_selectableCheck(row){
// Adds column status
function func_tableBuilt(table) {
// Add status column to table
table.tabulator("addColumn",
table.addColumn(
{
title: "<i class='fa fa-user-o'></i>",
field: "status",
@@ -469,8 +469,12 @@ status_tooltip = function(cell){
}
}
// Generates bestellt tooltip
bestellt_tooltip = function(cell){
// Generates bestellt tooltipPhrase
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;
@@ -478,14 +482,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;
}
@@ -498,18 +510,6 @@ $(function() {
$('#tableWidgetTabulator').tabulator('redraw', true);
});
// tableInit is called in the jquery_wrapper when the tableBuilt event was finished
$(document).on("tableInit", function(event,tabulatorInstance) {
func_tableBuilt($("#tableWidgetTabulator"))
// event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5
$("#tableWidgetTabulator").tabulator("on","renderStarted",()=>{func_renderStarted(tabulatorInstance)});
// event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5
$("#tableWidgetTabulator").tabulator("on","rowUpdated",(row)=>{func_rowUpdated(row)});
});
// Show all rows
$("#show-all").click(function(){
$('#tableWidgetTabulator').tabulator('clearFilter');