changes dynamically the col width if a kontakt anmerkung is vorhanden or not

This commit is contained in:
Simon Gschnell
2023-12-11 14:35:17 +01:00
parent 9beb426531
commit 84706c957e
4 changed files with 59 additions and 46 deletions
@@ -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 -->
@@ -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 -->
@@ -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 -->
@@ -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 -->