Changed HTML table to Tablewidget

This commit is contained in:
Cris
2023-03-07 14:06:00 +01:00
parent 479feea8aa
commit ba31a0b5b0
3 changed files with 152 additions and 105 deletions
@@ -57,31 +57,11 @@ $this->load->view('templates/FHC-Header', $includesArray);
</button>
</div>
<!--Tabelle-->
<div class="row col-6">
<table class="table table-condensed mt-3" id="azrTable">
<thead>
<tr>
<th><?php echo $this->p->t('lehre', 'studiensemester'); ?></th>
<th><?php echo $this->p->t('anrechnung', 'anrechnungszeitraumStart'); ?></th>
<th><?php echo $this->p->t('anrechnung', 'anrechnungszeitraumEnde'); ?></th>
<th><?php echo $this->p->t('ui', 'aktion'); ?></th>
</tr>
</thead>
<tbody>
<?php foreach($anrechnungszeitraum_arr as $azr):?>
<tr data-anrechnungszeitraum_id="<?php echo $azr->anrechnungszeitraum_id ?>">
<td class="studiensemester_kurzbz"><?php echo $azr->studiensemester_kurzbz ?></td>
<td class="anrechnungstart"><?php echo $azr->anrechnungstart ?></td>
<td class="anrechnungende"><?php echo $azr->anrechnungende ?></td>
<td>
<button class="btn btn-outline-secondary azrOpenModal" data-bs-toggle="modal" data-bs-target="#azrModal" value="update"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-outline-secondary ms-1 azrDeleteBtn"><i class="fa fa-times"></i></button>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<!-- Tabelle -->
<div class="row">
<div class="col-6">
<?php $this->load->view('lehre/anrechnung/adminAnrechnungData.php'); ?>
</div>
</div>
<!-- Modal (für insert und update von Anrechnungszeitraum)-->
@@ -120,7 +100,7 @@ $this->load->view('templates/FHC-Header', $includesArray);
</div>
</div>
<div class="modal-footer">
<button type="button" id="azrInsertOrUpdateBtn" class="btn btn-primary" value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
<button type="button" id="azrInsertBtn" class="btn btn-primary" value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
</div>
</div>
</div>
@@ -0,0 +1,45 @@
<?php
$query = '
SELECT *
FROM lehre.tbl_anrechnungszeitraum
ORDER BY anrechnungstart DESC
';
$filterWidgetArray = array(
'query' => $query,
'tableUniqueId' => 'adminAnrechnung',
'requiredPermissions' => 'admin',
'datasetRepresentation' => 'tabulator',
'columnsAliases' => array(
'AzrID',
ucfirst($this->p->t('lehre', 'studiensemester')),
ucfirst($this->p->t('anrechnung', 'anrechnungszeitraumStart')),
ucfirst($this->p->t('anrechnung', 'anrechnungszeitraumEnde')),
ucfirst($this->p->t('ui', 'bearbeitetAm')),
ucfirst($this->p->t('ui', 'bearbeitetVon')),
),
'datasetRepOptions' => '{
height: func_height(this),
layout: "fitColumns", // fit columns to width of table
//persistentLayout:true,
autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
headerFilterPlaceholder: " ",
index: "anrechnungszeitraum_id", // assign specific column as unique id (important for row indexing)
selectable: false, // allow row selection
//tableWidgetHeader: true,
tableBuilt: function(){
func_tableBuilt(this);
},
}',
'datasetRepFieldsDefs' => '{
anrechnungszeitraum_id: {visible: false, headerFilter:"input"},
studiensemester_kurzbz: {headerFilter:"input"},
anrechnungstart: {headerFilter:"input"},
anrechnungende: {headerFilter:"input"},
insertamum: {visible: false, headerFilter:"input"},
insertvon: {visible: false, headerFilter:"input"}
}'
);
echo $this->widgetlib->widget('TableWidget', $filterWidgetArray);
+101 -79
View File
@@ -1,8 +1,61 @@
// Adds column details
function func_tableBuilt(table) {
table.addColumn(
{
title: "Aktion",
align: "center",
width: 150,
formatter: addActionButtons,
}, false // place column right
);
}
// Returns relative height (depending on screen size)
function func_height(table){
return $(window).height() * 0.50;
}
var addActionButtons = function(cell) {
// Create edit button
var editBtn = document.createElement("button");
editBtn.type = "button";
editBtn.innerHTML = "<i class=\"fa fa-edit\"></i>";
editBtn.classList.add("azrEditBtn");
editBtn.classList.add("btn");
editBtn.classList.add("btn-outline-secondary");
editBtn.addEventListener("click", function(){
adminAnrechnung.editRow(cell);
});
// Create delete button
var delBtn= document.createElement("button");
delBtn.type = "button";
delBtn.innerHTML = "<i class=\"fa fa-times\"></i>";
delBtn.classList.add("azrDeleteBtn");
delBtn.classList.add("btn");
delBtn.classList.add("btn-outline-secondary");
delBtn.classList.add("ms-1");
delBtn.addEventListener("click", function(){
adminAnrechnung.deleteRow(cell);
});
// Add buttons to cell
var buttonHolder = document.createElement("span");
buttonHolder.appendChild(editBtn);
buttonHolder.appendChild(delBtn);
return buttonHolder;
}
$(function () {
// Open Modal and set values for insert or update Anrechnungszeitraum
$(document).on('click', '.azrOpenModal', function(){
// Open Modal
$('#azrModal').modal('show');
@@ -25,66 +78,18 @@ $(function () {
$('.modal-footer #azrInsertOrUpdateBtn').val('insert');
}
if (mode === 'update')
{
let row = $(this).closest('tr');
var anrechnungszeitraum_id = row.data('anrechnungszeitraum_id');
var studiensemester_kurzbz = row.find('.studiensemester_kurzbz').text();
var anrechnungstart = row.find('.anrechnungstart').text();
var anrechnungende = row.find('.anrechnungende').text();
$('.modal-header #azrModalLabel').text('Anrechnungszeitraum bearbeiten');
$('.modal-body #anrechnungszeitraum_id').val(anrechnungszeitraum_id);
$('.modal-body #studiensemester').val(studiensemester_kurzbz).change();
$('.modal-body #azrStart').val(anrechnungstart);
$('.modal-body #azrEnde').val(anrechnungende);
$('.modal-footer #azrInsertOrUpdateBtn').val('update');
}
});
// Insert or update Anrechnungszeitraum
$(document).on('click', '#azrInsertOrUpdateBtn', function(){
var anrechnungszeitraum_id = $('.modal-body #anrechnungszeitraum_id').val();
// Insert Anrechnungszeitraum
$(document).on('click', '#azrInsertBtn', function(){
var studiensemester_kurzbz = $('.modal-body #studiensemester').val();
var anrechnungstart = $('.modal-body #azrStart').val();
var anrechnungende = $('.modal-body #azrEnde').val();
// insert or update
let mode = this.value;
if (mode === 'insert')
{
// Insert Anrechnungszeitraum
adminAnrechnung.insertAzr(studiensemester_kurzbz, anrechnungstart, anrechnungende);
}
if (mode === 'update')
{
// Update Anrechnungszeitraum
adminAnrechnung.updateAzr(anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende);
}
// Insert Anrechnungszeitraum
adminAnrechnung.insertAzr(studiensemester_kurzbz, anrechnungstart, anrechnungende);
});
// Delete Anrechnungszeitraum
$('#azrTable').on('click', '.azrDeleteBtn', function(){
if(!confirm(FHC_PhrasesLib.t("ui", "frageSicherLoeschen")))
{
return;
}
var anrechnungszeitraum_id = $(this).closest('tr').data('anrechnungszeitraum_id');
var row = $(this).closest('tr');
// Delete Anrechnungszeitraum
adminAnrechnung.deleteAzr(anrechnungszeitraum_id);
// Remove row
row.remove();
});
})
@@ -109,13 +114,13 @@ var adminAnrechnung = {
{
data = FHC_AjaxClient.getData(data);
// Add row on top
adminAnrechnung.prependRow(
data.anrechnungszeitraum_id,
studiensemester_kurzbz,
anrechnungstart,
anrechnungende
);
// Update row
$('#tableWidgetTabulator').tabulator('addData', [{
anrechnungszeitraum_id: data.anrechnungszeitraum_id,
studiensemester_kurzbz: studiensemester_kurzbz,
anrechnungstart: anrechnungstart,
anrechnungende: anrechnungende
}], true); // true to add row on top
// Close Modal
$('#azrModal').modal('hide');
@@ -131,18 +136,24 @@ var adminAnrechnung = {
}
);
},
prependRow: function (anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende) {
$('#azrTable').prepend($(
'<tr data-anrechnungszeitraum_id="' + anrechnungszeitraum_id + '">' +
'<td class="studiensemester_kurzbz">' + studiensemester_kurzbz + '</td>' +
'<td class="anrechnungstart">' + anrechnungstart + '</td>' +
'<td class="anrechnungende">' + anrechnungende + '</td>' +
'<td>' +
'<button class="btn btn-outline-secondary azrOpenModal" value="update"><i class="fa fa-edit"></i></button>' +
'<button class="btn btn-outline-secondary ms-1 azrDeleteBtn"><i class="fa fa-times"></i></button>' +
'</td>' +
'</tr>'
))
editRow: function (cell){
// Open Modal
$('#azrModal').modal('show');
let row = cell.getRow();
var anrechnungszeitraum_id = row.getData().anrechnungszeitraum_id;
var studiensemester_kurzbz = row.getData().studiensemester_kurzbz;
var anrechnungstart = row.getData().anrechnungstart;
var anrechnungende = row.getData().anrechnungende;
$('.modal-header #azrModalLabel').text('Anrechnungszeitraum bearbeiten');
$('.modal-body #anrechnungszeitraum_id').val(anrechnungszeitraum_id);
$('.modal-body #studiensemester').val(studiensemester_kurzbz).change();
$('.modal-body #azrStart').val(anrechnungstart);
$('.modal-body #azrEnde').val(anrechnungende);
$('.modal-footer #azrInsertOrUpdateBtn').val('update');
},
updateAzr: function (anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende) {
FHC_AjaxClient.ajaxCallPost(
@@ -164,7 +175,12 @@ var adminAnrechnung = {
if (FHC_AjaxClient.hasData(data))
{
// Update row
adminAnrechnung.updateRow(anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende);
$('#tableWidgetTabulator').tabulator('updateData', [{
anrechnungszeitraum_id: anrechnungszeitraum_id,
studiensemester_kurzbz: studiensemester_kurzbz,
anrechnungstart: anrechnungstart,
anrechnungende: anrechnungende
}]);
// Close Modal
$('#azrModal').modal('hide');
@@ -181,12 +197,6 @@ var adminAnrechnung = {
}
);
},
updateRow: function (anrechnungszeitraum_id, studiensemester_kurzbz, anrechnungstart, anrechnungende){
let row = $('#azrTable').find('tr').filter('[data-anrechnungszeitraum_id=' + anrechnungszeitraum_id + ']');
row.find('.studiensemester_kurzbz').text(studiensemester_kurzbz);
row.find('.anrechnungstart').text(anrechnungstart);
row.find('.anrechnungende').text(anrechnungende);
},
deleteAzr: function(anrechnungszeitraum_id){
FHC_AjaxClient.ajaxCallPost(
FHC_JS_DATA_STORAGE_OBJECT.called_path + "/delete",
@@ -203,6 +213,9 @@ var adminAnrechnung = {
if (FHC_AjaxClient.hasData(data))
{
let row = $('#tableWidgetTabulator').tabulator('getRow', anrechnungszeitraum_id);
row.delete(anrechnungszeitraum_id);
// Success message
FHC_DialogLib.alertSuccess(FHC_PhrasesLib.t("ui", "geloescht"));
@@ -214,5 +227,14 @@ var adminAnrechnung = {
}
}
);
},
deleteRow: function (cell){
if(!confirm(FHC_PhrasesLib.t("ui", "frageSicherLoeschen")))
{
return;
}
// Delete Anrechnungszeitraum
adminAnrechnung.deleteAzr(cell.getRow().getData().anrechnungszeitraum_id);
}
}