From e824d48edf4a9adb05e063a3a4a5db7975dc8b6d Mon Sep 17 00:00:00 2001 From: ma0068 Date: Fri, 26 Jan 2024 14:40:57 +0100 Subject: [PATCH] update action and delete buttons in Kontakt-Tab --- .../Details/Kontakt/Address.js | 40 ++++++++++++------- .../Details/Kontakt/Bankaccount.js | 38 ++++++++++++------ .../Details/Kontakt/Contact.js | 38 ++++++++++++------ 3 files changed, 76 insertions(+), 40 deletions(-) diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js index 2b9f9c0fe..8905ed52a 100644 --- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js +++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js @@ -4,14 +4,6 @@ import PvAutoComplete from "../../../../../../../index.ci.php/public/js/componen import FhcFormValidation from '../../../../Form/Validation.js'; import BsModal from "../../../../Bootstrap/Modal.js"; - -var editIcon = function (cell, formatterParams) { - return ""; -}; -var deleteIcon = function (cell, formatterParams) { - return ""; -}; - export default{ components: { CoreFilterCmpt, @@ -55,12 +47,32 @@ export default{ } }, {title:"Anmerkung", field:"anmerkung", visible:false}, - {formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => { - this.actionEditAdress(cell.getData().adresse_id); - }, width:50, headerSort:false}, - {formatter:deleteIcon, width:40, align:"center", cellClick: (e, cell) => { - this.actionDeleteAdress(cell.getData().adresse_id); - }, width:50, headerSort:false }, + {title: 'Aktionen', field: 'actions', + minWidth: 150, // Ensures Action-buttons will be always fully displayed + formatter: (cell, formatterParams, onRendered) => { + let container = document.createElement('div'); + container.className = "d-flex gap-2"; + + let button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', (event) => + this.actionEditAdress(cell.getData().adresse_id) + ); + container.append(button); + + button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', () => + this.actionDeleteAdress(cell.getData().adresse_id) + ); + container.append(button); + + return container; + }, + frozen: true + }, ], layout: 'fitDataFill', layoutColumnsOnNewData: false, diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js index c4f457260..cd3bbbfad 100644 --- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js +++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js @@ -2,13 +2,6 @@ import {CoreFilterCmpt} from "../../../../filter/Filter.js"; import {CoreRESTClient} from "../../../../../RESTClient"; import BsModal from "../../../../Bootstrap/Modal.js"; -var editIcon = function (cell, formatterParams) { - return ""; -}; -var deleteIcon = function (cell, formatterParams) { - return ""; -}; - export default{ components: { CoreFilterCmpt, @@ -50,13 +43,32 @@ export default{ }, {title:"Person_id", field:"person_id", visible:false}, {title:"Bankverbindung_id", field:"bankverbindung_id", visible:false}, - {formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => { - this.actionEditBankverbindung(cell.getData().bankverbindung_id); - }, width:50, headerSort:false}, - {formatter:deleteIcon, width:40, align:"center", cellClick: (e, cell) => { - this.actionDeleteBankverbindung(cell.getData().bankverbindung_id); - }, width:50, headerSort:false }, + {title: 'Aktionen', field: 'actions', + minWidth: 150, // Ensures Action-buttons will be always fully displayed + formatter: (cell, formatterParams, onRendered) => { + let container = document.createElement('div'); + container.className = "d-flex gap-2"; + let button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', (event) => + this.actionEditBankverbindung(cell.getData().bankverbindung_id) + ); + container.append(button); + + button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', () => + this.actionDeleteBankverbindung(cell.getData().bankverbindung_id) + ); + container.append(button); + + return container; + }, + frozen: true + }, ], layout: 'fitDataFill', layoutColumnsOnNewData: false, diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js index 806f07fdd..0ed648b5c 100644 --- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js +++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js @@ -4,13 +4,6 @@ import BsModal from "../../../../Bootstrap/Modal.js"; /*import PvToast from "../../../../../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";*/ import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js"; -var editIcon = function (cell, formatterParams) { - return ""; -}; -var deleteIcon = function (cell, formatterParams){ - return ""; -}; - export default{ components: { CoreFilterCmpt, @@ -39,13 +32,32 @@ export default{ {title:"Kontakt_id", field:"kontakt_id", visible:false}, {title:"Standort_id", field:"standort_id", visible:false}, {title:"letzte Änderung", field:"updateamum", visible:false}, - {formatter:editIcon, cellClick: (e, cell) => { - this.actionEditContact(cell.getData().kontakt_id); - }, width:50, headerSort:false, headerVisible:false}, - {formatter:deleteIcon, cellClick: (e, cell) => { - this.actionDeleteContact(cell.getData().kontakt_id); + {title: 'Aktionen', field: 'actions', + minWidth: 150, // Ensures Action-buttons will be always fully displayed + formatter: (cell, formatterParams, onRendered) => { + let container = document.createElement('div'); + container.className = "d-flex gap-2"; - }, width:50, headerSort:false, headerVisible:false}, + let button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', (event) => + this.actionEditContact(cell.getData().kontakt_id) + ); + container.append(button); + + button = document.createElement('button'); + button.className = 'btn btn-outline-secondary btn-action'; + button.innerHTML = ''; + button.addEventListener('click', () => + this.actionDeleteContact(cell.getData().kontakt_id) + ); + container.append(button); + + return container; + }, + frozen: true + }, ], layout: 'fitDataFill', layoutColumnsOnNewData: false,