From 4e5379c5d9c78e9039e8256fcdbe1e59f49d7e57 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 18 Apr 2024 14:53:51 +0200
Subject: [PATCH] adds an edit button over every section in the profil page to
 edit that section

---
 .../Cis/Profil/MitarbeiterProfil.js           |  52 +++++--
 .../ProfilComponents/ProfilInformation.js     | 108 +++++++-------
 .../Profil/ProfilModal/EditProfilSelect.js    |   8 +-
 .../js/components/Cis/Profil/StudentProfil.js | 136 ++++++++++--------
 4 files changed, 180 insertions(+), 124 deletions(-)

diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js
index 41b2c8038..52c9dfb24 100755
--- a/public/js/components/Cis/Profil/MitarbeiterProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js
@@ -30,7 +30,9 @@ export default {
   data() {
     return {
       showModal: false,
+      editDataFilter: null,
 
+      // tabulator options
       funktionen_table_options: {
         height: 300,
         layout: "fitColumns",
@@ -159,14 +161,20 @@ export default {
         // when modal was closed without submitting request
       }
       this.showModal = false;
+      this.editDataFilter = null;
     },
 
-    showEditProfilModal() {
+    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();
       });
+
+      // after a state change, wait for the DOM updates to complete
     },
 
     fetchProfilUpdates: function () {
@@ -181,6 +189,11 @@ export default {
   },
 
   computed: {
+    filteredEditData() {
+      return this.editDataFilter
+        ? this.editData.data[this.editDataFilter]
+        : this.editData;
+    },
     profilInformation() {
       if (!this.data) {
         return {};
@@ -233,12 +246,11 @@ export default {
 
   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="$p.t('profil','profilBearbeiten')"></edit-profil>
+ 
+    <edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" :title="$p.t('profil','profilBearbeiten')"></edit-profil>
           <div class="row">
-          
               <div  class="d-md-none col-12 ">
-             
+           
               <div class="row mb-3">
                 <div class="col">
                 <!-- MOBILE QUICK LINKS --> 
@@ -250,7 +262,7 @@ export default {
 
               <div class="row mb-3 ">
               <div class="col">
-              <button @click="showEditProfilModal" type="button" class="text-start  w-100 btn btn-outline-secondary" >
+              <button @click="()=>showEditProfilModal()" type="button" class="text-start  w-100 btn btn-outline-secondary" >
                 <div class="row">
                   <div class="col-auto">
                     <i class="fa fa-edit"></i>
@@ -289,7 +301,7 @@ export default {
                      <div class="col">
                      
                      <!-- PROFIL INFORMATION -->
-                     <profil-information :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation"></profil-information>
+                     <profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation"></profil-information>
 
 
 		                 </div>
@@ -328,7 +340,14 @@ export default {
                       
                       <div class="card">
                           <div class="card-header">
-                            {{$p.t('profil','privateKontakte')}}
+                            <div class="row">
+                              <div @click="showEditProfilModal('Private_Kontakte')" class="col-auto" type="button">
+                                <i class="fa fa-edit"></i>
+                              </div>
+                              <div class="col">
+                                <span>{{$p.t('profil','privateKontakte')}}</span>
+                              </div>
+                            </div>
                           </div>
                           <div class="card-body ">
                             
@@ -351,9 +370,18 @@ export default {
                       <!-- PRIVATE ADRESSEN-->
 
                       <div class="card">
-                          <div class="card-header">{{$p.t('profil','privateAdressen')}}</div>
+                        <div class="card-header">
+                          <div class="row">
+                            <div @click="showEditProfilModal('Private_Adressen')" class="col-auto" type="button">
+                              <i class="fa fa-edit"></i>
+                            </div>
+                            <div class="col">
+                              <span>{{$p.t('profil','privateAdressen')}}</span>
+                            </div>
+                          </div>
+                          </div>
                             <div class="card-body">
-                            
+                           
                               <div class="gy-3 row ">
                                 <div v-for="element in data.adressen" class="col-12">
                                 <Adresse :data="element"></Adresse>
@@ -413,7 +441,7 @@ export default {
 
                 <div class="row d-none d-md-block ">
                 <div class="col mb-3">
-                <button @click="showEditProfilModal" type="button" class="text-start  w-100 btn btn-outline-secondary" >
+                <button @click="()=>showEditProfilModal()" type="button" class="text-start  w-100 btn btn-outline-secondary" >
                   <div class="row">
                     <div class="col-auto">
                       <i class="fa fa-edit"></i>
diff --git a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js
index 83b746c69..040eed441 100755
--- a/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js
@@ -1,59 +1,70 @@
 export default {
+  props: {
+    title: {
+      type: String,
+    },
+    data: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      FotoSperre: this.data.foto_sperre,
+    };
+  },
+  emits: ["showEditProfilModal"],
 
-    props:{
-        title:{
-            type:String,
-            
-        },
-        data:{
-            type:Object,
+  methods: {
+    sperre_foto_function() {
+      //TODO: refactor
+      if (!this.data) {
+        return;
+      }
+      Vue.$fhcapi.UserData.sperre_foto_function(!this.FotoSperre).then(
+        (res) => {
+          this.FotoSperre = res.data.foto_sperre;
         }
+      );
     },
-    data(){
-        return {
-            FotoSperre:this.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;
     },
-    
-    methods:{
-        
-        sperre_foto_function() {
-            //TODO: make this better
-            if (!this.data) {
-              return;
-            }
-            Vue.$fhcapi.UserData.sperre_foto_function(!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: `
+  },
+  template: /*html*/ `
     
     <div class="card h-100">
     <div class="card-header">
-    {{title}}
+      <div class="row">
+        <div @click="$emit('showEditProfilModal','Personen_Informationen')" class="col-auto" type="button">
+          <i class="fa fa-edit"></i>
+        </div>
+        <div class="col">
+          <span>{{title}}</span>
+        </div>
+      </div>
     </div>
     <div class="card-body">
     
@@ -134,5 +145,4 @@ export default {
     
     </div>
   </div>`,
-
-};
\ No newline at end of file
+};
diff --git a/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js b/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js
index 74aa15968..983e0a20c 100755
--- a/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js
+++ b/public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js
@@ -133,8 +133,12 @@ export default {
   created() {
     //? JSON parse and stringify are used to deep clone the objects
     this.properties = { ...this.list };
-    this.data = JSON.parse(JSON.stringify(this.list.data));
-    this.view = JSON.parse(JSON.stringify(this.list.view));
+    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() {},
 
diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js
index 0eb7e8770..2f6b988e0 100755
--- a/public/js/components/Cis/Profil/StudentProfil.js
+++ b/public/js/components/Cis/Profil/StudentProfil.js
@@ -22,14 +22,16 @@ export default {
     RoleInformation,
     ProfilInformation,
     FetchProfilUpdates,
-    EditProfil
-
+    EditProfil,
   },
-  inject:['sortProfilUpdates','collapseFunction'],
+  inject: ["sortProfilUpdates", "collapseFunction"],
   data() {
     return {
       showModal: false,
       collapseIconBetriebsmittel: true,
+      editDataFilter: null,
+
+      // tabulator options
       zutrittsgruppen_table_options: {
         height: 200,
         layout: "fitColumns",
@@ -79,58 +81,62 @@ export default {
   },
 
   props: {
-    data:Object,
-    editData:Object,
+    data: Object,
+    editData: Object,
   },
   methods: {
-
-    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;
         }
       });
     },
-    
-    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;
+      this.editDataFilter = null;
     },
 
-    showEditProfilModal() {
+    showEditProfilModal(view) {
+      if (view) {
+        this.editDataFilter = view;
+      }
       this.showModal = true;
       // after a state change, wait for the DOM updates to complete
-      Vue.nextTick(()=>{
+      Vue.nextTick(() => {
         this.$refs.editModal.show();
       });
-      
     },
-   
   },
 
   computed: {
- 
-   profilInformation() {
+    filteredEditData() {
+      return this.editDataFilter
+        ? this.editData.data[this.editDataFilter]
+        : this.editData;
+    },
+
+    profilInformation() {
       if (!this.data) {
         return {};
       }
@@ -142,13 +148,11 @@ 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,
       };
     },
 
-   
     roleInformation() {
       if (!this.data) {
         return {};
@@ -164,36 +168,29 @@ export default {
         Gruppe: this.data.gruppe.trim(),
       };
     },
-
-    
   },
 
-  created(){
-
+  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.on("tableBuilt", () => {
       this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
-      
-  }) 
+    });
 
-  this.$refs.zutrittsgruppenTable.tabulator.on('tableBuilt', () => {
-  
-      this.$refs.zutrittsgruppenTable.tabulator.setData(this.data.zuttritsgruppen);
-      
-  }) 
-
-   
+    this.$refs.zutrittsgruppenTable.tabulator.on("tableBuilt", () => {
+      this.$refs.zutrittsgruppenTable.tabulator.setData(
+        this.data.zuttritsgruppen
+      );
+    });
   },
 
-  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="$p.t('profil','profilBearbeiten')" ></edit-profil>
+  <edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" title="$p.t('profil','profilBearbeiten')" ></edit-profil>
     <!-- ROW --> 
           <div class="row">
           <!-- HIDDEN QUICK LINKS -->
@@ -250,7 +247,7 @@ export default {
                     <div class="col">
                     
                     <!-- PROFIL INFORMATION -->
-                    <profil-information title="$p.t('profil','studentIn')" :data="profilInformation"></profil-information>
+                    <profil-information @showEditProfilModal="showEditProfilModal" title="$p.t('profil','studentIn')" :data="profilInformation"></profil-information>
 
 
                     </div>
@@ -290,7 +287,15 @@ export default {
                       
                       <div class="card">
                           <div class="card-header">
-                            {{$p.t('profil','privateKontakte')}}
+                          <div class="row">
+                              <div @click="showEditProfilModal('Private_Kontakte')" class="col-auto" type="button">
+                                <i class="fa fa-edit"></i>
+                              </div>
+                              <div class="col">
+                                <span>{{$p.t('profil','privateKontakte')}}</span>
+                              </div>
+                            </div>
+                            
                           </div>
                           <div class="card-body ">
                             
@@ -312,7 +317,16 @@ export default {
                     <!-- PRIVATE ADRESSEN-->
 
                     <div class="card">
-                        <div class="card-header">{{$p.t('profil','privateAdressen')}}</div>
+                        <div class="card-header">
+                        <div class="row">
+                              <div @click="showEditProfilModal('Private_Adressen')" class="col-auto" type="button">
+                                <i class="fa fa-edit"></i>
+                              </div>
+                              <div class="col">
+                                <span>{{$p.t('profil','privateAdressen')}}</span>
+                              </div>
+                            </div>
+                        </div>
                           <div class="card-body">
                           
                             <div class="gy-3 row ">
@@ -367,7 +381,7 @@ export default {
   
                 <div class="row d-none d-md-block">
                 <div class="col mb-3">
-                <button @click="showEditProfilModal" type="button" class="text-start  w-100 btn btn-outline-secondary" >
+                <button @click="()=>showEditProfilModal()" type="button" class="text-start  w-100 btn btn-outline-secondary" >
                   <div class="row">
                     <div class="col-2">
                       <i class="fa fa-edit"></i>