From 16cfb0a3eb1b58bd06ee4d7a38d2ef7e747bb6ae Mon Sep 17 00:00:00 2001 From: Johann Hoffmann Date: Thu, 21 Nov 2024 17:32:34 +0100 Subject: [PATCH] template cleanup profil --- .../Cis/Profil/ProfilComponents/Adresse.js | 75 +- .../ProfilComponents/FetchProfilUpdates.js | 359 ++++----- .../ProfilComponents/FhAusweisStatus.js | 24 +- .../Cis/Profil/ProfilComponents/Kontakt.js | 40 +- .../Profil/ProfilComponents/Mailverteiler.js | 25 +- .../Profil/ProfilComponents/ProfilEmails.js | 88 +- .../ProfilComponents/ProfilInformation.js | 245 +++--- .../Cis/Profil/ProfilComponents/QuickLinks.js | 109 ++- .../ProfilComponents/RoleInformation.js | 76 +- .../Cis/Profil/ProfilModal/EditProfil.js | 375 +++++---- .../Profil/ProfilModal/EditProfilSelect.js | 296 +++---- .../js/components/Cis/Profil/StudentProfil.js | 755 ++++++++---------- 12 files changed, 1122 insertions(+), 1345 deletions(-) diff --git a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js index 8da928d32..5d7406bbd 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js @@ -17,61 +17,50 @@ export default {
- - +
- - - +
+
- -
-
{{$p.t('person','strasse')}}
- {{data.strasse}} -
- - -
- - - - - -
- -
-
{{$p.t('global','typ')}}
- {{data.typ}} -
- -
-
- -
-
{{$p.t('person','ort')}}
- {{data.ort}} +
{{$p.t('person','strasse')}}
+ {{data.strasse}}
-
+ + +
-
{{$p.t('person','plz')}}
- {{data.plz}} +
{{$p.t('global','typ')}}
+ {{data.typ}} +
+
+ +
+
+
{{$p.t('person','ort')}}
+ {{data.ort}} +
+
+
+
+
{{$p.t('person','plz')}}
+ {{data.plz}}
-
-
{{$p.t('person','zustelladresse')}}
-
- - +
+
{{$p.t('person','zustelladresse')}}
+
+ + +
+ +
- -
- ` - +` }; \ No newline at end of file diff --git a/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js b/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js index 11c5960e4..4c7411cdf 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js +++ b/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js @@ -1,212 +1,197 @@ import EditProfil from "../ProfilModal/EditProfil.js"; //? EditProfil is the modal used to edit the profil updates export default { - components: { EditProfil }, - props: { - data: { - type: Object, - }, - }, + components: {EditProfil}, + props: { + data: { + type: Object, + }, + }, - inject: [ - "getZustellkontakteCount", - "getZustelladressenCount", - "profilUpdateStates", - "profilUpdateTopic", - ], + inject: [ + "getZustellkontakteCount", + "getZustelladressenCount", + "profilUpdateStates", + "profilUpdateTopic", + ], - emits: ["fetchUpdates"], + emits: ["fetchUpdates"], - data() { - return { - showUpdateModal: false, - content: null, - editProfilTitle: this.$p.t("profil", "profilBearbeiten"), - }; - }, + data() { + return { + showUpdateModal: false, + content: null, + editProfilTitle: this.$p.t("profil", "profilBearbeiten"), + }; + }, - methods: { - hideEditProfilModal: function () { - //? checks the editModal component property result, if the user made a successful request or not - if (this.$refs.updateEditModal.result) { - this.$emit("fetchUpdates"); - } else { - // when modal was closed without submitting request - } - this.showUpdateModal = false; - }, + methods: { + hideEditProfilModal: function () { + //? checks the editModal component property result, if the user made a successful request or not + if (this.$refs.updateEditModal.result) { + this.$emit("fetchUpdates"); + } else { + // when modal was closed without submitting request + } + this.showUpdateModal = false; + }, - async showEditProfilModal(updateRequest) { + async showEditProfilModal(updateRequest) { - let view = this.getView(updateRequest.topic, updateRequest.status); - - let data = null; - let content = null; - let files = null; - let withFiles = false; + let view = this.getView(updateRequest.topic, updateRequest.status); - if (view === "TextInputDokument") { - data = { - titel: updateRequest.topic, - value: updateRequest.requested_change.value, - }; - - const filesFromDatabase = - await this.$fhcApi.factory.profilUpdate.getProfilRequestFiles( - updateRequest.profil_update_id - ).then((res) => { - return res.data; - }); + let data = null; + let content = null; + let files = null; + let withFiles = false; - files = filesFromDatabase; - if (files) { - withFiles = true; - } - } else { - data = updateRequest.requested_change; - } + if (view === "TextInputDokument") { + data = { + titel: updateRequest.topic, + value: updateRequest.requested_change.value, + }; - content = { - updateID: updateRequest.profil_update_id, - view: view, - data: data, - withFiles: withFiles, - topic: updateRequest.topic, - files: files, - }; + const filesFromDatabase = + await this.$fhcApi.factory.profilUpdate.getProfilRequestFiles( + updateRequest.profil_update_id + ).then((res) => { + return res.data; + }); - if (view === "EditAdresse") { - - const isMitarbeiter = await this.$fhcApi.factory.profil.isMitarbeiter(updateRequest.uid).then((res)=>res.data); + files = filesFromDatabase; + if (files) { + withFiles = true; + } + } else { + data = updateRequest.requested_change; + } - if (isMitarbeiter) { - content["isMitarbeiter"] = isMitarbeiter; - } - } + content = { + updateID: updateRequest.profil_update_id, + view: view, + data: data, + withFiles: withFiles, + topic: updateRequest.topic, + files: files, + }; - //? adds the status information if the profil update request was rejected or accepted - if (updateRequest.status !== this.profilUpdateStates["Pending"]) { - content["status"] = updateRequest.status; - content["status_message"] = updateRequest.status_message; - content["status_timestamp"] = updateRequest.status_timestamp; - } + if (view === "EditAdresse") { - //? update data of the reactive content - this.content = content; - this.editProfilTitle = updateRequest.topic; + const isMitarbeiter = await this.$fhcApi.factory.profil.isMitarbeiter(updateRequest.uid).then((res) => res.data); - //? only show the popup if also the right content is available - if (content) { - this.showUpdateModal = true; - // after a state change, wait for the DOM updates to complete - Vue.nextTick(() => { - this.$refs.updateEditModal.show(); - }); - } - }, + if (isMitarbeiter) { + content["isMitarbeiter"] = isMitarbeiter; + } + } - deleteRequest: function (item) { - this.$fhcApi.factory.profilUpdate.deleteProfilRequest(item.profil_update_id).then( - (res) => { - if (res.data.error) { - //? open alert - console.error("error happened",res.data); - } else { - this.$emit("fetchUpdates"); - } - } - ); - }, - - getView: function (topic, status) { - if (!(status === this.profilUpdateStates["Pending"])) { - return "Status"; - } + //? adds the status information if the profil update request was rejected or accepted + if (updateRequest.status !== this.profilUpdateStates["Pending"]) { + content["status"] = updateRequest.status; + content["status_message"] = updateRequest.status_message; + content["status_timestamp"] = updateRequest.status_timestamp; + } - switch (topic) { - case this.profilUpdateTopic["Private Kontakte"]: - return "EditKontakt"; - case this.profilUpdateTopic["Add Kontakt"]: - return "EditKontakt"; - case this.profilUpdateTopic["Delete Kontakt"]: - return "Kontakt"; - case this.profilUpdateTopic["Private Adressen"]: - return "EditAdresse"; - case this.profilUpdateTopic["Add Adresse"]: - return "EditAdresse"; - case this.profilUpdateTopic["Delete Adresse"]: - return "Adresse"; - default: - return "TextInputDokument"; - } - }, + //? update data of the reactive content + this.content = content; + this.editProfilTitle = updateRequest.topic; - }, - created() { - }, + //? only show the popup if also the right content is available + if (content) { + this.showUpdateModal = true; + // after a state change, wait for the DOM updates to complete + Vue.nextTick(() => { + this.$refs.updateEditModal.show(); + }); + } + }, - computed: {}, + deleteRequest: function (item) { + this.$fhcApi.factory.profilUpdate.deleteProfilRequest(item.profil_update_id).then( + (res) => { + if (res.data.error) { + //? open alert + console.error("error happened", res.data); + } else { + this.$emit("fetchUpdates"); + } + } + ); + }, - template: /*html*/ ` -
- + getView: function (topic, status) { + if (!(status === this.profilUpdateStates["Pending"])) { + return "Status"; + } + + switch (topic) { + case this.profilUpdateTopic["Private Kontakte"]: + return "EditKontakt"; + case this.profilUpdateTopic["Add Kontakt"]: + return "EditKontakt"; + case this.profilUpdateTopic["Delete Kontakt"]: + return "Kontakt"; + case this.profilUpdateTopic["Private Adressen"]: + return "EditAdresse"; + case this.profilUpdateTopic["Add Adresse"]: + return "EditAdresse"; + case this.profilUpdateTopic["Delete Adresse"]: + return "Adresse"; + default: + return "TextInputDokument"; + } + }, + + }, + created() { + }, + + computed: {}, + + template: /*html*/ ` +
-
- {{$p.t('profilUpdate','profilUpdates')}} -
-
-
- - - - - - - - - - - - - - - - - - - - - - -
{{$p.t('profilUpdate','topic')}}{{$p.t('global','status')}}{{$p.t('global','datum')}}{{$p.t('ui','aktion')}}
{{item.topic}}{{item.status}}{{item.status_timestamp?item.status_timestamp:item.insertamum}}
+
{{$p.t('profilUpdate','profilUpdates')}}
+
+
+ + + + + + + + + + + + + + + + + + +
{{$p.t('profilUpdate','topic')}}{{$p.t('global','status')}}{{$p.t('global','datum')}}{{$p.t('ui','aktion')}}
{{item.topic}}{{item.status}}{{item.status_timestamp?item.status_timestamp:item.insertamum}}
+
-
-
- - - `, +
+`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/FhAusweisStatus.js b/public/js/components/Cis/Profil/ProfilComponents/FhAusweisStatus.js index d59bcbce3..21e05e525 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/FhAusweisStatus.js +++ b/public/js/components/Cis/Profil/ProfilComponents/FhAusweisStatus.js @@ -1,20 +1,16 @@ export default { - props:{ - data:{ - type:String, - - } - }, - data(){ - return { - - } - },mounted(){ - }, - template: /*html*/` + props: { + data: { + type: String, + } + }, + data() { + return {} + }, + template: /*html*/`
- {{$p.t('profil','fhAusweisStatus',[data])}} + {{$p.t('profil','fhAusweisStatus',[data])}}
`, } \ No newline at end of file diff --git a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js index 7b5c25a0c..ffb46e1a2 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js @@ -13,38 +13,26 @@ export default{ }, template:/*html*/`
-
- - -
-
- - - -
-
{{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 37b8fc1a5..5f2221b22 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js +++ b/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js @@ -11,30 +11,23 @@ export default { }, template: /*html*/`
-
- {{title}} + {{title}}
- -
{{$p.t('profil','mailverteilerMitglied')}}
+
{{$p.t('profil','mailverteilerMitglied')}}
-
-
- - - +
+
+ +
+
+ {{verteiler.gruppe_kurzbz}} +
-
- {{verteiler.gruppe_kurzbz}} -
-
-
{{verteiler.beschreibung}}
- -
`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js b/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js index 4040be37b..43ef807ba 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js +++ b/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js @@ -1,62 +1,38 @@ export default { - data() { - return {}; - }, - props: { - title: { - type: String, - required: true, - }, - data: { - type: Array, - }, - }, - template: /*html*/ ` -
+ data() { + return {}; + }, + props: { + title: { + type: String, + required: true, + }, + data: { + type: Array, + }, + }, + template: /*html*/ ` +
- {{title}} + {{title}}
-
- - - -
-
- -
- -
- - - -
- - -
- -
-
{{email.type}}
- {{email.email}} -
- - -
-
-
-
- - - - - - - - - - - - + +
+
+
+
+ +
+
+
+
{{email.type}}
+ {{email.email}} +
+
+
+
+
-
`, +
`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js index 46b0b2eda..24458ed93 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js +++ b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js @@ -1,150 +1,115 @@ export default { - props: { - title: { - type: String, - }, - data: { - type: Object, - }, - editable: { - type: Boolean, - default: false - } - }, - data() { - return { - FotoSperre: this.data.foto_sperre, - }; - }, - emits: ["showEditProfilModal"], + props: { + title: { + type: String, + }, + data: { + type: Object, + }, + editable: { + type: Boolean, + default: false + } + }, + data() { + return { + FotoSperre: this.data.foto_sperre, + }; + }, + emits: ["showEditProfilModal"], - methods: { - sperre_foto_function() { - //TODO: refactor - if (!this.data) { - return; - } - this.$fhcApi.factory.profil.fotoSperre(!this.FotoSperre).then(res =>{ - this.FotoSperre = res.data.foto_sperre; - }) - }, - }, - computed: { - get_image_base64_src: function () { - if (!this.data.foto) { - return ""; - } - return "data:image/jpeg;base64," + this.data.foto; - }, - name: function () { - return { vorname: this.data.Vorname, nachname: this.data.Nachname }; - }, - profilInfo: function () { - let res = {}; - let notIncludedProperties = [ - "Vorname", - "Nachname", - "foto_sperre", - "foto", - ]; - Object.keys(this.data).forEach((key) => { - if (!notIncludedProperties.includes(key)) { - res[key] = this.data[key]; - } - }); - return res; - }, - }, - template: /*html*/ ` - -
+ methods: { + sperre_foto_function() { + //TODO: refactor + if (!this.data) { + return; + } + this.$fhcApi.factory.profil.fotoSperre(!this.FotoSperre).then(res => { + this.FotoSperre = res.data.foto_sperre; + }) + }, + }, + computed: { + get_image_base64_src: function () { + if (!this.data.foto) { + return ""; + } + return "data:image/jpeg;base64," + this.data.foto; + }, + name: function () { + return {vorname: this.data.Vorname, nachname: this.data.Nachname}; + }, + profilInfo: function () { + let res = {}; + let notIncludedProperties = [ + "Vorname", + "Nachname", + "foto_sperre", + "foto", + ]; + Object.keys(this.data).forEach((key) => { + if (!notIncludedProperties.includes(key)) { + res[key] = this.data[key]; + } + }); + return res; + }, + }, + template: /*html*/ ` + +
-
-
- +
+
+ +
+
+ {{title}} +
-
- {{title}} -
-
- -
- - - -
-
-
- - - - -
- +
+ + +
+
+
+ + +
+ +
+
+
+ +
+ + +
+
+
+
+
{{$p.t('profilUpdate','vorname')}}
+ {{name.vorname}} +
+
+
+
+
{{$p.t('profilUpdate','nachname')}}
+ {{name.nachname}} +
+
+
+
+
+
+
{{$p.t('profil',bez)}}
+ {{wert?wert:'-'}} +
+
- - -
- -
- - - - - -
-
-
- - -
-
{{$p.t('profilUpdate','vorname')}}
-{{name.vorname}}
- - - -
-
- -
-
{{$p.t('profilUpdate','nachname')}}
-{{name.nachname}} -
- -
-
- - -
- - - - - - - - -
- - -
-
{{$p.t('profil',bez)}}
-{{wert?wert:'-'}} -
- - - -
- - -
- - - -
-
`, +`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/QuickLinks.js b/public/js/components/Cis/Profil/ProfilComponents/QuickLinks.js index bad40b2fe..3f8b7d77c 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/QuickLinks.js +++ b/public/js/components/Cis/Profil/ProfilComponents/QuickLinks.js @@ -1,66 +1,53 @@ export default { - //TODO: To be implemented - props: { - data: { - type: String, - }, - title: { - type: String, - required: true, - }, - mobile: { - type: Boolean, - default: false, - }, - }, - methods: { - hideCollapse: function () { - this.collapseOpen = false; - }, - showCollapse: function () { - this.collapseOpen = true; - }, - }, - data() { - return { - collapseOpen: false, - }; - }, - template: /*html*/ ` -
+ //TODO: To be implemented + props: { + data: { + type: String, + }, + title: { + type: String, + required: true, + }, + mobile: { + type: Boolean, + default: false, + }, + }, + methods: { + hideCollapse: function () { + this.collapseOpen = false; + }, + showCollapse: function () { + this.collapseOpen = true; + }, + }, + data() { + return { + collapseOpen: false, + }; + }, + template: /*html*/ ` +
-
`, +
{{title}}
+
+ {{$p.t('profil','zeitwuensche')}} + {{$p.t('profil','lehrveranstaltungen')}} + {{$p.t('profil','zeitsperren')}} +
+ +
`, }; diff --git a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js index 26fb06876..57986c1a7 100644 --- a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js +++ b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js @@ -1,49 +1,37 @@ export default { - data(){ - return { - - } - }, - props:{ - data:{ - type:Object, - }, - title:{ - type:String, - } - }, - computed:{ + data() { + return {} + }, + props: { + data: { + type: Object, + }, + title: { + type: String, + } + }, + computed: {}, + created() { + //TODO: check if data.Telefon is a valid telefon number to call before using it as a tel: link + }, + template: ` +
+
{{title}}
+
+
+
+ +
+
{{bez }}
- }, - created(){ - //TODO: check if data.Telefon is a valid telefon number to call before using it as a tel: link - }, - template:` -
- -
- {{title}} + + {{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 b244091bb..9e5228a0d 100644 --- a/public/js/components/Cis/Profil/ProfilModal/EditProfil.js +++ b/public/js/components/Cis/Profil/ProfilModal/EditProfil.js @@ -4,204 +4,201 @@ import EditProfilSelect from "./EditProfilSelect.js"; import Loader from "../../../Loader.js"; export default { - components: { - BsModal, - Alert, - EditProfilSelect, - Loader, - }, - mixins: [BsModal], - props: { - value: Object, - title: String, - zustelladressenCount: Function, - zustellkontakteCount: Function, - /* - * NOTE(chris): - * Hack to expose in "emits" declared events to $props which we use - * in the v-bind directive to forward all events. - * @see: https://github.com/vuejs/core/issues/3432 - */ - onHideBsModal: Function, - onHiddenBsModal: Function, - onHidePreventedBsModal: Function, - onShowBsModal: Function, - onShownBsModal: Function, - }, - - data() { - return { - topic: null, - profilUpdate: null, - editData: this.value, - fileID: null, - breadcrumb: null, - loading: false, - result: false, - info: null, - }; - }, - inject: ["setLoading"], - provide() { - return { - updateFileID: this.updateFileIDFunction, - }; - }, - - methods: { - updateFileIDFunction: function (newFileID) { - this.fileID = newFileID; - }, - - handleFailedError: function (err) { - console.error(err); - this.loading = false; - this.setLoading(false); - this.result = false; - this.hide(); + components: { + BsModal, + Alert, + EditProfilSelect, + Loader, + }, + mixins: [BsModal], + props: { + value: Object, + title: String, + zustelladressenCount: Function, + zustellkontakteCount: Function, + /* + * NOTE(chris): + * Hack to expose in "emits" declared events to $props which we use + * in the v-bind directive to forward all events. + * @see: https://github.com/vuejs/core/issues/3432 + */ + onHideBsModal: Function, + onHiddenBsModal: Function, + onHidePreventedBsModal: Function, + onShowBsModal: Function, + onShownBsModal: Function, }, - async submitProfilChange() { + data() { + return { + topic: null, + profilUpdate: null, + editData: this.value, + fileID: null, + breadcrumb: null, + loading: false, + result: false, + info: null, + }; + }, + inject: ["setLoading"], + provide() { + return { + updateFileID: this.updateFileIDFunction, + }; + }, - //? check if data is valid before making a request - if (this.topic && this.profilUpdate) { - //? if profil update contains any attachment - if (this.fileID) { - const fileData = await this.uploadFiles(this.fileID); + methods: { + updateFileIDFunction: function (newFileID) { + this.fileID = newFileID; + }, - this.fileID = fileData ? fileData : null; - } + handleFailedError: function (err) { + console.error(err); + this.loading = false; + this.setLoading(false); + this.result = false; + this.hide(); + }, - //? inserts new row in public.tbl_cis_profil_update - //* calls the update api call if an update field is present in the data that was passed to the modal - const handleApiResponse = (res) => { - //? toggles the loading to false and closes the loading modal - if (res.data.error) { - this.result = false; - Alert.popup( - "Ein Fehler ist aufgetreten: " + JSON.stringify(res.data.retval) - ); - } else { - this.result = true; - Alert.popup( - "Ihre Anfrage wurde erfolgreich gesendet. Bitte warten Sie, während sich das Team um Ihre Anfrage kümmert." - ); - } - }; + async submitProfilChange() { - //* v-show on EditProfil modal binded to this.loading - //? hides the EditProfil modal and shows the loading modal by calling a callback that was passed as prop from the parent component - this.loading = true; - this.setLoading(true); + //? check if data is valid before making a request + if (this.topic && this.profilUpdate) { + //? if profil update contains any attachment + if (this.fileID) { + const fileData = await this.uploadFiles(this.fileID); - //? if an updateID is present, updateProfilRequest is called, else insertProfilRequest is called - this.editData.updateID? - this.$fhcApi.factory.profilUpdate.updateProfilRequest( - this.topic, - this.profilUpdate, - this.editData.updateID, - this.fileID ? this.fileID[0] : null - ) - .then((res) => { - handleApiResponse(res); - }) - .catch((err) => this.$fhcAlert.handleSystemError) - .finally(()=>{ - this.loading = false; - this.setLoading(false); - this.hide(); - }) - : - this.$fhcApi.factory.profilUpdate.insertProfilRequest( - this.topic, - this.profilUpdate, - this.fileID ? this.fileID[0] : null - ) - .then((res) => { - handleApiResponse(res); - }) - .catch((err) => this.$fhcAlert.handleSystemError) - .finally(() => { - this.loading = false; - this.setLoading(false); - this.hide(); - }); - } - }, + this.fileID = fileData ? fileData : null; + } - uploadFiles: async function (files) { - if (files[0].type !== "application/x.fhc-dms+json") { - let formData = new FormData(); - formData.append("files[]", files[0]); - const result = this.editData.updateID - ? //? updating old attachment by replacing - //* second parameter of api request insertFile checks if the file has to be replaced or not - await this.$fhcApi.factory.profilUpdate.insertFile( - formData, - this.editData.updateID - ).then((res) => { - return res.data?.map((file) => file.dms_id); - }) - : //? fresh insert of new attachment - await this.$fhcApi.factory.profilUpdate.insertFile(formData).then((res) => { - return res.data?.map((file) => file.dms_id); - }); - return result; - } else { - //? attachment hasn't been replaced - return false; - } - }, - }, - computed: { - showFooter: function () { - switch(this.value.view){ - case 'Status': return false; - case 'Kontakt':return false; - case 'Adresse':return false; - default: return true; - } - }, - }, - created() { - if (this.editData.topic) { - //? if the topic was passed through the prop add it to the component - this.topic = this.editData.topic; - } - }, - mounted() { - this.modal = this.$refs.modalContainer.modal; - }, - popup(options) { - BsModal.popup.bind(this); - return BsModal.popup(null, options); - }, - template: /*html*/ ` - + //? inserts new row in public.tbl_cis_profil_update + //* calls the update api call if an update field is present in the data that was passed to the modal + const handleApiResponse = (res) => { + //? toggles the loading to false and closes the loading modal + if (res.data.error) { + this.result = false; + Alert.popup( + "Ein Fehler ist aufgetreten: " + JSON.stringify(res.data.retval) + ); + } else { + this.result = true; + Alert.popup( + "Ihre Anfrage wurde erfolgreich gesendet. Bitte warten Sie, während sich das Team um Ihre Anfrage kümmert." + ); + } + }; - - - - - - `, + uploadFiles: async function (files) { + if (files[0].type !== "application/x.fhc-dms+json") { + let formData = new FormData(); + formData.append("files[]", files[0]); + const result = this.editData.updateID + ? //? updating old attachment by replacing + //* second parameter of api request insertFile checks if the file has to be replaced or not + await this.$fhcApi.factory.profilUpdate.insertFile( + formData, + this.editData.updateID + ).then((res) => { + return res.data?.map((file) => file.dms_id); + }) + : //? fresh insert of new attachment + await this.$fhcApi.factory.profilUpdate.insertFile(formData).then((res) => { + return res.data?.map((file) => file.dms_id); + }); + return result; + } else { + //? attachment hasn't been replaced + return false; + } + }, + }, + computed: { + showFooter: function () { + switch (this.value.view) { + case 'Status': + return false; + case 'Kontakt': + return false; + case 'Adresse': + return false; + default: + return true; + } + }, + }, + created() { + if (this.editData.topic) { + //? if the topic was passed through the prop add it to the component + this.topic = this.editData.topic; + } + }, + mounted() { + this.modal = this.$refs.modalContainer.modal; + }, + popup(options) { + BsModal.popup.bind(this); + return BsModal.popup(null, options); + }, + template: /*html*/ ` + + + + + + +`, }; diff --git a/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js b/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js index 7b87bad85..99d04d8f6 100644 --- a/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js +++ b/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js @@ -6,164 +6,164 @@ import Status from "./EditProfilComponents/Status.js"; import TextInputDokument from "./EditProfilComponents/TextInputDokument.js"; export default { - components: { - Kontakt, - EditKontakt, - Adresse, - EditAdresse, - Status, - TextInputDokument, - }, - inject: ["profilUpdateTopic"], - props: { - list: Object, + components: { + Kontakt, + EditKontakt, + Adresse, + EditAdresse, + Status, + TextInputDokument, + }, + inject: ["profilUpdateTopic"], + props: { + list: Object, - //? Prop used to determine how many options the select should initially show - size: { - type: Number, - default: null, - }, - //? Content for the aria label of the select - ariaLabel: { - type: String, - required: true, - }, - profilUpdate: String, - topic: String, - breadcrumb: String, - }, - emits: { - //? update:modelValue event is needed to notify the v-model when the value has changed - ["update:profilUpdate"]: null, - ["update:topic"]: null, - ["update:breadcrumb"]: null, - submit: null, - select: null, - }, - data() { - return { - view: null, - data: null, - breadcrumbItems: [], - modal_topic: this.topic, - properties: null, - }; - }, + //? Prop used to determine how many options the select should initially show + size: { + type: Number, + default: null, + }, + //? Content for the aria label of the select + ariaLabel: { + type: String, + required: true, + }, + profilUpdate: String, + topic: String, + breadcrumb: String, + }, + emits: { + //? update:modelValue event is needed to notify the v-model when the value has changed + ["update:profilUpdate"]: null, + ["update:topic"]: null, + ["update:breadcrumb"]: null, + submit: null, + select: null, + }, + data() { + return { + view: null, + data: null, + breadcrumbItems: [], + modal_topic: this.topic, + properties: null, + }; + }, - methods: { - addItem: function () { - this.view = - this.modal_topic == this.profilUpdateTopic["Private Kontakte"] - ? "EditKontakt" - : "EditAdresse"; - - //? updates the topic when a Kontakt or an Address should be added - this.modal_topic = - this.modal_topic == this.profilUpdateTopic["Private Kontakte"] - ? this.profilUpdateTopic["Add Kontakt"] - : this.profilUpdateTopic["Add Adresse"]; - this.$emit("update:topic", this.modal_topic); - this.breadcrumbItems.push(this.modal_topic); - this.$emit("update:breadcrumb", this.breadcrumbItems); + methods: { + addItem: function () { + this.view = + this.modal_topic == this.profilUpdateTopic["Private Kontakte"] + ? "EditKontakt" + : "EditAdresse"; - this.data = - this.view == "EditAdresse" - ? { - //? add flag - add: true, - adresse_id: null, - strasse: null, - typ: null, - plz: null, - ort: null, - zustelladresse: false, - } - : { - //? add flag - add: true, - kontakt_id: null, - kontakttyp: null, - kontakt: null, - anmerkung: null, - zustellung: false, - }; - }, + //? updates the topic when a Kontakt or an Address should be added + this.modal_topic = + this.modal_topic == this.profilUpdateTopic["Private Kontakte"] + ? this.profilUpdateTopic["Add Kontakt"] + : this.profilUpdateTopic["Add Adresse"]; + this.$emit("update:topic", this.modal_topic); + this.breadcrumbItems.push(this.modal_topic); + this.$emit("update:breadcrumb", this.breadcrumbItems); - deleteItem: function (item) { - //? delete flag - item.data.delete = true; - this.$emit("update:profilUpdate", item.data); - //? updates the topic when a Kontakt or an Address should be deleted - - this.modal_topic = this.modal_topic == this.profilUpdateTopic["Private Adressen"] - ? this.profilUpdateTopic["Delete Adresse"] - : this.profilUpdateTopic["Delete Kontakt"]; - this.$emit("update:topic", this.modal_topic); - this.$emit("submit"); - }, + this.data = + this.view == "EditAdresse" + ? { + //? add flag + add: true, + adresse_id: null, + strasse: null, + typ: null, + plz: null, + ort: null, + zustelladresse: false, + } + : { + //? add flag + add: true, + kontakt_id: null, + kontakttyp: null, + kontakt: null, + anmerkung: null, + zustellung: false, + }; + }, - profilUpdateEmit: function (event) { - //? passes the updated profil information to the parent component - this.$emit("update:profilUpdate", event); - }, + deleteItem: function (item) { + //? delete flag + item.data.delete = true; + this.$emit("update:profilUpdate", item.data); + //? updates the topic when a Kontakt or an Address should be deleted - updateOptions: function (event, item) { - this.properties = item; - this.data = item.data; - this.view = item.view; - if (item.title) { - //? emits the selected topic to the parent component - this.modal_topic = item.topic; - this.$emit("update:topic", this.modal_topic); + this.modal_topic = this.modal_topic == this.profilUpdateTopic["Private Adressen"] + ? this.profilUpdateTopic["Delete Adresse"] + : this.profilUpdateTopic["Delete Kontakt"]; + this.$emit("update:topic", this.modal_topic); + this.$emit("submit"); + }, - //? emits the new item for the breadcrumb in the parent component - this.breadcrumbItems.push(item.title); - } else { - if (item.data.kontakttyp) { - this.breadcrumbItems.push(item.data.kontakttyp); - this.breadcrumbItems.push(item.data.kontakt); - } else if (item.data.strasse) { - this.breadcrumbItems.push(item.data.strasse); - } - } - this.$emit("update:breadcrumb", this.breadcrumbItems); - }, - }, - computed: {}, - created() { - //? JSON parse and stringify are used to deep clone the objects - this.properties = { ...this.list }; - this.data = this.list.data - ? JSON.parse(JSON.stringify(this.list.data)) - : null; - this.view = this.list.view - ? JSON.parse(JSON.stringify(this.list.view)) - : null; - }, - mounted() {}, + profilUpdateEmit: function (event) { + //? passes the updated profil information to the parent component + this.$emit("update:profilUpdate", event); + }, - template: /*html*/ ` + updateOptions: function (event, item) { + this.properties = item; + this.data = item.data; + this.view = item.view; + if (item.title) { + //? emits the selected topic to the parent component + this.modal_topic = item.topic; + this.$emit("update:topic", this.modal_topic); + + //? emits the new item for the breadcrumb in the parent component + this.breadcrumbItems.push(item.title); + } else { + if (item.data.kontakttyp) { + this.breadcrumbItems.push(item.data.kontakttyp); + this.breadcrumbItems.push(item.data.kontakt); + } else if (item.data.strasse) { + this.breadcrumbItems.push(item.data.strasse); + } + } + this.$emit("update:breadcrumb", this.breadcrumbItems); + }, + }, + computed: {}, + created() { + //? JSON parse and stringify are used to deep clone the objects + this.properties = {...this.list}; + this.data = this.list.data + ? JSON.parse(JSON.stringify(this.list.data)) + : null; + this.view = this.list.view + ? JSON.parse(JSON.stringify(this.list.view)) + : null; + }, + mounted() { + }, + + template: /*html*/ ` - diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index 40ee7985f..0304330b9 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -1,4 +1,4 @@ -import { CoreFilterCmpt } from "../../../components/filter/Filter.js"; +import {CoreFilterCmpt} from "../../../components/filter/Filter.js"; import Mailverteiler from "./ProfilComponents/Mailverteiler.js"; import AusweisStatus from "./ProfilComponents/FhAusweisStatus.js"; import QuickLinks from "./ProfilComponents/QuickLinks.js"; @@ -11,439 +11,352 @@ import FetchProfilUpdates from "./ProfilComponents/FetchProfilUpdates.js"; import EditProfil from "./ProfilModal/EditProfil.js"; export default { - components: { - CoreFilterCmpt, - Mailverteiler, - AusweisStatus, - QuickLinks, - Adresse, - Kontakt, - ProfilEmails, - RoleInformation, - ProfilInformation, - FetchProfilUpdates, - EditProfil, - }, - inject: ["sortProfilUpdates", "collapseFunction"], - data() { - return { - showModal: false, - collapseIconBetriebsmittel: true, - editDataFilter: null, + components: { + CoreFilterCmpt, + Mailverteiler, + AusweisStatus, + QuickLinks, + Adresse, + Kontakt, + ProfilEmails, + RoleInformation, + ProfilInformation, + FetchProfilUpdates, + EditProfil, + }, + inject: ["sortProfilUpdates", "collapseFunction"], + data() { + return { + showModal: false, + collapseIconBetriebsmittel: true, + editDataFilter: null, - // tabulator options - zutrittsgruppen_table_options: { - height: 200, - layout: "fitColumns", - data: [{ bezeichnung: "" }], - columns: [{ title: "Zutritt", field: "bezeichnung" }], - }, - betriebsmittel_table_options: { - height: 300, - layout: "fitColumns", - responsiveLayout: "collapse", - responsiveLayoutCollapseUseFormatters: false, - 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", - headerFilter: true, - minWidth: 200, - }, - { - title: "Nummer", - field: "Nummer", - headerFilter: true, - resizable: true, - minWidth: 200, - }, - { - title: "Ausgegeben_am", - field: "Ausgegeben_am", - headerFilter: true, - minWidth: 200, - }, - ], - }, - }; - }, + // tabulator options + zutrittsgruppen_table_options: { + height: 200, + layout: "fitColumns", + data: [{bezeichnung: ""}], + columns: [{title: "Zutritt", field: "bezeichnung"}], + }, + betriebsmittel_table_options: { + height: 300, + layout: "fitColumns", + responsiveLayout: "collapse", + responsiveLayoutCollapseUseFormatters: false, + 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", + headerFilter: true, + minWidth: 200, + }, + { + title: "Nummer", + field: "Nummer", + headerFilter: true, + resizable: true, + minWidth: 200, + }, + { + title: "Ausgegeben_am", + field: "Ausgegeben_am", + headerFilter: true, + minWidth: 200, + }, + ], + }, + }; + }, - props: { - data: Object, - editData: Object, - }, - methods: { - - betriebsmittelTableBuilt: function () { - this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel); - }, - zutrittsgruppenTableBuilt: function () { - this.$refs.zutrittsgruppenTable.tabulator.setData( - this.data.zuttritsgruppen - ); - }, - fetchProfilUpdates: function () { - this.$fhcApi.factory.profilUpdate.selectProfilRequest().then((res) => { - if (!res.error && res) { - this.data.profilUpdates = res.data?.length - ? res.data.sort(this.sortProfilUpdates) - : null; - } - }); - }, + props: { + data: Object, + editData: Object, + }, + methods: { - hideEditProfilModal: function () { - //? checks the editModal component property result, if the user made a successful request or not - if (this.$refs.editModal.result) { - this.$fhcApi.factory.profilUpdate.selectProfilRequest() - .then((request) => { - if (!request.error && res) { - this.data.profilUpdates = request.data; - this.data.profilUpdates.sort(this.sortProfilUpdates); - } else { - console.error("Error when fetching profile updates: " + res.data); - } - }) - .catch((err) => { - console.error(err); - }); - } else { - // when modal was closed without submitting request - } - this.showModal = false; - this.editDataFilter = null; - }, + betriebsmittelTableBuilt: function () { + this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel); + }, + zutrittsgruppenTableBuilt: function () { + this.$refs.zutrittsgruppenTable.tabulator.setData( + this.data.zuttritsgruppen + ); + }, + fetchProfilUpdates: function () { + this.$fhcApi.factory.profilUpdate.selectProfilRequest().then((res) => { + if (!res.error && res) { + this.data.profilUpdates = res.data?.length + ? res.data.sort(this.sortProfilUpdates) + : null; + } + }); + }, - showEditProfilModal(view) { - if (view) { - this.editDataFilter = view; - } - this.showModal = true; - // after a state change, wait for the DOM updates to complete - Vue.nextTick(() => { - this.$refs.editModal.show(); - }); - }, - }, + hideEditProfilModal: function () { + //? checks the editModal component property result, if the user made a successful request or not + if (this.$refs.editModal.result) { + this.$fhcApi.factory.profilUpdate.selectProfilRequest() + .then((request) => { + if (!request.error && res) { + this.data.profilUpdates = request.data; + this.data.profilUpdates.sort(this.sortProfilUpdates); + } else { + console.error("Error when fetching profile updates: " + res.data); + } + }) + .catch((err) => { + console.error(err); + }); + } else { + // when modal was closed without submitting request + } + this.showModal = false; + this.editDataFilter = null; + }, - computed: { - editable() { - return this.data?.editAllowed ?? false; - }, - - filteredEditData() { - return this.editDataFilter - ? this.editData.data[this.editDataFilter] - : this.editData; - }, + showEditProfilModal(view) { + if (view) { + this.editDataFilter = view; + } + this.showModal = true; + // after a state change, wait for the DOM updates to complete + Vue.nextTick(() => { + this.$refs.editModal.show(); + }); + }, + }, - profilInformation() { - if (!this.data) { - return {}; - } + computed: { + editable() { + return this.data?.editAllowed ?? false; + }, - return { - Vorname: this.data.vorname, - Nachname: this.data.nachname, - Username: this.data.username, - Anrede: this.data.anrede, - Titel: this.data.titel, - Postnomen: this.data.postnomen, - foto_sperre: this.data.foto_sperre, - foto: this.data.foto, - }; - }, + filteredEditData() { + return this.editDataFilter + ? this.editData.data[this.editDataFilter] + : this.editData; + }, - roleInformation() { - if (!this.data) { - return {}; - } + profilInformation() { + if (!this.data) { + return {}; + } - return { - Geburtsdatum: this.data.gebdatum, - Geburtsort: this.data.gebort, - Personenkennzeichen: this.data.personenkennzeichen, - Studiengang: this.data.studiengang, - Semester: this.data.semester, - Verband: this.data.verband, - Gruppe: this.data.gruppe.trim(), - }; - }, - }, + return { + Vorname: this.data.vorname, + Nachname: this.data.nachname, + Username: this.data.username, + Anrede: this.data.anrede, + Titel: this.data.titel, + Postnomen: this.data.postnomen, + foto_sperre: this.data.foto_sperre, + foto: this.data.foto, + }; + }, - created() { - //? sorts the profil Updates: pending -> accepted -> rejected - this.data.profilUpdates?.sort(this.sortProfilUpdates); - - }, + roleInformation() { + if (!this.data) { + return {}; + } - - - template: /*html*/ ` - -
- + return { + Geburtsdatum: this.data.gebdatum, + Geburtsort: this.data.gebort, + Personenkennzeichen: this.data.personenkennzeichen, + Studiengang: this.data.studiengang, + Semester: this.data.semester, + Verband: this.data.verband, + Gruppe: this.data.gruppe.trim(), + }; + }, + }, + created() { + //? sorts the profil Updates: pending -> accepted -> rejected + this.data.profilUpdates?.sort(this.sortProfilUpdates); + }, + template: /*html*/ ` +
+ -
- -
- -
+
+ +
+
- - +
-
- - -
-
- - -
-
- -
-
- - -
-
- -
- - - +
- - - -
- - - - - - -
- -
-
-
- - - - - -
-
-
- - -
- - - - - -
-
- - - - - -
- -
-
-
- - -
-
- - - -
-
- - - -
-
-
-
- -
-
- {{$p.t('profil','privateKontakte')}} -
-
- -
-
- -
-
- - - -
-
-
-
-
-
- -
-
- - - -
-
-
-
- -
-
- {{$p.t('profil','privateAdressen')}} -
-
-
-
- -
-
- - -
-
-
-
-
-
- - -
- - -
- - -
- -
- -
- -
- - -
- -
- - -
- - -
- - -
-
- - - - - -
-
- - - -
-
- -
-
- -
-
- - -
-
- - - -
- - -
- - - - - - -
- -
- - - -
- -
- - - - - - -
- - -
- - -
- - - -
- - -
- - `, + +
+
+ +
+
+
+
+ + +
+
+
+ + + +
+ + + +
+
+
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ +
+
+ {{$p.t('profil','privateKontakte')}} +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ {{$p.t('profil','privateAdressen')}} +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ + +
+
+ +
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+ +
+
+ + +
+ +
+ +
+ +
+ +
+`, };