From b1452698f842aefb7030d9c529a4415a023b616a Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Mon, 4 Nov 2024 12:54:34 +0100
Subject: [PATCH] Start View Karteireiter, Components Unassigned, Details and
 Stati

---
 .../api/frontend/v1/vertraege/Vertraege.php   | 224 ++++++++++
 .../models/accounting/Vertrag_model.php       | 159 +++++++
 .../models/accounting/Vertragstyp_model.php   |   1 +
 .../Vertragvertragsstatus_model.php           |   2 +
 public/js/api/fhcapifactory.js                |   4 +-
 public/js/api/vertraege.js                    |   5 +
 public/js/api/vertraege/person.js             |  36 ++
 .../Stv/Studentenverwaltung/Details.js        |   1 +
 .../Details/Prestudent/MultiStatus.js         |   5 +
 .../js/components/Vertraege/List/Details.js   | 113 +++++
 public/js/components/Vertraege/List/Status.js |  75 ++++
 .../components/Vertraege/List/Unassigned.js   | 113 +++++
 public/js/components/Vertraege/Vertraege.js   | 389 ++++++++++++++++++
 13 files changed, 1126 insertions(+), 1 deletion(-)
 create mode 100644 application/controllers/api/frontend/v1/vertraege/Vertraege.php
 create mode 100644 public/js/api/vertraege.js
 create mode 100644 public/js/api/vertraege/person.js
 create mode 100644 public/js/components/Vertraege/List/Details.js
 create mode 100644 public/js/components/Vertraege/List/Status.js
 create mode 100644 public/js/components/Vertraege/List/Unassigned.js
 create mode 100644 public/js/components/Vertraege/Vertraege.js

diff --git a/application/controllers/api/frontend/v1/vertraege/Vertraege.php b/application/controllers/api/frontend/v1/vertraege/Vertraege.php
new file mode 100644
index 000000000..eaf3062f5
--- /dev/null
+++ b/application/controllers/api/frontend/v1/vertraege/Vertraege.php
@@ -0,0 +1,224 @@
+<?php
+
+
+if (!defined('BASEPATH')) exit('No direct script access allowed');
+use \DateTime as DateTime;
+
+class Vertraege extends FHCAPI_Controller
+{
+	public function __construct()
+	{
+		parent::__construct([
+			'getAllVertraege' => ['admin:r', 'assistenz:r'],
+			'getAllContractsNotAssigned' => ['admin:r', 'assistenz:r'],
+			'getAllContractsAssigned' => ['admin:r', 'assistenz:r'],
+			'getAllContractTypes' =>  self::PERM_LOGGED,
+			'getStatiOfContract' =>  self::PERM_LOGGED,
+			'loadContract' => ['admin:r', 'assistenz:r'],
+			'updateContract' => ['admin:r', 'assistenz:r'],
+			'addNewContract' => ['admin:r', 'assistenz:r'],
+			'deleteContract' => ['admin:r', 'assistenz:r'],
+
+		]);
+
+		//Load Models
+		$this->load->model('accounting/Vertrag_model', 'VertragModel');
+		$this->load->model('accounting/Vertragsstatus_model', 'VertragsstatusModel');
+		$this->load->model('accounting/Vertragstyp_model', 'VertragstypModel');
+		$this->load->model('accounting/Vertragvertragsstatus_model', 'VertragvertragsstatusModel');
+	}
+
+	public function getAllVertraege($person_id)
+	{
+		$result = $this->VertragModel->loadContractsOfPerson($person_id);
+
+		if (isError($result)) {
+			$this->terminateWithError(getError($result), self::ERROR_TYPE_GENERAL);
+		}
+
+		$this->terminateWithSuccess((getData($result) ?: []));
+	}
+
+	public function getAllContractsNotAssigned($person_id)
+	{
+		$result = $this->VertragModel->loadContractsOfPersonNotAssigned($person_id);
+
+		if (isError($result)) {
+			$this->terminateWithError(getError($result), self::ERROR_TYPE_GENERAL);
+		}
+
+		$this->terminateWithSuccess((getData($result) ?: []));
+	}
+
+	public function getAllContractsAssigned($person_id, $vertrag_id)
+	{
+		$result = $this->VertragModel->loadContractsOfPersonAssigned($person_id, $vertrag_id);
+
+		if (isError($result)) {
+			$this->terminateWithError(getError($result), self::ERROR_TYPE_GENERAL);
+		}
+
+		$this->terminateWithSuccess((getData($result) ?: []));
+	}
+
+	public function getStatiOfContract($vertrag_id)
+	{
+		$result = $this->VertragModel->getStatiOfContract($vertrag_id);
+
+		if (isError($result)) {
+			$this->terminateWithError(getError($result), self::ERROR_TYPE_GENERAL);
+		}
+
+		$this->terminateWithSuccess((getData($result) ?: []));
+	}
+
+	public function getAllContractTypes()
+	{
+		$result = $this->VertragstypModel->load();
+		if (isError($result))
+		{
+			$this->terminateWithError(getError($result), self::ERROR_TYPE_GENERAL);
+		}
+		$this->terminateWithSuccess(getData($result) ?: []);
+	}
+
+	public function addNewContract($person_id)
+	{
+		//$this->validateNewOrUpdate();
+		//TODO(Manu) check validations
+
+		//$person_id = $this->input->post('person_id');
+		$vertragsdatum = $this->input->post('vertragsdatum');
+		$bezeichnung = $this->input->post('bezeichnung');
+		$vertragstyp_kurzbz = $this->input->post('vertragstyp_kurzbz');
+		$betrag = $this->input->post('betrag');
+		$vertragsstunden = $this->input->post('vertragsstunden');
+		$vertragsstunden_studiensemester_kurzbz = $this->input->post('vertragsstunden_studiensemester_kurzbz');
+		$anmerkung = $this->input->post('anmerkung');
+
+		$this->db->trans_start();
+
+		$result = $this->VertragModel->insert( [
+			'person_id' => $person_id,
+			'vertragsdatum' => $vertragsdatum,
+			'bezeichnung' => $bezeichnung,
+			'vertragstyp_kurzbz' => $vertragstyp_kurzbz,
+			'betrag' => $betrag,
+			'vertragsstunden' => $vertragsstunden,
+			'vertragsstunden_studiensemester_kurzbz' => $vertragsstunden_studiensemester_kurzbz,
+			'anmerkung' => $anmerkung,
+			'insertamum' => date('c'),
+			'insertvon' => getAuthUID()
+		]);
+
+		//add entry with status neu in lehre.tbl_vertrag_vertragsstatus
+		//TODO(Manu) validation, dass status nicht schon bereits vorhanden
+		$status_result = $this->VertragvertragsstatusModel->insert([
+			'vertrag_id' => $result->retval,
+			'uid' => getAuthUID(),
+			'vertragsstatus_kurzbz' => 'neu',
+			'insertamum' => date('c'),
+			'insertvon' => getAuthUID(),
+			'datum' => date('c')
+		]);
+
+		if (!$status_result) {
+			$this->db->trans_rollback();
+			$this->terminateWithError('Fehler beim Hinzufügen des Vertragsstatus.');
+		}
+
+		$this->db->trans_complete();
+
+		$this->terminateWithSuccess(true);
+	}
+
+	public function loadContract($vertrag_id)
+	{
+		$result = $this->VertragModel->load($vertrag_id);
+
+		if (isError($result)) {
+			$this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+
+		if (!hasData($result)) {
+			$this->terminateWithError($this->p->t('ui', 'error_missingId', ['id' => 'Vertrag_id']), self::ERROR_TYPE_GENERAL);
+		}
+
+		$this->terminateWithSuccess(current(getData($result)));
+	}
+
+	public function updateContract($vertrag_id)
+	{
+		//$this->validateNewOrUpdate();
+		//TODO(Manu)validations
+
+
+		$vertrag_id = $this->input->post('vertrag_id');
+		$person_id = $this->input->post('person_id');
+		$vertragsdatum = $this->input->post('vertragsdatum');
+		$bezeichnung = $this->input->post('bezeichnung');
+		$vertragstyp_kurzbz = $this->input->post('vertragstyp_kurzbz');
+		$betrag = $this->input->post('betrag');
+		$vertragsstunden = $this->input->post('vertragsstunden');
+		$vertragsstunden_studiensemester_kurzbz = $this->input->post('vertragsstunden_studiensemester_kurzbz');
+		$anmerkung = $this->input->post('anmerkung');
+
+		$this->db->trans_start();
+
+		$result = $this->VertragModel->update($vertrag_id, [
+			'person_id' => $person_id,
+			'vertragsdatum' => $vertragsdatum,
+			'bezeichnung' => $bezeichnung,
+			'vertragstyp_kurzbz' => $vertragstyp_kurzbz,
+			'betrag' => $betrag,
+			'vertragsstunden' => $vertragsstunden,
+			'vertragsstunden_studiensemester_kurzbz' => $vertragsstunden_studiensemester_kurzbz,
+			'anmerkung' => $anmerkung,
+			'vertragsstunden' => $vertragsstunden,
+			'updateamum' => date('c'),
+			'updatevon' => getAuthUID()
+		]);
+
+		$this->getDataOrTerminateWithError($result);
+
+		$this->db->trans_complete();
+
+		$this->terminateWithSuccess(true);
+	}
+
+	public function deleteContract($vertrag_id)
+	{
+		//TODO(Manu) validations,
+		$result = $this->VertragvertragsstatusModel->load([
+			'vertrag_id' => $vertrag_id
+		]);
+
+		if(hasData($result)){
+			$data = getData($result);
+			foreach ($data as $item) {
+				//delete all entries in lehre.tbl_vertrag_vertragsstatus
+				$result = $this->VertragvertragsstatusModel->delete([
+					'vertrag_id' => $vertrag_id,
+					'vertragsstatus_kurzbz' => $item->vertragsstatus_kurzbz,
+					'uid' => $item->uid
+				]);
+				if(isError($result))
+					$this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+			}
+		}
+
+		//delete Contract
+		$result = $this->VertragModel->delete(
+			array('vertrag_id' => $vertrag_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' => 'Vertrag_id']), self::ERROR_TYPE_GENERAL);
+		}
+		return $this->outputJsonSuccess(current(getData($result)));
+	}
+}
\ No newline at end of file
diff --git a/application/models/accounting/Vertrag_model.php b/application/models/accounting/Vertrag_model.php
index 8725cd98d..62b109922 100644
--- a/application/models/accounting/Vertrag_model.php
+++ b/application/models/accounting/Vertrag_model.php
@@ -330,4 +330,163 @@ class Vertrag_model extends DB_Model
 
         return $bezeichnung;
     }
+
+	/**
+	 * Loads all Contracts of a Person
+	 * @param $person_id
+	 * @return array of objects
+	 */
+	public function loadContractsOfPerson($person_id)
+	{
+		$query = "
+			SELECT
+					*,
+					tbl_vertrag.bezeichnung as bezeichnung,
+					tbl_vertragstyp.bezeichnung as vertragstyp_bezeichnung,
+					TO_CHAR(tbl_vertrag.vertragsdatum::timestamp, 'DD.MM.YYYY') AS format_vertragsdatum,
+					(SELECT bezeichnung FROM lehre.tbl_vertragsstatus 
+					    JOIN lehre.tbl_vertrag_vertragsstatus USING(vertragsstatus_kurzbz)
+						WHERE vertrag_id=tbl_vertrag.vertrag_id ORDER BY datum desc limit 1) as status, anmerkung
+				FROM
+					lehre.tbl_vertrag
+					LEFT JOIN lehre.tbl_vertragstyp USING(vertragstyp_kurzbz)
+				WHERE person_id= ?";
+
+
+		return $this->execQuery($query, array($person_id));
+	}
+
+	/**
+	 * Loads all Contracts of a Person that are not assigned yet
+	 * @param $person_id
+	 * @return array of objects
+	 */
+	public function loadContractsOfPersonNotAssigned($person_id)
+	{
+		$query = "
+SELECT
+			'Lehrauftrag' as type,
+			lehreinheit_id,
+			mitarbeiter_uid,
+			null as pruefung_id,
+			null as projektarbeit_id,
+			(tbl_lehreinheitmitarbeiter.semesterstunden*tbl_lehreinheitmitarbeiter.stundensatz) as betrag,
+			tbl_lehreinheit.studiensemester_kurzbz,
+			null as betreuerart_kurzbz,
+			(	SELECT
+					upper(tbl_studiengang.typ || tbl_studiengang.kurzbz) || tbl_lehrveranstaltung.semester  || '-' || tbl_lehrveranstaltung.kurzbz || '-' || tbl_lehreinheit.lehrform_kurzbz
+				FROM
+					lehre.tbl_lehrveranstaltung
+					JOIN public.tbl_studiengang USING(studiengang_kz)
+				WHERE
+					lehrveranstaltung_id=tbl_lehreinheit.lehrveranstaltung_id)
+			as bezeichnung
+		FROM
+			lehre.tbl_lehreinheitmitarbeiter
+			JOIN lehre.tbl_lehreinheit USING(lehreinheit_id)
+		WHERE
+			mitarbeiter_uid IN (SELECT uid FROM public.tbl_benutzer WHERE person_id=?)
+			AND vertrag_id IS NULL
+		UNION
+		SELECT
+			'Betreuung' as type,
+			tbl_projektarbeit.lehreinheit_id as lehreinheit_id,
+			null as mitarbeiter_uid,
+			null::integer as pruefung_id,
+			projektarbeit_id,
+			(tbl_projektbetreuer.stunden*tbl_projektbetreuer.stundensatz) as betrag,
+			tbl_lehreinheit.studiensemester_kurzbz,
+			tbl_projektbetreuer.betreuerart_kurzbz,
+			(SELECT nachname || ' ' || vorname FROM public.tbl_person JOIN public.tbl_benutzer USING(person_id) WHERE uid=tbl_projektarbeit.student_uid)
+			as bezeichnung
+		FROM
+			lehre.tbl_projektbetreuer
+			JOIN lehre.tbl_projektarbeit USING(projektarbeit_id)
+			JOIN lehre.tbl_lehreinheit USING(lehreinheit_id)
+		WHERE
+			tbl_projektbetreuer.person_id=?
+			AND vertrag_id IS NULL
+				";
+
+		return $this->execQuery($query, array($person_id, $person_id));
+	}
+
+	/**
+	 * Loads all Contracts of a Person that are assigned yet
+	 * @param $person_id, $vertrag_id
+	 * @return array of objects
+	 */
+	//TODO(Manu) vereinfachen!
+	public function loadContractsOfPersonAssigned($person_id, $vertrag_id)
+	{
+		$query = "
+		SELECT
+			'Lehrauftrag' as type,
+			lehreinheit_id,
+			mitarbeiter_uid,
+			null as pruefung_id,
+			null as projektarbeit_id,
+			(tbl_lehreinheitmitarbeiter.semesterstunden * tbl_lehreinheitmitarbeiter.stundensatz) as betrag,
+			tbl_lehreinheit.studiensemester_kurzbz,
+			null as betreuerart_kurzbz,
+			(	SELECT
+					upper(tbl_studiengang.typ || tbl_studiengang.kurzbz) || tbl_lehrveranstaltung.semester  || '-' || tbl_lehrveranstaltung.kurzbz || '-' || tbl_lehreinheit.lehrform_kurzbz
+				FROM
+					lehre.tbl_lehrveranstaltung
+					JOIN public.tbl_studiengang USING(studiengang_kz)
+				WHERE
+					lehrveranstaltung_id=tbl_lehreinheit.lehrveranstaltung_id)
+			as bezeichnung
+		FROM
+			lehre.tbl_lehreinheitmitarbeiter
+			JOIN lehre.tbl_lehreinheit USING(lehreinheit_id)
+		WHERE
+			mitarbeiter_uid IN (SELECT uid FROM public.tbl_benutzer WHERE person_id=?)
+			AND vertrag_id = ?
+		UNION
+		SELECT
+			'Betreuung' as type,
+			tbl_projektarbeit.lehreinheit_id as lehreinheit_id,
+			null as mitarbeiter_uid,
+			null::integer as pruefung_id,
+			projektarbeit_id,
+			(tbl_projektbetreuer.stunden * tbl_projektbetreuer.stundensatz) as betrag,
+			tbl_lehreinheit.studiensemester_kurzbz,
+			tbl_projektbetreuer.betreuerart_kurzbz,
+			(SELECT nachname || ' ' || vorname FROM public.tbl_person JOIN public.tbl_benutzer USING(person_id) WHERE uid=tbl_projektarbeit.student_uid)
+			as bezeichnung
+		FROM
+			lehre.tbl_projektbetreuer
+			JOIN lehre.tbl_projektarbeit USING(projektarbeit_id)
+			JOIN lehre.tbl_lehreinheit USING(lehreinheit_id)
+		WHERE
+			tbl_projektbetreuer.person_id=?
+			AND vertrag_id = ?
+				";
+
+		return $this->execQuery($query, array($person_id, $vertrag_id, $person_id, $vertrag_id));
+	}
+
+	/**
+	 * Returns all stati of a contract
+	 *
+	 * @param $vertrag_id
+	 * @return array
+	 */
+	public function getStatiOfContract($vertrag_id)
+	{
+		$query = " 
+			SELECT
+					*
+			FROM
+				lehre.tbl_vertrag_vertragsstatus
+				JOIN lehre.tbl_vertragsstatus USING(vertragsstatus_kurzbz)
+			WHERE
+				tbl_vertrag_vertragsstatus.vertrag_id = ?
+			ORDER BY datum DESC";
+
+		return $this->execQuery($query, array($vertrag_id));
+	}
+
+
 }
diff --git a/application/models/accounting/Vertragstyp_model.php b/application/models/accounting/Vertragstyp_model.php
index 42d248217..a3275af6e 100644
--- a/application/models/accounting/Vertragstyp_model.php
+++ b/application/models/accounting/Vertragstyp_model.php
@@ -11,4 +11,5 @@ class Vertragstyp_model extends DB_Model
 		$this->dbTable = 'lehre.tbl_vertragstyp';
 		$this->pk = 'vertragstyp_kurzbz';
 	}
+
 }
diff --git a/application/models/accounting/Vertragvertragsstatus_model.php b/application/models/accounting/Vertragvertragsstatus_model.php
index 78a065540..75b0794cc 100644
--- a/application/models/accounting/Vertragvertragsstatus_model.php
+++ b/application/models/accounting/Vertragvertragsstatus_model.php
@@ -190,4 +190,6 @@ class Vertragvertragsstatus_model extends DB_Model
 		
 		return $this->loadWhere($condition);
 	}
+
+
 }
diff --git a/public/js/api/fhcapifactory.js b/public/js/api/fhcapifactory.js
index e30772ca7..45a172302 100644
--- a/public/js/api/fhcapifactory.js
+++ b/public/js/api/fhcapifactory.js
@@ -24,6 +24,7 @@ import stv from "./stv.js";
 import notiz from "./notiz.js";
 import betriebsmittel from "./betriebsmittel.js";
 import checkperson from "./checkperson.js";
+import vertraege from "./vertraege.js";
 
 export default {
     search,
@@ -34,5 +35,6 @@ export default {
     stv,
     notiz,
     betriebsmittel,
-    checkperson
+    checkperson,
+    vertraege
 };
\ No newline at end of file
diff --git a/public/js/api/vertraege.js b/public/js/api/vertraege.js
new file mode 100644
index 000000000..1c23316ef
--- /dev/null
+++ b/public/js/api/vertraege.js
@@ -0,0 +1,5 @@
+import person from "./vertraege/person.js";
+
+export default {
+	person
+}
\ No newline at end of file
diff --git a/public/js/api/vertraege/person.js b/public/js/api/vertraege/person.js
new file mode 100644
index 000000000..cff6ea87d
--- /dev/null
+++ b/public/js/api/vertraege/person.js
@@ -0,0 +1,36 @@
+export default {
+	getAllVertraege(url, config, params){
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getAllVertraege/' + params.person_id);
+	},
+	getAllContractsNotAssigned(url, config, params){
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getAllContractsNotAssigned/' + params.person_id);
+	},
+	getAllContractsAssigned(url, config, params){
+		console.log(params.person_id, params.vertrag_id);
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getAllContractsAssigned/' + params.person_id + '/' + params.vertrag_id);
+	},
+	getAllContractsNotAssigned2(person_id){
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getAllContractsNotAssigned/' + person_id);
+	},
+	getStatiOfContract(url, config, params){
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getStatiOfContract/' + params.vertrag_id);
+	},
+	getAllContractTypes(){
+		return this.$fhcApi.get('api/frontend/v1/vertraege/vertraege/getAllContractTypes/');
+	},
+	addNewContract(person_id, formData) {
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/addNewContract/' +
+			person_id, formData
+		);
+	},
+	loadContract(vertrag_id){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/loadContract/' + vertrag_id);
+	},
+	updateContract(vertrag_id, formData) {
+		return this.$fhcApi.post( 'api/frontend/v1/vertraege/vertraege/updateContract/' + vertrag_id,
+			formData);
+	},
+	deleteContract(vertrag_id){
+		return this.$fhcApi.post('api/frontend/v1/vertraege/vertraege/deleteContract/' + vertrag_id);
+	},
+}
\ No newline at end of file
diff --git a/public/js/components/Stv/Studentenverwaltung/Details.js b/public/js/components/Stv/Studentenverwaltung/Details.js
index 4df148063..dfa7e92ed 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details.js
@@ -43,6 +43,7 @@ export default {
 	},
 	template: `
 	<div class="stv-details h-100 pb-3 d-flex flex-column">
+
 		<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
 			Bitte StudentIn auswählen!
 		</div>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
index ac4a2dd9e..4cf826bb3 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
@@ -318,6 +318,9 @@ export default{
 			@saved="reload"
 			>
 		</status-modal>
+		TEST1: Anzahl Students: 
+		{{modelValue.length}}
+		
 			
 		<core-filter-cmpt
 			v-if="!this.modelValue.length"
@@ -332,6 +335,8 @@ export default{
 			@click:new="actionNewStatus"
 			>
 			
+			TEST 2
+			
 			<template #actions="{updateData2}">
 				<!-- SingleSelectButton-->
 				<status-dropdown 
diff --git a/public/js/components/Vertraege/List/Details.js b/public/js/components/Vertraege/List/Details.js
new file mode 100644
index 000000000..ef0710970
--- /dev/null
+++ b/public/js/components/Vertraege/List/Details.js
@@ -0,0 +1,113 @@
+import {CoreFilterCmpt} from "../../filter/Filter.js";
+
+import BsModal from "../../Bootstrap/Modal.js";
+import CoreForm from '../../Form/Form.js';
+import FormInput from '../../Form/Input.js';
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		CoreForm,
+		FormInput
+	},
+	props: {
+		person_id: {
+			type: [Number],
+			required: true
+		},
+		vertrag_id: {
+			type: [Number],
+			required: true
+		},
+	},
+	data() {
+		return {
+			//tableData: [],
+			tabulatorOptions: {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: this.$fhcApi.factory.vertraege.person.getAllContractsAssigned,
+				ajaxParams: () => {
+					return {
+						person_id: this.person_id,
+						vertrag_id: this.vertrag_id
+					};
+				},
+				ajaxResponse: (url, params, response) => response.data,
+				//Version with saving Data in tableData Object
+/*				ajaxResponse: (url, params, response) => {
+					this.tableData = response.data;
+					return response.data;
+				},*/
+				columns: [
+					{title: "Typ", field: "type"},
+					{title: "Betrag", field: "betrag"},
+					{title: "Bezeichnung", field: "bezeichnung"},
+					{title: "Studiensemester", field: "studiensemester_kurzbz"},
+					{title: "PruefungId", field: "betrag", visible: false},
+					{title: "mitarbeiter_uid", field: "mitarbeiter_uid", visible: false},
+					{title: "projektarbeit_id", field: "projektarbeit_id", visible: false},
+					{title: "lehreinheit_id", field: "lehreinheit_id", visible: true},
+					{title: "betreuerart_kurzbz", field: "betreuerart_kurzbz", visible: false},
+					{title: "Vertragsstunden", field: "vertragsstunden", visible: false},
+					{title: "vertrag_id", field: "vertrag_id", visible: false}, //just for testing
+					{
+						title: "VertragsstundenStudiensemester",
+						field: "vertragsstunden_studiensemester_kurzbz",
+						visible: false
+					},
+				],
+				layout: 'fitColumns',
+				layoutColumnsOnNewData: false,
+				height: '200',
+				selectableRangeMode: 'click',
+				selectable: true,
+			},
+			clickedRows: [],
+/*			table: null,
+			tableData: []*/
+		}
+	},
+	watch: {
+		person_id: 'updateTableData',
+		vertrag_id: 'updateTableData'
+/*		person_id() {
+			this.$refs.table.tabulator.setData('api/frontend/v1/vertraege/vertraege/getAllContractsAssigned/' + this.person_id + '/' + this.vertrag_id);
+		},
+		vertrag_id() {
+			this.$refs.table.tabulator.setData('api/frontend/v1/vertraege/vertraege/getAllContractsAssigned/' + this.person_id + '/' + this.vertrag_id);
+		},*/
+	},
+	methods: {
+		updateTableData() {
+			this.$refs.table.tabulator.setData(`api/frontend/v1/vertraege/vertraege/getAllContractsAssigned/ ' ${this.person_id}/${this.vertrag_id}`);
+		}
+	},
+	template: `
+	<!--TODO(Manu) check css, design -->
+	<div class="core-vertraege h-50 d-flex flex-column w-100">
+		person_id: {{person_id}}
+		<br>
+		vertrag_id: {{vertrag_id}}
+		
+		  <div>
+			<!-- Tabulator-Container -->
+			<div ref="table"></div>
+		
+			<!-- Ausgabe der Daten -->
+			<div v-for="row in tableData" :key="row.id">
+			  <p>{{ row.name }} - {{ row.value }}</p>
+			</div>
+		  </div>
+		
+		<h4>Vertragdetails</h4>
+	
+		<core-filter-cmpt
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			table-only
+			:side-menu="false"	
+			>
+		</core-filter-cmpt>		
+	</div>`
+}
\ No newline at end of file
diff --git a/public/js/components/Vertraege/List/Status.js b/public/js/components/Vertraege/List/Status.js
new file mode 100644
index 000000000..13423267f
--- /dev/null
+++ b/public/js/components/Vertraege/List/Status.js
@@ -0,0 +1,75 @@
+import {CoreFilterCmpt} from "../../filter/Filter.js";
+
+import BsModal from "../../Bootstrap/Modal.js";
+import CoreForm from '../../Form/Form.js';
+import FormInput from '../../Form/Input.js';
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		CoreForm,
+		FormInput
+	},
+	props: {
+		vertrag_id: {
+			type: [Number],
+			required: true
+		},
+	},
+	data() {
+		return {
+			tabulatorOptions: {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: this.$fhcApi.factory.vertraege.person.getStatiOfContract,
+				ajaxParams: () => {
+					return {
+						vertrag_id: this.vertrag_id
+					};
+				},
+				ajaxResponse: (url, params, response) => response.data,
+				columns: [
+					{title: "Status", field: "status", width: 125},
+					{title: "Datum", field: "datum", width: 150},
+					{title: "vertrag_id", field: "vertrag_id", visible: false},
+					{title: "User", field: "bezeichnung", width: 150},
+					{title: "Vertragsstatus_kurzbz", field: "studiensemester_kurzbz"},
+					{title: "insertvon", field: "insertvon", visible: false},
+					{title: "insertamum", field: "insertamum", visible: false},
+					{title: "updatevon", field: "updatevon", visible: false},
+					{title: "updateamum", field: "updateamum", visible: true},
+					{title: "betreuerart_kurzbz", field: "betreuerart_kurzbz", visible: false},
+					{title: "Vertragsstunden", field: "vertragsstunden", visible: false},
+				],
+				layout: 'fitColumns',
+				layoutColumnsOnNewData: false,
+				height: '200',
+				selectableRangeMode: 'click',
+				selectable: true,
+			},
+			clickedRows: []
+		}
+	},
+	watch: {
+		vertrag_id() {
+			this.$refs.table.tabulator.setData('api/frontend/v1/vertraege/vertraege/getStatiOfContract/' + this.vertrag_id);
+		}
+	},
+	methods: {	},
+	template: `
+	<!--TODO(Manu) check filter (akzeptiert, neu, erteilt?), design -->
+	<div class="core-vertraege h-50 d-flex flex-column w-100">
+<!--		person_id: {{person_id}}-->
+		<br>
+		vertrag_id: {{vertrag_id}} !
+		<h4>Vertragstatus</h4>
+	
+		<core-filter-cmpt
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			table-only
+			:side-menu="false"	
+			>
+		</core-filter-cmpt>		
+	</div>`
+}
\ No newline at end of file
diff --git a/public/js/components/Vertraege/List/Unassigned.js b/public/js/components/Vertraege/List/Unassigned.js
new file mode 100644
index 000000000..b84635fc4
--- /dev/null
+++ b/public/js/components/Vertraege/List/Unassigned.js
@@ -0,0 +1,113 @@
+import {CoreFilterCmpt} from "../../filter/Filter.js";
+
+import BsModal from "../../Bootstrap/Modal.js";
+import CoreForm from '../../Form/Form.js';
+import FormInput from '../../Form/Input.js';
+import {BismeldestichtagHelper} from "../../../apps/Bismeldestichtag/BismeldestichtagHelper";
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		CoreForm,
+		FormInput
+	},
+	props: {
+		endpoint: {
+			type: Object,
+			required: true
+		},
+		person_id: {
+			type: [Number],
+			required: true
+		},
+	},
+	data() {
+		return {
+			tabulatorOptions: {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: this.$fhcApi.factory.vertraege.person.getAllContractsNotAssigned,
+				ajaxParams: () => {
+					return {
+						person_id: this.person_id
+					};
+				},
+				ajaxResponse: (url, params, response) => response.data,
+				columns: [
+					{title: "Typ", field: "type", width: 125},
+					{title: "Betrag", field: "betrag", width: 150},
+					{title: "Bezeichnung", field: "bezeichnung", width: 150},
+					{title: "Studiensemester", field: "studiensemester_kurzbz"},
+					{title: "PruefungId", field: "betrag", visible: false},
+					{title: "mitarbeiter_uid", field: "mitarbeiter_uid", visible: false},
+					{title: "projektarbeit_id", field: "projektarbeit_id", visible: false},
+					{title: "lehreinheit_id", field: "lehreinheit_id", visible: true},
+					{title: "betreuerart_kurzbz", field: "betreuerart_kurzbz", visible: false},
+					{title: "Vertragsstunden", field: "vertragsstunden", visible: false},
+					{title: "vertrag_id", field: "vertrag_id", visible: false}, //just for testing
+					{
+						title: "VertragsstundenStudiensemester",
+						field: "vertragsstunden_studiensemester_kurzbz",
+						visible: false
+					},
+				],
+				layout: 'fitColumns',
+				layoutColumnsOnNewData: false,
+				height: '200',
+				selectableRangeMode: 'click',
+				selectable: true,
+			},
+			clickedRows: []
+		}
+	},
+	methods: {
+		toggleRowClick(rowData){
+			//id already existing?
+			//const index = this.clickedRows.findIndex(row => row.id === id);
+
+
+			//id alleine reicht nicht: Betreuerart ebenfalls
+/*			if (this.clickedRows.indexOf(id) == -1) {
+				console.log("Die Zahl " + id + " ist NICHT Array enthalten.");
+				this.clickedRows.push(id);
+
+			} else {
+				console.log("Die Zahl " + id + " ist im Array enthalten.");
+				const index = this.clickedRows.indexOf(id);
+				this.clickedRows.splice(index, 1);
+			}*/
+
+			// check row
+			const exists = this.clickedRows.some(row => JSON.stringify(row) === JSON.stringify(rowData));
+
+			if (exists) {
+				this.clickedRows = this.clickedRows.filter(row => JSON.stringify(row) !== JSON.stringify(rowData));
+			} else {
+				this.clickedRows.push(rowData);
+			}
+
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.$refs.table.tabulator.on("rowClick", (e, row) => {
+				const data = row.getData();
+				this.toggleRowClick(data);
+			});
+		});
+	},
+	template: `
+	<!--TODO(Manu) check css, design .. mybe list.js-->
+	<div class="core-vertraege h-50 d-flex flex-column w-100">
+	
+	{{clickedRows}}
+	
+		<core-filter-cmpt
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			table-only
+			:side-menu="false"	
+			>
+		</core-filter-cmpt>		
+	</div>`
+}
\ No newline at end of file
diff --git a/public/js/components/Vertraege/Vertraege.js b/public/js/components/Vertraege/Vertraege.js
new file mode 100644
index 000000000..63c79166b
--- /dev/null
+++ b/public/js/components/Vertraege/Vertraege.js
@@ -0,0 +1,389 @@
+import {CoreFilterCmpt} from "../filter/Filter.js";
+
+import BsModal from "../Bootstrap/Modal.js";
+import CoreForm from '../Form/Form.js';
+import FormInput from '../Form/Input.js';
+import ListUnassigned from './List/Unassigned.js';
+import ContractDetails from './List/Details.js';
+import ContractStati from './List/Status.js';
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		CoreForm,
+		FormInput,
+		ListUnassigned,
+		ContractDetails,
+		ContractStati
+	},
+	inject: {
+		cisRoot: {
+			from: 'cisRoot'
+		},
+	},
+	props: {
+		endpoint: {
+			type: Object,
+			required: true
+		},
+		person_id: {
+			type: [Number],
+			required: true
+		},
+	},
+	data() {
+		return {
+			//TODO(Manu) check if filter bei Status: Abgerechnet wird zum Beispiel nicht angezeigt
+			tabulatorOptions: {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: this.$fhcApi.factory.vertraege.person.getAllVertraege,
+				ajaxParams: () => {
+					return {
+						person_id: this.person_id
+					};
+				},
+				ajaxResponse: (url, params, response) => response.data,
+				columns: [
+					{title: "Bezeichnung", field: "bezeichnung", width: 150},
+					{title: "lehreinheit_id", field: "lehreinheit_id", visible: true},
+					{title: "Betrag", field: "betrag", width: 150},
+					{title: "Vertragstyp", field: "vertragstyp_bezeichnung", width: 125},
+					{title: "Status", field: "status"},
+					{title: "Vertragsdatum", field: "format_vertragsdatum", width: 128},
+					{title: "VertragstypKurzbz", field: "vertragstyp_kurzbz", visible: false},
+					{title: "VertragId", field: "vertrag_id", visible: false},
+					{title: "Vertragsdatum_iso", field: "vertragsdatum", visible: false},
+					{title: "Vertragsstunden", field: "vertragsstunden", visible: false},
+					{title: "VertragsstundenStudiensemester", field: "vertragsstunden_studiensemester_kurzbz", visible: false},
+					{title: "Anmerkung", field: "anmerkung", visible: false},
+					{
+						title: 'Aktionen', field: 'actions',
+						minWidth: 150, // Ensures Action-buttons will be always fully displayed
+						maxWidth: 150,
+						formatter: (cell, formatterParams, onRendered) => {
+							let container = document.createElement('div');
+							container.className = "d-flex gap-2";
+
+							let button = document.createElement('button');
+							button.className = 'btn btn-outline-secondary btn-action';
+							button.innerHTML = '<i class="fa fa-edit"></i>';
+							button.title = 'Vertrag bearbeiten';
+							button.addEventListener(
+								'click',
+								(event) =>
+									this.actionEditContract(cell.getData().vertrag_id)
+							);
+							container.append(button);
+
+							button = document.createElement('button');
+							button.className = 'btn btn-outline-secondary btn-action';
+							button.innerHTML = '<i class="fa fa-xmark"></i>';
+							button.title = 'Vertrag löschen';
+							button.addEventListener(
+								'click',
+								() =>
+									this.actionDeleteContract(cell.getData().vertrag_id)
+							);
+							container.append(button);
+
+							return container;
+						},
+						frozen: true
+					}],
+				layout: 'fitColumns',
+				layoutColumnsOnNewData: false,
+				height: '250',
+				selectableRangeMode: 'click',
+				selectable: true,
+				persistenceID: 'core-contracts'
+			},
+			tabulatorEvents: [
+				{
+/*					event: 'tableBuilt',
+					handler: async() => {
+
+						await this.$p.loadCategory(['wawi', 'global', 'infocenter']);
+
+						let cm = this.$refs.table.tabulator.columnManager;
+
+						cm.getColumnByField('nummer').component.updateDefinition({
+							title: this.$p.t('wawi', 'nummer')
+						});
+						cm.getColumnByField('anmerkung').component.updateDefinition({
+							title: this.$p.t('global', 'anmerkung')
+						});
+						cm.getColumnByField('format_retour').component.updateDefinition({
+							title: this.$p.t('wawi', 'retourdatum')
+						});
+						cm.getColumnByField('kaution').component.updateDefinition({
+							title: this.$p.t('infocenter', 'kaution')
+						});
+						cm.getColumnByField('format_ausgabe').component.updateDefinition({
+							title: this.$p.t('wawi', 'ausgabedatum')
+						});
+
+					}*/
+				}
+			],
+			statusNew: true,
+			formData: {},
+			listContractsUnassigned: [],
+			listContractTypes: [],
+			contractSelected: []
+		}
+	},
+
+	methods: {
+		actionNewContract() {
+			console.log("actionNewContract");
+			this.resetModal();
+			//this.loadContractsNotAssigned(this.person_id);
+			this.$refs.contractModal.show();
+		},
+		actionEditContract(vertrag_id) {
+			console.log("actionEditContract " + vertrag_id);
+			this.statusNew = false;
+			this
+				.loadContract(vertrag_id)
+				.then(this.$refs.contractModal.show);
+		},
+		actionDeleteContract(vertrag_id) {
+			console.log("actionDeleteContract" + vertrag_id);
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? vertrag_id
+					: Promise.reject({handled: true}))
+				.then(this.endpoint.deleteContract)
+				.then(result => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
+					window.scrollTo(0, 0);
+					this.reload();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		addNewContract() {
+			return this.endpoint
+				.addNewContract(this.person_id, this.formData)
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
+					this.$refs.contractModal.hide();
+					this.resetModal();
+					window.scrollTo(0, 0);
+					this.reload();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		updateContract(vertrag_id) {
+			return this.endpoint
+				.updateContract(vertrag_id, this.formData)
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
+					this.$refs.contractModal.hide();
+					this.resetModal();
+					window.scrollTo(0, 0);
+					this.reload();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		loadContract(vertrag_id) {
+			this.resetModal();
+			this.statusNew = false;
+			return this.endpoint
+				.loadContract(vertrag_id)
+				.then(result => {
+					this.formData = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		reload() {
+			this.$refs.table.reloadTable();
+		},
+		resetModal(){
+			this.formData = {};
+			this.formData.vertragsdatum  = new Date();
+			this.formData.vertragstyp_kurzbz = null;
+			this.statusNew = true;
+		}
+	},
+	created() {
+		Promise.all([
+			this.endpoint.getAllContractTypes(),
+			this.endpoint.getAllContractsNotAssigned2(this.person_id)
+		])
+			.then(([result1, result2]) => {
+				this.listContractTypes = result1.data;
+				this.listContractsUnassigned = result2.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.$refs.table.tabulator.on("rowClick", (e, row) => {
+				this.contractSelected = row.getData();
+				console.log("vertrag_id: ", this.contractSelected.vertrag_id);
+			});
+		});
+	},
+	template: `
+
+	<div class="core-vertraege h-100 d-flex flex-column">
+	
+	{{formData}}
+	
+	{{contractSelected}}
+	
+		<core-filter-cmpt
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			:tabulator-events="tabulatorEvents"
+			table-only
+			:side-menu="false"
+			reload
+			new-btn-show
+			new-btn-label="Vertrag"
+			@click:new="actionNewContract"
+			>
+		</core-filter-cmpt>		
+		Vertrag: {{contractSelected.vertrag_id}}
+		
+		<div class = "row">
+		
+			<div class="col-sm-6">
+				<!-- ContractDetails -->
+				 <div class="md-4" v-if="contractSelected.vertrag_id !=null">      
+					<ContractDetails :person_id="person_id" :vertrag_id="contractSelected.vertrag_id"></ContractDetails>
+				</div>
+			</div>
+			
+			<div class="col-sm-6">
+				<!-- ContractStati -->
+				 <div class="md-4" v-if="contractSelected.vertrag_id !=null">      
+					<ContractStati :vertrag_id="contractSelected.vertrag_id"></ContractStati>
+				</div>
+			</div>
+				
+		</div>
+		
+<!--		<hr>
+		<div>
+			&lt;!&ndash; ContractDetails &ndash;&gt;
+			 <div class="row md-4" v-if="contractSelected.vertrag_id !=null">      
+				<ContractDetails :person_id="person_id" :vertrag_id="contractSelected.vertrag_id"></ContractDetails>
+			</div>
+		</div>
+		
+		<div>
+			&lt;!&ndash; ContractStati &ndash;&gt;
+			 <div class="row md-4" v-if="contractSelected.vertrag_id !=null">      
+				<ContractStati :vertrag_id="contractSelected.vertrag_id"></ContractStati>
+			</div>
+		</div>-->
+				
+		
+		<!--Modal: contractModal-->
+		<bs-modal ref="contractModal" dialog-class="modal-xl">
+			<template #title>
+				<p v-if="statusNew" class="fw-bold mt-3">{{$p.t('ui', 'add_contract')}}</p>
+				<p v-else class="fw-bold mt-3">{{$p.t('ui', 'edit_contract')}}</p>
+			</template>
+			
+			<core-form class="row g-3" ref="unassignedData">
+		
+				<ListUnassigned :endpoint="$fhcApi.factory.vertraege.person" :person_id="person_id"></ListUnassigned>
+			
+				<div class="row mb-3">
+					<form-input
+						type="DatePicker"
+						:label="$p.t('ui/vertragsdatum')"
+						name="vertragsdatum"
+						v-model="formData.vertragsdatum"
+						auto-apply
+						:enable-time-picker="false"
+						format="dd.MM.yyyy"
+						preview-format="dd.MM.yyyy"
+						:teleport="true"
+						>
+					</form-input>
+				</div>
+				
+				<div class="row mb-3">		
+					<form-input
+						type="text"
+						:label="$p.t('ui/bezeichnung')"
+						name="bezeichnung"
+						v-model="formData.bezeichnung"
+						>
+					</form-input>
+				</div>
+				
+				<div class="row mb-3">
+					<form-input
+						type="select"
+						:label="$p.t('global/typ')"
+						v-model="formData.vertragstyp_kurzbz"
+						name="vertragstyp_kurzbz"
+						>
+						<option :value="null">-- {{$p.t('fehlermonitoring', 'keineAuswahl')}} --</option>
+						<option
+							v-for="entry in listContractTypes"
+							:key="entry.vertragstyp_kurzbz"
+							:value="entry.vertragstyp_kurzbz"
+							>
+							{{entry.bezeichnung}}
+						</option>
+					</form-input>
+				</div>
+				
+				<div class="row mb-3">		
+					<form-input
+						:label="$p.t('ui/betrag')"
+						name="betrag"
+						v-model="formData.betrag"
+						>
+					</form-input>
+				</div>
+				
+				<div class="row mb-3" v-if="!statusNew">		
+					<form-input
+						type="text"
+						:label="$p.t('ui/Stunden (Vertrags-Urfassung')"
+						name="vertragsstunden"
+						v-model="formData.vertragsstunden"
+						disabled
+						>
+					</form-input>
+				</div>
+				
+				<div class="row mb-3" v-if="!statusNew">		
+					<form-input
+						type="text"
+						:label="$p.t('ui/Studiensemester (Vertrags-Urfassung')"
+						name="vertragsstunden_studiensemester_kurzbz"
+						v-model="formData.vertragsstunden_studiensemester_kurzbz"
+						disabled
+						>
+					</form-input>
+				</div>
+						
+				<div class="row mb-3">
+					<form-input
+						type="textarea"
+						:label="$p.t('global/anmerkung')"
+						name="anmerkung"
+						v-model="formData.anmerkung"
+						>
+					</form-input>
+				</div>
+				
+			</core-form>
+			
+			<template #footer>
+				<button type="button" class="btn btn-primary" @click="statusNew ? addNewContract() : updateContract(formData.vertrag_id)">{{$p.t('ui', 'speichern')}}</button>
+			</template>
+			
+		</bs-modal>
+	</div>`
+}
+