layout fixes and adding profilUpdateRequests component to Student view

public/js/components/Cis/Profil/EditProfil.js

@@ -12,7 +12,7 @@ export default {
   props: {
 
     value: Object,
-    timestamp: Object,
+    title: String,
     /*
      * NOTE(chris):
      * Hack to expose in "emits" declared events to $props which we use
@@ -81,8 +81,8 @@ export default {
   template: `
   <bs-modal ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >
     
-  <template v-slot:title>
-      {{"Profil bearbeiten" }}  
+  <template v-if="title" v-slot:title>
+      {{title }}  
     </template>
     <template v-slot:default>
 
@@ -100,9 +100,7 @@ export default {
     </template>
     <!-- optional footer -->
     <template   v-slot:footer>
-      <button class="btn btn-outline-danger " @click="hide">Abbrechen</button>
-      <!--<p v-if="editTimestamp" class="flex-fill">Letzte Anfrage: {{editTimestamp}}</p>-->
-    
+      <button class="btn btn-outline-danger " @click="hide">Abbrechen</button>    
       <button v-if="profilUpdate"  @click="submitProfilChange" role="button" class="btn btn-primary">Senden</button>
     </template>
     <!-- end of optional footer --> 

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

@@ -131,8 +131,6 @@ export default {
     };
   },
 
-  //? this is the prop passed to the dynamic component with the custom data of the view
-  
   props: {
 		data: Object,
 	},
@@ -152,7 +150,7 @@ export default {
 
       EditProfil.popup({ 
           value:JSON.parse(JSON.stringify(this.data.editData)),
-          timestamp:this.data.editDataTimestamp
+          title:"Profil bearbeiten",
         }).then((popup_result) => {
           if(popup_result){
             Vue.$fhcapi.UserData.selectProfilRequest()
@@ -165,12 +163,10 @@ export default {
             })
             .catch(err=>alert(err));
           }
-          
         }).catch((e) => {
           // Wenn der User das Modal abbricht ohne Änderungen
          
         });
-    
     },
   
     
@@ -236,11 +232,6 @@ export default {
   },
  
   created() {
-    
-    
-    
-    
-    
 
       this.data.editData = {
         view:null,
@@ -305,10 +296,6 @@ export default {
        
       };
 
-
-      console.log(JSON.stringify(this.data.editData,null,2));
-
-  
   },
   mounted() {
     
@@ -331,19 +318,19 @@ export default {
               <div  class="d-md-none col-12 ">
              
               <div class="row mb-3">
-              <div class="col">
-              <!-- MOBILE QUICK LINKS -->     
-                <quick-links :mobile="true"></quick-links>
+                <div class="col">
+                <!-- MOBILE QUICK LINKS -->     
+                  <quick-links :mobile="true"></quick-links>
+                </div>
               </div>
-            </div>
 
             
-            <div class="row mb-3">
-            <div class="col">
-              <!-- MOBILE PROFIL UPDATES -->  
-              <fetch-profil-updates @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
-            </div>
-          </div>
+              <div v-if="data.profilUpdates" class="row mb-3">
+                <div class="col">
+                  <!-- MOBILE PROFIL UPDATES -->  
+                  <fetch-profil-updates @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
+                </div>
+              </div>
 
             
 

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

@@ -78,7 +78,7 @@ export default {
             EditProfil.popup({ 
                 
                 value:content,
-                timestamp:null,
+               
               }).then((res) => {
                 if(res === true){
                     this.$emit('fetchUpdates');
@@ -113,46 +113,39 @@ export default {
                 <tr >
                 <th scope="col">Topic</th>
                 <th scope="col">Status</th>
-                <th scope="col">Date of Request</th>
-                
-                <th  scope="col">Action</th>
-                
-                
+                <th scope="col">Date</th>
+                <th class="text-center" scope="col">Action</th>
                 </tr>
             </thead>
             <tbody>
-            <!-- :class="{'bg-success':item.status === 'accepted', 'bg-danger':item.status === 'rejected', 'text-white':item.status =='rejected' || item.status=='accepted'}" -->
                 <tr v-for="item in data" :style="item.status=='accepted'?'background-color:lightgreen':item.status==='rejected'?'background-color:lightcoral':''">
                 <td class="align-middle text-wrap">{{item.topic}}</td>
-                <td class="align-middle text-center" >{{item.status}}</td>
+                <td class="align-middle " >{{item.status}}</td>
                 <td class="align-middle">{{item.change_timestamp}}</td>
                 
-                
-                
                 <template v-if="item.status === 'pending'">
                 <td>
-                <template v-if="item.topic.toLowerCase().includes('delete')">
                 
+                <div class="d-flex flex-row justify-content-evenly">
+                <template v-if="item.topic.toLowerCase().includes('delete')">
                 <div  class="align-middle text-center"><i role="button" @click="openModal(item)" class="fa fa-eye"></i></div>
                 </template>
+
                 <template v-else >
                 <div class="align-middle text-center" ><i style="color:#00639c" @click="openModal(item)" role="button" class="fa fa-edit"></i></div>
                 </template>
                 
                 <div class="align-middle text-center"><i style="color:red" role="button" @click="deleteRequest(item)" class="fa fa-trash"></i></div>
-                
+                </div>
+
                 </td>
                 </template>
-                <template v-else-if="item.status === 'accepted'">
+
+                <template v-else>
+                <div class="d-flex flex-row justify-content-evenly">
                 <td  class="align-middle text-center"><i  role="button" @click="openModal(item)" class="fa fa-eye"></i></td>
                 </template>
-                <template v-else-if="item.status === 'rejected'">
-                <td  class="align-middle text-center"><i  role="button" @click="openModal(item)" class="fa fa-eye"></i></td>
-                </template>
-                
-                
-                
-                
+                </div>
                 
                 </tr>
             </tbody>

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

@@ -38,22 +38,33 @@ export default {
     created(){
 
     },template:`
-  
+    <div class="row">
+
+    <div class="col">
     <div  class="form-underline mb-2">
     <div class="form-underline-titel">Status</div>
     <span  class="form-underline-content">{{status}} </span>
     </div>
-
-    <div v-if="status_message" class="form-underline mb-2 ">
-    <div class="form-underline-titel">Status message</div>
-    <span  class="form-underline-content">{{status_message}} </span>
     </div>
 
+    <div class="col">
     <div  class="form-underline mb-2">
     <div class="form-underline-titel">Date</div>
     <span  class="form-underline-content">{{status_timestamp}} </span>
     </div>
-    
+    </div>
+ 
+    </div>
+    <div class="row">
+    <div class="col">
+    <div v-if="status_message" class="form-underline mb-2 ">
+    <div class="form-underline-titel">Status message</div>
+    <textarea  class="form-control" rows="4" disabled>{{status_message}} </textarea>
+    </div>
+    </div>
+    </div>
+
+
     <div class="card mt-4">
     <div class="card-header">
     <i class="fa" :class="{'fa-trash':cardHeader==='Delete', 'fa-edit':cardHeader==='Update', 'fa-plus':cardHeader==='Add'}" ></i>

public/js/components/Cis/Profil/StudentProfil.js

@@ -1,4 +1,3 @@
-import fhcapifactory from "../../../apps/api/fhcapifactory.js";
 import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
 import Mailverteiler from "./ProfilComponents/Mailverteiler.js";
 import AusweisStatus from "./ProfilComponents/FhAusweisStatus.js";
@@ -8,6 +7,8 @@ import Kontakt from "./ProfilComponents/Kontakt.js";
 import ProfilEmails from "./ProfilComponents/ProfilEmails.js";
 import RoleInformation from "./ProfilComponents/RoleInformation.js";
 import ProfilInformation from "./ProfilComponents/ProfilInformation.js";
+import FetchProfilUpdates from "./ProfilComponents/FetchProfilUpdates.js";
+import EditProfil from "./EditProfil.js";
 
 export default {
   components: {
@@ -20,6 +21,7 @@ export default {
     ProfilEmails,
     RoleInformation,
     ProfilInformation,
+    FetchProfilUpdates,
 
   },
   data() {
@@ -74,31 +76,45 @@ export default {
     };
   },
 
-  //? this is the prop passed to the dynamic component with the custom data of the view
   props: ["data"],
   methods: {
-    sperre_foto_function() {
-      if (!this.data) {
-        return;
-      }
-      fhcapifactory.UserData.sperre_foto_function(!this.data.foto_sperre).then((res) => {
-        this.data.foto_sperre = res.data.foto_sperre;
+
+    fetchProfilUpdates: function(){
+      Vue.$fhcapi.UserData.selectProfilRequest().then((res)=>{
+        
+        if(!res.error){
+          this.data.profilUpdates = res.data.retval?.length ? res.data.retval : null ; 
+        }
       });
     },
+    
+    showModal() {
+
+      EditProfil.popup({ 
+          value:JSON.parse(JSON.stringify(this.data.editData)),
+          title:"Profil bearbeiten",
+        }).then((popup_result) => {
+          if(popup_result){
+            Vue.$fhcapi.UserData.selectProfilRequest()
+            .then((res) =>{
+              if(!res.error){
+                this.data.profilUpdates = res.data.retval;
+              }else{
+                alert("Error when fetching profile updates: " +res.data.retval);
+              }
+            })
+            .catch(err=>alert(err));
+          }
+        }).catch((e) => {
+          // Wenn der User das Modal abbricht ohne Änderungen
+         
+        });
+    },
    
   },
 
   computed: {
  
-
-    get_image_base64_src() {
-      if (!this.data) {
-        return "";
-      }
-      return "data:image/jpeg;base64," + this.data.foto;
-    },
-
-   
    profilInformation() {
       if (!this.data) {
         return {};
@@ -154,6 +170,71 @@ export default {
     
   },
 
+  created(){
+    this.data.editData = {
+      view:null,
+      data:{
+      Personen_Informationen : {
+        title:"Personen Informationen",
+        view:null,
+        data:{
+          
+          vorname: {
+            title:"vorname",
+            view:"text_input",
+            data:{
+              titel:"vorname",
+              value:this.data.vorname,
+            }},
+            nachname: {
+              title:"nachname",
+              view:"text_input",
+              data:{
+                titel:"nachname",
+                value:this.data.nachname,
+              }
+            },
+            titel:{
+              title:"titel",
+              view:"text_input",
+              data:{
+                titel:"titel",
+                value:this.data.titel,
+              }
+            },
+            postnomen:{
+              title:"postnomen",
+              view:"text_input",
+              data:{
+                titel:"postnomen",
+                value:this.data.postnomen,
+              }
+            },
+          }
+        },
+        Private_Kontakte: {
+          title:"Private Kontakte" ,
+          data:this.privateKontakte.map(kontakt => {
+            return {
+              listview:'Kontakt',
+              view:'EditKontakt',
+              data:kontakt
+            }})
+         },
+        Private_Adressen: {
+          title: "Private Adressen",
+          data:this.privateAdressen.map(kontakt => {
+            return {
+              listview:'Adresse',
+              view:'EditAdresse',
+              data:kontakt
+            }})
+         },
+        },
+     
+    };
+  },
+
   mounted() {
     this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
     
@@ -179,11 +260,18 @@ export default {
               <div  class="d-md-none col-12 ">
              
               <div class="row py-2">
-              <div class="col">
-               
-              <quick-links :mobile="true"></quick-links>
+                <div class="col">
+                
+                <quick-links :mobile="true"></quick-links>
+                </div>
+              </div>
+
+              <div v-if="data.profilUpdates" class="row mb-3">
+                <div class="col">
+                  <!-- MOBILE PROFIL UPDATES -->  
+                  <fetch-profil-updates @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
+                </div>
               </div>
-            </div>
 
               </div>
               <!-- END OF HIDDEN QUCK LINKS -->
@@ -339,7 +427,27 @@ export default {
               <div  class="col-md-4 col-xxl-3 col-sm-12 text-break" >
 
 
-             
+              <!-- Bearbeiten Button -->
+  
+              <div class="row d-none d-md-block mb-3">
+              <div class="col mb-3">
+              <button @click="showModal" type="button" class="text-start  w-100 btn btn-outline-secondary" >
+                <div class="row">
+                  <div class="col-2">
+                    <i class="fa fa-edit"></i>
+                  </div>
+                  <div class="col-10">Bearbeiten</div>
+                </div>
+              </button>
+              </div>
+              </div>
+
+                <div v-if="data.profilUpdates" class="row d-none d-md-block mb-3">
+                <div class="col mb-3">
+                    <!-- PROFIL UPDATES -->
+                    <fetch-profil-updates @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
+                </div>    
+                </div>
               
                 <div  class="row d-none d-md-block mb-3">
                   <div class="col">