From 84706c957edc7fffc3a6b4f6feadae281f575833 Mon Sep 17 00:00:00 2001
From: Simon Gschnell <simongschnell@gmail.com>
Date: Mon, 11 Dec 2023 14:35:17 +0100
Subject: [PATCH] changes dynamically the col width if a kontakt anmerkung is
 vorhanden or not

---
 .../Cis/Profil/MitarbeiterProfil.js           | 50 +++++++++++--------
 .../Cis/Profil/MitarbeiterViewProfil.js       |  8 +--
 .../js/components/Cis/Profil/StudentProfil.js | 39 +++++++++------
 .../Cis/Profil/StudentViewProfil.js           |  8 +--
 4 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js
index 561e2c9fa..71afab9cd 100644
--- a/public/js/components/Cis/Profil/MitarbeiterProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js
@@ -103,7 +103,7 @@ export default {
           Kurzzeichen: this.data.kurzbz,
           Telefon: this.data.telefonklappe,
           Büro:this.data.ort_kurzbz,
-          FhAusweisStatus: this.data.zutrittsdatum,
+          
         },
         
 
@@ -121,7 +121,7 @@ export default {
 
       return {
         
-        
+        FhAusweisStatus: this.data.zutrittsdatum,
         emails: this.data.emails,
         Kontakte: this.data.kontakte,
         Adressen: this.data.adressen,
@@ -146,7 +146,7 @@ export default {
 
   template: `
   <!-- CONTAINER -->
-  <div class="container-fluid">
+  <div class="container-fluid" style="overflow-wrap:break-word">
     <!-- ROW --> 
           <div class="row">
           <!-- HIDDEN QUICK LINKS -->
@@ -245,7 +245,7 @@ export default {
 
 
                       <!-- FIRST COLUMN WITH PROFIL INFORMATION -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:red" class="col-md-12 col-lg-6">
+                      <div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
 
 
 
@@ -254,14 +254,14 @@ export default {
                         <div   v-for="(wert,bezeichnung) in personData">
                             <dl class="  mb-0" v-else v-for="(wert,bez) in wert">
                                 <div class="row justify-content-center">
-                                    <dt class="col-6" >{{bez}}</dt>
-                                    <dd class=" col-6">{{wert?wert:"-"}}</dd>
+                                    <dt class="col-lg-4 col-6  " >{{bez}}</dt>
+                                    <dd class=" col-lg-8 col-6 ">{{wert?wert:"-"}}</dd>
                                 </div>
+                               
+                            
                             </dl>
-                            <div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
-                                <dt class="col-6" >FH-Ausweis Status</dt>
-                                <dd class=" col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
-                            </div>
+                            
+                            
                         </div>
 
 
@@ -271,7 +271,7 @@ export default {
 
 
                       <!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
-                      <div style="word-wrap:break-word; border:4px solid;border-color:orange" class="col-lg-6 col-md-12">
+                      <div style=" border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
 
 
 
@@ -280,24 +280,30 @@ export default {
 
                         <dl v-for="(wert,bezeichnung) in kontaktInfo">
 
+
+                          <div class="row justify-content-center" v-if="bezeichnung=='FhAusweisStatus'">
+                            <dt class="col-lg-4 col-6" >FH-Ausweis Status</dt>
+                            <dd class=" col-lg-8 col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
+                          </div>
+
                         <!-- HIER SIND DIE EMAILS -->
                     
                     
                           <div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
-                              <dt class="col-3  mb-0">eMail</dt>
-                              <div class="col-9 ">
-                                  <dd v-for="email in wert" class="mb-0 ">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
-                              </div>
+                            <dt class="col-lg-4  col-6 mb-0">eMail</dt>
+                            <div class="col-lg-8 col-6">
+                                <dd v-for="email in wert" class="mb-0 ">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
+                            </div>
                           </div>
                       
                       
                           <!-- HIER SIND DIE PRIVATEN KONTAKTE -->
                           <div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
-                              <dt   class="col-3 mb-0">Private Kontakte</dt>
-                              <div class="col-9 ">
+                              <dt   class="col-lg-4 col-6  mb-0">Private Kontakte</dt>
+                              <div class="col-lg-8 col-6 ">
                                   <dd class="row justify-end" v-for="element in wert" >
-                                      <div class="col-8">{{element.kontakttyp + ":  " + element.kontakt+"  " }}</div>
-                                      <div class="col-2"> {{element?.anmerkung}}</div>
+                                      <div :class="{...(element?.anmerkung? {'col-7':true} : {'col-10':true} )}">{{element.kontakttyp + ":  " + element.kontakt+"  " }}</div>
+                                      <div :class="{...(element?.anmerkung? {'col-3':true} : {'d-none':true} )}"> {{element?.anmerkung}}</div>
                                       <div class="col-2"> 
                                           <i v-if="element.zustellung" class="fa-solid fa-check"></i>
                                           <i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
@@ -310,8 +316,8 @@ export default {
                       
                           <!-- HIER SIND DIE ADRESSEN -->
                           <div class=" justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Adressen'">
-                              <dt class="col-3">Adressen</dt>
-                              <div class="col-9">
+                              <dt class="col-lg-4 col-6">Adressen</dt>
+                              <div class="col-lg-8 col-6">
                                   <dd class="  m-0"  v-for="element in wert">
                                       {{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}
                                   </dd>
@@ -380,7 +386,7 @@ export default {
 
 
               <!-- START OF SIDE PANEL -->
-              <div class="col-md-3 col-sm-12">
+              <div  class="col-md-3 col-sm-12">
 
 
               <!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
index 64307cb7c..ec2c277a0 100644
--- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
@@ -115,7 +115,7 @@ export default {
 
 
   <!-- CONTAINER -->
-  <div class="container-fluid">
+  <div class="container-fluid" style="overflow-wrap:break-word">
     <!-- ROW --> 
           <div class="row">
           <!-- HIDDEN QUICK LINKS -->
@@ -189,7 +189,7 @@ export default {
 
 
                       <!-- FIRST COLUMN WITH PROFIL INFORMATION -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:red" class="col-md-12 col-lg-6">
+                      <div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
 
 
 
@@ -215,7 +215,7 @@ export default {
 
 
                       <!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:orange" class="col-lg-6 col-md-12">
+                      <div style="border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
 
 
 
@@ -283,7 +283,7 @@ export default {
 
 
               <!-- START OF SIDE PANEL -->
-              <div class="col-md-3 col-sm-12">
+              <div  class="col-md-3 col-sm-12">
 
 
               <!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js
index 368034b1d..c22bafe4a 100644
--- a/public/js/components/Cis/Profil/StudentProfil.js
+++ b/public/js/components/Cis/Profil/StudentProfil.js
@@ -120,7 +120,7 @@ export default {
   template: `
 
   <!-- CONTAINER -->
-  <div class="container-fluid">
+  <div class="container-fluid" style="overflow-wrap:break-word">
     <!-- ROW --> 
           <div class="row">
           <!-- HIDDEN QUICK LINKS -->
@@ -219,7 +219,7 @@ export default {
 
 
                       <!-- FIRST COLUMN WITH PROFIL INFORMATION -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:red" class="col-md-12 col-lg-6">
+                      <div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
 
 
 
@@ -232,10 +232,7 @@ export default {
                                     <dd class=" col-6">{{wert?wert:"-"}}</dd>
                                 </div>
                             </dl>
-                            <div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
-                                <dt class="col-6" >FH-Ausweis Status</dt>
-                                <dd class=" col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
-                            </div>
+                            
                         </div>
 
 
@@ -245,7 +242,7 @@ export default {
 
 
                       <!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:orange" class="col-lg-6 col-md-12">
+                      <div style="border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
 
 
 
@@ -254,12 +251,22 @@ export default {
 
                         <dl v-for="(wert,bezeichnung) in kontaktInfo">
 
+
+
+                        <!-- HIER IST DER FH AUSWEIS -->
+
+                          <div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
+                            <dt class="col-lg-4 col-6" >FH-Ausweis Status</dt>
+                            <dd class=" col-lg-8 col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
+                          </div>
+
+
                         <!-- HIER SIND DIE EMAILS -->
                     
                     
                           <div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
-                              <dt class="col-4  mb-0">eMail</dt>
-                              <div class="col-8 ">
+                              <dt class="col-lg-4  col-6 mb-0">eMail</dt>
+                              <div class="col-lg-8 col-6 ">
                                   <dd v-for="email in wert" class="mb-0 ">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
                               </div>
                           </div>
@@ -267,11 +274,11 @@ export default {
                       
                           <!-- HIER SIND DIE PRIVATEN KONTAKTE -->
                           <div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
-                              <dt   class="col-4 mb-0">Private Kontakte</dt>
-                              <div class="col-8 ">
+                              <dt   class="col-lg-4 col-6 mb-0">Private Kontakte</dt>
+                              <div class="col-lg-8 col-6">
                                   <dd class="row justify-end" v-for="element in wert" >
-                                      <div class="col-8">{{element.kontakttyp + ":  " + element.kontakt+"  " }}</div>
-                                      <div class="col-2"> {{element?.anmerkung}}</div>
+                                  <div :class="{...(element?.anmerkung? {'col-7':true} : {'col-10':true} )}">{{element.kontakttyp + ":  " + element.kontakt+"  " }}</div>
+                                  <div :class="{...(element?.anmerkung? {'col-3':true} : {'d-none':true} )}"> {{element?.anmerkung}}</div>
                                       <div class="col-2"> 
                                           <i v-if="element.zustellung" class="fa-solid fa-check"></i>
                                           <i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
@@ -284,8 +291,8 @@ export default {
                       
                           <!-- HIER SIND DIE ADRESSEN -->
                           <div class=" justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Adressen'">
-                              <dt class="col-4">Adressen</dt>
-                              <div class="col-8">
+                              <dt class="col-lg-4 col-6">Adressen</dt>
+                              <div class="col-lg-8 col-6">
                                   <dd class="  m-0"  v-for="element in wert">
                                       {{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}
                                   </dd>
@@ -354,7 +361,7 @@ export default {
 
 
               <!-- START OF SIDE PANEL -->
-              <div class="col-md-3 col-sm-12">
+              <div  class="col-md-3 col-sm-12">
 
 
               <!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
diff --git a/public/js/components/Cis/Profil/StudentViewProfil.js b/public/js/components/Cis/Profil/StudentViewProfil.js
index 23e66564e..4cca513bc 100644
--- a/public/js/components/Cis/Profil/StudentViewProfil.js
+++ b/public/js/components/Cis/Profil/StudentViewProfil.js
@@ -81,7 +81,7 @@ export default {
 
 
   <!-- CONTAINER -->
-  <div class="container-fluid">
+  <div class="container-fluid" style="overflow-wrap:break-word">
     <!-- ROW --> 
           <div class="row">
           <!-- HIDDEN QUICK LINKS -->
@@ -160,7 +160,7 @@ export default {
 
 
                       <!-- FIRST COLUMN WITH PROFIL INFORMATION -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:red" class="col-md-12 col-lg-6">
+                      <div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
 
 
 
@@ -183,7 +183,7 @@ export default {
 
 
                       <!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
-                      <div style="word-wrap:break-word;border:4px solid;border-color:orange" class="col-lg-6 col-md-12">
+                      <div style="border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
 
 
 
@@ -237,7 +237,7 @@ export default {
 
 
               <!-- START OF SIDE PANEL -->
-              <div class="col-md-3 col-sm-12">
+              <div  class="col-md-3 col-sm-12">
 
 
               <!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->