From 7da8a9ed79cb00c02ec1ef207f2ae6fd3c64808f Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Tue, 3 Jun 2025 10:39:22 +0200
Subject: [PATCH] refactor header as component, show uid under profilpicture

---
 .../components/DetailHeader/DetailHeader.js   | 100 ++++++++++++++++++
 .../Stv/Studentenverwaltung/Details.js        |  48 ++-------
 2 files changed, 108 insertions(+), 40 deletions(-)
 create mode 100644 public/js/components/DetailHeader/DetailHeader.js

diff --git a/public/js/components/DetailHeader/DetailHeader.js b/public/js/components/DetailHeader/DetailHeader.js
new file mode 100644
index 000000000..49cbfbad8
--- /dev/null
+++ b/public/js/components/DetailHeader/DetailHeader.js
@@ -0,0 +1,100 @@
+export default {
+	name: 'DetailHeader',
+	props: {
+		headerData: {
+			type: Object,
+			required: true
+		},
+		typeHeader: {
+			type: String,
+			default: 'student',
+			validator(value) {
+				return [
+					'student',
+					'mitarbeiter',
+				].includes(value)
+			}
+		}
+	},
+	computed: {
+		appRoot() {
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root;
+		},
+	},
+	data(){
+		return{};
+	},
+	methods: {
+		//TODO(Manu) finish for Vertragsverwaltung
+		getVorgesetzer(){},
+	},
+	template: `
+		<div class="core-header d-flex justify-content-start align-items-center w-100 pb-3 gap-3" style="max-height:8rem">
+
+			<div
+				v-for="person in headerData"
+				:key="person.person_id"
+				class="d-flex flex-column align-items-center h-100"
+			>
+				<img
+				  class="d-block h-100 rounded"
+				  :alt="'Profilbild ' + person.uid"
+				  :src="appRoot + 'cis/public/bild.php?src=person&person_id=' + person.person_id"
+				/>
+				<small>{{person.uid}}</small>
+			</div>
+
+			<div v-if="headerData.length == 1">
+				<h2 class="h4">
+					{{headerData[0].titelpre}}
+					{{headerData[0].vorname}}
+					{{headerData[0].nachname}}
+					{{headerData[0].titelpost}}
+				</h2>
+
+				<h5 v-if="typeHeader==='student'" class="h6">
+					<strong class="text-muted">Studiengang </strong>
+					 {{headerData[0].studiengang}}
+					<strong v-if="headerData[0].semester" class="text-muted"> | Semester </strong>
+					  {{headerData[0].semester}}
+					<strong v-if="headerData[0].verband" class="text-muted"> | Verband </strong>
+					{{headerData[0].verband}}
+					<strong v-if="headerData[0].gruppe" class="text-muted"> | Gruppe </strong>
+					{{headerData[0].gruppe}}
+				 </h5>
+				<h5 v-if="typeHeader==='mitarbeiter'" class="h6">
+				<strong class="text-muted">Team </strong>
+				 {{headerData[0].studiengang}}
+				<strong v-if="headerData[0].semester" class="text-muted"> | Vorgesetzte*r </strong>
+				  {{headerData[0].semester}}
+			  </h5>
+
+			  <h5 v-if="typeHeader==='student'" 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>
+				 {{headerData[0].status}}
+				<strong class="text-muted"> | MatrNr </strong>
+				  {{headerData[0].matr_nr}}
+				<strong class="text-muted"> | UID </strong>
+				{{headerData[0].uid}}
+				<strong class="text-muted"> | Person ID </strong>
+				{{headerData[0].person_id}}
+			  </h5>
+			  <h5 v-if="typeHeader==='mitarbeiter'" 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"> | Durchwahl </strong>
+				 {{headerData[0].status}}
+			  </h5>
+
+			</div>
+
+		</div>
+
+	`
+}
\ No newline at end of file
diff --git a/public/js/components/Stv/Studentenverwaltung/Details.js b/public/js/components/Stv/Studentenverwaltung/Details.js
index a56c59e7f..3cfcc2061 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details.js
@@ -1,4 +1,5 @@
 import FhcTabs from "../../Tabs.js";
+import FhcHeader from "../../DetailHeader/DetailHeader.js";
 
 import ApiStvApp from '../../../api/factory/stv/app.js';
 
@@ -8,7 +9,8 @@ import ApiStvApp from '../../../api/factory/stv/app.js';
 export default {
 	name: "DetailsPrestudent",
 	components: {
-		FhcTabs
+		FhcTabs,
+		FhcHeader
 	},
 	data() {
 		return {
@@ -61,45 +63,11 @@ export default {
 			Bitte StudentIn auswählen!
 		</div>
 		<div v-else-if="configStudent && configStudents" class="d-flex flex-column h-100 pb-3">
-			<div class="d-flex justify-content-start align-items-center w-100 pb-3 gap-3" style="max-height:8rem">
-				<img v-for="student in students" :key="student.person_id" class="d-block h-100 rounded" alt="profilbild" :src="appRoot + 'cis/public/bild.php?src=person&person_id=' + student.person_id">
-	
-
-					
-				<div v-if="students.length == 1">
-					<h2 class="h4">
-						{{students[0].titelpre}}
-						{{students[0].vorname}}
-						{{students[0].nachname}}
-						{{students[0].titelpost}}
-					</h2>
-					<h5 class="h6">
-						<strong class="text-muted">Studiengang </strong>
-						 {{students[0].studiengang}}
-						<strong v-if="students[0].semester" class="text-muted"> | Semester </strong>
-						  {{students[0].semester}}
-						<strong v-if="students[0].verband" class="text-muted"> | Verband </strong>
-						{{students[0].verband}}
-						<strong v-if="students[0].gruppe" class="text-muted"> | Gruppe </strong>
-						{{students[0].gruppe}}
-					  </h5>
-					  <h5 class="h6">
-						<strong class="text-muted">Email </strong>
-						<span>
-							<a :href="'mailto:'+students[0]?.mail_intern">{{students[0].mail_intern}}</a>
-						</span>
-						<strong class="text-muted"> | Status </strong>
-						 {{students[0].status}}
-						<strong class="text-muted"> | MatrNr </strong>
-						  {{students[0].matr_nr}}
-						<strong class="text-muted"> | UID </strong>
-						{{students[0].uid}}
-						<strong class="text-muted"> | Person ID </strong>
-						{{students[0].person_id}}
-					  </h5>
-
-				</div>
-			</div>
+			<fhc-header
+				:headerData="students"
+				typeHeader="student"
+			>
+			</fhc-header>
 			<fhc-tabs
 				v-if="students.length == 1"
 				ref="tabs"