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

moves the collapseFunction to the parent component Profil and also manages the collapse state from the parent

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-27 09:27:18 +01:00
parent 733275a162
commit 620528fa50
5 changed files with 53 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/Profil.css
-43
View File
@@ -40,49 +40,6 @@
padding:0 !important;
}
.form-control_{
border:0;
border-bottom: 1px solid #ced4da;
height:auto !important;
padding-bottom: 5px !important;
padding-left: 3px !important;
border-radius:0px;
}
.form-control-plaintext[readonly]{
background-color:white;
}
/* .fhc-form .form-control:focus{
border-color:white;
box-shadow:none;
} */
.fhc-form .form-floating > .form-control:focus ~ .floating-title, .form-floating > .form-control:not(:placeholder-shown) ~ .floating-title, .form-floating > .form-select ~ .floating-title{
opacity: .65;
transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.fhc-form .form-floating > .floating-title{
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem .75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}
.floating-title{
display:inline-block;
}
.form-floating>.form-control, .form-floating>.form-select{
height: auto;
}
/* FORM UNDERLINE
*/
public/js/apps/Cis/Profil.js
+44
View File
@@ -35,6 +35,8 @@ Vue.$collapseFormatter = function(data){
return Object.keys(data).length ? container : "";
};
const app = Vue.createApp({
components: {
@@ -53,6 +55,48 @@ const app = Vue.createApp({
}
},
methods: {
//? arrow function because it references to the this element of the components that use the function
collapseFunction: function (e, column) {
//* check if property doesn't exist already and add it to the reactive this properties
if(this[e.target.id] === undefined){
this[e.target.id] = true
}
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();
});
}
}
},
created(){
public/js/components/Cis/Profil/MitarbeiterProfil.js
+5 -42
View File
@@ -2,6 +2,7 @@ import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
import BsModal from "../../Bootstrap/Modal.js";
export default {
components: {
CoreFilterCmpt,
@@ -9,8 +10,7 @@ export default {
},
data() {
return {
collapseIconFunktionen: true,
collapseIconBetriebsmittel: true,
//? this reactive object contains all the field the user is able to edit and keep track of which fields he has edited
editData:null,
funktionen_table_options: {
@@ -39,7 +39,7 @@ export default {
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
headerClick: this.$parent.collapseFunction,
},
{
title: "Bezeichnung",
@@ -91,7 +91,7 @@ export default {
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
headerClick: this.$parent.collapseFunction,
},
{
title: "Betriebsmittel",
@@ -184,42 +184,7 @@ 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: {
@@ -330,8 +295,6 @@ export default {
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on("tableBuilt", () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+2 -38
View File
@@ -35,7 +35,7 @@ export default {
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
headerClick: this.$parent.collapseFunction,
},
{
title: "Bezeichnung",
@@ -78,43 +78,7 @@ export default {
//? this is the prop passed to the dynamic component with the custom data of the view
props: ["data"],
methods: {
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: {
public/js/components/Cis/Profil/StudentProfil.js
+2 -37
View File
@@ -31,7 +31,7 @@ export default {
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
headerClick: this.$parent.collapseFunction,
},
{
title: "Betriebsmittel",
@@ -68,42 +68,7 @@ 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: {