From 72bf2525b79b1bbd986084717afc881fcdcd0ee9 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 18 Mar 2024 10:14:05 +0100
Subject: [PATCH] updating reviewAnrechnungUebersicht to bootstrap5 and
 tabulator5

---
 .../approveAnrechnungUebersicht.php           |  4 +-
 .../anrechnung/reviewAnrechnungUebersicht.php | 92 ++++++++++---------
 .../reviewAnrechnungUebersichtData.php        | 16 ++--
 .../anrechnung/approveAnrechnungUebersicht.js |  2 +-
 .../anrechnung/reviewAnrechnungUebersicht.js  | 21 ++++-
 5 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php b/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
index 02a104e6f..a63682cf0 100644
--- a/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
+++ b/application/views/lehre/anrechnung/approveAnrechnungUebersicht.php
@@ -185,11 +185,11 @@ $this->load->view(
             
             <div class="border border-1 mb-4" style="display: none"
                  id="approveAnrechnungUebersicht-genehmigung-panel">
-                <div>
+                <div class="mb-4">
                     <h4 class="card card-body border-success text-success my-3"><?php echo $this->p->t('anrechnung', 'genehmigungenPositivQuestion'); ?></h4>
                     <div class="ps-2 mb-4"><?php echo $this->p->t('anrechnung', 'genehmigungenPositiv'); ?></div>
                 </div>
-                <br>
+                
                 <!-- Action Button 'Abbrechen'-->
                 <div class="mb-4 d-flex justify-content-end">
                     <button id="approveAnrechnungUebersicht-empfehlung-abbrechen"
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php b/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
index 7485a1812..0c2cbc297 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungUebersicht.php
@@ -5,9 +5,11 @@ $this->load->view(
 		'title' => $this->p->t('anrechnung', 'anrechnungenPruefen'),
 		'jquery3' => true,
 		'jqueryui1' => true,
-		'bootstrap3' => true,
+		'bootstrap5' => true,
 		'fontawesome4' => true,
-		'tabulator4' => true,
+		'tabulator5' => true,
+        'tabulator5JQuery' => true,
+        'cis'=>true,
 		'ajaxlib' => true,
 		'dialoglib' => true,
 		'tablewidget' => true,
@@ -84,18 +86,18 @@ $this->load->view(
     <div class="container-fluid">
         <!-- title -->
         <div class="row">
-            <div class="col-lg-12 page-header">
-                <h3>
+            <div class="col-12 my-4 border-bottom">
+                <h3 class="fw-normal">
 					<?php echo $this->p->t('anrechnung', 'anrechnungenPruefen'); ?>
-                    <small>| <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
+                    <small class="text-secondary fs-6">| <?php echo ucfirst($this->p->t('global', 'uebersicht')); ?></small>
                 </h3>
             </div>
         </div>
         <!-- dropdown studiensemester -->
         <div class="row">
-            <div class="col-lg-12">
-                <form id="formApproveAnrechnungUebersicht" class="form-inline" action="" method="get">
-                    <div class="form-group">
+            <div class="col-12">
+                <form id="formApproveAnrechnungUebersicht" class="row align-items-center" action="" method="get">
+                    <div class="col-auto">
 						<?php
 						echo $this->widgetlib->widget(
 							'Studiensemester_widget',
@@ -104,42 +106,45 @@ $this->load->view(
 							),
 							array(
 								'name' => 'studiensemester',
-								'id' => 'studiensemester'
+								'id' => 'studiensemester',
+                                'class'=>'form-select w-auto ',
 							)
 						);
 						?>
                     </div>
                     <button type="submit"
-                            class="btn btn-default form-group"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
+                            class="btn btn-outline-secondary col-auto"><?php echo ucfirst($this->p->t('ui', 'anzeigen')); ?></button>
                 </form>
             </div>
         </div>
         <!-- Tabelle -->
         <div class="row">
-            <div class="col-xs-12">
+            <div class="col-12">
 				<?php $this->load->view('lehre/anrechnung/reviewAnrechnungUebersichtData.php');?>
             </div>
         </div>
         <!-- Empfehlung / Nicht Empfehlung Panel -->
         <div class="row">
-            <div class="panel panel-default panel-body" style="display: none"
+            <div class="border border-1 mb-4" style="display: none"
                  id="reviewAnrechnungUebersicht-begruendung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-danger text-danger"><?php echo $this->p->t('anrechnung', 'empfehlungenNegativQuestion'); ?></h4>
+                <div class="mb-4 col-12">
+                    <h4 class="card card-body border-danger text-danger my-3"><?php echo $this->p->t('anrechnung', 'empfehlungenNegativQuestion'); ?></h4>
+                    <div class="mb-4">
                     <b><span>&ensp;<?php echo $this->p->t('anrechnung', 'bitteBegruendungAngeben'); ?></span>
                         <span class="text-danger">
                         <?php echo $this->p->t('anrechnung', 'begruendungWirdFuerAlleUebernommen'); ?>
                         </span></b>
-                    <br><br>
-                    <ul class="list-group">
+                        </div>
+                    
+                    <ul class="list-group mb-4">
                         <li class="list-group-item">
                             <span><?php echo $this->p->t('anrechnung', 'empfehlungNegativPruefungNichtMoeglich'); ?></span>
-                            <span class="btn-copyIntoTextarea pull-right" data-toggle="tooltip" data-placement="right"
+                            <span class="btn-copyIntoTextarea float-end" data-bs-toggle="tooltip" data-bs-placement="right"
                                   title="<?php echo $this->p->t('ui', 'textUebernehmen'); ?>">
                                 <i class="fa fa-clipboard fa-lg" aria-hidden="true"></i>
                             </span>
                         </li>
-                        <li class="list-group-item disabled">
+                        <li class="list-group-item list-group-item-secondary">
                             <?php echo $this->p->t('anrechnung', 'empfehlungNegativKenntnisseNichtGleichwertigWeilHinweis'); ?>
                         </li>
                     </ul>
@@ -148,11 +153,11 @@ $this->load->view(
                               placeholder="<?php echo $this->p->t('anrechnung', 'textUebernehmenOderEigenenBegruendungstext'); ?>"
                               required></textarea>
                 </div>
-                <br>
+                
                 <!-- Action Button Abbrechen & Bestaetigen-->
-                <div class="pull-right">
+                <div class=" mb-4 d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-begruendung-abbrechen"
-                            class="btn btn-default 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="reviewAnrechnungUebersicht-dont-recommend-anrechnungen-confirm"
@@ -161,17 +166,17 @@ $this->load->view(
                     </button>
                 </div>
             </div>
-            <div class="panel panel-default panel-body" style="display: none"
+            <div class="border border-1 mb-4" style="display: none"
                  id="reviewAnrechnungUebersicht-empfehlung-panel">
-                <div>
-                    <h4 class="panel panel-body panel-success text-success"><?php echo $this->p->t('anrechnung', 'empfehlungenPositivQuestion'); ?></h4>
-                    &ensp;<?php echo $this->p->t('anrechnung', 'empfehlungenPositiv'); ?><br><br>
+                <div class="mb-4" >
+                    <h4 class="card card-body border-success text-success my-3"><?php echo $this->p->t('anrechnung', 'empfehlungenPositivQuestion'); ?></h4>
+                    <div class="ps-2 mb-4"><?php echo $this->p->t('anrechnung', 'empfehlungenPositiv'); ?></div>
                 </div>
-                <br>
+                
                 <!-- Action Button 'Abbrechen'-->
-                <div class="pull-right">
+                <div class="mb-4 d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-empfehlung-abbrechen"
-                            class="btn btn-default 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="reviewAnrechnungUebersicht-recommend-anrechnungen-confirm"
@@ -181,35 +186,34 @@ $this->load->view(
                 </div>
             </div>
         </div>
-
+        <!-- Filter buttons / Submit buttons-->
         <div class="row">
-
             <!-- Filter buttons -->
-            <div class="col-xs-3">
+            <div class="col-3">
                 <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group" role="group">
-                        <button id="show-need-recommendation" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-need-recommendation" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                                 title="<?php echo $this->p->t('ui', 'nurFehlendeEmpfehlungenAnzeigen'); ?>"><i
                                     class='fa fa-eye'></i>
                         </button>
-                        <button id="show-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-recommended" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                                 title="<?php echo $this->p->t('ui', 'nurEmpfohleneAnzeigen'); ?>"><i
                                     class='fa fa-thumbs-o-up'></i>
                         </button>
-                        <button id="show-not-recommended" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-not-recommended" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                                 title="<?php echo $this->p->t('ui', 'nurNichtEmpfohleneAnzeigen'); ?>"><i
                                     class='fa fa-thumbs-o-down'></i>
                         </button>
-                        <button id="show-approved" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-approved" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                                 title="<?php echo $this->p->t('ui', 'nurGenehmigteAnzeigen'); ?>"><i
                                     class='fa fa-check'></i>
                         </button>
-                        <button id="show-rejected" class="btn btn-default btn-clearfilter" type="button"
-                                data-toggle="tooltip" data-placement="left"
+                        <button id="show-rejected" class="btn btn-outline-secondary btn-clearfilter" type="button"
+                                data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                                 title="<?php echo $this->p->t('ui', 'nurAbgelehnteAnzeigen'); ?>"><i
                                     class='fa fa-times'></i>
                         </button>
@@ -218,10 +222,10 @@ $this->load->view(
             </div>
 
             <!-- Action Buttons 'Empfehlen', 'Nicht empfehlen'-->
-            <div class="col-xs-9">
-                <div class="pull-right">
+            <div class="col-9">
+                <div class="d-flex justify-content-end">
                     <button id="reviewAnrechnungUebersicht-dont-recommend-anrechnungen-ask"
-                            class="btn btn-danger btn-w200" type="button">
+                            class="me-1 btn btn-danger btn-w200" type="button">
                         <?php echo ucfirst($this->p->t('anrechnung', 'nichtEmpfehlen')); ?></button>
                     <button id="reviewAnrechnungUebersicht-recommend-anrechnungen-ask"
                             class="btn btn-primary btn-w200" type="button">
diff --git a/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php b/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
index 30ae3d72b..b88617ced 100644
--- a/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
+++ b/application/views/lehre/anrechnung/reviewAnrechnungUebersichtData.php
@@ -157,15 +157,11 @@ $filterWidgetArray = array(
 		persistentLayout:true,
 		persistentSort:true,
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
 	    initialHeaderFilter: [{field:"empfehlungsberechtigt", value: true}], 
         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
-        tableBuilt: function(){
-            func_tableBuilt(this);
-        },
         tableWidgetFooter: {
 			selectButtons: true
 		},
@@ -175,12 +171,12 @@ $filterWidgetArray = array(
         rowFormatter:function(row){
             func_rowFormatter(row);
         },
-         rowUpdated:function(row){
-            func_rowUpdated(row);
-        },
-        tooltips: function(cell){
-            return func_tooltips(cell);
-        }
+        columnDefaults:{
+			headerFilterPlaceholder: " ",
+			tooltip:(cell)=>{func_tooltips(cell)},
+			
+		}
+        
 	 }', // tabulator properties
 	'datasetRepFieldsDefs' => '{
 		empfehlungsberechtigt: {formatter:"tickCross", align:"center", headerTooltip:"Berechtigt wenn man die LV leitet oder wenn der LV keine LV-Leitung zugeordnet ist.",
diff --git a/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js b/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
index 4b89c36b7..371268c1e 100644
--- a/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
+++ b/public/js/lehre/anrechnung/approveAnrechnungUebersicht.js
@@ -263,7 +263,7 @@ $(function(){
      
         func_tableBuilt($("#tableWidgetTabulator"))
         
-        // event rowSelectionChanged now has to be attached to the tabulator after instantiation and after the tableBuilt event
+        // event rowSelectionChanged needs to be attached as a callback to the tableBuilt event in tabulator5
         $("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",(data,rows)=>{func_rowSelectionChanged(data,rows,tabulatorInstance)});
        
     });
diff --git a/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js b/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
index c71b85274..7ae03d875 100644
--- a/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
+++ b/public/js/lehre/anrechnung/reviewAnrechnungUebersicht.js
@@ -59,7 +59,7 @@ function hf_empfehlungsberechtigt(headerValue, rowValue){
 
 // Adds column details
 function func_tableBuilt(table) {
-    table.addColumn(
+    table.tabulator("addColumn",
         {
             title: "Details",
             field: 'details',
@@ -149,6 +149,7 @@ function paramLookup_dokBez(cell){
  * (Ignore rows that are approved, rejected or in request for recommendation)
  */
 function tableWidgetHook_selectAllButton(tableWidgetDiv){
+    
     var resultRows = tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
         .filter(row =>
             row.getData().status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR
@@ -173,6 +174,16 @@ $(function(){
         return;
     }
 
+
+    $(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)})
+       
+    });
+
     // Redraw table on resize to fit tabulators height to windows height
     window.addEventListener('resize', function(){
         $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50);
@@ -432,16 +443,16 @@ var reviewAnrechnung = {
 
         switch (status_kurzbz) {
             case ANRECHNUNGSTATUS_APPROVED:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-success');
+                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('bg-success-subtle');
                 break;
             case ANRECHNUNGSTATUS_REJECTED:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-danger');
+                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('bg-danger-subtle');
                 break;
             case '':
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-info');
+                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('bg-info-subtle');
                 break;
             default:
-                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('alert-warning');
+                $('#reviewAnrechnung-status_kurzbz').closest('div').addClass('bg-warning-subtle');
         }
     },
     copyIntoTextarea: function(elem){