refactor header as component, show uid under profilpicture

This commit is contained in:
ma0068
2025-06-03 10:39:22 +02:00
parent f233b33093
commit 7da8a9ed79
2 changed files with 108 additions and 40 deletions
@@ -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>
`
}
@@ -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"