working version for relaod header and data without updateUrl

public/js/components/DetailHeader/DetailHeader.js

@@ -55,9 +55,9 @@ export default {
 				});
 		}
 
-		if(this.headerData){
+/*		if (this.headerData && this.headerData.length) { //bereits im watcher
 			this.getSemesterStati(this.headerData[0].prestudent_id);
-		}
+		}*/
 	},
 	watch: {
 		person_id: {
@@ -86,167 +86,176 @@ export default {
 			},
 			deep: true,
 		},
+		headerData: {
+			handler(newVal) {
+				if (this.typeHeader === 'student' && newVal?.length) {
+					this.getSemesterStati(newVal[0].prestudent_id);
+				}
+			},
+			immediate: true
+		},
 	},
-	data(){
-		return{
-			headerDataMa: {},
-			departmentData: {},
-			leitungData: {},
-			noCurrentStatus: false
-		};
-	},
-	methods: {
-		getHeader(person_id) {
-			return this.$api
-				.call(ApiDetailHeader.getHeader(person_id))
-				.then(result => {
-					this.headerDataMa = result.data;
+data(){
+return{
+	headerDataMa: {},
+	departmentData: {},
+	leitungData: {},
+	noCurrentStatus: false
+};
+},
+methods: {
+getHeader(person_id) {
+	return this.$api
+		.call(ApiDetailHeader.getHeader(person_id))
+		.then(result => {
+			this.headerDataMa = result.data;
 
-				})
-				.catch(this.$fhcAlert.handleSystemError);
-		},
-		loadDepartmentData(mitarbeiter_uid) {
-			return this.$api
-				.call(ApiDetailHeader.getPersonAbteilung(mitarbeiter_uid))
-				.then(result => {
-					this.departmentData = result.data;
-				})
-				.catch(this.$fhcAlert.handleSystemError);
-		},
-		getLeitungOrg(oekurzbz){
-			return this.$api
-				.call(ApiDetailHeader.getLeitungOrg(oekurzbz))
-				.then(result => {
-					this.leitungData = result.data;
-				})
-				.catch(this.$fhcAlert.handleSystemError);
-		},
-		redirectToLeitung(){
-			this.$emit('redirectToLeitung', {
-				person_id: this.leitungData.person_id});
-		},
-		getFotoSrc(foto) {
-			if(foto === null) {
-				return FHC_JS_DATA_STORAGE_OBJECT.app_root + 'skin/images/profilbild_dummy.jpg';
-			} else {
-				return 'data:image/jpeg;base64,' + foto;
-			}
-		},
-		getSemesterStati(prestudent_id){
-			return this.$api
-				.call(ApiDetailHeader.getSemesterStati(prestudent_id))
-				.then(result => {
-					this.semesterStati = result.data;
-				})
-				.catch(this.$fhcAlert.handleSystemError);
-		}
-	},
-	template: `
-		<div class="core-header d-flex justify-content-start align-items-center w-100 overflow-auto pb-3 gap-3" style="max-height:9rem; min-width: 37.5rem;">
-
-			<template v-if="typeHeader==='student'">
-					<div
-						v-for="person in headerData"
-						:key="person.person_id"
-						class="d-flex flex-column align-items-center h-100 position-relative d-inline-block"
-					>
-						<img
-						  class="d-block rounded"
-						  style="height: 84px;"
-						  alt="Profilbild"
-						  :src="getFotoSrc(person.foto)"
-						/>
-
-						<template v-if="person.foto_sperre">
-							<i
-							  class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
-							  style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
-							></i>
-						</template>
-					<small class="text-muted">{{person.uid}}</small>
-					</div>
-
-					<div v-if="headerData.length == 1">
-						<h2 class="h4">
-							{{headerData[0].titelpre}}
-							{{headerData[0].vorname}}
-							{{headerData[0].nachname}}<span v-if="headerData[0].titelpost">, </span>
-							{{headerData[0].titelpost}}
-						</h2>
-
-						<h5 class="h6">
-						 <strong class="text-muted">Person ID </strong>
-							{{headerData[0].person_id}}
-							<strong class="text-muted">| {{$p.t('lehre', 'studiengang')}} </strong>
-							 {{headerData[0].stg_bezeichnung}} ({{headerData[0].studiengang}})
-							<strong v-if="headerData[0].semester != null" class="text-muted"> | {{$p.t('lehre', 'semester')}} </strong>
-							  {{headerData[0].semester}}
-							<strong v-if="headerData[0].verband" class="text-muted"> | {{$p.t('lehre', 'verband')}}</strong>
-							{{headerData[0].verband}}
-							<strong v-if="headerData[0].gruppe !== ' ' && headerData[0].gruppe != null" class="text-muted"> | {{$p.t('lehre', 'gruppe')}} </strong>
-							{{headerData[0].gruppe}}
-						 </h5>
-
-					  <h5 class="h6">
-						<strong class="text-muted">Email </strong>
-						<span>
-							<a :href="'mailto:'+headerData[0]?.mail_intern">{{headerData[0].mail_intern}}</a>
-						</span>
-						<strong class="text-muted"> | Status </strong>
-						<span v-if="noCurrentStatus">
-							<strong class="text-danger">{{$p.t('lehre', 'textNoStatus')}}</strong>
-						</span>
-						 <span v-else>
-						 	{{headerData[0].statusofsemester}}
-						 </span>
-						<strong class="text-muted"> | {{$p.t('person', 'matrikelnummer')}} </strong>
-						  {{headerData[0].matr_nr}}
-					  </h5>
-					</div>
-		</template>
-
-		<template v-if="typeHeader==='mitarbeiter'">
-			<div class="row">
-				<div class="col-md-2 d-flex justify-content-start align-items-center w-30 pb-3 gap-3 position-relative"
-						style="max-height: 8rem; max-width: 6rem; overflow: hidden;">
-					<img
-					  class="d-block rounded"
-					  style="height: 84px;"
-					  alt="Profilbild"
-					  :src="'data:image/jpeg;base64,' + headerDataMa.foto"
-					/>
-					<template v-if="headerDataMa.foto_sperre">
-						<i
-						  class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
-						  style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
-						></i>
-					</template>
-				</div>
-
-				<!--show Ma-Details-->
-				<div class="col-md-10">
-					<h5>{{headerDataMa.titelpre}} {{headerDataMa.vorname}} {{headerDataMa.nachname}}<span v-if="headerDataMa?.titelpost">, </span> {{headerDataMa.titelpost}}
-					</h5>
-					<strong class="text-muted">{{departmentData.organisationseinheittyp_kurzbz}}</strong>
-						{{departmentData.bezeichnung}}
-					<span v-if="leitungData.uid"> | </span>
-					<strong v-if="leitungData.uid" class="text-muted">Vorgesetzte*r </strong>
-					<a href="#" @click.prevent="redirectToLeitung">
-						{{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}}
-					</a>
-					<p>
-						<strong class="text-muted">Email </strong>
-						 <span v-if="!headerDataMa?.alias">
-							<a :href="'mailto:'+headerDataMa?.uid+'@'+domain">{{headerDataMa.uid}}@{{domain}}</a>
-						</span>
-						<span v-if="headerDataMa?.alias">
-							<a :href="'mailto:'+headerDataMa?.alias+'@'+domain">{{headerDataMa.alias}}@{{domain}}</a>
-						</span>
-						<span v-if="headerDataMa?.telefonklappe" class="mb-2"> | <strong class="text-muted">DW </strong>{{headerDataMa?.telefonklappe}}</span>
-					</p>
-				</div>
-			</div>
-		</template>
-	</div>
-	`
+		})
+		.catch(this.$fhcAlert.handleSystemError);
+},
+loadDepartmentData(mitarbeiter_uid) {
+	return this.$api
+		.call(ApiDetailHeader.getPersonAbteilung(mitarbeiter_uid))
+		.then(result => {
+			this.departmentData = result.data;
+		})
+		.catch(this.$fhcAlert.handleSystemError);
+},
+getLeitungOrg(oekurzbz){
+	return this.$api
+		.call(ApiDetailHeader.getLeitungOrg(oekurzbz))
+		.then(result => {
+			this.leitungData = result.data;
+		})
+		.catch(this.$fhcAlert.handleSystemError);
+},
+redirectToLeitung(){
+	this.$emit('redirectToLeitung', {
+		person_id: this.leitungData.person_id});
+},
+getFotoSrc(foto) {
+	if(foto === null) {
+		return FHC_JS_DATA_STORAGE_OBJECT.app_root + 'skin/images/profilbild_dummy.jpg';
+	} else {
+		return 'data:image/jpeg;base64,' + foto;
+	}
+},
+getSemesterStati(prestudent_id){
+	return this.$api
+		.call(ApiDetailHeader.getSemesterStati(prestudent_id))
+		.then(result => {
+			this.semesterStati = result.data;
+			//console.log("getSemesterStati loaded for prestudent_id " + prestudent_id);
+		})
+		.catch(this.$fhcAlert.handleSystemError);
+}
+},
+template: `
+<div class="core-header d-flex justify-content-start align-items-center w-100 overflow-auto pb-3 gap-3" style="max-height:9rem; min-width: 37.5rem;">
+
+	<template v-if="typeHeader==='student'">
+			<div
+				v-for="person in headerData"
+				:key="person.person_id"
+				class="d-flex flex-column align-items-center h-100 position-relative d-inline-block"
+			>
+				<img
+				  class="d-block rounded"
+				  style="height: 84px;"
+				  alt="Profilbild"
+				  :src="getFotoSrc(person.foto)"
+				/>
+
+				<template v-if="person.foto_sperre">
+					<i
+					  class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
+					  style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
+					></i>
+				</template>
+			<small class="text-muted">{{person.uid}}</small>
+			</div>
+
+			<div v-if="headerData.length == 1">
+				<h2 class="h4">
+					{{headerData[0].titelpre}}
+					{{headerData[0].vorname}}
+					{{headerData[0].nachname}}<span v-if="headerData[0].titelpost">, </span>
+					{{headerData[0].titelpost}}
+				</h2>
+
+				<h5 class="h6">
+				 <strong class="text-muted">Person ID </strong>
+					{{headerData[0].person_id}}
+					<strong class="text-muted">| {{$p.t('lehre', 'studiengang')}} </strong>
+					 {{headerData[0].stg_bezeichnung}} ({{headerData[0].studiengang}})
+					<strong v-if="headerData[0].semester != null" class="text-muted"> | {{$p.t('lehre', 'semester')}} </strong>
+					  {{headerData[0].semester}}
+					<strong v-if="headerData[0].verband" class="text-muted"> | {{$p.t('lehre', 'verband')}}</strong>
+					{{headerData[0].verband}}
+					<strong v-if="headerData[0].gruppe !== ' ' && headerData[0].gruppe != null" class="text-muted"> | {{$p.t('lehre', 'gruppe')}} </strong>
+					{{headerData[0].gruppe}}
+				 </h5>
+
+			  <h5 class="h6">
+				<strong class="text-muted">Email </strong>
+				<span>
+					<a :href="'mailto:'+headerData[0]?.mail_intern">{{headerData[0].mail_intern}}</a>
+				</span>
+				<strong class="text-muted"> | Status </strong>
+				<span v-if="noCurrentStatus">
+					<strong class="text-danger">{{$p.t('lehre', 'textNoStatus')}}</strong>
+				</span>
+				 <span v-else>
+					 {{headerData[0].statusofsemester}}
+				 </span>
+				<strong class="text-muted"> | {{$p.t('person', 'matrikelnummer')}} </strong>
+				  {{headerData[0].matr_nr}}
+			  </h5>
+			</div>
+</template>
+
+<template v-if="typeHeader==='mitarbeiter'">
+	<div class="row">
+		<div class="col-md-2 d-flex justify-content-start align-items-center w-30 pb-3 gap-3 position-relative"
+				style="max-height: 8rem; max-width: 6rem; overflow: hidden;">
+			<img
+			  class="d-block rounded"
+			  style="height: 84px;"
+			  alt="Profilbild"
+			  :src="'data:image/jpeg;base64,' + headerDataMa.foto"
+			/>
+			<template v-if="headerDataMa.foto_sperre">
+				<i
+				  class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
+				  style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
+				></i>
+			</template>
+		</div>
+
+		<!--show Ma-Details-->
+		<div class="col-md-10">
+			<h5>{{headerDataMa.titelpre}} {{headerDataMa.vorname}} {{headerDataMa.nachname}}<span v-if="headerDataMa?.titelpost">, </span> {{headerDataMa.titelpost}}
+			</h5>
+			<strong class="text-muted">{{departmentData.organisationseinheittyp_kurzbz}}</strong>
+				{{departmentData.bezeichnung}}
+			<span v-if="leitungData.uid"> | </span>
+			<strong v-if="leitungData.uid" class="text-muted">Vorgesetzte*r </strong>
+			<a href="#" @click.prevent="redirectToLeitung">
+				{{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}}
+			</a>
+			<p>
+				<strong class="text-muted">Email </strong>
+				 <span v-if="!headerDataMa?.alias">
+					<a :href="'mailto:'+headerDataMa?.uid+'@'+domain">{{headerDataMa.uid}}@{{domain}}</a>
+				</span>
+				<span v-if="headerDataMa?.alias">
+					<a :href="'mailto:'+headerDataMa?.alias+'@'+domain">{{headerDataMa.alias}}@{{domain}}</a>
+				</span>
+				<span v-if="headerDataMa?.telefonklappe" class="mb-2"> | <strong class="text-muted">DW </strong>{{headerDataMa?.telefonklappe}}</span>
+			</p>
+		</div>
+	</div>
+</template>
+</div>
+`
 }

public/js/components/Stv/Studentenverwaltung.js

@@ -422,12 +422,13 @@ export default {
 			this.$refs.searchbar.abort();
 			this.$refs.searchbar.hideresult();
 		},
-		handleReloadStudent(students){
-			//TODO(Manu) check with Harald
-
+		handleReloadStudent_DEPR(students){
+	//	@reload-students="handleReloadStudent"
+			//TODO(Manu) delete
 			this.$refs.details.reload(); //reload simply without updateUrl
 			//this.selected = students;
 
+			//analoge to url_studiensemester_kurzbz
 /*			this.$refs.stvList.updateUrl(
 				ApiStv.students.uid(students[0].uid,'CURRENT_SEMESTER'),
 				true
@@ -644,7 +645,7 @@ export default {
 							<stv-list ref="stvList" v-model:selected="selected" :studiengang-kz="studiengangKz" :studiensemester-kurzbz="studiensemesterKurzbz"></stv-list>
 						</template>
 						<template #bottom>
-							<stv-details ref="details" :students="selected" @reload-students="handleReloadStudent"></stv-details>
+							<stv-details ref="details" :students="selected"></stv-details>
 						</template>
 					</vertical-split>
 				</main>

public/js/components/Stv/Studentenverwaltung/Details.js

@@ -2,6 +2,7 @@ import FhcTabs from "../../Tabs.js";
 import FhcHeader from "../../DetailHeader/DetailHeader.js";
 
 import ApiStvApp from '../../../api/factory/stv/app.js';
+import ApiStudent from '../../../api/factory/stv/students.js';
 
 // TODO(chris): alt & title
 // TODO(chris): phrasen
@@ -20,15 +21,13 @@ export default {
 	data() {
 		return {
 			configStudent: {},
-			configStudents: {}
+			configStudents: {},
+			localStudent: null
 		};
 	},
 	props: {
 		students: Array
 	},
-	emits: [
-		'reload-students:students'
-	],
 	computed: {
 		appRoot() {
 			return FHC_JS_DATA_STORAGE_OBJECT.app_root;
@@ -48,27 +47,29 @@ export default {
 			}
 			return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid && !value.showOnlyWithUid));
 		},
-/*		studiensemester(){
-			if(this.students)
-				return this.students.query_studiensemester_kurzbz;
-			else
-				return null;
-			//return this.students?[0].query_studiensemester_kurzbz || null;
-		},*/
+		//for reloading component if data changes
+		headerKey() {
+			return this.students?.[0]?.uid || this.localStudent?.[0]?.uid ||  "empty";
+		}
 	},
 	watch: {
 		'$p.user_language.value'(n, o) {
 			if (n !== o && o !== undefined)
 				this.loadConfig();
 		},
+		//ohne zusätzlichen Watcher reload header und details
 		currentSemester(newVal) {
 			if (
 				this.students &&
 				this.students.length > 0 &&
 				newVal !== this.students[0].query_studiensemester_kurzbz
 			) {
-				this.$emit('reload-students', this.students);
+				console.log("studiensemester_kurzbz "  + this.students[0].query_studiensemester_kurzbz + " vs " + newVal);
+				this.reloadDataStudent();
 			}
+		},
+		headerKey(newVal){
+			this.reloadDataStudent();
 		}
 
 	},
@@ -91,10 +92,31 @@ export default {
 			if (this.$refs.tabs?.$refs?.current?.reload)
 				this.$refs.tabs.$refs.current.reload();
 		},
+		reloadDataStudent(){
+			//TODO(check)
+			this.localStudent = null;
+			const studentArr = this.students;
+
+			if (!studentArr || !studentArr.length) {
+				console.log("no data");
+				return;
+			}
+
+			console.log("uid " + studentArr[0].uid);
+
+			this.$api
+				.call(ApiStudent.uid(studentArr[0].uid, this.currentSemester))
+				.then(result => {
+					this.localStudent = result.data;
+				});
+		}
 	},
 	created() {
 		this.loadConfig();
 	},
+	/*	//TODO(remove)
+	* 		{{headerKey}} {{localStudent?.[0]?.uid}} <br> {{ students?.[0]?.uid }}
+	* */
 	template: `
 	<div class="stv-details h-100 d-flex flex-column">
 		<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
@@ -102,7 +124,8 @@ export default {
 		</div>
 		<div v-else-if="configStudent && configStudents" class="d-flex flex-column h-100">
 			<fhc-header
-				:headerData="students"
+				:key="headerKey"
+				:headerData="localStudent || students"
 				typeHeader="student"
 			>
 			</fhc-header>
@@ -110,7 +133,7 @@ export default {
 				v-if="students.length == 1"
 				ref="tabs" 
 				:useprimevue="true"
-				:modelValue="students[0]"
+				:modelValue="localStudent[0] || students[0]"
 				:config="config"
 				:default="$route.params.tab"
 				style="flex: 1 1 0%; height: 0%"