From b6dbe1513e03a0b7594a008644e584be58a4850d Mon Sep 17 00:00:00 2001 From: Simon Gschnell Date: Wed, 13 Dec 2023 13:59:23 +0100 Subject: [PATCH] adds the collapsing funktions to all the different profil view that use a table with more than one column --- .../Cis/Profil/MitarbeiterProfil.js | 50 +++++++++++-------- .../Cis/Profil/MitarbeiterViewProfil.js | 49 ++++++++++++++---- .../js/components/Cis/Profil/StudentProfil.js | 40 ++++++++++++++- 3 files changed, 107 insertions(+), 32 deletions(-) diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index 73e4a24d7..f55dd0df9 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -13,7 +13,8 @@ export default { data() { return { - showCollapsedColumn: true, + collapseIconFunktionen: true, + collapseIconBetriebsmittel: true, funktionen_table_options: { height:300, @@ -34,7 +35,7 @@ export default { //? option when wanting to hide the collapsed list { - title: "", + title: "", field: "collapse", headerSort: false, headerFilter:false, @@ -69,6 +70,15 @@ export default { responsiveLayoutCollapseFormatter:Vue.$collapseFormatter, data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }], columns: [ + { + title: "", + field: "collapse", + headerSort: false, + headerFilter:false, + formatter:"responsiveCollapse", + maxWidth:40, + headerClick:this.collapseFunction, + }, { title: "Betriebsmittel", field: "betriebsmittel", @@ -101,37 +111,33 @@ export default { }); }, collapseFunction (e, column){ - - - this.showCollapsedColumn = !this.showCollapsedColumn; - + //* the if of the column has to match with the name of the responsive data in the vue component + this[e.target.id] = !this[e.target.id]; + //* gets all event icons of the different rows to use the onClick event later + let allClickableIcons = column._column.cells.map(row => { + return row.element.children[0]; + }); + //* changes the icon that shows or hides all the collapsed columns - if(this.showCollapsedColumn){ + //* if the replace function does not find the class to replace, it just simply returns false + if(this[e.target.id]){ e.target.classList.replace("fa-angle-up","fa-angle-down"); }else{ e.target.classList.replace("fa-angle-down","fa-angle-up"); } //* changes the icon for every collapsed column to open or closed - [...document.getElementsByClassName("tabulator-responsive-collapse-toggle")].forEach(ele => { - if(this.showCollapsedColumn){ - if(!ele.classList.contains("open")) - ele.click(); + if(this[e.target.id]){ + allClickableIcons.filter(column => { + return !column.classList.contains("open"); + }).forEach(col => {col.click();}) }else{ - if(ele.classList.contains("open")) - ele.click(); + allClickableIcons.filter(column => { + return column.classList.contains("open"); + }).forEach(col => {col.click();}) } - - - }); - - /* console.log(this); - - this.showCollapsedColumn = !this.showCollapsedColumn; - console.log(this.showCollapsedColumn); */ - }, }, diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js index 7c6c42cfb..6ff3daeea 100644 --- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js @@ -8,7 +8,7 @@ export default { }, data() { return { - + collapseIconFunktionen:true, funktionen_table_options: { height: 400, @@ -28,14 +28,16 @@ export default { }, ], columns: [ - //? option when wanting to hide the collapsed list - /* { - title: "", - field: "", - headerSort: false, - formatter:"responsiveCollapse", - maxWidth:20, - }, */ + + { + title: "", + field: "collapse", + headerSort: false, + headerFilter:false, + formatter:"responsiveCollapse", + maxWidth:40, + headerClick:this.collapseFunction, + }, { title: "Bezeichnung", field: "Bezeichnung", headerFilter: true,minWidth:200, }, { title: "Organisationseinheit", @@ -69,6 +71,35 @@ export default { this.data.foto_sperre = res.data.foto_sperre; }); }, + collapseFunction (e, column){ + + //* the if of the column has to match with the name of the responsive data in the vue component + this[e.target.id] = !this[e.target.id]; + + //* gets all event icons of the different rows to use the onClick event later + let allClickableIcons = column._column.cells.map(row => { + return row.element.children[0]; + }); + + //* changes the icon that shows or hides all the collapsed columns + //* if the replace function does not find the class to replace, it just simply returns false + if(this[e.target.id]){ + e.target.classList.replace("fa-angle-up","fa-angle-down"); + }else{ + e.target.classList.replace("fa-angle-down","fa-angle-up"); + } + + //* changes the icon for every collapsed column to open or closed + if(this[e.target.id]){ + allClickableIcons.filter(column => { + return !column.classList.contains("open"); + }).forEach(col => {col.click();}) + }else{ + allClickableIcons.filter(column => { + return column.classList.contains("open"); + }).forEach(col => {col.click();}) + } + }, }, computed: { get_image_base64_src() { diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index 91dc80175..4e2beeb92 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -10,7 +10,7 @@ export default { return { - + collapseIconBetriebsmittel:true, betriebsmittel_table_options: { height: 300, layout: "fitColumns", @@ -19,6 +19,15 @@ export default { responsiveLayoutCollapseFormatter:Vue.$collapseFormatter, data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }], columns: [ + { + title: "", + field: "collapse", + headerSort: false, + headerFilter:false, + formatter:"responsiveCollapse", + maxWidth:40, + headerClick:this.collapseFunction, + }, { title: "Betriebsmittel", field: "betriebsmittel", @@ -54,6 +63,35 @@ export default { this.data.foto_sperre = res.data.foto_sperre; }); }, + collapseFunction (e, column){ + + //* the if of the column has to match with the name of the responsive data in the vue component + this[e.target.id] = !this[e.target.id]; + + //* gets all event icons of the different rows to use the onClick event later + let allClickableIcons = column._column.cells.map(row => { + return row.element.children[0]; + }); + + //* changes the icon that shows or hides all the collapsed columns + //* if the replace function does not find the class to replace, it just simply returns false + if(this[e.target.id]){ + e.target.classList.replace("fa-angle-up","fa-angle-down"); + }else{ + e.target.classList.replace("fa-angle-down","fa-angle-up"); + } + + //* changes the icon for every collapsed column to open or closed + if(this[e.target.id]){ + allClickableIcons.filter(column => { + return !column.classList.contains("open"); + }).forEach(col => {col.click();}) + }else{ + allClickableIcons.filter(column => { + return column.classList.contains("open"); + }).forEach(col => {col.click();}) + } + }, }, computed: { refreshMailTo() {