fully upgrades the approveAnrechnungUebersicht to tabulator5

application/views/lehre/anrechnung/approveAnrechnungUebersicht.php

@@ -193,7 +193,7 @@ $this->load->view(
                 <!-- Action Button 'Abbrechen'-->
                 <div class="mb-4 d-flex justify-content-end">
                     <button id="approveAnrechnungUebersicht-empfehlung-abbrechen"
-                            class="btn btn-outline-secondary btn-w200" type="reset">
+                            class="me-1 btn btn-outline-secondary btn-w200" type="reset">
 						<?php echo ucfirst($this->p->t('ui', 'abbrechen')); ?>
                     </button>
                     <button id="approveAnrechnungUebersicht-approve-anrechnungen-confirm"

application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php

@@ -204,24 +204,19 @@ $filterWidgetArray = array(
 		ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAm')),
 		ucfirst($this->p->t('anrechnung', 'empfehlungsanfrageAn'))
 	),
+
 	'datasetRepOptions' => '{
+		
 		height: func_height(this),
 		layout: "fitColumns",           // fit columns to width of table
 		persistenceID: "approveAnrechnungUebersicht_V1",
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    columnDefaults:{
-			headerFilterPlaceholder: " ",
-			tooltip:function(e, cell, onRendered){
-				return func_tooltips(cell);
-			},
-		},
 		index: "anrechnung_id",             // assign specific column as unique id (important for row indexing)
         selectable: true,               // allow row selection
         selectableRangeMode: "click",   // allow range selection using shift end click on end of range
         selectablePersistence:false,    // deselect previously selected rows when table is filtered, sorted or paginated
-        
         tableWidgetFooter: {
-			selectButtons: false
+			selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
 		},
 		selectableCheck: function(row){
             return func_selectableCheck(row);
@@ -229,8 +224,15 @@ $filterWidgetArray = array(
         rowFormatter:function(row){
             func_rowFormatter(row,this);
         },
+		columnDefaults:{
+			headerFilterPlaceholder: " ",
+			tooltip:function(e, cell, onRendered){
+				return func_tooltips(cell);
+			}
+		}
 		
 	 }', // tabulator properties
+
 	'datasetRepFieldsDefs' => '{
 		anrechnung_id: {visible: false, headerFilter:"input"},
 		lehrveranstaltung_id: {visible: false, headerFilter:"input"},

public/js/TableWidget.js

@@ -557,7 +557,7 @@ var FHC_TableWidget = {
 	 * The data to be displayed are retrived from the parameter data
 	 */
 	_renderDatasetTabulator: function(tableWidgetDiv, data) {
-
+		
 		// Checks if options were given and returns them
 		var options = FHC_TableWidget._getRepresentationOptions(data);
 		// Checks if record fields definitions were given and returns them
@@ -641,6 +641,7 @@ var FHC_TableWidget = {
  		 */
 		if (typeof options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null)
 		{
+			console.log("this are the options i am intereseted in:",options)
 			var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter);
 			tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML);
 		}
@@ -718,7 +719,7 @@ var FHC_TableWidget = {
 	_getRepresentationOptions: function(data) {
 
 		var options = {}; // eventually contains options fot the representation
-
+		console.log("here is the data before it was parsed",data.datasetRepresentationOptions)
 		// Checks if options were given
 		if (data.hasOwnProperty("datasetRepresentationOptions") && data.datasetRepresentationOptions != "")
 		{
@@ -730,7 +731,7 @@ var FHC_TableWidget = {
 				options = tmpOptions;
 			}
 		}
-
+		
 		return options;
 	},
 
@@ -909,10 +910,11 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
 
 	var tabulatorFooterHTML = '';
-
+	console.log("footer options",tableWidgetFooterOptions)
 	// If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
 	if (typeof tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true)
 	{
+		
 		tabulatorFooterHTML += '<div class="btn-toolbar" role="toolbar">';
 		tabulatorFooterHTML += '<div class="btn-group" role="group">';
 		tabulatorFooterHTML += '' +

public/js/lehre/anrechnung/approveAnrechnungUebersicht.js

@@ -179,7 +179,7 @@ function func_selectableCheck(row){
 
 // Calculate dynamically sum of all LV ECTS by Student and display, when maximum ECTS are exceeded.
 // data = selected data, rows = selected rows
-function func_rowSelectionChanged(data, rows){
+function func_rowSelectionChanged(data, rows, tabulatorInstance){
     
     if (tabulator != null)
     {
@@ -187,15 +187,12 @@ function func_rowSelectionChanged(data, rows){
         selectedPrestudentWithAccumulatedLvEcts = approveAnrechnung.getSumLvEctsByPreStudent(data);
 
         // Loop through all active rows
-        // rowManager
-        //! getting the rowManager throught the tabulator instance saved in the window object (saved in the jquery_wrapper) of the browser
-        var rowManager = window.table.rowManager;
+        
+        var rowManager = tabulatorInstance.rowManager;
+
         for (var i = 0; i < rowManager.activeRows.length; i++) {
 
             // Reinitialize row -> triggers formatters.
-            //selectedRows[i].rerenderRowCells(true);
-            //selectedRows[i].reformat();
-            
             rowManager.activeRows[i].reinitialize();
             
             
@@ -261,18 +258,14 @@ $(function(){
     const hasReadOnlyAccess = $('#formApproveAnrechnungUebersicht').data('readonly');
     const hasCreateAnrechnungAccess = $('#formApproveAnrechnungUebersicht').data('createaccess');
    
-   
-    $(document).on("tableInit", function(event) {
-     
+    // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+    $(document).on("tableInit", function(event,tabulatorInstance) {
+     console.log("instance",tabulatorInstance);
         func_tableBuilt($("#tableWidgetTabulator"))
         
+        // event rowSelectionChanged now has to be attached to the tabulator after instantiation and after the tableBuilt event
+        $("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",(data,rows)=>{func_rowSelectionChanged(data,rows,tabulatorInstance)});
        
-        $("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",func_rowSelectionChanged);
-       
-        /*  table.tabulator("on","dataLoaded", function() {
-            // do something
-            console.log("data was loaded");
-        }); */
     });
 	
     // Pruefen ob Promise unterstuetzt wird
@@ -301,6 +294,7 @@ $(function(){
         approveAnrechnung.disableCreateAnrechnungButton();
     }
 
+    //! this function should not be needed in the approveAnrechnungUebersicht
     // Set status alert color
     approveAnrechnung.setStatusAlertColor();
 
@@ -664,14 +658,11 @@ $(function(){
     // Break Genehmigung abgeben
     $('#approveAnrechnungUebersicht-empfehlung-abbrechen').click(function(){
         genehmigung_panel.slideUp('slow');
-
     })
 
     // Break Ablehnung abgeben
     $('#approveAnrechnungUebersicht-begruendung-abbrechen').click(function(){
-
         begruendung_panel.slideUp('slow');
-
     })
 
     // Copy Begruendung into textarea

public/js/tabulator/jquery_wrapper.js

@@ -57,7 +57,7 @@
                           }
                           console.log(props);
                           console.log('bhbuilt end');
-						  $(document).trigger("tableInit");
+						  $(document).trigger("tableInit",[this]);
                         });
 
 			//retrieve properties on prototype