From 47abce4aad32a2e1f248baaafd5af64c3dccbebe Mon Sep 17 00:00:00 2001 From: SimonGschnell Date: Tue, 20 Feb 2024 10:50:35 +0100 Subject: [PATCH] handles the loading modal in the root Profil app when inserting a new profil update that may takes some time because it has to send out emails --- public/js/apps/Cis/Profil.js | 26 ++++++++++++++++--- public/js/components/Cis/Profil/EditProfil.js | 20 ++++++++------ .../Cis/Profil/MitarbeiterProfil.js | 10 +++---- .../js/components/Cis/Profil/StudentProfil.js | 3 ++- 4 files changed, 41 insertions(+), 18 deletions(-) diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index c20382783..5e772a23c 100755 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -4,6 +4,8 @@ import MitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterProfil.js" import ViewStudentProfil from "../../components/Cis/Profil/StudentViewProfil.js"; import ViewMitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterViewProfil.js"; import fhcapifactory from "../api/fhcapifactory.js"; +import Loading from "../../components/Loader.js"; + Vue.$fhcapi = fhcapifactory; Vue.$collapseFormatter = function(data){ @@ -43,10 +45,12 @@ const testapp = Vue.createApp({ MitarbeiterProfil, ViewStudentProfil, ViewMitarbeiterProfil, + Loading, }, data() { return { - + //? loading property is used for showing/hiding the loading modal + loading:false, view:null, data:null, // notfound is null by default, but contains an UID if no user exists with that UID @@ -57,7 +61,10 @@ const testapp = Vue.createApp({ //? use function syntax for provide so that we can access `this` provide() { return { - + setLoading: (newValue)=>{ + console.log(this); + this.loading = newValue; + }, getZustellkontakteCount: this.zustellKontakteCount, getZustelladressenCount: this.zustellAdressenCount, collapseFunction: (e, column)=> { @@ -236,6 +243,14 @@ const testapp = Vue.createApp({ }, + watch:{ + loading:function(newValue,oldValue){ + if(newValue){this.$refs.loadingModalRef.show();}else{ + this.$refs.loadingModalRef.hide(); + } + } + }, + created(){ @@ -261,8 +276,11 @@ const testapp = Vue.createApp({

Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden

- - +
+ + +
+ ` diff --git a/public/js/components/Cis/Profil/EditProfil.js b/public/js/components/Cis/Profil/EditProfil.js index 8686c3ff8..0b56b7fd7 100755 --- a/public/js/components/Cis/Profil/EditProfil.js +++ b/public/js/components/Cis/Profil/EditProfil.js @@ -16,6 +16,7 @@ export default { title: String, zustelladressenCount: Function, zustellkontakteCount: Function, + setLoading:Function, /* * NOTE(chris): * Hack to expose in "emits" declared events to $props which we use @@ -71,7 +72,10 @@ export default { //? 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) => { - this.$refs.loaderRef.hide(); + //? toggles the loading to false and closes the loading modal + this.loading = false; + this.setLoading(false); + if (res.data.error == 0) { this.result = true; this.hide(); @@ -87,13 +91,13 @@ export default { } }; - //? shows the loading modal and hides the EditProfil modal without returning the result promise - this.$refs.loaderRef.show(); //* 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); this.editData.updateID - ? Vue.$fhcapi.ProfilUpdate.updateProfilRequest( + ? Vue.$fhcapi.ProfilUpdate.updateProfilRequest( this.topic, this.profilUpdate, this.editData.updateID, @@ -101,7 +105,7 @@ export default { ).then((res) => { handleApiResponse(res); }) - : Vue.$fhcapi.ProfilUpdate.insertProfilRequest( + : Vue.$fhcapi.ProfilUpdate.insertProfilRequest( this.topic, this.profilUpdate, this.fileID? this.fileID[0]: null @@ -140,6 +144,7 @@ export default { }, computed: {}, created() { + if (this.editData.topic) { //? if the topic was passed through the prop add it to the component this.topic = this.editData.topic; @@ -148,13 +153,11 @@ export default { }, mounted() { this.modal = this.$refs.modalContainer.modal; - }, popup(options) { return BsModal.popup.bind(this)(null, options); }, template: ` - diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index 96587dd1c..a4044ee88 100755 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -26,11 +26,10 @@ export default { RoleInformation, ProfilInformation, }, - inject: ['sortProfilUpdates','collapseFunction','getZustellkontakteCount','getZustelladressenCount'], + inject: ['sortProfilUpdates','collapseFunction','getZustellkontakteCount','getZustelladressenCount','setLoading'], data() { return { - funktionen_table_options: { height: 300, @@ -141,9 +140,6 @@ export default { methods: { - - - fetchProfilUpdates: function(){ Vue.$fhcapi.ProfilUpdate.selectProfilRequest().then((res)=>{ @@ -161,7 +157,10 @@ export default { zustelladressenCount:this.getZustelladressenCount, zustellkontakteCount:this.getZustellkontakteCount, title:"Profil bearbeiten", + setLoading:this.setLoading, + }).then((popup_result) => { + console.log("hello test"); if(popup_result){ Vue.$fhcapi.ProfilUpdate.selectProfilRequest() .then((res) =>{ @@ -178,6 +177,7 @@ export default { }); } }).catch((e) => { + console.log("catch"); // Wenn der User das Modal abbricht ohne Änderungen }); diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index ef6c72672..ad9513655 100755 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -24,7 +24,7 @@ export default { FetchProfilUpdates, }, - inject:['sortProfilUpdates','collapseFunction','getZustellkontakteCount','getZustelladressenCount'], + inject:['sortProfilUpdates','collapseFunction','getZustellkontakteCount','getZustelladressenCount','setLoading'], data() { return { @@ -99,6 +99,7 @@ export default { title:"Profil bearbeiten", zustelladressenCount:this.getZustelladressenCount, zustellkontakteCount:this.getZustellkontakteCount, + setLoading:this.setLoading, }).then((popup_result) => { if(popup_result){ Vue.$fhcapi.ProfilUpdate.selectProfilRequest()