From 4bd4301873373f65c8ffbd525ec709c67d954caa Mon Sep 17 00:00:00 2001 From: Johann Hoffmann Date: Fri, 22 Nov 2024 10:15:31 +0100 Subject: [PATCH] more template cleanup profil --- public/js/apps/Cis/Profil.js | 705 +++++++++--------- .../Cis/Profil/ProfilComponents/Adresse.js | 7 +- .../Cis/Profil/ProfilComponents/Kontakt.js | 31 +- .../Profil/ProfilComponents/Mailverteiler.js | 23 +- .../ProfilComponents/ProfilInformation.js | 2 +- .../ProfilComponents/RoleInformation.js | 30 +- .../Cis/Profil/ProfilModal/EditProfil.js | 12 +- 7 files changed, 402 insertions(+), 408 deletions(-) diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index 592c27a37..8618892d9 100644 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -4,405 +4,400 @@ import ViewStudentProfil from "../../components/Cis/Profil/StudentViewProfil.js" import ViewMitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterViewProfil.js"; import Loading from "../../components/Loader.js"; import Phrasen from "../../plugin/Phrasen.js"; -import { setScrollbarWidth } from "../../helpers/CssVarCalcHelpers"; +import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers"; Vue.$collapseFormatter = function (data) { - //data - an array of objects containing the column title and value for each cell - var container = document.createElement("div"); - container.classList.add("tabulator-collapsed-row"); - container.classList.add("text-break"); + //data - an array of objects containing the column title and value for each cell + var container = document.createElement("div"); + container.classList.add("tabulator-collapsed-row"); + container.classList.add("text-break"); - var list = document.createElement("div"); - list.classList.add("row"); + var list = document.createElement("div"); + list.classList.add("row"); - container.appendChild(list); + container.appendChild(list); - data.forEach(function (col) { - let item = document.createElement("div"); - item.classList.add("col-6"); - let item2 = document.createElement("div"); - item2.classList.add("col-6"); + data.forEach(function (col) { + let item = document.createElement("div"); + item.classList.add("col-6"); + let item2 = document.createElement("div"); + item2.classList.add("col-6"); - item.innerHTML = "" + col.title + ""; - item2.innerHTML = col.value ? col.value : "-"; + item.innerHTML = "" + col.title + ""; + item2.innerHTML = col.value ? col.value : "-"; - list.appendChild(item); - list.appendChild(item2); - }); + list.appendChild(item); + list.appendChild(item2); + }); - return Object.keys(data).length ? container : ""; + return Object.keys(data).length ? container : ""; }; const profilApp = Vue.createApp({ - name: 'ProfilApp', - components: { - StudentProfil, - MitarbeiterProfil, - ViewStudentProfil, - ViewMitarbeiterProfil, - Loading, - }, + name: 'ProfilApp', + components: { + StudentProfil, + MitarbeiterProfil, + ViewStudentProfil, + ViewMitarbeiterProfil, + Loading, + }, - data() { - return { - //? loading property is used for showing/hiding the loading modal - loading: false, - profilUpdateStates: null, - profilUpdateTopic: null, - view: null, - data: null, - // notfound is null by default, but contains an UID if no user exists with that UID - notFoundUID: null, - }; - }, + data() { + return { + //? loading property is used for showing/hiding the loading modal + loading: false, + profilUpdateStates: null, + profilUpdateTopic: null, + view: null, + data: null, + // notfound is null by default, but contains an UID if no user exists with that UID + notFoundUID: null, + }; + }, - //? use function syntax for provide so that we can access `this` - provide() { - return { - profilUpdateStates: Vue.computed(() => - this.profilUpdateStates ? this.profilUpdateStates : false - ), - profilUpdateTopic: Vue.computed(() => - this.profilUpdateTopic ? this.profilUpdateTopic : false - ), - setLoading: (newValue) => { - this.loading = newValue; - }, - getZustellkontakteCount: this.zustellKontakteCount, - getZustelladressenCount: this.zustellAdressenCount, - collapseFunction: (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]; + //? use function syntax for provide so that we can access `this` + provide() { + return { + profilUpdateStates: Vue.computed(() => + this.profilUpdateStates ? this.profilUpdateStates : false + ), + profilUpdateTopic: Vue.computed(() => + this.profilUpdateTopic ? this.profilUpdateTopic : false + ), + setLoading: (newValue) => { + this.loading = newValue; + }, + getZustellkontakteCount: this.zustellKontakteCount, + getZustelladressenCount: this.zustellAdressenCount, + collapseFunction: (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]; - }); + //* 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 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(); - }); - } - }, - sortProfilUpdates: (ele1, ele2) => { - let result = 0; - if (ele1.status === "pending") { - result = -1; - } else if (ele1.status === "accepted") { - result = ele2.status === "rejected" ? -1 : 1; - } else { - result = 1; - } - //? if they have the same status the insert date is used for ordering - if (ele1.status === ele2.status) { - result = - new Date(ele2.insertamum.split(".").reverse().join("-")) - - new Date(ele1.insertamum.split(".").reverse().join("-")); - } - return result; - }, - }; - }, + //* 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(); + }); + } + }, + sortProfilUpdates: (ele1, ele2) => { + let result = 0; + if (ele1.status === "pending") { + result = -1; + } else if (ele1.status === "accepted") { + result = ele2.status === "rejected" ? -1 : 1; + } else { + result = 1; + } + //? if they have the same status the insert date is used for ordering + if (ele1.status === ele2.status) { + result = + new Date(ele2.insertamum.split(".").reverse().join("-")) - + new Date(ele1.insertamum.split(".").reverse().join("-")); + } + return result; + }, + }; + }, - methods: { - zustellAdressenCount() { - if (!this.data || !this.data.adressen) { - return null; - } + methods: { + zustellAdressenCount() { + if (!this.data || !this.data.adressen) { + return null; + } - let adressenArray = []; - if (this.data.profilUpdates?.length) { - adressenArray = adressenArray.concat( - this.data.profilUpdates - .filter((update) => { - return update.requested_change.zustelladresse; - }) - .map((adresse) => { - return adresse.requested_change.adresse_id; - }) - ); - } + let adressenArray = []; + if (this.data.profilUpdates?.length) { + adressenArray = adressenArray.concat( + this.data.profilUpdates + .filter((update) => { + return update.requested_change.zustelladresse; + }) + .map((adresse) => { + return adresse.requested_change.adresse_id; + }) + ); + } - if ( - !this.data.profilUpdates?.length || - !this.data.adressen - .filter((adresse) => adresse.zustelladresse) - .every((adresse) => - this.data.profilUpdates.some( - (update) => - update.requested_change.adresse_id == adresse.adresse_id - ) - ) - ) { - adressenArray = adressenArray.concat( - this.data.adressen - .filter((adresse) => { - return adresse.zustelladresse; - }) - .map((adr) => { - return adr.adresse_id; - }) - ); - } + if ( + !this.data.profilUpdates?.length || + !this.data.adressen + .filter((adresse) => adresse.zustelladresse) + .every((adresse) => + this.data.profilUpdates.some( + (update) => + update.requested_change.adresse_id == adresse.adresse_id + ) + ) + ) { + adressenArray = adressenArray.concat( + this.data.adressen + .filter((adresse) => { + return adresse.zustelladresse; + }) + .map((adr) => { + return adr.adresse_id; + }) + ); + } - return [...new Set(adressenArray)]; + return [...new Set(adressenArray)]; - // OLD version - // return this.data.adressen.filter(adresse => { - // return adresse.zustelladresse; - // }).map(adr => { + // OLD version + // return this.data.adressen.filter(adresse => { + // return adresse.zustelladresse; + // }).map(adr => { - // return adr.adresse_id; - // }); - }, + // return adr.adresse_id; + // }); + }, - zustellKontakteCount() { - if (!this.data || !this.data.kontakte) { - return null; - } + zustellKontakteCount() { + if (!this.data || !this.data.kontakte) { + return null; + } - //TODO: not sure if how it is implemented is the best way - let kontakteArray = []; + //TODO: not sure if how it is implemented is the best way + let kontakteArray = []; - if (this.data.profilUpdates?.length) { - kontakteArray = kontakteArray.concat( - this.data.profilUpdates - .filter((update) => { - return update.requested_change.zustellung; - }) - .map((kontant) => { - return kontant.requested_change.kontakt_id; - }) - ); - } + if (this.data.profilUpdates?.length) { + kontakteArray = kontakteArray.concat( + this.data.profilUpdates + .filter((update) => { + return update.requested_change.zustellung; + }) + .map((kontant) => { + return kontant.requested_change.kontakt_id; + }) + ); + } - if ( - !this.data.profilUpdates?.length || - !this.data.kontakte - .filter((kontakt) => kontakt.zustellung) - .every((kontakt) => - this.data.profilUpdates.some( - (update) => - update.requested_change.kontakt_id == kontakt.kontakt_id - ) - ) - ) { - kontakteArray = kontakteArray.concat( - this.data.kontakte - .filter((kontakt) => { - return kontakt.zustellung; - }) - .map((kon) => { - return kon.kontakt_id; - }) - ); - } + if ( + !this.data.profilUpdates?.length || + !this.data.kontakte + .filter((kontakt) => kontakt.zustellung) + .every((kontakt) => + this.data.profilUpdates.some( + (update) => + update.requested_change.kontakt_id == kontakt.kontakt_id + ) + ) + ) { + kontakteArray = kontakteArray.concat( + this.data.kontakte + .filter((kontakt) => { + return kontakt.zustellung; + }) + .map((kon) => { + return kon.kontakt_id; + }) + ); + } - return [...new Set(kontakteArray)]; + return [...new Set(kontakteArray)]; - // OLD version - // return this.data.kontakte.filter(kontakt => { - // return kontakt.zustellung; - // }).map(kon =>{ - // return kon.kontakt_id; - // }); - }, - }, + // OLD version + // return this.data.kontakte.filter(kontakt => { + // return kontakt.zustellung; + // }).map(kon =>{ + // return kon.kontakt_id; + // }); + }, + }, - computed: { - filteredEditData() { - if (!this.data) { - return; - } + computed: { + filteredEditData() { + if (!this.data) { + return; + } - return { - view: null, - data: { - Personen_Informationen: { - title: this.$p.t("profil", "personenInformationen"), - topic: "Personen_informationen", - view: null, - data: { - vorname: { - title: this.$p.t("person", "vorname"), - topic: this.profilUpdateTopic?.["Vorname"], - view: "TextInputDokument", - withFiles: true, - data: { - titel: "vorname", - value: this.data.vorname, - }, - }, - nachname: { - title: this.$p.t("person", "nachname"), - topic: this.profilUpdateTopic?.["Nachname"], - view: "TextInputDokument", - withFiles: true, - data: { - titel: "nachname", - value: this.data.nachname, - }, - }, - titel: { - title: this.$p.t("global", "titel"), - topic: this.profilUpdateTopic?.["Titel"], - view: "TextInputDokument", - withFiles: true, - data: { - titel: "titel", - value: this.data.titel, - }, - }, - postnomen: { - title: this.$p.t("profil", "postnomen"), - topic: this.profilUpdateTopic?.["Postnomen"], - view: "TextInputDokument", - withFiles: true, - data: { - titel: "postnomen", - value: this.data.postnomen, - }, - }, - }, - }, - Private_Kontakte: { - title: this.$p.t("profil", "privateKontakte"), - topic: this.profilUpdateTopic?.["Private Kontakte"], - data: this.data.kontakte - ?.filter((item) => { - // excludes all contacts that are already used in pending profil update requests - return !this.data.profilUpdates?.some( - (update) => - update.status === this.profilUpdateStates["Pending"] && - update.requested_change?.kontakt_id === item.kontakt_id - ); - }) - .map((kontakt) => { - return { - listview: "Kontakt", - view: "EditKontakt", - data: kontakt, - }; - }), - }, - Private_Adressen: { - title: this.$p.t("profil", "privateAdressen"), - topic: this.profilUpdateTopic?.["Private Adressen"], - data: this.data.adressen - ?.filter((item) => { - return !this.data.profilUpdates?.some((update) => { - return ( - update.status === this.profilUpdateStates["Pending"] && - update.requested_change?.adresse_id == item.adresse_id - ); - }); - }) - .map((adresse) => { - return { - listview: "Adresse", - view: "EditAdresse", - data: adresse, - }; - }), - }, - // Password_Change : { - // title:"Passwort Ändern", - // view:"ChangePassword", - // data:{ - // test:"testvalue", - // } - // }, - }, - }; - }, - }, + return { + view: null, + data: { + Personen_Informationen: { + title: this.$p.t("profil", "personenInformationen"), + topic: "Personen_informationen", + view: null, + data: { + vorname: { + title: this.$p.t("person", "vorname"), + topic: this.profilUpdateTopic?.["Vorname"], + view: "TextInputDokument", + withFiles: true, + data: { + titel: "vorname", + value: this.data.vorname, + }, + }, + nachname: { + title: this.$p.t("person", "nachname"), + topic: this.profilUpdateTopic?.["Nachname"], + view: "TextInputDokument", + withFiles: true, + data: { + titel: "nachname", + value: this.data.nachname, + }, + }, + titel: { + title: this.$p.t("global", "titel"), + topic: this.profilUpdateTopic?.["Titel"], + view: "TextInputDokument", + withFiles: true, + data: { + titel: "titel", + value: this.data.titel, + }, + }, + postnomen: { + title: this.$p.t("profil", "postnomen"), + topic: this.profilUpdateTopic?.["Postnomen"], + view: "TextInputDokument", + withFiles: true, + data: { + titel: "postnomen", + value: this.data.postnomen, + }, + }, + }, + }, + Private_Kontakte: { + title: this.$p.t("profil", "privateKontakte"), + topic: this.profilUpdateTopic?.["Private Kontakte"], + data: this.data.kontakte + ?.filter((item) => { + // excludes all contacts that are already used in pending profil update requests + return !this.data.profilUpdates?.some( + (update) => + update.status === this.profilUpdateStates["Pending"] && + update.requested_change?.kontakt_id === item.kontakt_id + ); + }) + .map((kontakt) => { + return { + listview: "Kontakt", + view: "EditKontakt", + data: kontakt, + }; + }), + }, + Private_Adressen: { + title: this.$p.t("profil", "privateAdressen"), + topic: this.profilUpdateTopic?.["Private Adressen"], + data: this.data.adressen + ?.filter((item) => { + return !this.data.profilUpdates?.some((update) => { + return ( + update.status === this.profilUpdateStates["Pending"] && + update.requested_change?.adresse_id == item.adresse_id + ); + }); + }) + .map((adresse) => { + return { + listview: "Adresse", + view: "EditAdresse", + data: adresse, + }; + }), + }, + // Password_Change : { + // title:"Passwort Ändern", + // view:"ChangePassword", + // data:{ + // test:"testvalue", + // } + // }, + }, + }; + }, + }, - watch: { - loading: function (newValue, oldValue) { - if (newValue) { - this.$refs.loadingModalRef.show(); - } else { - this.$refs.loadingModalRef.hide(); - } - }, - }, + watch: { + loading: function (newValue, oldValue) { + if (newValue) { + this.$refs.loadingModalRef.show(); + } else { + this.$refs.loadingModalRef.hide(); + } + }, + }, - async created() { - // fetch profilUpdateStates to provide them to children components + async created() { + // fetch profilUpdateStates to provide them to children components - await this.$fhcApi.factory.profilUpdate.getStatus() - .then((response) => { - this.profilUpdateStates = response.data; - }) - .catch((error) => { - console.error(error); - }); + await this.$fhcApi.factory.profilUpdate.getStatus() + .then((response) => { + this.profilUpdateStates = response.data; + }) + .catch((error) => { + console.error(error); + }); - this.$fhcApi.factory.profilUpdate.getTopic() - .then((response) => { - this.profilUpdateTopic = response.data; - }) - .catch((error) => { - console.error(error); - }); + this.$fhcApi.factory.profilUpdate.getTopic() + .then((response) => { + this.profilUpdateTopic = response.data; + }) + .catch((error) => { + console.error(error); + }); - //? uid contains the last part of the uri - let uid = location.pathname.split("/").pop(); + //? uid contains the last part of the uri + let uid = location.pathname.split("/").pop(); - this.$fhcApi.factory.profil.getView(uid).then((res) => { - if (!res.data) { - this.notFoundUID = uid; - } else { - this.view = res.data?.view; - this.data = res.data?.data; - } - }); - }, + this.$fhcApi.factory.profil.getView(uid).then((res) => { + if (!res.data) { + this.notFoundUID = uid; + } else { + this.view = res.data?.view; + this.data = res.data?.data; + } + }); + }, - template: ` + template: `
-
-

Es wurde keine Person mit der UID {{this.notFoundUID}} gefunden

-
- - + +
- -
`, }); -setScrollbarWidth() +setScrollbarWidth(); profilApp - .use(primevue.config.default, { zIndex: { overlay: 9999 } }) - .use(Phrasen) - .mount("#content"); \ No newline at end of file + .use(primevue.config.default, {zIndex: {overlay: 9999}}) + .use(Phrasen) + .mount("#content"); \ No newline at end of file diff --git a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js index 5d7406bbd..996cdfb87 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js @@ -53,11 +53,8 @@ export default {
{{$p.t('person','zustelladresse')}}
-
- - -
- +
+
diff --git a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js index ffb46e1a2..488d0b2b3 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js @@ -16,23 +16,24 @@ export default{
-
- -
-
{{data.kontakttyp}}
- {{data.kontakt}} - {{data.kontakt}} +
+ +
+
{{data.kontakttyp}}
+ {{data.kontakt}} + {{data.kontakt}} +
-
-
-
-
{{$p.t('global','anmerkung')}}
- {{data.anmerkung}} +
+
+
{{$p.t('global','anmerkung')}}
+ {{data.anmerkung}} +
+
+
+ +
-
-
- -
`, }; \ No newline at end of file diff --git a/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js b/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js index 5f2221b22..82b0aad57 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js @@ -16,18 +16,19 @@ export default {
{{$p.t('profil','mailverteilerMitglied')}}
-
-
-
-
- +
+
+
+
+ +
+
+ {{verteiler.gruppe_kurzbz}} +
-
- {{verteiler.gruppe_kurzbz}} -
-
-
-
{{verteiler.beschreibung}}
+
+
{{verteiler.beschreibung}}
+
`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js index 24458ed93..e42229576 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js +++ b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js @@ -75,7 +75,7 @@ export default {
- +
diff --git a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js index 57986c1a7..9fb0b4976 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js +++ b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js @@ -19,19 +19,19 @@ export default {
{{title}}
-
- -
-
{{bez }}
- - - {{wert?wert:'-'}} - - - {{wert?wert:'-'}} -
-
-
-
-
` +
+ +
+
{{bez }}
+ + + {{wert?wert:'-'}} + + + {{wert?wert:'-'}} +
+
+
+
+
` }; \ No newline at end of file diff --git a/public/js/components/Cis/Profil/ProfilModal/EditProfil.js b/public/js/components/Cis/Profil/ProfilModal/EditProfil.js index 9e5228a0d..ba5702bc9 100644 --- a/public/js/components/Cis/Profil/ProfilModal/EditProfil.js +++ b/public/js/components/Cis/Profil/ProfilModal/EditProfil.js @@ -181,13 +181,13 @@ export default { return BsModal.popup(null, options); }, template: /*html*/ ` - - + +