feature(StudiengangInformations componente): creates a Vue component for the StudiengangsInformationen that were displayed next to the news

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

@@ -0,0 +1,117 @@
+import StudiengangPerson from "./StudiengangPerson";
+
+export default {
+data(){
+	return{
+		studiengang:null,
+		semester: null,
+		stg_ltg: null,
+		gf_ltg: null,
+		stv_ltg: null,
+		ass: null,
+		hochschulvertr: null,
+		stdv: null,
+		jahrgangsvertr: null,
+	}
+},
+components:{
+	StudiengangPerson
+},
+template:/*html*/`
+	<template v-for="{title, collection} in collection_array">
+	<h3 v-if="Array.isArray(collection)  && collection.length !==0">{{title}}</h3>
+	<template v-for="person in studiengangs_person_data(collection)">
+		<div class="mb-3">
+			<studiengang-person :person_data="person"></studiengang-person>
+		</div>
+	</template>
+	</template>
+`,
+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:{
+	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 if(telefone)
+		{
+			return "tel:".concat(telefone);
+		}
+		else
+		{
+			return null;
+		}
+	},
+	studiengangs_person_email: function (email) {
+		if (email) 
+		{
+			return "mailto:".concat(email);
+		}
+		else {
+			return null;
+		}
+	},
+},
+mounted(){
+	this.$fhcApi.factory.studiengang.studiengangInformation()
+	.then(res => res.data)
+	.then(studiengangInformationen => {
+		Object.assign(this, studiengangInformationen);
+	});
+
+},
+
+};

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

@@ -0,0 +1,85 @@
+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];
+		},
+	},
+	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" >
+		</div>
+		<div class="card-body">
+			<h5 class="text-center card-title mb-0">{{person_data.fullname}}</h5>
+		</div>
+		<hr class="my-0">
+		<div class="card-body">
+			
+			<div class="flex flex-column gap-3">
+			<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>
+				<span>
+					<i class="fa-regular fa-envelope me-2"></i>
+					<a :href="person_data.email" 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>-->`,
+}