adds pointer-events none to all rows with the class .tabulator-unselectable except for the links inside those rows, because it was not possible to programmatically retrigger the selectableCheck

This commit is contained in:
SimonGschnell
2024-05-02 11:14:12 +02:00
parent 10bfb6c9e8
commit 6ea802717b
4 changed files with 54 additions and 94 deletions
@@ -163,9 +163,13 @@ $filterWidgetArray = array(
tableWidgetFooter: {
selectButtons: true
},
selectableCheck: function(row){
return func_selectableCheck(row);
},
rowFormatter:function(row){
return func_rowFormatter(row);
},
columnDefaults:{
tooltip:func_tooltips,
headerFilterPlaceholder: " ",
+5
View File
@@ -42,6 +42,11 @@
/* classes for rows that are not selectable in the tabulator, except for rows that are used for calculation */
.tabulator-row.tabulator-unselectable:not(.tabulator-calcs) {
color: #adb5bd !important;
pointer-events: none !important;
}
.tabulator-row.tabulator-unselectable a {
pointer-events: auto !important;
}
/* using bootstrap background classes to style the background color of tabulator rows */
@@ -195,16 +195,22 @@ function func_selectableCheck(row) {
);
}
function func_rowFormatter(row){
function func_rowFormatter(row) {
const rowData = row.getData();
// add the tabulator-unselectable class to the row if its data property isSelectable is false
if(rowData.isSelectable===false && !row.getElement().classList.contains("tabulator-unselectable")){
if (
rowData.isSelectable === false &&
!row.getElement().classList.contains("tabulator-unselectable")
) {
row.getElement().classList.add("tabulator-unselectable");
}
// remove the tabulator-selectable class if the data property isSelectable is false and it contains the class
if(rowData.isSelectable===false && row.getElement().classList.contains("tabulator-selectable")){
if (
rowData.isSelectable === false &&
row.getElement().classList.contains("tabulator-selectable")
) {
row.getElement().classList.remove("tabulator-selectable");
}
}
@@ -232,7 +238,7 @@ function func_rowSelectionChanged(data, rows, tabulatorInstance) {
}
// Returns tooltip
function func_tooltips(e,cell,onRendered) {
function func_tooltips(e, cell, onRendered) {
//e - mouseover event
//cell - cell component
//onRendered - onRendered callback registration function
@@ -331,10 +337,6 @@ $(function () {
approveAnrechnung.disableCreateAnrechnungButton();
}
//! this function should not be needed in the approveAnrechnungUebersicht
// Set status alert color
approveAnrechnung.setStatusAlertColor();
// Show only rows that are in progress by STGL
$("#show-inProgressDP").click(function () {
$("#tableWidgetTabulator").tabulator("setFilter", [
@@ -521,21 +523,19 @@ $(function () {
(updateData.ectsSumBeruflich =
row.getData().ectsSumBeruflich +
sumLvEcts.ectsSumAnzurechnendeLvsBeruflich);
// set the isSelectable property to false, in order to add the tabulator-unselectable class in the rowFormatter function
updateData.isSelectable=false;
updateData.isSelectable = false;
// Update row
row.update(updateData);
row.reformat();
});
// Deselect rows
$("#tableWidgetTabulator").tabulator(
"deselectRow",
rowsToDeselect
);
);
});
// Print success message
@@ -633,11 +633,13 @@ $(function () {
$("#tableWidgetTabulator").tabulator("updateData", data);
// add the isSelectable property to the rejected row, so that the right classes and selectability is applied to the row
var selectedRows = $("#tableWidgetTabulator").tabulator("getSelectedRows");
selectedRows.forEach((row)=>{
row.update({...row.getData(), isSelectable:false});
var selectedRows = $("#tableWidgetTabulator").tabulator(
"getSelectedRows"
);
selectedRows.forEach((row) => {
row.update({ ...row.getData(), isSelectable: false });
row.reformat();
})
});
// Deselect rows
var indexesToDeselect = data.map((x) => x.anrechnung_id);
@@ -758,33 +760,6 @@ $(function () {
});
var approveAnrechnung = {
setStatusAlertColor: function () {
let status_kurzbz = $("#requestAnrechnung-status_kurzbz").data(
"status_kurzbz"
);
switch (status_kurzbz) {
case ANRECHNUNGSTATUS_APPROVED:
$("#requestAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-success-subtle");
break;
case ANRECHNUNGSTATUS_REJECTED:
$("#requestAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-danger-subtle");
break;
case "":
$("#requestAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-info-subtle");
break;
default:
$("#requestAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-warning-subtle");
}
},
disableEditElements: function () {
// Disable:
// ...button Empfehlung anfordern
@@ -95,28 +95,22 @@ function func_selectableCheck(row) {
let status_kurzbz = row.getData().status_kurzbz;
let empfehlungsberechtigt = row.getData().empfehlungsberechtigt;
return (
status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR ||
empfehlungsberechtigt == "false"
);
return status_kurzbz == ANRECHNUNGSTATUS_PROGRESSED_BY_LEKTOR || empfehlungsberechtigt == "false";
}
// Performes after row was updated
function func_rowUpdated(row) {
// Refresh row formatters
row.reformat();
// Deselect and disable new selection of updated rows
row.deselect();
row.getElement().style["pointerEvents"] = "none";
function func_rowFormatter(row){
const rowData = row.getData();
// ...but leave url links selectable
row.getCell("dokument_bezeichnung").getElement().firstChild.style[
"pointerEvents"
] = "auto";
if (row.getCell("detils")) {
row.getCell("details").getElement().firstChild.style["pointerEvents"] =
"auto";
// add the tabulator-unselectable class to the row if its data property isSelectable is false
if(rowData.isSelectable===false && !row.getElement().classList.contains("tabulator-unselectable")){
row.getElement().classList.add("tabulator-unselectable");
}
// remove the tabulator-selectable class if the data property isSelectable is false and it contains the class
if(rowData.isSelectable===false && row.getElement().classList.contains("tabulator-selectable")){
row.getElement().classList.remove("tabulator-selectable");
}
}
@@ -189,13 +183,9 @@ $(function () {
$(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.5);
@@ -332,6 +322,19 @@ $(function () {
if (!data.error && data.retval != null) {
// Update status 'genehmigt'
$("#tableWidgetTabulator").tabulator("updateData", data.retval);
// make all confirmed anrechnungen unselectable and deselect them
let selectedRows = $("#tableWidgetTabulator").tabulator("getSelectedRows");
selectedRows.forEach(row => {
row.update({...row.getData(), isSelectable:false});
row.reformat();
});
// deselect all selected rows
$("#tableWidgetTabulator").tabulator(
"deselectRow",
selectedRows
);
// Print success message
FHC_DialogLib.alertSuccess(
@@ -458,33 +461,6 @@ $(function () {
});
var reviewAnrechnung = {
setStatusAlertColor: function () {
let status_kurzbz = $("#reviewAnrechnung-status_kurzbz").data(
"status_kurzbz"
);
switch (status_kurzbz) {
case ANRECHNUNGSTATUS_APPROVED:
$("#reviewAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-success-subtle");
break;
case ANRECHNUNGSTATUS_REJECTED:
$("#reviewAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-danger-subtle");
break;
case "":
$("#reviewAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-info-subtle");
break;
default:
$("#reviewAnrechnung-status_kurzbz")
.closest("div")
.addClass("bg-warning-subtle");
}
},
copyIntoTextarea: function (elem) {
// Find closest textarea
let textarea = $(elem).closest("div").find("textarea");