adapt headerFilter, remove frontend filter, add backend filter aktiv mitarbeiter

public/js/api/factory/vertraege/vertraege.js

@@ -126,6 +126,7 @@ export default {
 			params
 		};
 	},
+	//loaded by mitarbeiter_header_js
 	getMitarbeiter(){
 		return {
 			method: 'get',

public/js/components/DetailHeader/DetailHeader.js

@@ -181,13 +181,13 @@ export default {
 		</template>
 
 		<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;">
+
+				<div class="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 h-100 rounded"
+					  class="d-block w-100 h-100 rounded"
 					  alt="Profilbild"
 					  :src="'data:image/jpeg;base64,' + headerDataMa.foto"
+					  style="object-fit: contain;"
 					/>
 					<template v-if="headerDataMa.foto_sperre">
 						<i
@@ -198,28 +198,42 @@ export default {
 				</div>
 
 				<!--show Ma-Details-->
-				<div class="col-md-10">
-					<h5>{{headerDataMa.titelpre}} {{headerDataMa.vorname}} {{headerDataMa.nachname}}<span v-if="headerDataMa?.titelpost">, </span> {{headerDataMa.titelpost}}
-					</h5>
+				<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="redirectToLeitung">
+					<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 v-if="headerDataMa && (headerDataMa.alias === undefined || headerDataMa.alias === null || headerDataMa.alias === '')">
+							<a :href="'mailto:' + mitarbeiter_uid + '@' + domain">
+							  {{ mitarbeiter_uid }}@{{ domain }}
+							</a>
 						</span>
-						<span v-if="headerDataMa?.alias">
+						<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>
 				</div>
-			</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">
+							<h4 class="mb-1">PNr</h4>
+							<h6 class="text-muted">{{ headerDataMa?.person_id }}</h6>
+						</div>
+						<div class="px-2" style="border-left: 1px solid #EEE">
+							<h4 class="mb-1">UID</h4>
+							<h6 class="text-muted">{{ mitarbeiter_uid }}</h6>
+						</div>
+					</div>
+				</div>
+
 		</template>
 	</div>
 	`

public/js/components/Vertraege/MitarbeiterHeader.js

@@ -15,9 +15,14 @@ export default {
 			type: Object,
 			required: true
 		},
+		domain: {
+			type: String,
+			required: true
+		}
 	},
 	data() {
 		return {
+			tabulatorData: [],
 			tabulatorOptions: {
 				ajaxURL: 'dummy',
 				ajaxRequestFunc: () => this.$api.call(
@@ -25,23 +30,15 @@ export default {
 				),
 				ajaxResponse: (url, params, response) => response.data,
 				columns: [
-					{title: "UID", field: "uid", headerFilter:"input"},
-					{title: "personID", field: "person_id", visible: false, headerFilter:"input"},
-					{title: "Nachname", field: "nachname", headerFilter:"input"},
-					{title: "Vorname", field: "vorname", headerFilter:"input"},
-					{
-						title: "Aktiv", field: "aktiv", headerFilter: "input",
-						formatter:"tickCross",
-						hozAlign:"center",
-						formatterParams: {
-							tickElement: '<i class="fa fa-check text-success"></i>',
-							crossElement: '<i class="fa fa-xmark text-danger"></i>'
-						}
-					},
+					{title: "UID", field: "uid", headerFilter: "input"},
+					{title: "personID", field: "person_id", visible: false, headerFilter: "input"},
+					{title: "Nachname", field: "nachname", visible: true, headerFilter: "input"},
+					{title: "Vorname", field: "vorname", visible: true, headerFilter: "input"},
 					{
 						title: "Geburtsdatum",
 						field: "gebdatum",
-						headerFilter:"input",
+						headerFilter: "input",
+						visible: true,
 						formatter: function (cell) {
 							const dateStr = cell.getValue();
 							const date = new Date(dateStr);
@@ -52,12 +49,38 @@ export default {
 							});
 						}
 					},
-					{title: "Unternehmen", field: "unternehmen", headerFilter:"input"},
-					{title: "Vertragsarten", field: "vertragsarten", headerFilter:"input"},
-					{title: "Ids Dienstverträge", field: "ids", headerFilter:"input"},
+					{
+						title: "Aktiv", field: "aktiv", visible: false, headerFilter: true, width: 85,
+						formatter:"tickCross",
+						hozAlign:"center",
+						formatter: function(cell) {
+							return cell.getValue() === "aktiv"
+								? '<i class="fa fa-check text-success"></i>'
+								: '<i class="fa fa-xmark text-danger"></i>';
+						}
+					},
+					{title: "Unternehmen", field: "unternehmen", visible: false, headerFilter: "input"},
+					{title: "Vertragsarten", field: "vertragsarten", visible: true, headerFilter: "input"},
+					{title: "Ids Dienstverträge", field: "ids", visible: true, headerFilter: "input"},
+
+					{
+						title: "email", field: "email", headerFilter: "input",
+						visible: false,
+						formatter: (cell, formatterParams, onRendered) => {
+
+							let email = cell.getValue() + '@';
+
+							let container = document.createElement('div');
+							container.className = "d-flex";
+							container.append(email);
+							container.append(cell.getData().emailDomain);
+							return container;
+						},
+					},
 				],
 				layout: 'fitColumns',
-				persistenceID: 'core-mitarbeiter',
+				persistenceID: 'core-mitarbeiter_20250901',
+				footerElement: '<div>&sum; <span id="search_count"></span> / <span id="total_count"></span></div>',
 				selectableRangeMode: 'click',
 				selectable: true,
 			},
@@ -74,18 +97,21 @@ export default {
 
 						let cm = this.$refs.table.tabulator.columnManager;
 
+						cm.getColumnByField('uid').component.updateDefinition({
+							visible: true
+						});
+
 						cm.getColumnByField('person_id').component.updateDefinition({
 							title: this.$p.t('person', 'person_id')
 						});
 
 						cm.getColumnByField('nachname').component.updateDefinition({
-							title: this.$p.t('person', 'nachname')
+							title: this.$p.t('person', 'nachname'),
+							visible: true
 						});
 						cm.getColumnByField('vorname').component.updateDefinition({
-							title: this.$p.t('person', 'vorname')
-						});
-						cm.getColumnByField('aktiv').component.updateDefinition({
-							title: this.$p.t('global', 'aktiv')
+							title: this.$p.t('person', 'vorname'),
+							visible: true
 						});
 						cm.getColumnByField('gebdatum').component.updateDefinition({
 							title: this.$p.t('person', 'geburtsdatum')
@@ -94,17 +120,41 @@ export default {
 							title: this.$p.t('person', 'firma')
 						});
 						cm.getColumnByField('vertragsarten').component.updateDefinition({
-							title: this.$p.t('vertrag', 'vertragsarten')
+							title: this.$p.t('vertrag', 'vertragsarten'),
+							visible: true
 						});
 						cm.getColumnByField('ids').component.updateDefinition({
-							title: this.$p.t('vertrag', 'idsDienstverhaeltnisse')
+							title: this.$p.t('vertrag', 'idsDienstverhaeltnisse'),
+							visible: true
+						});
+						cm.getColumnByField('aktiv').component.updateDefinition({
+							title: this.$p.t('global', 'aktiv'),
+							width: 45
 						});
 					}
-				}
+				},
+				{
+					event: "dataFiltered",
+					handler: function(filters, rows) {
+						let el = document.getElementById("search_count");
+						el.innerHTML = rows.length;
+					}
+				},
+				{
+					event: 'dataLoaded',
+					handler: (data) => {
+						let el = document.getElementById("total_count");
+						el.innerHTML = data.length;
+
+						this.tabulatorData = data.map(item => {
+							item.emailDomain = document.createElement('div');
+							return item;
+						});
+					}
+				},
 			],
 			selectedPerson: null,
 			selectedUid: null,
-			isFilterSet: false,
 		}
 	},
 	methods: {
@@ -117,41 +167,22 @@ export default {
 				uid: this.selectedUid
 			});
 		},
-		onSwitchChange() {
-			if (this.isFilterSet) {
-				this.$refs.table.tabulator.setFilter("aktiv", "=", true);
-			}
-			else {
-				this.$refs.table.tabulator.clearFilter();
-			}
-		},
 	},
 	template: `
-	<div class="core-mitarbeiter-header">
-		<h4>{{$p.t('vertrag', 'vertragsverwaltung')}}</h4>
-		
-	
-<!--	filter: show only active employees-->
-		<div class="justify-content-end py-3">
-			<form-input
-				container-class="form-switch"
-				type="checkbox"
-				:label="$p.t('vertrag/nurAktiveMaAnzeigen')"
-				v-model="isFilterSet"
-				@change="onSwitchChange"
-				>
-			</form-input>
-		</div>
 		
 		<core-filter-cmpt
 			ref="table"
 			:tabulator-options="tabulatorOptions"
 			:tabulator-events="tabulatorEvents"
-			table-only
+			filter-type="Vertragsverwaltung"
 			:side-menu="false"
 			>
 		</core-filter-cmpt>
 
-	</div>`
+		<Teleport v-for="data in tabulatorData" :key="data.uid" :to="data.emailDomain">
+			{{domain}}
+		</Teleport>
+
+`
 }
 

public/js/components/Vertraege/Vertragsverwaltung.js

@@ -46,12 +46,12 @@ export default {
 		<core-navigation-cmpt/>
 
 		<div class="vv">
-			<main>
 				<vertical-split ref="vsplit">
 					<template #top>	
 						<div class="d-flex flex-column" style="height: 100%;">
 							<mitarbeiter-header
 								:endpoint="endpoint"
+								:domain="config.domain"
 								@selectionChanged="handleSelection"
 								/>
 						</div>
@@ -72,7 +72,6 @@ export default {
 						</div>
 					</template>
 				</vertical-split>
-			</main>	
 		</div>
 		`
 }