new page vertragsverwaltung with employee header and details components

application/controllers/Vertragsverwaltung.php

@@ -0,0 +1,31 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+class Vertragsverwaltung extends Auth_Controller
+{
+	public function __construct()
+	{
+		$permissions = [];
+		$router = load_class('Router');
+		$permissions[$router->method] = ['admin:r', 'assistenz:r'];
+		parent::__construct($permissions);
+
+		// Load Libraries
+		$this->load->library('VariableLib', ['uid' => getAuthUID()]);
+	}
+
+	/**
+	 * @return void
+	 */
+	public function _remap()
+	{
+		$this->load->view('Vertragsverwaltung', [
+			'permissions' => [
+				'assistenz_stgs' => $this->permissionlib->getSTG_isEntitledFor('assistenz'),
+				'admin' => $this->permissionlib->isBerechtigt('admin'),
+				'assistenz_schreibrechte' => $this->permissionlib->isBerechtigt('assistenz','suid'),
+			]
+		]);
+	}
+}

application/controllers/api/frontend/v1/vertraege/Vertraege.php

@@ -23,7 +23,12 @@ class Vertraege extends FHCAPI_Controller
 			'deleteContractStatus' => self::PERM_LOGGED,
 			'updateContractStatus' => self::PERM_LOGGED,
 			'deleteLehrauftrag' => self::PERM_LOGGED,
-			'deleteBetreuung' => self::PERM_LOGGED
+			'deleteBetreuung' => self::PERM_LOGGED,
+			//TODO(Manu) Berechtigung
+			'getMitarbeiter' => self::PERM_LOGGED,
+			'getHeader' => self::PERM_LOGGED,
+			'getPersonAbteilung' => self::PERM_LOGGED,
+			'getLeitungOrg' => self::PERM_LOGGED,
 			]);
 
 		//Load Models and Libraries
@@ -640,4 +645,84 @@ class Vertraege extends FHCAPI_Controller
 		}
 		return $this->terminateWithSuccess(current(getData($result)));
 	}
+
+	public function getMitarbeiter()
+	{
+		$this->load->model('ressource/Mitarbeiter_model', 'Mitarbeitermodel');
+
+		$result = $this->Mitarbeitermodel->getPersonenWithContractDetails();
+
+		if (isError($result))
+		{
+			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+		if (!hasData($result))
+		{
+			return $this->terminateWithError($this->p->t('ui', 'error_missingId', ['id' => 'Id_Lehrauftrag']), self::ERROR_TYPE_GENERAL);
+		}
+		return $this->terminateWithSuccess(getData($result));
+	}
+
+	public function getPersonAbteilung($person_id)
+	{
+		$this->load->model('ressource/Mitarbeiter_model', 'Mitarbeitermodel');
+
+		$result = $this->Mitarbeitermodel->getPersonAbteilung($person_id);
+
+		if (isError($result))
+		{
+			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+		if (!hasData($result))
+		{
+			//TODO(Manu) rewrite better
+			return $this->terminateWithSuccess("no benutzerdata", self::ERROR_TYPE_GENERAL);
+
+		//	return $this->terminateWithError($this->p->t('ui', 'error_missingId', ['id' => 'personID']), self::ERROR_TYPE_GENERAL);
+		}
+		return $this->terminateWithSuccess(getData($result));
+	}
+
+	public function getLeitungOrg($oekurzbz)
+	{
+		$this->load->model('ressource/Mitarbeiter_model', 'Mitarbeitermodel');
+
+		$result = $this->Mitarbeitermodel->getLeitungOrg($oekurzbz);
+
+		if (isError($result))
+		{
+			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+		if (!hasData($result))
+		{
+			//TODO(Manu) rewrite better
+			return $this->terminateWithSuccess("no benutzerdata", self::ERROR_TYPE_GENERAL);
+
+		//	return $this->terminateWithError($this->p->t('ui', 'error_missingId', ['id' => 'personID']), self::ERROR_TYPE_GENERAL);
+		}
+		return $this->terminateWithSuccess(getData($result));
+	}
+
+	public function getHeader($person_id)
+	{
+		$this->load->model('ressource/Mitarbeiter_model', 'Mitarbeitermodel');
+
+		$result = $this->Mitarbeitermodel->getHeader($person_id);
+
+		if (isError($result))
+		{
+			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+		if (!hasData($result))
+		{
+				return $this->terminateWithError($this->p->t('ui', 'error_missingId', ['id' => 'personID']), self::ERROR_TYPE_GENERAL);
+		}
+
+/*		$result = current(getData($result));
+		$header = $result->name;*/
+
+		//return $this->terminateWithSuccess($header);
+		return $this->terminateWithSuccess(getData($result));
+	}
+
 }

application/models/ressource/Mitarbeiter_model.php

@@ -98,6 +98,243 @@ class Mitarbeiter_model extends DB_Model
 		return $this->execQuery($qry, $params);
 	}
 
+	/**
+	 * gibt Personen mit Übersicht von Vertragsdaten aus
+	 *
+	 * @return array
+	 */
+	public function getPersonenWithContractDetails($person_id=null)
+	{
+		/*		$qry = "SELECT DISTINCT ON(mitarbeiter_uid) mitarbeiter_uid, person_id, titelpost, titelpre,
+											nachname, vorname, vornamen,
+							TO_CHAR(gebdatum::timestamp, 'DD.MM.YYYY') AS format_gebdatum
+							FROM ((public.tbl_mitarbeiter JOIN public.tbl_benutzer ON(mitarbeiter_uid=uid))
+							JOIN public.tbl_person USING(person_id))
+							   LEFT JOIN public.tbl_benutzerfunktion USING(uid)
+							   LEFT JOIN public.tbl_benutzerfunktion akt_funk ON tbl_mitarbeiter.mitarbeiter_uid = akt_funk.uid AND akt_funk.funktion_kurzbz = 'fachzuordnung'
+																		   AND (akt_funk.datum_von IS NULL OR akt_funk.datum_von <= now()) AND (akt_funk.datum_bis IS NULL OR akt_funk.datum_bis >= now())
+						   WHERE true";
+
+				if ($fix === true)
+			$qry .= " AND fixangestellt=true";
+		elseif ($fix === false)
+			$qry .= " AND fixangestellt=false";
+
+		if ($aktiv === true)
+			$qry .= " AND tbl_benutzer.aktiv=true";
+		elseif ($aktiv === false)
+			$qry .= " AND tbl_benutzer.aktiv=false";
+
+		if ($verwendung === true)
+		{
+			$qry.=" AND EXISTS(SELECT * FROM bis.tbl_bisverwendung WHERE (ende>now() or ende is null) AND tbl_bisverwendung.mitarbeiter_uid=tbl_mitarbeiter.mitarbeiter_uid)";
+		}
+		elseif ($verwendung === false)
+		{
+			$qry.=" AND NOT EXISTS(SELECT * FROM bis.tbl_bisverwendung WHERE (ende>now() or ende is null) AND tbl_bisverwendung.mitarbeiter_uid=tbl_mitarbeiter.mitarbeiter_uid)";
+		}
+
+		if ($personaccount === true)
+			$qry .= " AND tbl_mitarbeiter.personalnummer >= 0";
+		elseif ($personaccount === false)
+			$qry .= " AND tbl_mitarbeiter.personalnummer < 0";
+
+		$params = array();
+		if (!isEmptyArray($uids))
+		{
+			$qry .= " AND tbl_mitarbeiter.mitarbeiter_uid IN ?";
+			$params[] = $uids;
+		}
+
+		return $this->execQuery($qry, $params);
+		*/
+
+		//TODO(Manu) filter nach DV-Art? was, wenn mehrere? oder einfach wenn extern ODER fix?
+		//TODO(Manu) email: plus dieses @domainzeugs:  mohamed.aburaia@c3p0.ma0068.technikum-wien.at
+		//Standardkostenstelle...
+		//was wenn 2 echte DV? schmarrn
+
+		$qry = "
+		SELECT
+			 b.uid , p.person_id,
+			p.vorname, p.nachname,
+			TO_CHAR(gebdatum::timestamp, 'DD.MM.YYYY') AS format_gebdatum,
+			COALESCE(b.alias, b.uid) AS email, 
+			--COALESCE(b.alias, b.uid) AS EMail, 
+			--u.bezeichnung AS Unternehmen,
+			STRING_AGG(DISTINCT va.bezeichnung, ', ') AS Vertragsarten,
+			STRING_AGG(DISTINCT u.bezeichnung, ', ') AS Unternehmen,
+			STRING_AGG(d.dienstverhaeltnis_id::TEXT, ', ') AS ids,
+			b.aktiv
+--			CASE WHEN b.aktiv=true THEN 'aktiv'
+--			 	 ELSE 'nicht aktiv'
+--				 END as status //not working in header filter	*/	  
+		    FROM 
+			    hr.tbl_dienstverhaeltnis d 
+		    JOIN 
+			    public.tbl_benutzer b ON d.mitarbeiter_uid = b.uid 
+		    JOIN 
+			    public.tbl_person p ON p.person_id = b.person_id 
+		    JOIN
+			    public.tbl_organisationseinheit u ON d.oe_kurzbz = u.oe_kurzbz
+		    JOIN
+			    hr.tbl_vertragsart va ON d.vertragsart_kurzbz = va.vertragsart_kurzbz ";
+
+/*		if ($aktiv === true)
+			$qry .= " WHERE b.aktiv = true";
+		elseif ($aktiv === false)
+			$qry .= " WHERE b.aktiv = false";
+
+		if($fix)
+		{
+			$filterVertragsart = "echterdv";
+
+			$filterVertragsart = addslashes($filterVertragsart); // Escaping von Sonderzeichen
+			$qry .= " AND d.vertragsart_kurzbz = '" . $filterVertragsart . "'";
+		}
+
+		if($extern)
+		{
+			$filterVertragsart2 = "externerlehrender";
+
+			$filterVertragsart2 = addslashes($filterVertragsart2); // Escaping von Sonderzeichen
+			$qry .= " AND d.vertragsart_kurzbz = '" . $filterVertragsart2 . "'";
+		}*/
+
+		if($person_id)
+		{
+			$qry .= " WHERE p.person_id = ?";
+		}
+
+
+		$qry.= " 
+		GROUP BY 
+    		b.uid, p.person_id, p.vorname, p.nachname, b.alias
+		 ORDER BY
+			    p.nachname, p.vorname; ";
+
+
+
+		$params = array($person_id);
+
+		return $this->execQuery($qry, $params);
+	}
+
+	/**
+	 * get current disciplinary Abteilung of person
+	 *
+	 * @param $person_id
+	 *
+	 * @return Array benutzerfunktionsdata
+	 */
+	function getPersonAbteilung($person_id)
+	{
+/*
+		$qry = "
+        SELECT tbl_benutzer.uid
+        FROM tbl_mitarbeiter
+            JOIN tbl_benutzer ON tbl_mitarbeiter.mitarbeiter_uid::text = tbl_benutzer.uid::text
+            JOIN tbl_person USING (person_id)
+        WHERE tbl_person.person_id=?
+        ";
+
+
+		$result = $this->execQuery($qry, array($person_id));
+
+		$uid = current(getData($result));
+		$uid = $uid->uid;
+
+
+		$qry2 ="
+            SELECT
+                bf.benutzerfunktion_id,bf.fachbereich_kurzbz,bf.uid,bf.funktion_kurzbz,bf.updateamum,bf.updatevon,bf.insertamum,bf.insertvon,bf.ext_id,bf.semester,bf.oe_kurzbz,bf.datum_von,bf.datum_bis,bf.bezeichnung,bf.wochenstunden,
+                oe.oe_kurzbz,oe.oe_parent_kurzbz,oe.bezeichnung,oe.organisationseinheittyp_kurzbz,oe.aktiv,oe.mailverteiler,oe.freigabegrenze,oe.kurzzeichen,oe.lehre,oe.standort,oe.warn_semesterstunden_frei,oe.warn_semesterstunden_fix,oe.standort_id
+            FROM tbl_benutzerfunktion bf JOIN public.tbl_organisationseinheit oe USING(oe_kurzbz)
+            WHERE uid = ? AND funktion_kurzbz='oezuordnung'
+                AND datum_von<=now() AND (datum_bis is null OR datum_bis>=now())
+        ";
+
+		$result2 = $this->execQuery($qry2, array($uid));
+
+
+		return $result2;*/
+
+		// First Query
+		$qry = "
+        SELECT tbl_benutzer.uid
+        FROM tbl_mitarbeiter
+            JOIN tbl_benutzer ON CAST(tbl_mitarbeiter.mitarbeiter_uid AS TEXT) = CAST(tbl_benutzer.uid AS TEXT)
+            JOIN tbl_person USING (person_id)
+        WHERE tbl_person.person_id = ?
+    ";
+		$result = $this->execQuery($qry, [$person_id]);
+
+		// Validate and extract UID
+		$data = getData($result);
+		if (empty($data)) {
+			return null; // No UID found
+		}
+
+		$uid = isset($data[0]->uid) ? $data[0]->uid : null;
+	//	$uid = isset($data[0]['uid']) ? $data[0]['uid'] : null;
+
+		if (!$uid) {
+			return null; // UID extraction failed
+		}
+
+		// Second Query
+		$qry2 = "
+        SELECT
+            bf.benutzerfunktion_id, bf.fachbereich_kurzbz, bf.uid, bf.funktion_kurzbz, bf.updateamum,
+            bf.updatevon, bf.insertamum, bf.insertvon, bf.ext_id, bf.semester, bf.oe_kurzbz, 
+            bf.datum_von, bf.datum_bis, bf.bezeichnung, bf.wochenstunden,
+            oe.oe_kurzbz, oe.oe_parent_kurzbz, oe.bezeichnung, 
+            oe.organisationseinheittyp_kurzbz, oe.aktiv, oe.mailverteiler, 
+            oe.freigabegrenze, oe.kurzzeichen, oe.lehre, oe.standort, 
+            oe.warn_semesterstunden_frei, oe.warn_semesterstunden_fix, oe.standort_id
+        FROM tbl_benutzerfunktion bf
+        JOIN public.tbl_organisationseinheit oe USING(oe_kurzbz)
+        WHERE uid = ? 
+            AND funktion_kurzbz = 'oezuordnung'
+            AND datum_von <= NOW() 
+            AND (datum_bis IS NULL OR datum_bis >= NOW())
+    ";
+		$result2 = $this->execQuery($qry2, [$uid]);
+
+		return $result2;
+	}
+
+	function getLeitungOrg($oe_kurzbz)
+	{
+		$qry = "
+            SELECT bf.benutzerfunktion_id,bf.fachbereich_kurzbz,bf.uid,bf.funktion_kurzbz,bf.updateamum,bf.updatevon,bf.insertamum,bf.insertvon,bf.ext_id,bf.semester,bf.oe_kurzbz,bf.datum_von,bf.datum_bis,bf.bezeichnung,bf.wochenstunden,
+                p.person_id, p.vorname,p.nachname,p.titelpre,p.titelpost
+            FROM public.tbl_benutzerfunktion bf JOIN public.tbl_organisationseinheit oe USING(oe_kurzbz)
+            JOIN public.tbl_benutzer b USING (uid) JOIN public.tbl_mitarbeiter ma ON(b.uid=ma.mitarbeiter_uid)
+            JOIN public.tbl_person p  USING(person_id)
+            WHERE funktion_kurzbz='Leitung' AND oe.oe_kurzbz = ?
+                AND datum_von<=now() AND (datum_bis is null OR datum_bis>=now());
+        ";
+
+		return $this->execQuery($qry, array($oe_kurzbz));
+	}
+
+	function getHeader($person_id)
+	{
+		$qry = "
+			SELECT
+			  *
+			FROM
+			  public.tbl_person
+			  JOIN public.tbl_benutzer b USING(person_id)
+			  JOIN public.tbl_mitarbeiter ma ON (ma.mitarbeiter_uid = b.uid)
+			WHERE
+			  person_id = ?
+        ";
+
+		return $this->execQuery($qry, array($person_id));
+	}
+
 	/**
 	 * Gibt ein Array mit den UIDs der Vorgesetzten zurück
 	 * @return object

application/views/Vertragsverwaltung.php

@@ -0,0 +1,42 @@
+<?php
+$includesArray = array(
+	'title' => 'Vertragsverwaltung',
+	'axios027' => true,
+	'bootstrap5' => true,
+	'fontawesome6' => true,
+	'vue3' => true,
+	'primevue3' => true,
+	#'filtercomponent' => true,
+	'tabulator5' => true,
+	'tinymce5' => true,
+	'phrases' => array(
+		'global',
+		'ui',
+	),
+	'customCSSs' => [
+		'public/css/components/vue-datepicker.css',
+		'public/css/components/primevue.css',
+/*		'public/css/Vertragsverwaltung.css'*/
+	],
+	'customJSs' => [
+		#'vendor/npm-asset/primevue/tree/tree.min.js',
+		#'vendor/npm-asset/primevue/toast/toast.min.js'
+	],
+	'customJSModules' => [
+		'public/js/apps/Vertragsverwaltung.js'
+	]
+);
+
+$this->load->view('templates/FHC-Header', $includesArray);
+?>
+
+<div id="main">
+	<router-view
+		stv-root="<?= site_url('Vertragsverwaltung'); ?>"
+		cis-root="<?= CIS_ROOT; ?>"
+	>
+	</router-view>
+</div>
+
+<?php $this->load->view('templates/FHC-Footer', $includesArray); ?>
+

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>
+	`
+}