Refactor detailHeader component for PV21

- own css.file for fotouplad
- domain as prop
- refactor link to Leitung
- slots for issuetracking and tags
This commit is contained in:
ma0068
2025-10-13 16:07:51 +02:00
parent 3664428467
commit e9c039dad2
8 changed files with 38 additions and 44 deletions
@@ -209,7 +209,7 @@ class Mitarbeiter_model extends DB_Model
{ {
$qry = " $qry = "
SELECT SELECT
titelpre, vorname, nachname, titelpost, foto, foto_sperre, person_id, alias, telefonklappe titelpre, vorname, nachname, titelpost, foto, foto_sperre, person_id, alias, telefonklappe, personalnummer, mitarbeiter_uid
FROM FROM
public.tbl_person public.tbl_person
JOIN public.tbl_benutzer b USING(person_id) JOIN public.tbl_benutzer b USING(person_id)
+2 -1
View File
@@ -19,7 +19,8 @@
'public/css/components/vue-datepicker.css', 'public/css/components/vue-datepicker.css',
'public/css/components/primevue.css', 'public/css/components/primevue.css',
'public/css/Studentenverwaltung.css', 'public/css/Studentenverwaltung.css',
'public/css/components/function.css' 'public/css/components/function.css',
'public/css/components/Detailheader.css'
], ],
'customJSs' => [ 'customJSs' => [
'vendor/vuejs/vuedatepicker_js/vue-datepicker.iife.js' 'vendor/vuejs/vuedatepicker_js/vue-datepicker.iife.js'
+1
View File
@@ -18,6 +18,7 @@ $includesArray = array(
'public/css/components/vue-datepicker.css', 'public/css/components/vue-datepicker.css',
'public/css/components/primevue.css', 'public/css/components/primevue.css',
'public/css/Vertragsverwaltung.css', 'public/css/Vertragsverwaltung.css',
'public/css/components/Detailheader.css'
], ],
'customJSs' => [ 'customJSs' => [
#'vendor/npm-asset/primevue/tree/tree.min.js', #'vendor/npm-asset/primevue/tree/tree.min.js',
-4
View File
@@ -158,8 +158,4 @@ html {
.tiny-90 div.tox.tox-tinymce { .tiny-90 div.tox.tox-tinymce {
height: 90% !important; height: 90% !important;
}
.foto-container:hover .fotoedit {
opacity: 1 !important;
} }
-4
View File
@@ -18,7 +18,3 @@ html {
.vv { .vv {
margin-left: 0 !important; margin-left: 0 !important;
} }
.foto-container:hover .fotoedit {
opacity: 1 !important;
}
+3
View File
@@ -0,0 +1,3 @@
.foto-container:hover .fotoedit {
opacity: 1 !important;
}
@@ -7,12 +7,12 @@ export default {
components: { components: {
ModalUploadFoto ModalUploadFoto
}, },
inject: { /* inject: {
domain: { domain: {
from: 'configDomain', from: 'configDomain',
default: 'fhcomplete.info' default: 'fhcomplete.info'
}, },
}, },*/
props: { props: {
headerData: { headerData: {
type: Object, type: Object,
@@ -31,6 +31,10 @@ export default {
required: false, required: false,
default: false default: false
}, },
domain: {
type: String,
required: true
},
typeHeader: { typeHeader: {
type: String, type: String,
default: 'student', default: 'student',
@@ -54,14 +58,14 @@ export default {
}, },
created(){ created(){
if(this.person_id) { if(this.person_id) {
this.loadHeaderData(); this.loadHeaderData(this.person_id, this.mitarbeiter_uid);
} }
}, },
watch: { watch: {
person_id: { person_id: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
this.loadHeaderData(); this.loadHeaderData(newVal, this.mitarbeiter_uid);
} }
}, },
deep: true, deep: true,
@@ -76,9 +80,9 @@ export default {
}; };
}, },
methods: { methods: {
loadHeaderData(){ loadHeaderData(person_id, mitarbeiter_uid){
this.getHeader(this.person_id); this.getHeader(person_id);
this.loadDepartmentData(this.mitarbeiter_uid) this.loadDepartmentData(mitarbeiter_uid)
.then(() => { .then(() => {
// Call getLeitungOrg only after departmentData is loaded // Call getLeitungOrg only after departmentData is loaded
this.getLeitungOrg(this.departmentData.oe_kurzbz); this.getLeitungOrg(this.departmentData.oe_kurzbz);
@@ -112,11 +116,8 @@ export default {
}) })
.catch(this.$fhcAlert.handleSystemError); .catch(this.$fhcAlert.handleSystemError);
}, },
redirectToLeitung(){ async goToLeitung() {
this.$emit('redirectToLeitung', { this.loadHeaderData(this.leitungData.person_id, this.leitungData.uid);
person_id: this.leitungData.person_id,
uid: this.leitungData.uid
});
}, },
showModal(person_id){ showModal(person_id){
this.$refs.modalFoto.open(person_id); this.$refs.modalFoto.open(person_id);
@@ -143,11 +144,11 @@ export default {
}, },
reload() { reload() {
if(this.person_id) { if(this.person_id) {
this.loadHeaderData(); this.loadHeaderData(this.person_id, this.mitarbeiter_uid);
} }
else { /* else {
this.$emit('reload'); this.$emit('reload');
} }*/
}, },
}, },
template: ` template: `
@@ -282,7 +283,7 @@ export default {
{{departmentData.bezeichnung}} {{departmentData.bezeichnung}}
<span v-if="leitungData.uid"> | </span> <span v-if="leitungData.uid"> | </span>
<strong v-if="leitungData.uid" class="text-muted">Vorgesetzte*r </strong> <strong v-if="leitungData.uid" class="text-muted">Vorgesetzte*r </strong>
<a href="#" @click.prevent="redirectToLeitung" > <a href="#" @click.prevent="goToLeitung" >
{{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}} {{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}}
</a> </a>
<p> <p>
@@ -297,25 +298,24 @@ export default {
</span> </span>
<span v-if="headerDataMa?.telefonklappe" class="mb-2"> | <strong class="text-muted">DW </strong>{{headerDataMa?.telefonklappe}}</span> <span v-if="headerDataMa?.telefonklappe" class="mb-2"> | <strong class="text-muted">DW </strong>{{headerDataMa?.telefonklappe}}</span>
</p> </p>
<slot name="tag"></slot>
</div> </div>
<div class="col-md-1 d-flex flex-column align-items-end justify-content-start ms-auto"> <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="d-flex py-1">
<!-- TODO slots for Issue Tracking and Tags <div class="px-2" style="min-width: 100px;">
<class="px-2"> <slot name="card"></slot>
<h4 class="mb-1">Issues<a class="refresh-issues" title="checkIssues Person" @click="checkPerson"><i class="fas fa-sync"></i></a></h4> </div>
<h6 v-if="!isFetchingIssues" class="text-muted">122</h6> <div class="px-2">
</div> --> <h4 class="mb-1">PNr</h4>
<div class="px-2"> <h6 class="text-muted">{{ headerDataMa?.personalnummer }}</h6>
<h4 class="mb-1">PNr</h4> </div>
<h6 class="text-muted">{{ headerDataMa?.person_id }}</h6> <div class="px-2" style="border-left: 1px solid #EEE">
</div> <h4 class="mb-1">UID</h4>
<div class="px-2" style="border-left: 1px solid #EEE"> <h6 class="text-muted">{{ headerDataMa?.mitarbeiter_uid }}</h6>
<h4 class="mb-1">UID</h4>
<h6 class="text-muted">{{ mitarbeiter_uid }}</h6>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
</div> </div>
@@ -37,10 +37,6 @@ export default {
this.mitarbeiter_uid = selection.uid; this.mitarbeiter_uid = selection.uid;
this.person_id = selection.person_id; this.person_id = selection.person_id;
}, },
redirectToLeitung(leitung){
this.person_id = leitung.person_id;
this.mitarbeiter_uid = leitung.uid;
}
}, },
template: ` template: `
<!-- Navigation component --> <!-- Navigation component -->
@@ -60,11 +56,12 @@ export default {
<template #bottom> <template #bottom>
<div class="col" v-if="person_id!=null"> <div class="col" v-if="person_id!=null">
<fhc-header <fhc-header
ref="CoreDetailsHeaderRef"
:person_id="person_id" :person_id="person_id"
:mitarbeiter_uid="this.mitarbeiter_uid" :mitarbeiter_uid="this.mitarbeiter_uid"
typeHeader="mitarbeiter" typeHeader="mitarbeiter"
:domain="config.domain"
fotoEditable fotoEditable
@redirectToLeitung="redirectToLeitung"
></fhc-header> ></fhc-header>
<vertraege-mitarbeiter <vertraege-mitarbeiter
:endpoint="endpoint" :endpoint="endpoint"