blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-14 10:39:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

use skeletons for all data in studentHeader

Browse Source
This commit is contained in:
ma0068
2026-03-16 11:26:23 +01:00
parent df124db84a
commit c49e32c4ac
2 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/DetailHeader/DetailHeader.js
+55 -13
View File
@@ -44,6 +44,10 @@ export default {
currentSemester: {
type: String,
default: ''
},
isLoading: {
type: Boolean,
default: false
}
},
computed: {
@@ -107,7 +111,10 @@ export default {
leitungData: {},
isFetchingIssues: false,
noCurrentStatus: false,
semesterStatiLoading: false
semesterStatiLoading: false,
leitungOrgLoading: false,
departmentDataLoading: false,
headerDataLoading: false
};
},
methods: {
@@ -123,29 +130,40 @@ export default {
});
},
getHeader(person_id) {
this.headerDataLoading = true;
return this.$api
.call(ApiDetailHeader.getHeader(person_id))
.then(result => {
this.headerDataMa = result.data;
})
.catch(this.$fhcAlert.handleSystemError);
.catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.headerDataLoading = false;
});
},
loadDepartmentData(mitarbeiter_uid) {
this.departmentDataLoading = true;
return this.$api
.call(ApiDetailHeader.getPersonAbteilung(mitarbeiter_uid))
.then(result => {
this.departmentData = result.data;
})
.catch(this.$fhcAlert.handleSystemError);
.catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.departmentDataLoading = false;
});
},
getLeitungOrg(oekurzbz){
this.leitungOrgLoading = true;
return this.$api
.call(ApiDetailHeader.getLeitungOrg(oekurzbz))
.then(result => {
this.leitungData = result.data;
})
.catch(this.$fhcAlert.handleSystemError);
.catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.leitungOrgLoading = false;
});
},
async goToLeitung() {
this.loadHeaderData(this.leitungData.person_id, this.leitungData.uid);
@@ -205,7 +223,7 @@ export default {
})
.catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.semesterStatiLoading = false
this.semesterStatiLoading = false;
});
},
setNoCurrentStatus() {
@@ -279,7 +297,7 @@ export default {
</div>
<div v-if="headerData.length == 1">
<div class="d-flex align-items-center gap-3">
<div v-if="!headerDataLoading" class="d-flex align-items-center gap-3">
<h2 class="h4">
{{headerData[0].titelpre}}
{{headerData[0].vorname}}
@@ -289,10 +307,19 @@ export default {
</h2>
<h6 v-if="headerData[0].unruly" class="badge" :class="'bg-unruly rounded-0'"><strong>unruly</strong></h6>
</div>
<div v-else class="d-flex align-items-center gap-3">
<pv-skeleton width="15rem" height="2rem" borderRadius="16px"></pv-skeleton>
<h6 v-if="headerData[0].unruly" class="badge" :class="'bg-unruly rounded-0'"><strong>unruly</strong></h6>
</div>
<h5 class="h6 d-flex align-items-center flex-wrap gap-1">
<strong class="text-muted">{{$p.t('lehre', 'studiengang')}} </strong>
<span v-if="!headerDataLoading">
{{headerData[0].stg_bezeichnung}} ({{headerData[0].studiengang}})
</span>
<span v-else>
<pv-skeleton width="10rem"></pv-skeleton>
</span>
<template v-if="!semesterStatiLoading">
<strong v-if="headerData[0].semester != null" class="text-muted"> | {{$p.t('lehre', 'semester')}} </strong>
{{headerData[0].semester}}
@@ -311,11 +338,14 @@ export default {
</template>
</h5>
<h5 class="h6">
<h5 class="h6 d-flex align-items-center flex-wrap gap-1">
<strong class="text-muted">Email </strong>
<span>
<span v-if="!headerDataLoading">
<a :href="'mailto:'+headerData[0]?.mail_intern">{{headerData[0].mail_intern}}</a>
</span>
<span v-else>
<pv-skeleton width="10rem"></pv-skeleton>
</span>
<strong class="text-muted"> | Status </strong>
<span v-if="noCurrentStatus">
<strong class="text-danger">{{$p.t('lehre', 'textNoStatusInSem', { sem: currentSemester}) }}</strong>
@@ -332,19 +362,31 @@ export default {
</div>
<div v-if="hasTileGammaSlot" class="px-2" style="border-left: 1px solid #EEE">
<h4 class="mb-1 text-center"><slot name="titleGammaTile"></slot></h4>
<h6 class="text-muted text-center"><slot name="valueGammaTile"></slot></h6>
<h6 class="text-muted d-flex align-items-center justify-content-center flex-wrap gap-1">
<pv-skeleton v-if="isLoading" width="4rem"></pv-skeleton>
<slot v-else name="valueGammaTile"></slot>
</h6>
</div>
<div v-if="hasTileBetaSlot" class="px-2" style="border-left: 1px solid #EEE">
<h4 class="mb-1 text-center"><slot name="titleBetaTile"></slot></h4>
<h6 class="text-muted text-center"><slot name="valueBetaTile"></slot></h6>
<h6 class="text-muted d-flex align-items-center justify-content-center flex-wrap gap-1">
<pv-skeleton v-if="isLoading" width="4rem"></pv-skeleton>
<slot v-else name="valueBetaTile"></slot>
</h6>
</div>
<div v-if="hasTileAlphaSlot" class="px-2" style="border-left: 1px solid #EEE">
<h4 class="mb-1 text-center"><slot name="titleAlphaTile"></slot></h4>
<h6 class="text-muted text-center"><slot name="valueAlphaTile"></slot></h6>
<h6 class="text-muted d-flex align-items-center justify-content-center flex-wrap gap-1">
<pv-skeleton v-if="isLoading" width="4rem"></pv-skeleton>
<slot v-else name="valueAlphaTile"></slot>
</h6>
</div>
<div v-if="hasTileUIDSlot" class="px-2" style="border-left: 1px solid #EEE">
<h4 class="mb-1 text-center">UID</h4>
<h6 class="text-muted text-center"><slot name="uid"></slot></h6>
<h6 class="text-muted d-flex align-items-center justify-content-center flex-wrap gap-1">
<pv-skeleton v-if="isLoading" width="4rem"></pv-skeleton>
<slot v-else name="uid"></slot>
</h6>
</div>
</div>
</div>
public/js/components/Stv/Studentenverwaltung/Details.js
+4
View File
@@ -47,6 +47,9 @@ export default {
}
return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid && !value.showOnlyWithUid));
},
isLoading() {
return this.students === null; //null-> loading, [] -> empty, [...] -> data, necessary for skeleton in tiles
},
tile_PersId(){
let tile = this.students[0].person_id != null ? this.students[0].person_id : '-';
return tile;
@@ -133,6 +136,7 @@ export default {
typeHeader="student"
@reload="reloadList"
fotoEditable
:isLoading="isLoading"
>
<template #uid>{{students[0].uid}}</template>
<template #titleAlphaTile>PersID</template>