fixes zustellAdressenCount for EditAdresse and formats code files

public/js/apps/Cis/Profil.js

@@ -6,299 +6,350 @@ import fhcapifactory from "../api/fhcapifactory.js";
 import Loading from "../../components/Loader.js";
 
 Vue.$fhcapi = fhcapifactory;
-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");
-  
-	var list = document.createElement("div");
-	list.classList.add("row");
-	
-	
-	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");
-		
-		item.innerHTML = "<strong>" + col.title + "</strong>";
-		item2.innerHTML = col.value?col.value:"-";
-		
-		list.appendChild(item);
-		list.appendChild(item2);
-	});
-  
-	return Object.keys(data).length ? container : "";
-  };
+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");
 
-  
+  var list = document.createElement("div");
+  list.classList.add("row");
+
+  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");
+
+    item.innerHTML = "<strong>" + col.title + "</strong>";
+    item2.innerHTML = col.value ? col.value : "-";
+
+    list.appendChild(item);
+    list.appendChild(item2);
+  });
+
+  return Object.keys(data).length ? container : "";
+};
 
 const profilApp = Vue.createApp({
-	
-	components: {
-		StudentProfil,
-		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
-			notFoundUID:null,
-			
-		}
-	},
-	//? use function syntax for provide so that we can access `this`
-	provide() {
-		return {
-			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];
-				});
-			
-				//* 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)=>{
+  components: {
+    StudentProfil,
+    MitarbeiterProfil,
+    ViewStudentProfil,
+    ViewMitarbeiterProfil,
+    Loading,
+  },
 
-			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;
-			}
+  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
+      notFoundUID: null,
+    };
+  },
 
-			return this.data.adressen.filter(adresse => {
-				return adresse.zustelladresse;
-			}).map(adr => {
-				
-				return adr.adresse_id;
-			});
-			
-		},
+  //? use function syntax for provide so that we can access `this`
+  provide() {
+    return {
+      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];
 
-		zustellKontakteCount(){
-			if(!this.data || !this.data.kontakte){
-				return null;
-			}
+        //* 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];
+        });
 
-			//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
-				}))
+        //* 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");
+        }
 
-			}
-			
-			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))]; 
+        //* 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;
+      },
+    };
+  },
 
-			// OLD version
-			// return this.data.kontakte.filter(kontakt => {
-			// 	return kontakt.zustellung;
-			// }).map(kon =>{
-			// 	return kon.kontakt_id;
-			// });
+  methods: {
+    zustellAdressenCount() {
+      if (!this.data || !this.data.adressen) {
+        return null;
+      }
 
-		},
-	},
-	computed:{
-		
+      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;
+            })
+        );
+      }
 
-		filteredEditData(){
-			if(!this.data){
-				return;
-			}
-			
-			
-			return {
-			  view:null,
-			  data:{
-			  Personen_Informationen : {
-				title:"Personen Informationen",
-				view:null,
-				data:{
-				  
-				  vorname: {
-					title:"vorname",
-					view:"TextInputDokument",
-					withFiles:true,
-					data:{
-					  titel:"vorname",
-					  value:this.data.vorname,
-					  
-					}},
-					nachname: {
-					  title:"nachname",
-					  view:"TextInputDokument",
-					  withFiles:true,
-					  data:{
-						titel:"nachname",
-						value:this.data.nachname,
-					  }
-					},
-					titel:{
-					  title:"titel",
-					  view:"TextInputDokument",
-					  withFiles:true,
-					  data:{
-						titel:"titel",
-						value:this.data.titel,
-					  }
-					},
-					postnomen:{
-					  title:"postnomen",
-					  view:"TextInputDokument",
-					  withFiles:true,
-					  data:{
-						titel:"postnomen",
-						value:this.data.postnomen,
-					  }
-					},
-				  }
-				},
-				Private_Kontakte: {
-				  title:"Private Kontakte" ,
-				  data:this.data.kontakte?.filter(item => {
-					return !this.data.profilUpdates?.some((update) => update.status ==='pending' && update.requested_change?.kontakt_id === item.kontakt_id);
-				  }).map(kontakt => {
-					return {
-					  listview:'Kontakt',
-					  view:'EditKontakt',
-					  data:kontakt
-					}})
-				 },
-				Private_Adressen: {
-				  title: "Private Adressen",
-				  data:this.data.adressen?.filter(item => {
-					return !this.data.profilUpdates?.some(update => {
-					  return  update.status ==='pending' &&  update.requested_change?.adresse_id == item.adresse_id;
-					})
-				  }).map(kontakt => {
-					return {
-					  listview:'Adresse',
-					  view:'EditAdresse',
-					  data:kontakt
-					}})
-				 },
-				//  Password_Change : {
-				// 	title:"Passwort Ändern",
-				// 	view:"ChangePassword",
-				// 	data:{
-				// 	  test:"testvalue",
-				// 	  }
-				// 	},
-				},
-			 
-			};
-		  },
-	  
-	},
+      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;
+            })
+        );
+      }
 
-	watch:{
-		loading:function(newValue,oldValue){
-			if(newValue){this.$refs.loadingModalRef.show();}else{
-				this.$refs.loadingModalRef.hide();
-			}
-		}
-	},
+      return [...new Set(adressenArray)];
 
+      // OLD version
+      // return this.data.adressen.filter(adresse => {
+      // 	return adresse.zustelladresse;
+      // }).map(adr => {
 
-	created(){
+      // 	return adr.adresse_id;
+      // });
+    },
 
-		//? uid contains the last part of the uri
-		let uid = location.pathname.split('/').pop();
-		
-		Vue.$fhcapi.UserData.getView(uid).then((res)=>{
-			if(!res.data){
-				this.notFoundUID=uid;
-			}else{
-				this.view = res.data?.view;
-				this.data = res.data?.data;
-			}
-			
-		});
-	},
-	template:`
+    zustellKontakteCount() {
+      if (!this.data || !this.data.kontakte) {
+        return null;
+      }
+
+      //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 ||
+        !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)];
+
+      // OLD version
+      // return this.data.kontakte.filter(kontakt => {
+      // 	return kontakt.zustellung;
+      // }).map(kon =>{
+      // 	return kon.kontakt_id;
+      // });
+    },
+  },
+
+  computed: {
+    filteredEditData() {
+      if (!this.data) {
+        return;
+      }
+
+      return {
+        view: null,
+        data: {
+          Personen_Informationen: {
+            title: "Personen Informationen",
+            view: null,
+            data: {
+              vorname: {
+                title: "vorname",
+                view: "TextInputDokument",
+                withFiles: true,
+                data: {
+                  titel: "vorname",
+                  value: this.data.vorname,
+                },
+              },
+              nachname: {
+                title: "nachname",
+                view: "TextInputDokument",
+                withFiles: true,
+                data: {
+                  titel: "nachname",
+                  value: this.data.nachname,
+                },
+              },
+              titel: {
+                title: "titel",
+                view: "TextInputDokument",
+                withFiles: true,
+                data: {
+                  titel: "titel",
+                  value: this.data.titel,
+                },
+              },
+              postnomen: {
+                title: "postnomen",
+                view: "TextInputDokument",
+                withFiles: true,
+                data: {
+                  titel: "postnomen",
+                  value: this.data.postnomen,
+                },
+              },
+            },
+          },
+          Private_Kontakte: {
+            title: "Private Kontakte",
+            data: this.data.kontakte
+              ?.filter((item) => {
+                return !this.data.profilUpdates?.some(
+                  (update) =>
+                    update.status === "pending" &&
+                    update.requested_change?.kontakt_id === item.kontakt_id
+                );
+              })
+              .map((kontakt) => {
+                return {
+                  listview: "Kontakt",
+                  view: "EditKontakt",
+                  data: kontakt,
+                };
+              }),
+          },
+          Private_Adressen: {
+            title: "Private Adressen",
+            data: this.data.adressen
+              ?.filter((item) => {
+                return !this.data.profilUpdates?.some((update) => {
+                  return (
+                    update.status === "pending" &&
+                    update.requested_change?.adresse_id == item.adresse_id
+                  );
+                });
+              })
+              .map((kontakt) => {
+                return {
+                  listview: "Adresse",
+                  view: "EditAdresse",
+                  data: kontakt,
+                };
+              }),
+          },
+          //  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();
+      }
+    },
+  },
+
+  created() {
+    //? uid contains the last part of the uri
+    let uid = location.pathname.split("/").pop();
+
+    Vue.$fhcapi.UserData.getView(uid).then((res) => {
+      if (!res.data) {
+        this.notFoundUID = uid;
+      } else {
+        this.view = res.data?.view;
+        this.data = res.data?.data;
+      }
+    });
+  },
+  
+  template: `
 	<div>
 	
 		<div v-if="notFoundUID">
@@ -312,10 +363,8 @@ const profilApp = Vue.createApp({
 		</div>
 		
 	
-	</div>`
-	
-	
+	</div>`,
 });
 
-profilApp.use(primevue.config.default,{zIndex: {overlay: 9999}});
+profilApp.use(primevue.config.default, { zIndex: { overlay: 9999 } });
 profilApp.mount("#content");

public/js/components/Cis/Profil/MitarbeiterProfil.js

@@ -1,17 +1,15 @@
-
 import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
 import EditProfil from "./ProfilModal/EditProfil.js";
 import Adresse from "./ProfilComponents/Adresse.js";
 import Kontakt from "./ProfilComponents/Kontakt.js";
 import FetchProfilUpdates from "./ProfilComponents/FetchProfilUpdates.js";
-import Mailverteiler from "./ProfilComponents/Mailverteiler.js"; 
+import Mailverteiler from "./ProfilComponents/Mailverteiler.js";
 import AusweisStatus from "./ProfilComponents/FhAusweisStatus.js";
 import QuickLinks from "./ProfilComponents/QuickLinks.js";
-import ProfilEmails from "./ProfilComponents/ProfilEmails.js"
+import ProfilEmails from "./ProfilComponents/ProfilEmails.js";
 import RoleInformation from "./ProfilComponents/RoleInformation.js";
 import ProfilInformation from "./ProfilComponents/ProfilInformation.js";
 
-
 export default {
   components: {
     CoreFilterCmpt,
@@ -26,11 +24,13 @@ export default {
     RoleInformation,
     ProfilInformation,
   },
-  inject: ['sortProfilUpdates','collapseFunction'],
+
+  inject: ["sortProfilUpdates", "collapseFunction"],
+
   data() {
     return {
-      showModal:false,
-      
+      showModal: false,
+
       funktionen_table_options: {
         height: 300,
         layout: "fitColumns",
@@ -91,6 +91,7 @@ export default {
           },
         ],
       },
+
       betriebsmittel_table_options: {
         height: 300,
         layout: "fitColumns",
@@ -134,59 +135,53 @@ export default {
   },
 
   props: {
-		data: Object,
+    data: Object,
     editData: Object,
-	},
-  
+  },
+
   methods: {
-    hideEditProfilModal: function(){
-      
+    hideEditProfilModal: function () {
       //? checks the editModal component property result, if the user made a successful request or not
-      if(this.$refs.editModal.result){
+      if (this.$refs.editModal.result) {
         Vue.$fhcapi.ProfilUpdate.selectProfilRequest()
-        .then((request) =>{
-          if(!request.error){
-            this.data.profilUpdates = request.data;
-            this.data.profilUpdates.sort(this.sortProfilUpdates);
-            
-          }else{
-            console.log("Error when fetching profile updates: " +res.data);
-          }
-        })
-        .catch(err=>{
-          console.log(err);
-        });
-      }else{
+          .then((request) => {
+            if (!request.error) {
+              this.data.profilUpdates = request.data;
+              this.data.profilUpdates.sort(this.sortProfilUpdates);
+            } else {
+              console.log("Error when fetching profile updates: " + res.data);
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
         // when modal was closed without submitting request
       }
-      this.showModal=false;
-     
+      this.showModal = false;
     },
 
     showEditProfilModal() {
       this.showModal = true;
       // after a state change, wait for the DOM updates to complete
-      Vue.nextTick(()=>{
+      Vue.nextTick(() => {
         this.$refs.editModal.show();
       });
-      
     },
 
-    fetchProfilUpdates: function(){
-      Vue.$fhcapi.ProfilUpdate.selectProfilRequest().then((res)=>{
-        if(!res.error){
-          this.data.profilUpdates = res.data?.length ? res.data.sort(this.sortProfilUpdates) : null ; 
+    fetchProfilUpdates: function () {
+      Vue.$fhcapi.ProfilUpdate.selectProfilRequest().then((res) => {
+        if (!res.error) {
+          this.data.profilUpdates = res.data?.length
+            ? res.data.sort(this.sortProfilUpdates)
+            : null;
         }
       });
     },
-
   },
 
   computed: {
-
-    
-
-     profilInformation() {
+    profilInformation() {
       if (!this.data) {
         return {};
       }
@@ -198,9 +193,8 @@ export default {
         Anrede: this.data.anrede,
         Titel: this.data.titel,
         Postnomen: this.data.postnomen,
-        foto_sperre:this.data.foto_sperre,
-        foto:this.data.foto,
-
+        foto_sperre: this.data.foto_sperre,
+        foto: this.data.foto,
       };
     },
 
@@ -213,20 +207,21 @@ export default {
         Geburtsdatum: this.data.gebdatum,
         Geburtsort: this.data.gebort,
         Kurzzeichen: this.data.kurzbz,
-        Telefon:  (this.data.standort_telefon?this.data.standort_telefon:"") + " " + this.data.telefonklappe,
+        Telefon:
+          (this.data.standort_telefon ? this.data.standort_telefon : "") +
+          " " +
+          this.data.telefonklappe,
         Büro: this.data.ort_kurzbz,
       };
     },
-
-
   },
- 
+
   created() {
     //? sorts the profil Updates: pending -> accepted -> rejected
     this.data.profilUpdates?.sort(this.sortProfilUpdates);
   },
+  
   mounted() {
-    
     this.$refs.betriebsmittelTable.tabulator.on("tableBuilt", () => {
       this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
     });
@@ -234,10 +229,9 @@ export default {
     this.$refs.funktionenTable.tabulator.on("tableBuilt", () => {
       this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
     });
-
   },
 
-  template: /*html*/` 
+  template: /*html*/ ` 
   <div class="container-fluid text-break fhc-form"  >
   
     <edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(editData))" title="Profil bearbeiten"></edit-profil>

public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js

@@ -1,39 +1,39 @@
 import EditProfil from "../ProfilModal/EditProfil.js";
 //? EditProfil is the modal used to edit the profil updates
 export default {
-  components:{EditProfil},
+  components: { EditProfil },
   props: {
     data: {
       type: Object,
     },
   },
-  inject:['getZustellkontakteCount','getZustelladressenCount'],
+
+  inject: ["getZustellkontakteCount", "getZustelladressenCount"],
 
   emits: ["fetchUpdates"],
+
   data() {
     return {
-      showUpdateModal:false,
-      content:null,
-      editProfilTitle:"Profil bearbeiten",
+      showUpdateModal: false,
+      content: null,
+      editProfilTitle: "Profil bearbeiten",
     };
   },
-  methods: {
 
-    hideEditProfilModal: function(){
-      
+  methods: {
+    hideEditProfilModal: function () {
       //? checks the editModal component property result, if the user made a successful request or not
-      if(this.$refs.updateEditModal.result){
+      if (this.$refs.updateEditModal.result) {
         this.$emit("fetchUpdates");
-      }else{
+      } else {
         // when modal was closed without submitting request
       }
-      this.showUpdateModal=false;
-     
+      this.showUpdateModal = false;
     },
 
     async showEditProfilModal(updateRequest) {
       let view = this.getView(updateRequest.topic, updateRequest.status);
-      
+
       let data = null;
       let content = null;
       let files = null;
@@ -45,12 +45,15 @@ export default {
           value: updateRequest.requested_change.value,
         };
 
-        const filesFromDatabase = await Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(updateRequest.profil_update_id).then(res=>{
-          return res.data;
-        });
+        const filesFromDatabase =
+          await Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(
+            updateRequest.profil_update_id
+          ).then((res) => {
+            return res.data;
+          });
 
-        files= filesFromDatabase;
-        if(files){
+        files = filesFromDatabase;
+        if (files) {
           withFiles = true;
         }
       } else {
@@ -64,17 +67,18 @@ export default {
         withFiles: withFiles,
         topic: updateRequest.topic,
         files: files,
-        
       };
 
       //?TODO: check if updateRequest.uid is a mitarbeiter, if so add the flag isMitarbeiter:true
-      if(view === "EditAdresse"){
-        const isMitarbeiter = await Vue.$fhcapi.UserData.isMitarbeiter(updateRequest.uid).then(res => res.data);
+      if (view === "EditAdresse") {
+        const isMitarbeiter = await Vue.$fhcapi.UserData.isMitarbeiter(
+          updateRequest.uid
+        ).then((res) => res.data);
 
-        if(isMitarbeiter){
-          content['isMitarbeiter']=isMitarbeiter;
+        if (isMitarbeiter) {
+          content["isMitarbeiter"] = isMitarbeiter;
         }
-      } 
+      }
 
       //? adds the status information if the profil update request was rejected or accepted
       if (updateRequest.status !== "pending") {
@@ -91,11 +95,10 @@ export default {
       if (content) {
         this.showUpdateModal = true;
         // after a state change, wait for the DOM updates to complete
-        Vue.nextTick(()=>{
+        Vue.nextTick(() => {
           this.$refs.updateEditModal.show();
         });
       }
-      
     },
 
     deleteRequest: function (item) {
@@ -111,8 +114,7 @@ export default {
       );
     },
     getView: function (topic, status) {
-
-      if(!(status === "pending")){
+      if (!(status === "pending")) {
         return "Status";
       }
 
@@ -141,11 +143,10 @@ export default {
       }
     },
 
-
     // OLD way to open the editProfil modal, which was dynamically added to the html and then removed
     async openModal(updateRequest) {
       let view = this.getView(updateRequest.topic, updateRequest.status);
-      
+
       let data = null;
       let content = null;
       let files = null;
@@ -157,12 +158,15 @@ export default {
           value: updateRequest.requested_change.value,
         };
 
-        const filesFromDatabase = await Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(updateRequest.profil_update_id).then(res=>{
-          return res.data;
-        });
+        const filesFromDatabase =
+          await Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(
+            updateRequest.profil_update_id
+          ).then((res) => {
+            return res.data;
+          });
 
-        files= filesFromDatabase;
-        if(files){
+        files = filesFromDatabase;
+        if (files) {
           withFiles = true;
         }
       } else {
@@ -176,17 +180,18 @@ export default {
         withFiles: withFiles,
         topic: updateRequest.topic,
         files: files,
-        
       };
 
       //?TODO: check if updateRequest.uid is a mitarbeiter, if so add the flag isMitarbeiter:true
-      if(view === "EditAdresse"){
-        const isMitarbeiter = await Vue.$fhcapi.UserData.isMitarbeiter(updateRequest.uid).then(res => res.data);
+      if (view === "EditAdresse") {
+        const isMitarbeiter = await Vue.$fhcapi.UserData.isMitarbeiter(
+          updateRequest.uid
+        ).then((res) => res.data);
 
-        if(isMitarbeiter){
-          content['isMitarbeiter']=isMitarbeiter;
+        if (isMitarbeiter) {
+          content["isMitarbeiter"] = isMitarbeiter;
         }
-      } 
+      }
 
       //? adds the status information if the profil update request was rejected or accepted
       if (updateRequest.status !== "pending") {
@@ -200,8 +205,8 @@ export default {
         EditProfil.popup({
           value: content,
           title: updateRequest.topic,
-          zustellkontakteCount:this.getZustellkontakteCount,
-          zustelladressenCount:this.getZustelladressenCount,
+          zustellkontakteCount: this.getZustellkontakteCount,
+          zustelladressenCount: this.getZustelladressenCount,
         })
           .then((res) => {
             if (res === true) {
@@ -214,11 +219,11 @@ export default {
       }
     },
   },
-  created() {
 
-   
-  },
+  created() {},
+
   computed: {},
+  
   template: `
     <div  class="card " >
     

public/js/components/Cis/Profil/ProfilModal/EditProfilComponents/EditAdresse.js

@@ -1,100 +1,106 @@
 export default {
-    components:{
-        AutoComplete: primevue.autocomplete
-    },
-    props:{
-        
-        data:Object,
-        isMitarbeiter:{
-            type: Boolean,
-            default: false,
-        },
-    },
-    inject:["getZustelladressenCount"],
-    data(){
-        return{
-            gemeinden:[],
-            selectedNation:null,
-            nationenList:[],
-            originalValue:null,
-            zustellAdressenCount:null,
-        }
-    },
-    watch:{
-        'data.gemeinde': function(newValue, oldValue){
-            this.$emit('profilUpdate',this.isChanged?this.data:null);
-        },
-    },
-    methods:{
+  components: {
+    AutoComplete: primevue.autocomplete,
+  },
 
-        autocompleteSearch: function(event){
-            this.gemeinden = this.gemeinden.map(gemeinde => gemeinde);     
-        },
-       
-        getGemeinde: function(){
-            //? only query the gemeinde is the nation is Austria and the PLZ is greater than 999 and less than 32000
-            if(this.data.nation && this.data.nation ==="A" && (this.data.plz && (this.data.plz >999 && this.data.plz <32000))){
-                Vue.$fhcapi.UserData.getGemeinden(this.data.nation,this.data.plz).then(res => {
-                    
-                    if(res.data.length){
-                        this.gemeinden = res.data;
-                    }
-                })
-            }else{
-                this.gemeinden = [];
+  props: {
+    data: Object,
+    isMitarbeiter: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  inject: ["getZustelladressenCount"],
+
+  data() {
+    return {
+      gemeinden: [],
+      selectedNation: null,
+      nationenList: [],
+      originalValue: null,
+      zustellAdressenCount: null,
+    };
+  },
+
+  watch: {
+    "data.gemeinde": function (newValue, oldValue) {
+      this.$emit("profilUpdate", this.isChanged ? this.data : null);
+    },
+  },
+  
+  methods: {
+    autocompleteSearch: function (event) {
+      this.gemeinden = this.gemeinden.map((gemeinde) => gemeinde);
+    },
+
+    getGemeinde: function () {
+      //? only query the gemeinde is the nation is Austria and the PLZ is greater than 999 and less than 32000
+      if (
+        this.data.nation &&
+        this.data.nation === "A" &&
+        this.data.plz &&
+        this.data.plz > 999 &&
+        this.data.plz < 32000
+      ) {
+        Vue.$fhcapi.UserData.getGemeinden(this.data.nation, this.data.plz).then(
+          (res) => {
+            if (res.data.length) {
+              this.gemeinden = res.data;
             }
-        },
-
-        updateValue: function(event,bind){
-            //? sets the value of a property to null when an empty string is entered to keep the isChanged function valid 
-            if(bind ==="zustelladresse" ){
-                this.data[bind] = event.target.checked;
-            }else{
-                this.data[bind] = event.target.value === "" ? null : event.target.value;
-            }
-            
-            this.$emit('profilUpdate',this.isChanged?this.data:null);
-            // update the zustellAdressen count
-            this.zustellAdressenCount = this.getZustelladressenCount();
-        },
+          }
+        );
+      } else {
+        this.gemeinden = [];
+      }
     },
 
-    computed:{
-        showZustellAdressenWarning: function(){
-            if(this.zustellAdressenCount){
-                
-                if(this.zustellAdressenCount.includes(this.data.adresse_id)){
-                    //? if the adresse was already saved
-                    return false;
-                }
-                return this.zustellAdressenCount.length && this.data.zustelladresse;
-            }
-            //? if this.zustellAdressenCount is still not set by the api call and is still null
-            return false;
-        },
-        isChanged: function(){
-            if(!this.data.strasse || !this.data.plz || !this.data.ort || !this.data.typ ){
-               
-                return false;
-            }
-            return this.originalValue !== JSON.stringify(this.data);
-        },
+    updateValue: function (event, bind) {
+      //? sets the value of a property to null when an empty string is entered to keep the isChanged function valid
+      if (bind === "zustelladresse") {
+        this.data[bind] = event.target.checked;
+      } else {
+        this.data[bind] = event.target.value === "" ? null : event.target.value;
+      }
+
+      this.$emit("profilUpdate", this.isChanged ? this.data : null);
+      // update the zustellAdressen count
+      this.zustellAdressenCount = this.getZustelladressenCount();
     },
-   
-    created(){
-        
-        Vue.$fhcapi.UserData.getAllNationen().then(res => {
-            this.nationenList = res.data;
-            this.getGemeinde();
-        });
+  },
 
+  computed: {
+    showZustellAdressenWarning: function () {
+      // if zustellAdressenCount is not 0 and the own kontakt has the flag zustellung set to true
+      if (!this.zustellAdressenCount.includes(this.data.adresse_id)) {
+        return this.data.zustelladresse && this.zustellAdressenCount.length;
+      }
+      return this.zustellAdressenCount.length >= 2 && this.data.zustelladresse;
+    },
+    isChanged: function () {
+      if (
+        !this.data.strasse ||
+        !this.data.plz ||
+        !this.data.ort ||
+        !this.data.typ
+      ) {
+        return false;
+      }
+      return this.originalValue !== JSON.stringify(this.data);
+    },
+  },
 
-        this.originalValue = JSON.stringify(this.data);
-        this.zustellAdressenCount = this.getZustelladressenCount();
-        
-    },       
-    
-    template:/*html*/`
+  created() {
+    Vue.$fhcapi.UserData.getAllNationen().then((res) => {
+      this.nationenList = res.data;
+      this.getGemeinde();
+    });
+
+    this.originalValue = JSON.stringify(this.data);
+    this.zustellAdressenCount = this.getZustelladressenCount();
+  },
+
+  template: /*html*/ `
      <div class="gy-3 row justify-content-center align-items-center">
      
      <!-- warning message for too many zustellungs Adressen -->
@@ -193,6 +199,5 @@ export default {
         </div>
        
     </div>
-    `
-
-};
+    `,
+};

public/js/components/Cis/Profil/ProfilModal/EditProfilComponents/EditKontakt.js

@@ -1,57 +1,53 @@
-
 export default {
+  props: {
+    data: Object,
+  },
+
+  data() {
+    return {
+      originalValue: null,
+      zustellKontakteCount: null,
+    };
+  },
+
+  inject: ["getZustellkontakteCount"],
+
+  methods: {
+    updateValue: function (event, bind) {
+      if (bind === "zustellung") {
+        this.data[bind] = event.target.checked;
+      } else {
+        //? sets the value of a property to null when an empty string is entered to keep the isChanged function valid
+        this.data[bind] = event.target.value === "" ? null : event.target.value;
+      }
+      this.$emit("profilUpdate", this.isChanged ? this.data : null);
+      this.zustellKontakteCount = this.getZustellkontakteCount();
+    },
+  },
+
+  computed: {
+    showZustellKontakteWarning: function () {
+      // if zustellKontakteCount is not 0 and the own kontakt has the flag zustellung set to true
+      if (!this.zustellKontakteCount.includes(this.data.kontakt_id)) {
+        return this.data.zustellung && this.zustellKontakteCount.length;
+      }
+      return this.zustellKontakteCount.length >= 2 && this.data.zustellung;
+    },
+    isChanged: function () {
+      //? returns true if the original passed data object was changed
+      if (!this.data.kontakt || !this.data.kontakttyp) {
+        return false;
+      }
+      return JSON.stringify(this.data) !== this.originalValue;
+    },
+  },
+
+  created() {
+    this.originalValue = JSON.stringify(this.data);
+    this.zustellKontakteCount = this.getZustellkontakteCount();
+  },
   
-    props:{
-        data:Object,
-    },
-    data(){
-        return{
-           
-            originalValue:null,
-            zustellKontakteCount:null,
-           
-        }
-    },
-    inject:["getZustellkontakteCount"],
-    methods:{
-
-        
-        updateValue: function(event,bind){
-
-            if(bind === 'zustellung'){
-                this.data[bind] = event.target.checked;    
-            }else{
-                //? sets the value of a property to null when an empty string is entered to keep the isChanged function valid
-                this.data[bind] = event.target.value === ""  ? null: event.target.value;
-            }
-            
-            
-            this.$emit('profilUpdate',this.isChanged?this.data:null);
-            this.zustellKontakteCount = this.getZustellkontakteCount();
-            
-        },
-    },
-    computed:{
-        showZustellKontakteWarning: function(){
-            // if zustellKontakteCount is not 0 and the own kontakt has the flag zustellung set to true
-            if(!this.zustellKontakteCount.includes(this.data.kontakt_id)){
-                return this.data.zustellung && this.zustellKontakteCount.length 
-            }
-            return this.zustellKontakteCount.length >=2 && this.data.zustellung;
-        },
-        isChanged: function(){
-            //? returns true if the original passed data object was changed 
-            if(!this.data.kontakt || !this.data.kontakttyp) {return false;}
-            return JSON.stringify(this.data) !== this.originalValue;
-        }
-    },
-    created(){
-
-       
-        this.originalValue = JSON.stringify(this.data);
-        this.zustellKontakteCount = this.getZustellkontakteCount();
-    },
-    template:
+  template:
     /*html*/
     `
     
@@ -132,5 +128,5 @@ export default {
    
     </div>
   </div>
-    `
-};
+    `,
+};