refactor(News-StudiengangInformationen): component clean up and refactors vertretungen into own component

public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js

@@ -1,4 +1,5 @@
 import StudiengangPerson from "./StudiengangPerson";
+import StudiengangVertretung from "./StudiengangVertretung";
 
 export default {
 data(){
@@ -15,36 +16,40 @@ data(){
 	}
 },
 components:{
-	StudiengangPerson
+	StudiengangPerson,
+	StudiengangVertretung,
 },
 template:/*html*/`
 
 		<template v-if="studiengang?.bezeichnung && semester">
 			<div class="card card-body mb-3">
-				<div class="mb-3"><b>Studiengang:</b> </h5>{{studiengang.bezeichnung}}</div>
-				<div><b>Semester: </b>{{semester}}</div>
+				<div class="mb-3">
+					<h6 class="fw-bold">Studiengang:</h6>
+					{{studiengang.bezeichnung}}
+				</div>
+				<div :class="{'mb-3':studiengang?.zusatzinfo_html}">
+					<h6 class="fw-bold">Semester: </h6>
+					{{semester}}
+				</div>
+				<div v-if="studiengang?.zusatzinfo_html" v-html="studiengang?.zusatzinfo_html"></div>
 			</div>
 		</template>
 		<template v-for="{title, collection} in collection_array">
-		<h5 v-if="Array.isArray(collection)  && collection.length !==0">{{title}}</h5>
-		<template v-for="person in studiengangs_person_data(collection)">
-			<div class="mb-3">
-				<studiengang-person :person_data="person"></studiengang-person>
-			</div>
+			<h5 class="fw-bold" v-if="Array.isArray(collection)  && collection.length !==0">{{title}}</h5>
+			<template v-for="person in collection">
+				<div class="mb-3">
+					<studiengang-person v-bind="person"></studiengang-person>
+				</div>
+			</template>
 		</template>
-		</template>
-		<div v-if="studiengang?.zusatzinfo_html" v-html="studiengang?.zusatzinfo_html"></div>
 		<template v-if="hochschulvertr && Array.isArray(hochschulvertr) && hochschulvertr.length >0">
-			<h5>Hochschulvertretung</h5>
-			<p v-for="vertretung in hochschulvertr">{{vertretungFormatedName(vertretung)}}</p>
+			<studiengang-vertretung showBezeichnung title="Hochschulvertretung" :vertretungsList="hochschulvertr"></studiengang-vertretung>
 		</template>
 		<template v-if="stdv && Array.isArray(stdv) && stdv.length >0">
-			<h5>Studienvertretung {{studiengang.kurzbzlang??''}}</h5>
-			<p v-for="vertretung in stdv">{{vertretungFormatedName(vertretung,false)}}</p>
+			<studiengang-vertretung :title="'Studienvertretung'.concat(studiengang.kurzbzlang??'')" :vertretungsList="stdv"></studiengang-vertretung>
 		</template>
 		<template v-if="jahrgangsvertr && Array.isArray(jahrgangsvertr) && jahrgangsvertr.length >0">
-			<h5>Jahrgangsvertretung</h5>
-			<p v-for="vertretung in jahrgangsvertr">{{vertretungFormatedName(vertretung,false)}}</p>
+			<studiengang-vertretung title="Jahrgangsvertretung" :vertretungsList="jahrgangsvertr"></studiengang-vertretung>
 		</template>
 	
 `,
@@ -52,73 +57,6 @@ computed:{
 	collection_array: function(){
 		return [{ title: "Studiengangsleitung", collection: this.stg_ltg }, { title: "geschäftsführende Leitung", collection: this.gf_ltg },{ title: "stellvertretende Leitung", collection: this.stv_ltg },{ title: "Sekretariat", collection: this.ass} ];
 	},
-	
-	studiengangs_assistenz_array: function () {
-		// early return if the reactive data is not yet loaded or not present
-		if (!this.ass)
-			return null;
-
-		return this.ass.map((assistenz) => {
-			return {
-				fullname: this.studiengangs_person_fullname(assistenz.titelpre, assistenz.vorname, assistenz.nachname),
-				telefone: this.studiengangs_person_phone(assistenz.kontakt, assistenz.telefonklappe),
-				ort: assistenz.planbezeichnung ?? null,
-				email: this.studiengangs_person_email(assistenz.email),
-			}
-		})
-	},
-},
-methods:{
-	vertretungFormatedName: function(vertretung,bezeichnung=true){
-		if(!vertretung) return null;
-		return `${vertretung.vorname ?? ''} ${vertretung.nachname ?? ''} ${vertretung.bezeichnung && bezeichnung ? '('.concat(vertretung.bezeichnung.replace("(","").replace(")","")).concat(")") : ''}`
-	},
-	studiengangs_person_data: function (collection) {
-		// early return if the reactive data is not yet loaded or not present
-		if (!collection || !Array.isArray(collection) || collection.length === 0)
-			return null;
-
-		return collection.map((item) => {
-			return {
-				fullname: this.studiengangs_person_fullname(item.titelpre, item.vorname, item.nachname),
-				telefone: this.studiengangs_person_phone(item.kontakt, item.telefonklappe),
-				ort: item.planbezeichnung ?? null,
-				email: this.studiengangs_person_email(item.email),
-				foto: item.foto ? 'data:image/png;base64,'.concat(item.foto) : null,
-			}
-		})
-	},
-	studiengangs_person_fullname: function(titelpre, vorname, nachname){
-		if (titelpre && vorname && nachname) 
-		{
-			return `${titelpre} ${vorname} ${nachname}`;
-		}
-		else if (vorname && nachname)
-		{
-			return `${vorname} ${nachname}`;
-		}
-		else if (nachname)
-		{
-			return vorname;
-		}
-		else
-		{
-			return null;
-		}
-	},
-	studiengangs_person_phone: function (telefone,telefoneklappe) {
-		if(telefone && telefoneklappe)
-		{
-			return "tel:".concat(telefone).concat(" "+telefoneklappe);
-		}
-		else
-		{
-			return telefon ? "tel:".concat(telefone): null;
-		}
-	},
-	studiengangs_person_email: function (email) {
-		return email? "mailto:".concat(email): null;
-	},
 },
 mounted(){
 	this.$fhcApi.factory.studiengang.studiengangInformation()

public/js/components/Cis/Cms/StudiengangInformation/StudiengangPerson.js

@@ -1,31 +1,12 @@
 export default {
-	data(){
-
-	},
-	props:{
-		person_data:
-		{
-			type: Object,
-			required: true
-		}
-	},
-	computed:{
-		formattedEmail: function(){
-			if(!this.person_data ) return null;
-			let emailString= this.person_data.email.replace("mailto:", "");
-			// when splitting a string, the letter that is used to split the string will be removed from the result
-			let emailArray = emailString.split('@');
-			// returns both parts of the splitted string in combination with the removed letter and a word break
-			return emailArray[0] + '@<wbr>' + emailArray[1];
-		},
-	},
+	props:["uid","vorname","nachname","titelpre","kontakt","telefonklappe","email","planbezeichnung","foto"],
 	template:/*html*/`
 	<div class="card" style="width: 15rem;">
 		<div class="bg-dark d-flex justify-content-center">
-			<img  :src="person_data.foto" alt="person_dataFoto" style="width: 110px; height: auto; object-fir:scale-down;" class="card-img-top" >
+			<img  :src="base64Image" alt="mitarbeiter_foto" style="width: 110px; height: auto; object-fir:scale-down;" class="card-img-top" >
 		</div>
 		<div class="card-body">
-			<h6 class="text-center card-title mb-0">{{person_data.fullname}}</h6>
+			<h6 class="text-center card-title mb-0">{{fullname}} <a v-if="profilViewLink" :href="profilViewLink"><i class="ms-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i></a></h6>
 		</div>
 		<hr class="my-0">
 		<div class="card-body">
@@ -34,52 +15,75 @@ export default {
 			<div class="mb-3">
 				<span>
 					<i class="fa fa-phone me-2"></i>
-					<a :href="person_data.telefone">{{person_data.telefone?.replace("tel:","")}}</a>
+					<a :href="phone.link">{{phone.number}}</a>
 				</span>
 			</div>
 			<div class="mb-3">
 				<span>
 					<i class="fa fa-home me-2"></i>
-					{{person_data.ort}}
+					{{ort}}
 				</span>
 			</div>
 			<div>
 				<span>
 					<i class="fa-regular fa-envelope me-2"></i>
-					<a :href="person_data.email" v-html="formattedEmail"></a>
+					<a :href="email_link" v-html="formattedEmail"></a>
 				</span>
 			</div>
 			
 			</div>
 		</div>
 	</div>
-	<!--<div class="flex flex-column gap-3">
-		<div class="mb-3">
-			<span>
-				<i class="fa fa-user me-2"></i>
-				{{person_data.fullname}}
-			</span>
-		</div>
-		<div class="mb-3">
-			<span>
-				<i class="fa fa-phone me-2"></i>
-				<a :href="person_data.telefone">{{person_data.telefone?.replace("tel:","")}}</a>
-			</span>
-		</div>
-		<div class="mb-3">
-			<span>
-				<i class="fa fa-home me-2"></i>
-				{{person_data.ort}}
-			</span>
-		</div>
-		<div class="mb-3">
-			<span>
-				<i class="fa-regular fa-envelope me-2"></i>
-				<a :href="person_data.email"> {{person_data.email.replace("mailto:","")}}</a>
-			</span>
-		</div>
-		<div class="mb-3">
-			<img :src="person_data.foto" alt="person_dataFoto" style="width: 100px; height: auto; object-fir:scale-down;">
-		</div>
-	</div>-->`,
+	`,
+	computed:{
+		formattedEmail: function(){
+			if(!this.email ) return null;
+			let emailString= this.email.replace("mailto:", "");
+			// when splitting a string, the letter that is used to split the string will be removed from the result
+			let emailArray = emailString.split('@');
+			// returns both parts of the splitted string in combination with the removed letter and a word break
+			return emailArray[0] + '@<wbr>' + emailArray[1];
+		},
+		fullname: function () {
+			if (this.titelpre && this.vorname && this.nachname) {
+				return `${this.titelpre} ${this.vorname} ${this.nachname}`;
+			}
+			else if (this.vorname && this.nachname) {
+				return `${this.vorname} ${this.nachname}`;
+			}
+			else if (this.nachname) {
+				return this.vorname;
+			}
+			else {
+				return null;
+			}
+		},
+		phone: function () {
+			if (this.kontakt && this.telefoneklappe) {
+				return {
+					link: "tel:".concat(this.kontakt).concat(" " + this.telefoneklappe),
+					number: this.kontakt.concat(" " + this.telefoneklappe),
+				} 
+			}
+			else {
+				return this.kontakt ? {
+					link: "tel:".concat(this.kontakt),
+					number: this.kontakt,
+				} : null;
+			}
+		},
+		email_link: function () {
+			return this.email ? "mailto:".concat(this.email) : null;
+		},
+		base64Image:function(){
+			return this.foto ? 'data:image/png;base64,'.concat(this.foto) : null;
+		},
+		ort:function(){
+			return this.planbezeichnung ?? null;
+		},
+		profilViewLink: function(){
+			return this.uid ? FHC_JS_DATA_STORAGE_OBJECT.app_root.concat(FHC_JS_DATA_STORAGE_OBJECT.ci_router).concat("/Cis/Profil/View/").concat(this.uid): null; 
+		},
+	},
+	
 }

public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js

@@ -0,0 +1,32 @@
+export default {
+	props: {
+		title:String,
+		vertretungsList:Array,
+		showBezeichnung:Boolean,
+	},
+	template:/*html*/`
+	<div class="card mb-3">
+		<div class="card-header">
+			<span>{{title}}</span>
+		</div>
+		<div class="card-body">
+			<p v-for="vertretung in vertretungsList">
+				<a v-if="profilViewLink(vertretung.uid)" :href="profilViewLink(vertretung.uid)">
+					<i class="me-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i>
+				</a>
+				{{vertretungFormatedName(vertretung,false)}}
+			</p>
+		</div>
+	</div>
+	`,
+	methods: {
+		profilViewLink: function (uid) {
+			return uid ? FHC_JS_DATA_STORAGE_OBJECT.app_root.concat(FHC_JS_DATA_STORAGE_OBJECT.ci_router).concat("/Cis/Profil/View/").concat(uid) : null;
+		},
+		vertretungFormatedName: function (vertretung) {
+			if (!vertretung) return null;
+			return `${vertretung.vorname ?? ''} ${vertretung.nachname ?? ''} ${vertretung.bezeichnung && this.showBezeichnung ? '('.concat(vertretung.bezeichnung.replace("(", "").replace(")", "")).concat(")") : ''}`
+		},
+	},
+
+}