new page vertragsverwaltung with employee header and details components

public/js/api/vertraege/person.js

@@ -49,5 +49,18 @@ export default {
 	},
 	deleteBetreuung(params) {
 		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/deleteBetreuung/' + params.vertrag_id, params);
+	},
+	getMitarbeiter(params){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/getMitarbeiter/');
+	},
+	getHeader(person_id){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/getHeader/' + person_id);
+	},
+	getPersonAbteilung(person_id){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/getPersonAbteilung/' + person_id);
+	},
+	getLeitungOrg(oekurzbz){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/getLeitungOrg/' + oekurzbz);
 	}
+
 }

public/js/apps/Vertragsverwaltung.js

@@ -0,0 +1,27 @@
+import Vertragsverwaltung from "../components/Vertraege/Vertragsverwaltung.js";
+import fhcapifactory from "./api/fhcapifactory.js";
+
+import Phrasen from "../plugin/Phrasen.js";
+
+const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+
+const router = VueRouter.createRouter({
+	history: VueRouter.createWebHistory(),
+	routes: [
+		{ path: `/${ciPath}/vertragsverwaltung`, component: Vertragsverwaltung },
+	]
+});
+
+
+const app = Vue.createApp();
+
+app
+	.use(router)
+	//.use(fhcapifactory)  //nicht nötig
+	.use(primevue.config.default, {
+		zIndex: {
+			overlay: 1100
+		}
+	})
+	.use(Phrasen)
+	.mount('#main');

public/js/components/Vertraege/MitarbeiterDetails.js

@@ -0,0 +1,105 @@
+export default {
+	data() {
+		return {
+			headerData: {},
+			departmentData: {},
+			leitungData: {},
+			//TODO(Manu) get from config
+			domain: 'c3p0.ma0068.technikum-wien.at',
+		};
+	},
+	props: {
+		person_id: Number
+	},
+	computed: {
+		appRoot() {
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root;
+		},
+	},
+	created(){
+		this.getHeader(this.person_id);
+
+		// Ensure loadDepartmentData is awaited
+		this.loadDepartmentData(this.person_id)
+			.then(() => {
+				// Call getLeitungOrg only after departmentData is loaded
+				this.getLeitungOrg(this.departmentData.oe_kurzbz);
+			})
+			.catch((error) => {
+				console.error("Error loading department data:", error);
+			});
+	},
+	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,
+		},
+	},
+	methods: {
+		getHeader(person_id) {
+			return this.$fhcApi.factory.vertraege.person
+				.getHeader(person_id)
+				.then(result => {
+					this.headerData = result.data[0];
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		loadDepartmentData(person_id) {
+			return this.$fhcApi.factory.vertraege.person
+				.getPersonAbteilung(person_id)
+				.then(result => {
+					this.departmentData = result.data[0];
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		getLeitungOrg(oekurzbz){
+			return this.$fhcApi.factory.vertraege.person
+				.getLeitungOrg(oekurzbz)
+				.then(result => {
+					this.leitungData = result.data[0];
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+	},
+	template: `
+		<div class="core-mitarbeiter-details">
+			<!--show Picture-->
+			<div class="row">
+				<div class="col-md-2 d-flex justify-content-start align-items-center w-30 pb-3 gap-3" 
+						style="max-height: 8rem; max-width: 6rem; overflow: hidden;">
+					<img 
+						class="d-block h-100 rounded" 
+						alt="profilepicture" 
+						style="object-fit: cover; max-width: 100%;" 
+						:src="appRoot + 'cis/public/bild.php?src=person&person_id=' + person_id">
+				</div>
+			
+				<!--show Ma-Details-->
+				<div class="col-md-8">
+					<h5>{{headerData.titelpre}} {{headerData.vorname}} {{headerData.nachname}} {{headerData.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/e </strong>{{leitungData.titelpre}} {{leitungData.vorname}} {{leitungData.nachname}} {{leitungData.titelpost}}  
+					<p>
+						<strong class="text-muted">Email </strong>
+						 <span v-if="!headerData?.alias">
+							<a :href="'mailto:'+headerData?.uid+'@'+domain">{{  headerData.uid }}@{{ domain }}</a>
+						</span>
+						<span v-if="headerData?.alias">
+							<a :href="'mailto:'+headerData?.alias+'@'+domain">{{  headerData.alias }}@{{ domain }}</a>
+						</span>
+						<span v-if="headerData?.telefonklappe" class="mb-2"> | <strong class="text-muted">DW</strong> {{  headerData?.telefonklappe }}</span>
+					</p>
+		
+				</div>
+			</div>
+		</div>
+
+`
+};

public/js/components/Vertraege/MitarbeiterHeader.js

@@ -0,0 +1,175 @@
+import {CoreFilterCmpt} from "../filter/Filter.js";
+import FormInput from '../Form/Input.js';
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		FormInput
+	},
+	inject: {
+		cisRoot: {
+			from: 'cisRoot'
+		},
+	},
+	emits: [
+		"selectedPerson"
+	],
+	props: {
+		// maybe later nur fixe oder alle Mitarbeiter: gleich funktionsaufruf
+		//oder Mitarbeiter mit Verträgen
+/*		filterMa: {
+			type: Object,
+			required: true,
+			default: function () {
+				return {
+					active: true,
+					hasVertraege: false
+				};
+			},
+		},*/
+/*		vertragsarten: {
+			type: Array,
+			required: false,
+			default: function (){
+				return {
+					['echterdv']
+				}
+			}
+		}*/
+	},
+	data() {
+		return {
+			tabulatorOptions: {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: this.$fhcApi.factory.vertraege.person.getMitarbeiter,
+				ajaxParams: () => {
+					return {
+						fix: this.filterMa
+					};
+				},
+				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: "Geburtsdatum", field: "format_gebdatum", headerFilter:"input"},
+					{title: "Unternehmen", field: "unternehmen", headerFilter:"input"},
+					{title: "Vertragsarten", field: "vertragsarten", headerFilter:"input"},
+					{title: "Ids Dienstverträge", field: "ids", headerFilter:"input"},
+				],
+				layout: 'fitColumns',
+				persistenceID: 'core-mitarbeiter',
+				selectableRangeMode: 'click',
+				selectable: true,
+			},
+			tabulatorEvents: [
+				{
+					event: 'rowSelectionChanged',
+					handler: this.rowSelectionChanged
+				},
+		{
+/*					event: 'tableBuilt',
+					handler: async() => {
+
+						await this.$p.loadCategory(['ui', 'global', 'vertrag']);
+
+						let cm = this.$refs.table.tabulator.columnManager;
+
+						cm.getColumnByField('bezeichnung').component.updateDefinition({
+							title: this.$p.t('ui', 'bezeichnung')
+						});
+						cm.getColumnByField('lehreinheit_id').component.updateDefinition({
+							title: this.$p.t('ui', 'lehreinheit_id')
+						});
+						cm.getColumnByField('betrag').component.updateDefinition({
+							title: this.$p.t('ui', 'betrag')
+						});
+						cm.getColumnByField('status').component.updateDefinition({
+							title: this.$p.t('global', 'status')
+						});
+						cm.getColumnByField('vertragstyp_bezeichnung').component.updateDefinition({
+							title: this.$p.t('vertrag', 'vertragstyp')
+						});
+						cm.getColumnByField('format_vertragsdatum').component.updateDefinition({
+							title: this.$p.t('vertrag', 'vertragsdatum')
+						});
+						cm.getColumnByField('vertragsdatum').component.updateDefinition({
+							title: this.$p.t('vertrag', 'vertragsdatum_iso')
+						});
+						cm.getColumnByField('vertragsstunden').component.updateDefinition({
+							title: this.$p.t('vertrag', 'vertragsstunden')
+						});
+						cm.getColumnByField('vertragsstunden_studiensemester_kurzbz').component.updateDefinition({
+							title: this.$p.t('vertrag', 'vertragsstunden_studiensemester')
+						});
+						cm.getColumnByField('vertrag_id').component.updateDefinition({
+							title: this.$p.t('ui', 'vertrag_id')
+						});
+						cm.getColumnByField('anmerkung').component.updateDefinition({
+							title: this.$p.t('global', 'anmerkung')
+						});
+						cm.getColumnByField('isabgerechnet').component.updateDefinition({
+							title: this.$p.t('vertrag', 'abgerechnet')
+						});
+						cm.getColumnByField('actions').component.updateDefinition({
+							title: this.$p.t('global', 'aktionen')
+						});
+					} */
+				}
+			],
+			selectedPerson: null,
+			isFilterSet: false,
+		}
+	},
+	methods: {
+		rowSelectionChanged(data) {
+			this.selectedPerson = data[0].person_id;
+			this.$emit('selectedPerson', this.selectedPerson);
+		},
+		onSwitchChange() {
+			if (this.isFilterSet) {
+				this.$refs.table.tabulator.setFilter("aktiv", "=", true);
+			}
+			else {
+				this.$refs.table.tabulator.clearFilter("aktiv");
+			}
+		},
+	},
+	template: `
+	<div class="core-mitarbeiter h-100 d-flex flex-column">
+		<h4>Vertragsverwaltung</h4>
+		
+<!--	filter: show only active employees-->
+		<div class="justify-content-end py-3">
+			<form-input
+				container-class="form-switch"
+				type="checkbox"
+				label="nur aktive Mitarbeiter:innen anzeigen"
+				v-model="isFilterSet"
+				@change="onSwitchChange"
+				>
+			</form-input>
+		</div>
+		
+		<core-filter-cmpt
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			:tabulator-events="tabulatorEvents"
+			table-only
+			:side-menu="false"
+			>
+		</core-filter-cmpt>
+
+	</div>`
+}
+

public/js/components/Vertraege/Vertraege.js

@@ -32,6 +32,11 @@ export default {
 			required: true
 		},
 	},
+	computed: {
+		appRoot() {
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root;
+		}
+	},
 	data() {
 		return {
 			tabulatorOptions: {
@@ -170,7 +175,7 @@ export default {
 				datum: new Date(),
 			},
 			childData: {},
-			isFilterSet: false
+			isFilterSet: false,
 		}
 	},
 	watch: {
@@ -434,6 +439,7 @@ export default {
 		this.$nextTick(() => {
 			this.$refs.table.tabulator.on("rowClick", (e, row) => {
 				this.contractSelected = row.getData();
+				console.log("selected Row ", this.contractSelected);
 			});
 		});
 		this.getFormattedDate();
@@ -442,6 +448,17 @@ export default {
 	template: `
 	<div class="core-contracts h-100 d-flex flex-column">
 	
+	
+	
+
+<!--	<div 
+		class="d-flex justify-content-start align-items-center w-100 pb-3 gap-3" 
+		style="max-height: 8rem; overflow: hidden;">
+	<img class="d-block h-100 rounded" alt="profilbild" :src="appRoot + 'cis/public/bild.php?src=person&person_id=' + person_id">
+&lt;!&ndash;		<img class="d-block h-100 rounded" alt="profilbild" :src="appRoot + 'cis/public/bild.php?src=person&person_id=' + student.person_id">
+			<h2 class="h4">{{students[0].titlepre}} {{students[0].vorname}} {{students[0].nachname}} {{students[0].titlepost}}</h2>&ndash;&gt;
+	</div>-->
+	
 <!--	filter: open means no status abgerechnet yet-->
 		<div class="justify-content-end pb-3">
 			<form-input
@@ -467,7 +484,7 @@ export default {
 			>
 		</core-filter-cmpt>
 		
-		<div class = "row">
+		<div class="row">
 			<div class="col-sm-6">
 				<!-- ContractDetails -->
 				 <div class="md-4" v-if="contractSelected.vertrag_id !=null">

public/js/components/Vertraege/Vertragsverwaltung.js

@@ -0,0 +1,53 @@
+import MitarbeiterHeader from "./MitarbeiterHeader.js";
+import MitarbeiterDetails from "./MitarbeiterDetails.js";
+import Vertraege from "./Vertraege.js";
+import VerticalSplit from "../verticalsplit/verticalsplit.js";
+
+export default {
+	components: {
+		VerticalSplit,
+		MitarbeiterHeader,
+		MitarbeiterDetails,
+		Vertraege
+	},
+	data() {
+		//TODO(Manu) props for filter: actually not necessary
+		return {
+			person_id: null,
+/*			filterMa: {
+				active: true,
+				hasVertraege: true
+			},*/
+/*			vertragsarten:
+				[ 'echterdv', 'externerlehrender', 'gastlektor']*/
+		}
+	},
+	methods: {
+		selectPerson(selected){
+			this.person_id = selected;
+		}
+	},
+	template: `
+<div>
+	<div class="container-fluid overflow-hidden">
+		<div class="row h-100">
+			<main class="col-md-8 ms-sm-auto col-lg-9 col-xl-10">
+			<!--<div class="col-md-12">-->
+				<vertical-split>
+					<template #top>	
+						<MitarbeiterHeader :filterMa="filterMa" :vertragsarten="vertragsarten" @selectedPerson="selectPerson" />
+					</template>
+					<template #bottom>
+						<div class="col" v-if="person_id!=null">
+							<mitarbeiter-details :person_id="person_id"></mitarbeiter-details>
+							<h5>Verträge</h5>
+							<Vertraege :endpoint="$fhcApi.factory.vertraege.person" :person_id="this.person_id" />
+						</div>
+					<template>
+				</vertical-split>
+			</main>	
+			</div>
+		</div>
+	</div>
+	`
+}