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

@@ -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({
 			<h3>Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden</h3>
 
 		</div>
-
-		<component v-else :is="view" :data="data" :editData="filteredEditData" ></component>
+		<div v-else>
+		<loading ref="loadingModalRef" :timeout="0"></loading>
+		<component  :is="view" :data="data" :editData="filteredEditData" ></component>
+		</div>
+		
 	
 	</div>`
 	

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: `
-  <loader ref="loaderRef"></loader>
   <bs-modal v-show="!loading" ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >
     
   <template v-if="title" v-slot:title>
@@ -177,7 +180,8 @@ export default {
     </template>
     <!-- optional footer -->
     <template  v-slot:footer>
-      
+    <loader  ref="loaderRef" :timeout="0"></loader>
+        
     <button class="btn btn-outline-danger " @click="hide">Abbrechen</button>    
       <button :disabled="!profilUpdate"  @click="submitProfilChange" role="button" class="btn btn-primary">Senden</button>
     </template>

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
          
         });

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()