mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-22 17:32:18 +00:00
Merge branch 'master' into feature-71775/StudVW_ChangeSem_Behaviour
This commit is contained in:
Harald Bamberger
@@ -1,15 +1,11 @@
|
||||
import ApiDetailHeader from "../../api/factory/detailHeader.js";
|
||||
import ApiHandleFoto from "../../api/factory/fotoHandling.js";
|
||||
import ModalUploadFoto from "./Modal/UploadFoto.js";
|
||||
|
||||
export default {
|
||||
name: 'DetailHeader',
|
||||
inject: {
|
||||
domain: {
|
||||
from: 'configDomain',
|
||||
default: 'technikum-wien.at'
|
||||
},
|
||||
currentSemester: {
|
||||
from: 'currentSemester',
|
||||
},
|
||||
components: {
|
||||
ModalUploadFoto
|
||||
},
|
||||
props: {
|
||||
headerData: {
|
||||
@@ -20,6 +16,19 @@ export default {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
mitarbeiter_uid: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
fotoEditable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
domain: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
typeHeader: {
|
||||
type: String,
|
||||
default: 'student',
|
||||
@@ -29,6 +38,10 @@ export default {
|
||||
'mitarbeiter',
|
||||
].includes(value)
|
||||
}
|
||||
},
|
||||
currentSemester: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -39,49 +52,39 @@ export default {
|
||||
if (this.typeHeader === 'student') return this.headerData;
|
||||
if (this.typeHeader === 'mitarbeiter') return this.person_id;
|
||||
return null;
|
||||
},
|
||||
hasTileAlphaSlot() {
|
||||
return !!this.$slots.titleAlphaTile
|
||||
},
|
||||
hasTileBetaSlot() {
|
||||
return !!this.$slots.titleBetaTile
|
||||
},
|
||||
hasTileGammaSlot() {
|
||||
return !!this.$slots.titleGammaTile
|
||||
},
|
||||
hasTileUIDSlot() {
|
||||
return !!this.$slots.uid
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.person_id) {
|
||||
this.getHeader(this.person_id);
|
||||
|
||||
this.loadDepartmentData(this.mitarbeiter_uid)
|
||||
.then(() => {
|
||||
// Call getLeitungOrg only after departmentData is loaded
|
||||
this.getLeitungOrg(this.departmentData.oe_kurzbz);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading department data:", error);
|
||||
});
|
||||
if (this.typeHeader === 'student') {
|
||||
if (!this.headerData) {
|
||||
throw new Error('[DetailHeader] "headerData" is required.')
|
||||
}
|
||||
} else if (this.typeHeader === 'mitarbeiter') {
|
||||
if (!this.person_id || !this.mitarbeiter_uid || !this.domain) {
|
||||
throw new Error(
|
||||
'[DetailHeader] "person_id", "mitarbeiter_uid", and "domain" are requried.'
|
||||
)
|
||||
}
|
||||
this.loadHeaderData(this.person_id, this.mitarbeiter_uid);
|
||||
}
|
||||
|
||||
/* if (this.headerData && this.headerData.length) { //bereits im watcher
|
||||
this.getSemesterStati(this.headerData[0].prestudent_id);
|
||||
}*/
|
||||
},
|
||||
watch: {
|
||||
person_id: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.getHeader(this.person_id);
|
||||
this.loadDepartmentData(this.person_id).
|
||||
then(() => {
|
||||
this.getLeitungOrg(this.departmentData.oe_kurzbz);
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
currentSemester: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
if(!this.semesterStati.some(item => item.studiensemester_kurzbz === this.currentSemester)) {
|
||||
this.noCurrentStatus = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.noCurrentStatus = false;
|
||||
}
|
||||
this.loadHeaderData(newVal, this.mitarbeiter_uid);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
@@ -95,166 +98,331 @@ export default {
|
||||
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: {},
|
||||
isFetchingIssues: false,
|
||||
noCurrentStatus: false,
|
||||
semesterStatiLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadHeaderData(person_id, mitarbeiter_uid){
|
||||
this.getHeader(person_id);
|
||||
this.loadDepartmentData(mitarbeiter_uid)
|
||||
.then(() => {
|
||||
// Call getLeitungOrg only after departmentData is loaded
|
||||
this.getLeitungOrg(this.departmentData.oe_kurzbz);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading header data: ", error);
|
||||
});
|
||||
},
|
||||
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;">
|
||||
})
|
||||
.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);
|
||||
},
|
||||
async goToLeitung() {
|
||||
this.loadHeaderData(this.leitungData.person_id, this.leitungData.uid);
|
||||
this.redirectToLeitung();
|
||||
},
|
||||
redirectToLeitung() {
|
||||
this.$emit('redirectToLeitung', {
|
||||
person_id: this.leitungData.person_id,
|
||||
uid: this.leitungData.uid
|
||||
});
|
||||
},
|
||||
showModal(person_id){
|
||||
this.$refs.modalFoto.open(person_id);
|
||||
},
|
||||
showDeleteModal(person_id){
|
||||
this.$fhcAlert
|
||||
.confirmDelete()
|
||||
.then(result => result
|
||||
? person_id
|
||||
: Promise.reject({handled: true}))
|
||||
.then(this.deleteFoto)
|
||||
.catch(this.$fhcAlert.handleSystemError);
|
||||
},
|
||||
deleteFoto(person_id){
|
||||
return this.$api
|
||||
.call(ApiHandleFoto.deleteFoto(person_id))
|
||||
.then(result => {
|
||||
this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
|
||||
})
|
||||
.catch(this.$fhcAlert.handleSystemError)
|
||||
.finally(()=> {
|
||||
this.reload();
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
if(this.person_id) {
|
||||
this.loadHeaderData(this.person_id, this.mitarbeiter_uid);
|
||||
}
|
||||
else {
|
||||
this.$emit('reload');
|
||||
}
|
||||
},
|
||||
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){
|
||||
this.semesterStatiLoading = true;
|
||||
this.$api
|
||||
.call(ApiDetailHeader.getSemesterStati(prestudent_id))
|
||||
.then(result => {
|
||||
this.semesterStati = result.data;
|
||||
this.setNoCurrentStatus();
|
||||
})
|
||||
.catch(this.$fhcAlert.handleSystemError)
|
||||
.finally(() => {
|
||||
this.semesterStatiLoading = false
|
||||
});
|
||||
},
|
||||
setNoCurrentStatus() {
|
||||
if(!Array.isArray(this.semesterStati))
|
||||
{
|
||||
this.noCurrentStatus = false;
|
||||
}
|
||||
|
||||
<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"
|
||||
if(!this.semesterStati.some(item => item.studiensemester_kurzbz === this.currentSemester)) {
|
||||
this.noCurrentStatus = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.noCurrentStatus = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="core-header d-flex justify-content-start align-items-center w-100 overflow-auto pb-2 gap-3" style="max-height:9rem; min-width: 37.5rem;">
|
||||
|
||||
<modal-upload-foto
|
||||
v-if="person_id"
|
||||
ref="modalFoto"
|
||||
:person_id="person_id"
|
||||
@reload="reload"
|
||||
>
|
||||
<img
|
||||
class="d-block rounded"
|
||||
style="height: 84px;"
|
||||
alt="Profilbild"
|
||||
:src="getFotoSrc(person.foto)"
|
||||
/>
|
||||
</modal-upload-foto>
|
||||
<modal-upload-foto
|
||||
v-else
|
||||
ref="modalFoto"
|
||||
:person_id="headerData[0].person_id"
|
||||
@reload="reload"
|
||||
>
|
||||
</modal-upload-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>
|
||||
<template v-if="typeHeader==='student'">
|
||||
|
||||
<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>
|
||||
<div
|
||||
v-for="person in headerData"
|
||||
:key="person.person_id"
|
||||
class="foto-container d-flex flex-column align-items-center h-100 position-relative d-inline-block"
|
||||
>
|
||||
<img
|
||||
class="d-block rounded"
|
||||
style="height: 75px;"
|
||||
alt="Profilbild"
|
||||
:src="getFotoSrc(person.foto)"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<template v-if="fotoEditable">
|
||||
<button
|
||||
type="button"
|
||||
class="fotoedit buttonleft btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
|
||||
@click="showDeleteModal(headerData[0].person_id)">
|
||||
<i class="fa fa-xmark"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="fotoedit buttonright btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
|
||||
@click="showModal(headerData[0].person_id)">
|
||||
<i class="fa fa-pen"></i>
|
||||
</button>
|
||||
</template>
|
||||
<small class="text-muted">{{person.uid}}</small>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div v-if="headerData.length == 1">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<h2 class="h4">
|
||||
{{headerData[0].titelpre}}
|
||||
{{headerData[0].vorname}}
|
||||
{{headerData[0].nachname}}
|
||||
<span v-if="headerData[0].titelpost">, </span>
|
||||
{{headerData[0].titelpost}}
|
||||
</h2>
|
||||
<h6 v-if="headerData[0].unruly" class="badge" :class="'bg-unruly rounded-0'"><strong>unruly</strong></h6>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h5 class="h6" v-if="!semesterStatiLoading">
|
||||
<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>
|
||||
|
||||
<!--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>
|
||||
<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>
|
||||
</h5>
|
||||
|
||||
</div>
|
||||
<div v-if="headerData.length == 1" class="col-md-1 d-flex flex-column align-items-end justify-content-start ms-auto">
|
||||
<div class="d-flex py-1">
|
||||
<div class="px-2" style="min-width: 100px;">
|
||||
<slot name="issues"></slot>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-if="typeHeader==='mitarbeiter'">
|
||||
|
||||
<div class="foto-container col-md-2 d-flex justify-content-start align-items-center w-30 pb-3 gap-3 mt-3 position-relative" style="max-height: 8rem; max-width: 6rem; overflow: hidden;">
|
||||
<img
|
||||
class="d-block w-100 h-100 rounded"
|
||||
style="height: 84px; object-fit: contain;"
|
||||
alt="Profilbild"
|
||||
:src="getFotoSrc(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>
|
||||
<template v-if="fotoEditable">
|
||||
<button
|
||||
type="button"
|
||||
class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
|
||||
style="z-index: 104; font-size: 1rem; width: 2.5rem; height: 2.5rem; opacity:0; transition: opacity 0.2s; top:13%;"
|
||||
@click="showDeleteModal(person_id)">
|
||||
<i class="fa fa-xmark"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
|
||||
style="z-index: 104; font-size: 1rem; width: 2.5rem; height: 2.5rem; opacity:0; transition: opacity 0.2s; top:13%;"
|
||||
@click="showModal(person_id)">
|
||||
<i class="fa fa-pen"></i>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!--show Ma-Details-->
|
||||
<div class="col-md-9 text-nowrap mt-2">
|
||||
<h4>{{headerDataMa.titelpre}} {{headerDataMa.vorname}} {{headerDataMa.nachname}}<span v-if="headerDataMa?.titelpost">, </span> {{headerDataMa.titelpost}}</h4>
|
||||
<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="goToLeitung">
|
||||
{{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}}
|
||||
</a>
|
||||
<p>
|
||||
<strong class="text-muted">Email </strong>
|
||||
<span v-if="headerDataMa && (headerDataMa.alias === undefined || headerDataMa.alias === null || headerDataMa.alias === '')">
|
||||
<a :href="'mailto:' + mitarbeiter_uid + '@' + domain">
|
||||
{{ mitarbeiter_uid }}@{{ domain }}
|
||||
</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
<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>
|
||||
<slot name="tag"></slot>
|
||||
</div>
|
||||
|
||||
<div class="col-md-1 d-flex flex-column align-items-end justify-content-start ms-auto">
|
||||
<div class="d-flex py-1">
|
||||
<div class="px-2" style="min-width: 100px;">
|
||||
<slot name="issues"></slot>
|
||||
</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>
|
||||
</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" :valueBetaTile="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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
`
|
||||
`
|
||||
}
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
import BsModal from "../../Bootstrap/Modal.js";
|
||||
import FormForm from "../../Form/Form.js";
|
||||
import FormInput from "../../Form/Input.js";
|
||||
|
||||
import ApiHandleFoto from "../../../../js/api/factory/fotoHandling.js";
|
||||
|
||||
export default {
|
||||
name: "modalUploadFoto",
|
||||
components: {
|
||||
BsModal,
|
||||
FormForm,
|
||||
FormInput,
|
||||
},
|
||||
props: {
|
||||
person_id: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
base64Image: null,
|
||||
file: null,
|
||||
preview: null,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open(person_id){
|
||||
this.$refs.modalUploadFoto.show(person_id);
|
||||
},
|
||||
onFileChange(e) {
|
||||
this.file = e.target.files[0];
|
||||
if (!this.file) return;
|
||||
|
||||
// convert File in base64
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (event) => {
|
||||
this.base64Image = event.target.result;
|
||||
this.preview = this.base64Image;
|
||||
};
|
||||
reader.readAsDataURL(this.file);
|
||||
},
|
||||
|
||||
async uploadImage(person_id) {
|
||||
if (!this.base64Image) {
|
||||
this.$fhcAlert.alertInfo(this.$p.t('header', 'alert_chooseFoto'));
|
||||
return;
|
||||
}
|
||||
|
||||
return this.$api
|
||||
.call(ApiHandleFoto.uploadFoto(person_id, {
|
||||
image: this.base64Image,
|
||||
filename: this.file.name
|
||||
}))
|
||||
.then(result => {
|
||||
this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successFotoUpload'));
|
||||
this.closeModal();
|
||||
this.$emit('reload');
|
||||
})
|
||||
.catch(this.$fhcAlert.handleSystemError);
|
||||
},
|
||||
resetModal(){
|
||||
this.base64Image = [];
|
||||
this.file = null;
|
||||
},
|
||||
closeModal(){
|
||||
this.resetModal();
|
||||
this.$refs.modalUploadFoto.hide();
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<bs-modal
|
||||
ref="modalUploadFoto"
|
||||
dialog-class="modal-dialog-scrollable"
|
||||
>
|
||||
<template #title>
|
||||
Upload Foto
|
||||
</template>
|
||||
|
||||
<form-form
|
||||
ref="formUploadFoto"
|
||||
>
|
||||
<div>
|
||||
<input class="form-control" type="file" @change="onFileChange" accept="image/*" />
|
||||
<div class="mt-3">
|
||||
<div>
|
||||
<img :src="base64Image" style="width:100px"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button class="btn btn-secondary" @click="closeModal()">{{$p.t('ui', 'cancel')}}</button>
|
||||
<button type="button" class="btn btn-primary" @click="uploadImage(person_id)">{{$p.t('ui', 'hochladen')}}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</bs-modal>
|
||||
`,
|
||||
}
|
||||
Reference in New Issue
Block a user