From 620528fa50b36b8c761e9f5165079c769b64442f Mon Sep 17 00:00:00 2001 From: Simon Gschnell Date: Wed, 27 Dec 2023 09:27:18 +0100 Subject: [PATCH] moves the collapseFunction to the parent component Profil and also manages the collapse state from the parent --- public/css/components/Profil.css | 43 ----------------- public/js/apps/Cis/Profil.js | 44 +++++++++++++++++ .../Cis/Profil/MitarbeiterProfil.js | 47 ++----------------- .../Cis/Profil/MitarbeiterViewProfil.js | 40 +--------------- .../js/components/Cis/Profil/StudentProfil.js | 39 +-------------- 5 files changed, 53 insertions(+), 160 deletions(-) diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css index e6d820ed6..7b13f048c 100644 --- a/public/css/components/Profil.css +++ b/public/css/components/Profil.css @@ -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 */ diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index f1a1206a5..989a1b5e2 100644 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -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(){ diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index c6306b982..2df528335 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -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); diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js index 6b3ab22bb..ddabf6815 100644 --- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js @@ -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: { diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index 84997b0ac..bc59514fa 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -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: {