blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-24 02:12:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

adds the collapsing funktions to all the different profil view that use a table with more than one column

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-13 13:59:23 +01:00
parent 8fe19d40bc
commit b6dbe1513e
3 changed files with 107 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Profil/MitarbeiterProfil.js
+28 -22
View File
@@ -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: "<i id='collapseIcon' role='button' class='fa-solid fa-angle-down '></i>",
title: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down '></i>",
field: "collapse",
headerSort: false,
headerFilter:false,
@@ -69,6 +70,15 @@ export default {
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down '></i>",
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); */
},
},
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+40 -9
View File
@@ -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: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down '></i>",
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() {
public/js/components/Cis/Profil/StudentProfil.js
+39 -1
View File
@@ -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: "<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down '></i>",
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() {