Prefetch Tab config to prevent reloading tabcontent on student change

This commit is contained in:
cgfhtw
2024-07-15 10:58:10 +02:00
parent af127d666d
commit 9af7ec3ff5
@@ -7,6 +7,12 @@ export default {
components: {
FhcTabs
},
data() {
return {
configStudent: null,
configStudents: null
};
},
props: {
students: Array
},
@@ -21,20 +27,34 @@ export default {
this.$refs.tabs.$refs.current.reload();
}
},
created() {
this.$fhcApi
.factory.stv.configStudent()
.then(result => {
this.configStudent = result.data;
})
.catch(this.$fhcAlert.handleSystemError);
this.$fhcApi
.factory.stv.configStudents()
.then(result => {
this.configStudents = result.data;
})
.catch(this.$fhcAlert.handleSystemError);
},
template: `
<div class="stv-details h-100 pb-3 d-flex flex-column">
<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
Bitte StudentIn auswählen!
</div>
<div v-else class="d-flex flex-column h-100 pb-3">
<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].titlepre}} {{students[0].vorname}} {{students[0].nachname}} {{students[0].titlepost}}</h2>
</div>
</div>
<fhc-tabs v-if="students.length == 1" ref="tabs" :modelValue="students[0]" :config="$fhcApi.factory.stv.configStudent()" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
<fhc-tabs v-else ref="tabs" :modelValue="students" :config="$fhcApi.factory.stv.configStudents()" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
<fhc-tabs v-if="students.length == 1" ref="tabs" :modelValue="students[0]" :config="configStudent" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
<fhc-tabs v-else ref="tabs" :modelValue="students" :config="configStudents" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
</div>
</div>`
};