Added FOOTER to tabulator with CSV download and adapted GUI to LA erteilen

New:
. tabulator footer with
  - buttons Alle auswählen/abwählen
  - display number of selected rows
  - CSV download

. filter buttons
  - approve-button now initially activated and focused, toggle on click
  - now as buttongroup in extra row

. Lehrauftrag erteilen - button disabled when filter on dummies
This commit is contained in:
Cris
2019-10-24 13:47:30 +02:00
committed by hainberg
parent 83eb4bd5f3
commit a5e915066a
2 changed files with 100 additions and 32 deletions
@@ -95,21 +95,28 @@ $this->load->view(
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<div class="col-xs-12">
<button id="approve-lehrauftraege" class="btn btn-primary pull-right">Lehrauftrag erteilen</button>
<button id="select-all" class="btn btn-default">Alle auswählen</button>
<button id="deselect-all" class="btn btn-default">Alle abwählen</button>
<button id="show-all" class="btn btn-default btn-lehrauftrag focus" data-toggle="tooltip" data-placement="left" title="Alle anzeigen"><i class='fa fa-users'></i></button>
<button id="show-new" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur neue anzeigen"><i class='fa fa-user-plus'></i></button>
<button id="show-ordered" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur bestellte anzeigen"></button><!-- png img set in javascript -->
<button id="show-approved" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur erteilte anzeigen"></button><!-- png img set in javascript -->
<button id="show-accepted" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur angenommene anzeigen"><i class='fa fa-handshake-o'></i></button>
<button id="show-changed" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur geänderte anzeigen"></button><!-- png img set in javascript -->
<button id="show-dummies" class="btn btn-default btn-lehrauftrag" data-toggle="tooltip" data-placement="left" title="Nur verplante ohne Lektor anzeigen (Dummies)"><i class='fa fa-user-secret'></i></button>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button id="show-all" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Alle anzeigen"><i class='fa fa-users'></i></button>
<button id="show-new" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Nur neue anzeigen"><i class='fa fa-user-plus'></i></button>
<button id="show-changed" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Nur geänderte anzeigen"></button><!-- png img set in javascript -->
<button id="show-ordered" class="btn btn-default btn-lehrauftrag active focus" type="button" data-toggle="tooltip" data-placement="left" title="Nur bestellte anzeigen"></button><!-- png img set in javascript -->
<button id="show-approved" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Nur erteilte anzeigen"></button><!-- png img set in javascript -->
<button id="show-accepted" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Nur angenommene anzeigen"><i class='fa fa-handshake-o'></i></button>
</div>
<div class="btn-group" role="group" style="margin-left: 15px;">
<button id="show-dummies" class="btn btn-default btn-lehrauftrag" type="button" data-toggle="tooltip" data-placement="left" title="Nur verplante ohne Lektor anzeigen (Dummies)"><i class='fa fa-user-secret'></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
@@ -124,9 +131,9 @@ $this->load->view(
* PNG icons used in status- and filter buttons
* Setting png icons is a workaround to use font-awsome 5.9.0 icons until system can be updated to newer font awsome version.
* */
const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px; margin: -5px;">';
const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -5px;">';
const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -5px;">';
const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user-tag.png" style="height: 30px; width: 30px; margin: -6px;">';
const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
// -----------------------------------------------------------------------------------------------------------------
// Mutators - setter methods to manipulate table data when entering the tabulator
@@ -311,6 +318,65 @@ $this->load->view(
}
// Tabulator footer element
// -----------------------------------------------------------------------------------------------------------------
// Adds a footer with buttons select all / deselect all / download
function func_footerElement(){
var footer_html = '<div class="row">';
footer_html += '<div class="col-lg-12" style="padding: 5px;">';
footer_html += '<div class="btn-toolbar pull-right" role="toolbar">';
footer_html += '<div class="btn-group" role="group">';
footer_html += '<button id="download-csv" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="left" title="Download CSV" onclick="footer_downloadCSV()"><small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i></button>';
footer_html += '</div>';
footer_html += '</div>';
footer_html += '<div class="btn-toolbar" role="toolbar">';
footer_html += '<div class="btn-group" role="group">';
footer_html += '<button id="select-all" class="btn btn-default pull-left" type="button" onclick="footer_selectAll()">Alle auswählen</button>';
footer_html += '<button id="deselect-all" class="btn btn-default pull-left" type="button" onclick="footer_deselectAll()">Alle abwählen</button>';
footer_html += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal"></span>';
footer_html += '</div>';
footer_html += '</div>';
footer_html += '</div>';
footer_html += '</div>';
return footer_html;
}
// Performs download CSV
function footer_downloadCSV(){
$('#filterTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
}
/*
* Performs select all
* Select all (filtered) rows that are bestellt
*/
function footer_selectAll(){
$('#filterTabulator').tabulator('getRows', true)
.filter(row => row.getData().personalnummer >= 0 && // NOT dummies
row.getData().bestellt != null && // AND bestellt
row.getData().erteilt == null) // AND NOT erteilt
.forEach((row => row.select()));
}
/*
* Performs deselect all
* Deselect all (filtered) rows
*/
function footer_deselectAll(){
$('#filterTabulator').tabulator('deselectRow');
}
// Displays number of selected rows on row selection change
function func_rowSelectionChanged(data, rows){
$('#number-selected').html("Für Erteilung ausgewählt: <strong>" + rows.length + "</strong>");
}
// -----------------------------------------------------------------------------------------------------------------
// Tabulator columns format functions
// -----------------------------------------------------------------------------------------------------------------
@@ -427,20 +493,6 @@ $this->load->view(
}
$(function() {
// Select all (filtered) rows, where status bestellt has a value and status erteilt has no value.
$("#select-all").click(function(){
$('#filterTabulator').tabulator('getRows', true)
.filter(function(row){
return row.getData().bestellt != null && row.getData().erteilt == null;
})
.forEach((row => row.select()));
});
// Deselect all (filtered) rows
$("#deselect-all").click(function(){
$('#filterTabulator').tabulator('deselectRow');
});
// Show all rows
$("#show-all").click(function(){
$('#filterTabulator').tabulator('clearFilter');
@@ -523,10 +575,21 @@ $(function() {
}
});
// Focus on clicked button
// De/activate and un/focus on clicked button, En-/Disable 'Lehrauftrag erteilen'
$(".btn-lehrauftrag").click(function() {
$(".btn-lehrauftrag").removeClass('focus');
$(this).addClass('focus');
// De/activate and un/focus on clicked button
$(".btn-lehrauftrag").removeClass('focus').removeClass('active');
$(this).addClass('focus').addClass('active');
// Enable button 'Lehrauftrag bestellen' by default
$('#approve-lehrauftraege').attr('disabled', false).attr('title', '');
// Disable button Lehrauftrag bestellen for dummies
if (this.id == 'show-dummies')
{
$('#approve-lehrauftraege').attr('disabled', true).attr('title', 'Lehraufträge ohne Lektorzuteilung können nicht bestellt werden.');
}
});
$("#download-cvs").click(function(){
@@ -343,10 +343,14 @@ $filterWidgetArray = array(
selectablePersistence:false, // deselect previously selected rows when table is filtered, sorted or paginated
selectableCheck: function(row){
return func_selectableCheck(row);
},
},
footerElement: func_footerElement(),
rowUpdated:function(row){
func_rowUpdated(row);
},
rowSelectionChanged:function(data, rows){
func_rowSelectionChanged(data, rows);
},
rowFormatter:function(row)
{
func_rowFormatter(row);
@@ -362,7 +366,8 @@ $filterWidgetArray = array(
// column status is built dynamically in funcTableBuilt(),
row_index: {visible:false}, // necessary for row indexing
personalnummer: {visible: false},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();},},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", width: "7%",
bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();},},
lehrveranstaltung_id: {headerFilter:"input"},
lv_bezeichnung: {visible: false},
projektarbeit_id: {visible: false},