Merge remote-tracking branch 'origin/feature-5883/DigitalerLehrauftrag_ColumnPicker' into feature-5405/DigitalerLehrauftrag_ExternePersonen_ausBestellungExkludieren

# Conflicts:
#	public/js/lehre/lehrauftrag/acceptLehrauftrag.js
#	public/js/lehre/lehrauftrag/orderLehrauftrag.js

public/css/Tabulator.css

@@ -12,3 +12,26 @@
 .tabulator-page.active {
 	color: #337ab7 !important;
 }
+
+/* Avoid confusing color change when hovering over selected rows */
+.tabulator-row.tabulator-selected:hover {
+	background-color: #769bcc !important;
+}
+
+/* Frame the table */
+.tabulator {
+	border: 1px solid lightgrey;
+	border-bottom: none;
+	border-top-left-radius: 0.5em;
+	border-top-right-radius: 0.5em;
+}
+
+/* Frame the header cells */
+.tabulator-col:not(:first-of-type) {
+	border-left: 0.5px solid lightgrey;
+}
+
+/* More space for header title (avoids triple points at the end) */
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+	overflow: initial;
+}

public/js/TableWidget.js

@@ -182,11 +182,105 @@ var FHC_TableWidget = {
 	 */
 	_turnOnEvents: function(tableWidgetDiv) {
 
+		var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+
 		// If the choosen dataset representation is tablesorter
 		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
 		{
 			FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
 		}
+
+		// If the choosen dataset representation is tabulator
+		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
+		{
+			// ---------------------------------------------------------------------------------------------------------
+			// Add events to the elements
+			// ---------------------------------------------------------------------------------------------------------
+
+			// Click-Event to download csv
+			tableWidgetDiv.find('#download-csv').on('click', function()
+			{
+				// BOM for correct UTF-8 char output
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true});
+			})
+
+			// Click-Event to toggle the collapsable help panel
+			tableWidgetDiv.find('#help').on('click', function()
+			{
+				// Hide the collapsable settings panel, if it actually shown
+				$('#tabulatorSettings-' + tableUniqueId).collapse('hide');
+
+				// Toggle the collapsable help panel
+				$('#tabulatorHelp-' + tableUniqueId).collapse('toggle');
+			})
+
+			// Click-Event to toggle the collapsable settings panel
+			tableWidgetDiv.find('#settings').on('click', function()
+			{
+				// Hide the collapsable help panel, if it actually shown
+				$('#tabulatorHelp-' + tableUniqueId).collapse('hide');
+
+				// Toggle the collapsable settings panel
+				$('#tabulatorSettings-' + tableUniqueId).collapse('toggle');
+			})
+
+			/* Beautify button group behaviour
+			 * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
+			 * Also remove the disturbing button focus behaviour
+			 */
+			$(".btn-group > .btn").click(function(){
+				if ($(this).hasClass("active"))
+				{
+					$(this).removeClass('active').css('outline', 'none');
+				}
+				else
+				{
+					$(this).addClass("active").css('outline', 'none').siblings().removeClass("active");
+				}
+			});
+
+			/**
+			 * Click-Event to select all rows
+			 * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
+ 			 */
+			if (typeof tableWidgetHook_selectAllButton == 'function')
+			{
+				tableWidgetDiv.find('#select-all').on('click', function() {
+					tableWidgetHook_selectAllButton(tableWidgetDiv);
+				});
+			}
+			else
+			{
+				tableWidgetDiv.find('#select-all').on('click', function() {
+					tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', true);
+				});
+			}
+
+			// Click-Event to deselect all rows
+			tableWidgetDiv.find('#deselect-all').on('click', function()
+			{
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('deselectRow');
+			})
+
+			// Click-Event to toggle column-picker columns
+			tableWidgetDiv.find('.btn-select-col').on('click', function()
+			{
+				var selected = this.value;
+
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
+
+				$(this).toggleClass('active');
+
+				if(!$(this).hasClass('active'))
+				{
+					$(this).css('background-color', 'white');
+				}
+				else
+				{
+					$(this).css('background-color', '#e6e6e6');
+				}
+			})
+		}
 	},
 
 	_renderDataset: function(tableWidgetDiv, data) {
@@ -443,11 +537,48 @@ var FHC_TableWidget = {
 
 				options.columns = arrayTabulatorColumns;
 				options.data = data.dataset;
-
+				options.persistentLayout = true;			// enables persistence (default store in localStorage if available, else in cookie)
+				options.persistenceID = data.tableUniqueId;	// TableWidget unique id to store persistence data seperately for multiple tables
+				options.movableColumns = true;				// allows changing column order
+				options.tooltipsHeader = true;				// set header tooltip with column title
+				options.placeholder = _func_placeholder();	// display text when table is empty
+				options.rowSelectionChanged = function(data, rows){
+					_func_rowSelectionChanged(data, rows);
+				};
+				options.columnVisibilityChanged = function(column, visible) {
+					_func_columnVisibilityChanged(column, visible);
+				};
+				
 				// Renders the tabulator
 				tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
 			}
 		}
+
+		// -------------------------------------------------------------------------------------------------------------
+		// Render TableWidget Header and -Footer
+		// -------------------------------------------------------------------------------------------------------------
+
+		// Render tableWidgetHeader
+		var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
+		tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
+
+		// Render the collapsable div triggered by button in tableWidgetHeader
+		var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+		tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
+
+		/**
+		 * 	tableWidgetFooter is NOT rendered by default.
+		 * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
+		 *	Setup options like this:
+		 *  tableWidgetFooter: {
+		 *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
+		 *  }
+ 		 */
+		if (options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null)
+		{
+			var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter);
+			tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML);
+		}
 	},
 
 	/**
@@ -584,6 +715,179 @@ var FHC_TableWidget = {
 	}
 };
 
+//**********************************************************************************************************************
+// Render functions
+//**********************************************************************************************************************
+/*
+ * Processed when row selection changed.
+ * Displays number of selected rows on row selection change.
+ */
+function _func_rowSelectionChanged (data, rows){
+
+	$('#number-selected').html("Ausgewählte Zeilen: <strong>" + rows.length + "</strong>");
+}
+
+/* Processed when columns visibility changed (e.g. using the column picker).
+ * Redraws the table to expand columns to table width.
+ */
+function _func_columnVisibilityChanged(column, visible){
+
+	var table = column.getTable();
+
+	table.redraw();
+}
+
+/*
+ * Displays text when table is empty
+ */
+function _func_placeholder(){
+	return "<h4>Keine Daten vorhanden.</h4>";
+}
+
+// Returns TableWidget Header HTML (download-, setting button...)
+function _renderTabulatorHeaderHTML(tableWidgetDiv){
+
+	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+
+	var tabulatorHeaderHTML = '';
+	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" 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" data-toggle="collapse tooltip" data-target="tabulatorHelp-'+ tableUniqueId + '" data-placement="left" title="Hilfe zu Tabelleneinstellungen"><i class="fa fa-question"></i></button>';
+	tabulatorHeaderHTML += '<button id="settings" class="btn btn-default" type="button" data-toggle="collapse tooltip" data-target="tabulatorSettings-'+ tableUniqueId + '" data-placement="left" title="Tabelleneinstellungen" aria-expanded="false" aria-controls="tabulatorSettings-'+ tableUniqueId + '"><i class="fa fa-cog"></i></button>';
+	tabulatorHeaderHTML += '</div>';
+	tabulatorHeaderHTML += '</div>';
+	tabulatorHeaderHTML += '<br><br><br>';
+
+	return tabulatorHeaderHTML;
+}
+
+// Returns collapsable HTML element for TableWidget header buttons
+function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
+
+	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+
+	var tabulatorHeaderCollapseHTML = '';
+
+	// CollapseHTML 'Settings'
+	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 += '<h5 class="panel-title">';
+	tabulatorHeaderCollapseHTML += '<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
+		'href="#selectColumns-' + tableUniqueId + '" ' +
+		'aria-expanded="false" aria-controls="selectColumns">Spalten einstellen</a>';
+	tabulatorHeaderCollapseHTML += '</h5>';
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel-heading
+	tabulatorHeaderCollapseHTML += '<div id="selectColumns-' + tableUniqueId + '" class="panel-collapse collapse" ' +
+		'role="tabpanel" aria-labelledby="headingOne">';
+	tabulatorHeaderCollapseHTML += '<div class="panel-body">';
+	tabulatorHeaderCollapseHTML += '<div class="btn-group" role="group">';
+
+	// Create column picker (Spalten einstellen)
+	tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column)
+	{
+		var field = column.getField();
+		var title = column.getDefinition().title;
+		var active_status = column.getVisibility() ? 'active' : '';
+
+		// If certain columns should be excluded from the column picker (define them in a blacklist array)
+		if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' &&
+			Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
+			tableWidgetBlacklistArray_columnUnselectable.length)
+		{
+			if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0)
+			{
+				tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + active_status +'" 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 ' + active_status +'" 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 panel-group
+	tabulatorHeaderCollapseHTML += ' </div>'; // end col
+	tabulatorHeaderCollapseHTML += ' </div>'; // end row
+
+	// CollapseHTML 'Help'
+	tabulatorHeaderCollapseHTML += '<div class="row">';
+	tabulatorHeaderCollapseHTML += '<div class="col-lg-12 collapse" id="tabulatorHelp-'+ tableUniqueId + '">';
+	tabulatorHeaderCollapseHTML += '<div class="well">';
+
+	tabulatorHeaderCollapseHTML += '<h4>Tabelleneinstellungen</h4>';
+	tabulatorHeaderCollapseHTML += '<div class="panel panel-body">';
+	tabulatorHeaderCollapseHTML += '<b>Spalten ein- und ausblenden</b>';
+	tabulatorHeaderCollapseHTML += '<p>';
+	tabulatorHeaderCollapseHTML += '<ul>';
+	tabulatorHeaderCollapseHTML += '<li>Mit einem Klick auf <button><i class="fa fa-cog"></i></button> ' +
+		'werden die Einstellungen geöffnet.</li>';
+	tabulatorHeaderCollapseHTML += '<li>Auf Spalteneinstellungen klicken</li>';
+	tabulatorHeaderCollapseHTML += '<li>Durch (wiederholtes) Klicken auf die einzelnen Spaltennamen können ' +
+		'diese in der Tabelle beliebig oft aktiviert / deaktiviert werden.</li>';
+	tabulatorHeaderCollapseHTML += '<li>Mit einem Klick auf <button><i class="fa fa-cog"></i></button> ' +
+		'werden die Einstellungen wieder geschlossen.</li>';
+	tabulatorHeaderCollapseHTML += '</ul>';
+	tabulatorHeaderCollapseHTML += '</p>';
+	tabulatorHeaderCollapseHTML += '<b>Spaltenbreite verändern</b>';
+	tabulatorHeaderCollapseHTML += '<p>Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam ' +
+		'mit dem Mauszeiger auf den rechten Rand der entprechenden Spalte. <br>' +
+		'Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und ' +
+		'mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert.';
+	tabulatorHeaderCollapseHTML += '</p>';
+	tabulatorHeaderCollapseHTML += '<div class="alert alert-info"><strong>INFO: </strong>Alle individuellen Tabelleneinstellungen werden in ' +
+		'Ihrem Browser Cache gespeichert. Wenn Sie Ihren Browser Cache löschen, werden Ihre Einstellungen zurückgesetzt und ' +
+		'müssen gegebenenfalls neu eingestellt werden.';
+	tabulatorHeaderCollapseHTML += '</div>';
+	tabulatorHeaderCollapseHTML += '</div><br>';	// end panel-body
+
+	tabulatorHeaderCollapseHTML += '<h4>Zeilen auswählen</h4>';
+	tabulatorHeaderCollapseHTML += '<div class="panel panel-body">';
+	tabulatorHeaderCollapseHTML += '<ul>';
+	tabulatorHeaderCollapseHTML += '<li>Einzeln auswählen: <kbd>Strg</kbd> + Klick auf einzelne Zeile(n)</li>';
+	tabulatorHeaderCollapseHTML += '<li>Bereich auswählen: <kbd>Shift</kbd> + Klick auf Anfangs- und Endzeile</li>';
+	tabulatorHeaderCollapseHTML += '<li>Alle auswählen: Button \'Alle auswählen\'</li>';
+	tabulatorHeaderCollapseHTML += '</ul>';
+	tabulatorHeaderCollapseHTML += '</div><br>'; // end panel-body
+
+	tabulatorHeaderCollapseHTML += '</div>';  // end well
+	tabulatorHeaderCollapseHTML += ' </div>'; // end col collapse
+	tabulatorHeaderCollapseHTML += ' </div>'; // end row
+
+	return tabulatorHeaderCollapseHTML;
+}
+
+// Returns TableWidget Footer HTML (de-/select buttons,...)
+function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
+
+	var tabulatorFooterHTML = '';
+
+	// If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
+	if (tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true)
+	{
+		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">Alle auswählen</button>';
+		tabulatorFooterHTML += '<button id="deselect-all" class="btn btn-default pull-left" type="button">Alle abwählen</button>';
+		tabulatorFooterHTML += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">Ausgewählte Zeilen: <strong>0</strong></span>';
+		tabulatorFooterHTML += '</div>';
+		tabulatorFooterHTML += '</div>';
+		tabulatorFooterHTML += '</br></br>';
+	}
+
+	return tabulatorFooterHTML;
+}
+
 /**
  * When JQuery is up
  */

public/js/lehre/lehrauftrag/acceptLehrauftrag.js

@@ -19,6 +19,18 @@ const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-use
 const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
 const ICON_LEHRAUFTRAG_CANCELLED = '<img src="../../../public/images/icons/fa-user-times.png" style="height: 30px; width: 30px; margin: -6px;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag',
+	'storniert_von',				// fields from cancelledLehrauftragData
+	'letzterStatus_vorStorniert'	// fields from cancelledLehrauftragData
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -81,10 +93,9 @@ function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){
 // Tabulator table format functions
 // -----------------------------------------------------------------------------------------------------------------
 
-// Displays text when table is empty
-function func_placeholder()
-{
-	return "<h4>Keine Daten vorhanden.</h4>";
+// Returns relative height (depending on screen size)
+function func_height(table){
+	return $(window).height() * 0.50;
 }
 
 // Formats the rows
@@ -254,65 +265,20 @@ function func_renderComplete(table){
 	);
 }
 
-// Tabulator footer element
+// TableWidget 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(){
-	$('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows that are bestellt and erteilt
  */
-function footer_selectAll(){
-	$('#tableWidgetTabulator').tabulator('getRows', true)
-		.filter(function(row){ return row.getData().bestellt != null &&   // bestellt
-			row.getData().erteilt != null &&            // AND erteilt
-			row.getData().akzeptiert == null &&         // AND NOT akzeptiert
-			row.getData().status != 'Geändert'
-		;})         // AND NOT geändert
-		.forEach((function(row){ return row.select();}));
-}
-
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-	$('#tableWidgetTabulator').tabulator('deselectRow');
-}
-
-// Displays number of selected rows on row selection change
-function func_rowSelectionChanged(data, rows){
-	$('#number-selected').html("Für Annehmen ausgewählt: <strong>" + rows.length + "</strong>");
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row =>  row.getData().bestellt != null &&	// bestellt
+			row.getData().erteilt != null &&				// AND erteilt
+			row.getData().akzeptiert == null &&				// AND NOT akzeptiert
+			row.getData().status != 'Geändert')				// AND NOT geändert
+		.forEach((row => row.select()));
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -476,6 +442,12 @@ $(function() {
 		return;
 	}
 
+	// Redraw table on resize to fit tabulators height to windows height
+	window.addEventListener('resize', function(){
+		$('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
+		$('#tableWidgetTabulator').tabulator('redraw', true);
+	});
+
 	// Show all rows
 	$("#show-all").click(function(){
 		$('#tableWidgetTabulator').tabulator('clearFilter');
@@ -594,7 +566,7 @@ $(function() {
 						// Print error message
 						FHC_DialogLib.alertWarning(data.retval);
 					}
-
+					
 					if (!data.error && data.retval != null)
 					{
 						// Update status 'Erteilt'

public/js/lehre/lehrauftrag/approveLehrauftrag.js

@@ -19,6 +19,17 @@ const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user
 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;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'personalnummer',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag'
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -95,10 +106,9 @@ function func_initialFilter(){
 // Tabulator table format functions
 // -----------------------------------------------------------------------------------------------------------------
 
-// Displays text when table is empty
-function func_placeholder()
-{
-    return "<h4>Keine Daten vorhanden.</h4>";
+// Returns relative height (depending on screen size)
+function func_height(table){
+    return $(window).height() * 0.50;
 }
 
 // Formats the group header
@@ -301,65 +311,20 @@ function func_rowUpdated(row){
     row.getElement().style["pointerEvents"] = "none";
 }
 
-
-// Tabulator footer element
+// TableWidget 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(){
-    $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows that are bestellt
  */
-function footer_selectAll(){
-    $('#tableWidgetTabulator').tabulator('getRows', true)
-        .filter(row => row.getData().personalnummer >= 0 && // NOT dummies
-            row.getData().bestellt != null &&           // AND bestellt
-            row.getData().erteilt == null &&            // AND NOT erteilt
-            row.getData().status != 'Geändert')         // AND NOT geaendert
-        .forEach((row => row.select()));
-}
-
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-    $('#tableWidgetTabulator').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>");
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row => row.getData().personalnummer >= 0 && // NOT dummies
+			row.getData().bestellt != null &&				// AND bestellt
+			row.getData().erteilt == null &&				// AND NOT erteilt
+			row.getData().status != 'Geändert')				// AND NOT geaendert
+		.forEach((row => row.select()));
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -526,6 +491,12 @@ akzeptiert_tooltip = function(cell){
 }
 $(function() {
 
+    // Redraw table on resize to fit tabulators height to windows height
+    window.addEventListener('resize', function(){
+        $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
+        $('#tableWidgetTabulator').tabulator('redraw', true);
+    });
+
     // Show all rows
     $("#show-all").click(function(){
         $('#tableWidgetTabulator').tabulator('clearFilter');

public/js/lehre/lehrauftrag/orderLehrauftrag.js

@@ -18,6 +18,17 @@ const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user
 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;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'personalnummer',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag'
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -106,10 +117,9 @@ function func_dataLoaded(data, table){
 // Tabulator table format functions
 // -----------------------------------------------------------------------------------------------------------------
 
-// Displays text when table is empty
-function func_placeholder()
-{
-    return "<h4>Keine Daten vorhanden.</h4>";
+// Returns relative height (depending on screen size)
+function func_height(table){
+    return $(window).height() * 0.50;
 }
 
 // Formats the group header
@@ -325,47 +335,16 @@ function func_rowUpdated(row){
     row.getElement().style["pointerEvents"] = "none";
 }
 
-// Tabulator footer element
+// TableWidget 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(){
-    $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows which have status bestellt
  */
-function footer_selectAll(){
-    $('#tableWidgetTabulator').tabulator('getRows', true)
-        .filter(row => (
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row => (
             row.getData().personalnummer > 0 ||                 // not dummies
             row.getData().personalnummer == null) &&            // include Projektbetreuer
             row.getData().mitarbeiter_uid != null &&            // AND is Mitarbeiter
@@ -377,20 +356,7 @@ function footer_selectAll(){
                 row.getData().status == 'Geändert'              // AND geaendert)
             )
         )
-        .forEach((row => row.select()));
-}
-
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-    $('#tableWidgetTabulator').tabulator('deselectRow');
-}
-
-// Displays number of selected rows on row selection change
-function func_rowSelectionChanged(data, rows){
-    $('#number-selected').html("Für Bestellung ausgewählt: <strong>" + rows.length + "</strong>");
+		.forEach((row => row.select()));
 }
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -576,6 +542,12 @@ akzeptiert_tooltip = function(cell){
 
 $(function() {
 
+    // Redraw table on resize to fit tabulators height to windows height
+    window.addEventListener('resize', function(){
+        $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
+        $('#tableWidgetTabulator').tabulator('redraw', true);
+    });
+
     // Show all rows
     $("#show-all").click(function(){
         $('#tableWidgetTabulator').tabulator('clearFilter');