From 9f336b4590740aca57cf295f0763de437cb42365 Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Thu, 23 Nov 2023 15:38:55 +0100
Subject: [PATCH 1/3] Formatierungen modals, Tabulator

---
 .../Details/Kontakt/Address.js                | 28 +++---
 .../Details/Kontakt/Bankaccount.js            | 90 ++++++++++++++++---
 .../Details/Kontakt/Contact.js                | 13 +--
 3 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
index 13858c31f..7a0197dc9 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
@@ -54,8 +54,8 @@ export default{
 							return output;}
 					},
 					{title:"Anmerkung", field:"anmerkung", visible:false},
-					{title: "Actions",
-						columns:[
+/*					{title: "Actions",
+						columns:[*/
 							{formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => {
 									this.actionEditAdress(cell.getData().adresse_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
@@ -64,8 +64,8 @@ export default{
 									this.actionDeleteAdress(cell.getData().adresse_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
 								}, width:50, headerSort:false },
-						],
-					},
+/*					],
+					},*/
 				],
 				layout: 'fitDataFill',
 				layoutColumnsOnNewData:	false,
@@ -295,7 +295,7 @@ export default{
 		<div class="stv-list h-100 pt-3">
 					
 		<!--		<Modal>   
-		 TODO(MANU) use BSModal, Validierungen
+		 TODO(MANU) use BSModal, Validierungen, utf-8? 
 		 -->
 				
 		<div ref="newAdressModal" class="modal fade" id="newAddressModal" tabindex="-1" aria-labelledby="newAddressModalLabel" aria-hidden="true">
@@ -376,7 +376,7 @@ export default{
 						
 					<div class="row mb-3">				
 						<label for="heimatadresse" class="form-label col-sm-4">Heimatadresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">
 								<input id="heimatadresse" type="checkbox" class="form-check-input" value="1" v-model="formData['heimatadresse']">
 							</div>
@@ -385,7 +385,7 @@ export default{
 						
 					<div class="row mb-3">
 						<label for="zustelladresse" class="form-label col-sm-4">Zustelladresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">	
 								<input id="zustelladresse" type="checkbox" class="form-check-input" value="1" v-model="formData['zustelladresse']">
 							</div>
@@ -401,7 +401,7 @@ export default{
 					
 					<div class="row mb-3">
 						<label for="rechnungsadresse" class="form-label col-sm-4">Rechnungsadresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">	
 								<input id="rechnungsadresse" type="checkbox" class="form-check-input" v-model="formData['rechnungsadresse']">
 							</div>
@@ -411,13 +411,13 @@ export default{
 					<div class="row mb-3">
 						<label for="firma_name" class="form-label col-sm-4">Firma</label>
 							<div class="col-sm-3">
-							 	<PvAutoComplete v-model="formData['firma']" optionLabel="name" :suggestions="filteredFirmen" @complete="search" minLength="3"/>
+									<PvAutoComplete v-model="formData['firma']" optionLabel="name" :suggestions="filteredFirmen" @complete="search" minLength="3"/>
 							</div>	
 					</div>	
-
+					
 					<div class="row mb-3">											   
 						<label for="name" class="form-label col-sm-4">Name</label>
-						<div class="col-sm-2">
+						<div class="col-sm-3">
 							<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="formData['name']">
 						</div>
 					</div>		
@@ -527,7 +527,7 @@ export default{
 					
 					<div class="row mb-3">				
 						<label for="heimatadresse" class="form-label col-sm-4">Heimatadresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">
 								<input id="heimatadresse" type="checkbox" class="form-check-input" value="1" v-model="addressData['heimatadresse']">
 							</div>
@@ -536,7 +536,7 @@ export default{
 						
 					<div class="row mb-3">
 						<label for="zustelladresse" class="form-label col-sm-4">Zustelladresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">	
 								<input id="zustelladresse" type="checkbox" class="form-check-input" value="1" v-model="addressData['zustelladresse']">
 							</div>
@@ -552,7 +552,7 @@ export default{
 					
 					<div class="row mb-3">
 						<label for="rechnungsadresse" class="form-label col-sm-4">Rechnungsadresse</label>
-						<div class="col-sm-3 align-self-center">
+						<div class="col-sm-3">
 							<div class="form-check">	
 								<input id="rechnungsadresse" type="checkbox" class="form-check-input" v-model="addressData['rechnungsadresse']">
 							</div>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
index f7e1016c9..ca55b08f7 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
@@ -1,5 +1,6 @@
 import {CoreFilterCmpt} from "../../../../filter/Filter.js";
 import {CoreRESTClient} from "../../../../../RESTClient";
+/*import {BsModal} from "../../../../Bootstrap/Modal.js";*/
 
 var editIcon = function(cell, formatterParams){ //plain text value
 	return "<i class='fa fa-edit'></i>";
@@ -10,7 +11,8 @@ var deleteIcon = function(cell, formatterParams) { //plain text value
 
 export default{
 	components: {
-		CoreFilterCmpt
+		CoreFilterCmpt,
+/*		BsModal*/
 	},
 	props: {
 		uid: String
@@ -51,8 +53,8 @@ export default{
 					},
 					{title:"Person_id", field:"person_id", visible:false},
 					{title:"Bankverbindung_id", field:"bankverbindung_id", visible:false},
-					{title: "Actions",
-						columns:[
+	/*				{title: "Actions",
+						columns:[*/
 							{formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => {
 									this.actionEditBankverbindung(cell.getData().bankverbindung_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
@@ -61,8 +63,8 @@ export default{
 									this.actionDeleteBankverbindung(cell.getData().bankverbindung_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
 								}, width:50, headerSort:false },
-						],
-					},
+/*						],
+					},*/
 				],
 				layout: 'fitDataFill',
 				layoutColumnsOnNewData:	false,
@@ -186,6 +188,7 @@ export default{
 			}).finally(()=> {
 				window.scrollTo(0, 0);
 				this.hideModal('deleteBankverbindungModal');
+				this.resetModal();
 				this.reload();
 			});
 		},
@@ -203,6 +206,73 @@ export default{
 	template: `	
 		<div class="stv-list h-100 pt-3">
 		
+<!--		Todo(manu) BsModal-->
+<!--		<BsModal title="Bankverbindung anlegen" ref="newBankverbindungModal">
+            <template #body>
+                <form class="row g-3" v-if="currentAddress != null" ref="bankverbindungData" >
+					<div class="row mb-3">
+							<label for="name" class="form-label col-sm-4">Name</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="bankverbindungData['name']">
+							</div>
+						</div>
+						<div class="row mb-3">											   
+							<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" class="form-control-sm" id="anschrift" v-model="bankverbindungData['anschrift']">
+							</div>
+						</div>	
+
+						<div class="row mb-3">											   
+							<label for="iban" class="form-label col-sm-4">IBAN</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" required class="form-control-sm" id="iban" v-model="bankverbindungData['iban']">
+							</div>
+						</div>	
+						<div class="row mb-3">											   
+							<label for="bic" class="form-label col-sm-4">BIC</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" class="form-control-sm" id="bic" v-model="bankverbindungData['bic']">
+							</div>
+						</div>	
+						<div class="row mb-3">											   
+							<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" class="form-control-sm" id="kontonr" v-model="bankverbindungData['kontonr']">
+							</div>
+						</div>	
+						<div class="row mb-3">											   
+							<label for="blz" class="form-label col-sm-4">BLZ</label>
+							<div class="col-sm-3">
+								<input type="text" :readonly="readonly" class="form-control-sm" id="blz" v-model="bankverbindungData['blz']">
+							</div>
+						</div>		
+						<div class="row mb-3">
+							<label for="typ" class="form-label col-sm-4">Typ</label>
+							<div class="col-sm-5">
+								<select  id="typ" class="form-control" required v-model="bankverbindungData['typ']">
+									<option  value="p">Privatkonto</option>
+									<option  value="f">Firmenkonto</option>
+								</select>
+							</div>
+						</div>	
+						<div class="row mb-3">
+							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
+							<div class="col-sm-3">
+								<div class="form-check">	
+									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
+								</div>
+							</div>
+						</div>	
+				</form>
+			</template>
+            <template #footer>
+            		<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+					<button type="button" class="btn btn-primary" @click="addNewBankverbindung()">OK</button>
+            </template>
+					
+		</BsModal>-->
+		
 
 		<!--Modal: new Bankverbindung-->
 			<div ref="newBankverbindungModal" class="modal fade" id="newBankverbindungModal" tabindex="-1" aria-labelledby="newBankverbindungModalLabel" aria-hidden="true">
@@ -213,8 +283,7 @@ export default{
 					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 				  </div>
 				  <div class="modal-body">
-					<form ref="bankverbindungData">
-<!--					{{bankverbindungData}}	-->						
+					<form ref="bankverbindungData">				
 						<div class="row mb-3">
 							<label for="name" class="form-label col-sm-4">Name</label>
 							<div class="col-sm-3">
@@ -263,7 +332,7 @@ export default{
 						</div>	
 						<div class="row mb-3">
 							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
-							<div class="col-sm-3 align-self-center">
+							<div class="col-sm-3">
 								<div class="form-check">	
 									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
 								</div>
@@ -341,7 +410,7 @@ export default{
 						</div>	
 						<div class="row mb-3">
 							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
-							<div class="col-sm-3 align-self-center">
+							<div class="col-sm-3">
 								<div class="form-check">	
 									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
 								</div>
@@ -378,7 +447,8 @@ export default{
 				</div>
 			  </div>
 			</div>
-		
+			
+	
 			<core-filter-cmpt
 				ref="table"
 				:tabulator-options="tabulatorOptions"
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
index 6bf4768a7..e5e7f322a 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
@@ -41,8 +41,8 @@ export default{
 					{title:"Kontakt_id", field:"kontakt_id", visible:false},
 					{title:"Standort_id", field:"standort_id", visible:false},
 					{title:"letzte Änderung", field:"updateamum", visible:false},
-					{title: "Actions",
-						columns:[
+	/*				{title: "Actions",
+						columns:[*/
 							{formatter:editIcon, cellClick: (e, cell) => {
 									this.actionEditContact(cell.getData().kontakt_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
@@ -51,8 +51,8 @@ export default{
 									this.actionDeleteContact(cell.getData().kontakt_id);
 									console.log(cell.getRow().getIndex(), cell.getData(), this);
 								}, width:50, headerSort:false, headerVisible:false },
-						],
-					},
+/*						],
+					},*/
 				],
 				layout: 'fitDataFill',
 				layoutColumnsOnNewData:	false,
@@ -162,6 +162,7 @@ export default{
 			}).finally(()=> {
 				window.scrollTo(0, 0);
 				this.hideModal('deleteContactModal');
+				this.resetModal();
 				this.reload();
 			});
 		},
@@ -263,7 +264,7 @@ export default{
 						
 						<div class="row mb-3">
 							<label for="zustellung" class="form-label col-sm-4">Zustellung</label>
-							<div class="col-sm-3 align-self-center">
+							<div class="col-sm-3">
 								<div class="form-check">	
 									<input id="zustellung" type="checkbox" class="form-check-input" value="1" v-model="contactData['zustellung']">
 								</div>
@@ -323,7 +324,7 @@ export default{
 							
 							<div class="row mb-3">
 								<label for="zustellung" class="form-label col-sm-4">Zustellung</label>
-								<div class="col-sm-3 align-self-center">
+								<div class="col-sm-3">
 									<div class="form-check">	
 										<input id="zustellung" type="checkbox" class="form-check-input" value="1" v-model="contactData['zustellung']">
 									</div>

From 27e228609666a6a1082387474b67335403630c08 Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Thu, 23 Nov 2023 15:50:02 +0100
Subject: [PATCH 2/3] getNations

---
 .../controllers/components/stv/Kontakt.php       | 16 +++++++++++++++-
 .../Details/Kontakt/Address.js                   |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/application/controllers/components/stv/Kontakt.php b/application/controllers/components/stv/Kontakt.php
index b4e7385aa..02c2ca70a 100644
--- a/application/controllers/components/stv/Kontakt.php
+++ b/application/controllers/components/stv/Kontakt.php
@@ -8,7 +8,6 @@ class Kontakt extends FHC_Controller
 {
 	public function __construct()
 	{
-		// TODO(chris): access!
 		parent::__construct();
 
 		// Load Libraries
@@ -217,6 +216,21 @@ class Kontakt extends FHC_Controller
 		return $this->outputJsonSuccess(current(getData($result)));
 	}
 
+	public function getNations()
+	{
+		$this->load->model('codex/Nation_model', 'NationModel');
+
+		$this->NationModel->addOrder('kurztext');
+
+		$result = $this->NationModel->load();
+		if (isError($result)) {
+			$this->output->set_status_header(REST_Controller::HTTP_INTERNAL_SERVER_ERROR);
+			$this->outputJson(getError($result));
+		} else {
+			$this->outputJson(getData($result) ?: []);
+		}
+	}
+
 	public function getAdressentypen()
 	{
 		$this->load->model('person/Adressentyp_model', 'AdressentypModel');
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
index 7a0197dc9..2c42ccc6b 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
@@ -275,7 +275,7 @@ export default{
 	},
 	created(){
 		CoreRESTClient
-			.get('components/stv/Student/getNations')
+			.get('components/stv/Kontakt/getNations')
 			.then(result => {
 				this.nations = result.data;
 			})

From 7a3bb2a37483de76b0e26cf0e6fc90b3dc268069 Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Tue, 28 Nov 2023 16:55:20 +0100
Subject: [PATCH 3/3] =?UTF-8?q?Section=20Kontakt=20und=20Bankverbindungen?=
 =?UTF-8?q?=20=C3=BCberarbeitet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/components/stv/Kontakt.php    |  46 +-
 .../controllers/components/stv/Notizen.php    |   0
 .../Details/Kontakt/Address.js                | 242 +++++++++--
 .../Details/Kontakt/Bankaccount.js            | 394 +++++++-----------
 .../Details/Kontakt/Contact.js                | 210 +++++-----
 5 files changed, 490 insertions(+), 402 deletions(-)
 create mode 100644 application/controllers/components/stv/Notizen.php

diff --git a/application/controllers/components/stv/Kontakt.php b/application/controllers/components/stv/Kontakt.php
index 02c2ca70a..c63c8c25a 100644
--- a/application/controllers/components/stv/Kontakt.php
+++ b/application/controllers/components/stv/Kontakt.php
@@ -47,7 +47,7 @@ class Kontakt extends FHC_Controller
 		$this->load->library('form_validation');
 		$_POST = json_decode(utf8_encode($this->input->raw_input_stream), true);
 
-		$this->form_validation->set_rules('plz', 'PLZ', 'required');
+		$this->form_validation->set_rules('plz', 'PLZ', 'required|numeric');
 
 		if ($this->form_validation->run() == false)
 		{
@@ -56,6 +56,7 @@ class Kontakt extends FHC_Controller
 
 		$this->load->model('person/Adresse_model', 'AdresseModel');
 
+		$uid = getAuthUID();
 		$co_name = isset($_POST['co_name']) ? $_POST['co_name'] : null;
 		$strasse = isset($_POST['strasse']) ? $_POST['strasse'] : null;
 		$ort = isset($_POST['ort']) ? $_POST['ort'] : null;
@@ -76,7 +77,7 @@ class Kontakt extends FHC_Controller
 			[
 				'person_id' => $person_id,
 				'strasse' =>  $strasse,
-				'insertvon' => 'uid',
+				'insertvon' => $uid,
 				'insertamum' => date('c'),
 				'plz' => $_POST['plz'],
 				'ort' => $ort,
@@ -104,8 +105,9 @@ class Kontakt extends FHC_Controller
 
 	public function updateAddress($address_id)
 	{
+		$uid = getAuthUID();
 		$this->load->library('form_validation');
-		$_POST = json_decode(utf8_encode($this->input->raw_input_stream), true);
+		$_POST = json_decode($this->input->raw_input_stream, true);
 
 		$this->form_validation->set_rules('plz', 'PLZ', 'required');
 
@@ -143,7 +145,7 @@ class Kontakt extends FHC_Controller
 		],
 			[	'person_id' => $person_id,
 				'strasse' =>  $strasse,
-				'updatevon' => 'uid',
+				'updatevon' => $uid,
 				'updateamum' => date('c'),
 				'plz' => $_POST['plz'],
 				'ort' => $ort,
@@ -216,6 +218,7 @@ class Kontakt extends FHC_Controller
 		return $this->outputJsonSuccess(current(getData($result)));
 	}
 
+/*	TODO Manu bereits in Address.ph*/
 	public function getNations()
 	{
 		$this->load->model('codex/Nation_model', 'NationModel');
@@ -289,12 +292,21 @@ class Kontakt extends FHC_Controller
 		$this->load->model('person/Adresse_model', 'AdresseModel');
 
 		//$ort = isset($ortschaft) ? $ortschaft : null;
-		if(isset($gemeinde)) {
+		if(isset($gemeinde)) {var_dump($gemeinde);
 			$gemeinde = urldecode($gemeinde);
 		}
 		else
 			$gemeinde = null;
 
+		$this->load->library('form_validation');
+
+		$this->form_validation->set_rules($plz, 'PLZ', 'numeric|less_than[10000]');
+		if ($this->form_validation->run() == false) {
+			return $this->outputJsonError($this->form_validation->error_array());
+/*			$this->output->set_status_header(REST_Controller::HTTP_BAD_REQUEST);
+			return $this->outputJsonError($this->form_validation->error_array());*/
+		}
+
 		$result = $this->AdresseModel->getOrtschaften($plz, $gemeinde);
 		if (isError($result)) {
 			$this->output->set_status_header(REST_Controller::HTTP_INTERNAL_SERVER_ERROR);
@@ -366,18 +378,18 @@ class Kontakt extends FHC_Controller
 		}
 	}
 
-	public function loadContact($kontact_id)
+	public function loadContact($kontakt_id)
 	{
 		$this->load->model('person/Kontakt_model', 'KontaktModel');
 
-		$this->AdresseModel->addSelect('public.tbl_kontakt.*');
+		$this->KontaktModel->addSelect('public.tbl_kontakt.*');
 		$this->KontaktModel->addSelect('st.kurzbz');
 		$this->KontaktModel->addJoin('public.tbl_standort st', 'ON (public.tbl_kontakt.standort_id = st.standort_id)', 'LEFT');
 
 		$this->KontaktModel->addLimit(1);
 
 		$result = $this->KontaktModel->loadWhere(
-			array('kontakt_id' => $kontact_id)
+			array('kontakt_id' => $kontakt_id)
 		);
 		if (isError($result)) {
 			$this->output->set_status_header(REST_Controller::HTTP_INTERNAL_SERVER_ERROR);
@@ -405,6 +417,13 @@ class Kontakt extends FHC_Controller
 		else
 			$this->form_validation->set_rules('kontakt', 'Kontakt', 'required');
 
+/*		if(($_POST['kontakttyp'] == 'email' && isset($_POST['kontakt'])))
+		{
+			$this->form_validation->set_data(['email' => $_POST['kontakt']]);
+			$this->form_validation->set_rules('email', 'email', 'valid_email|required]');
+		}*/
+
+
 		if ($this->form_validation->run() == false)
 		{
 			return $this->outputJsonError($this->form_validation->error_array());
@@ -420,6 +439,7 @@ class Kontakt extends FHC_Controller
 		else
 			$standort_id = null;
 
+		$uid = getAuthUID();
 		$kontakttyp = isset($_POST['kontakttyp']) ? $_POST['kontakttyp'] : null;
 		$anmerkung = isset($_POST['anmerkung']) ? $_POST['anmerkung'] : null;
 		$kontakt = isset($_POST['kontakt']) ? $_POST['kontakt'] : null;
@@ -432,7 +452,7 @@ class Kontakt extends FHC_Controller
 				'anmerkung' => $anmerkung,
 				'kontakt' => $kontakt,
 				'zustellung' => $_POST['zustellung'],
-				'insertvon' => 'uid',
+				'insertvon' => $uid,
 				'insertamum' => date('c'),
 				'standort_id' => $standort_id,
 				'ext_id' => $ext_id
@@ -465,6 +485,7 @@ class Kontakt extends FHC_Controller
 		else
 			$standort_id = null;
 
+		$uid = getAuthUID();
 		$kontakttyp = isset($_POST['kontakttyp']) ? $_POST['kontakttyp'] : null;
 		$anmerkung = isset($_POST['anmerkung']) ? $_POST['anmerkung'] : null;
 		$kontakt = isset($_POST['kontakt']) ? $_POST['kontakt'] : null;
@@ -480,7 +501,7 @@ class Kontakt extends FHC_Controller
 				'anmerkung' => $anmerkung,
 				'kontakt' => $kontakt,
 				'zustellung' => $_POST['zustellung'],
-				'insertvon' => 'uid',
+				'insertvon' => 	$uid,
 				'insertamum' => date('c'),
 				'standort_id' => $standort_id,
 				'ext_id' => $ext_id
@@ -609,6 +630,7 @@ class Kontakt extends FHC_Controller
 
 	public function updateBankverbindung($bankverbindung_id)
 	{
+
 		$this->load->library('form_validation');
 		$_POST = json_decode(utf8_encode($this->input->raw_input_stream), true);
 
@@ -627,6 +649,8 @@ class Kontakt extends FHC_Controller
 			return $this->outputJsonError($this->form_validation->error_array());
 		}
 
+		$uid = getAuthUID();
+
 		$result = $this->BankverbindungModel->update([
 			'bankverbindung_id' => $bankverbindung_id
 		],
@@ -638,7 +662,7 @@ class Kontakt extends FHC_Controller
 				'iban' => $_POST['iban'],
 				'blz' => $_POST['blz'],
 				'kontonr' => $_POST['kontonr'],
-				'updatevon' => 'uid',
+				'updatevon' => $uid,
 				'updateamum' => date('c'),
 				'typ' => $_POST['typ'],
 				'verrechnung' => $_POST['verrechnung'],
diff --git a/application/controllers/components/stv/Notizen.php b/application/controllers/components/stv/Notizen.php
new file mode 100644
index 000000000..e69de29bb
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
index 2c42ccc6b..f3425cc5f 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Address.js
@@ -1,7 +1,9 @@
 import {CoreFilterCmpt} from "../../../../filter/Filter.js";
 import {CoreRESTClient} from "../../../../../RESTClient";
 import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js";
+import FhcFormValidation from '../../../../Form/Validation.js';
 /*import PvToast from "../../../../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";*/
+import BsModal from "../../../../Bootstrap/Modal.js";
 
 
 var editIcon = function(cell, formatterParams){ //plain text value
@@ -15,14 +17,16 @@ var deleteIcon = function(cell, formatterParams){ //plain text value
 export default{
 	components: {
 		CoreFilterCmpt,
-		PvAutoComplete
+		PvAutoComplete,
+		FhcFormValidation,
+		BsModal
 	},
 	props: {
 		uid: String
 	},
-	emits: [
+/*	emits: [
 		'update:selected'
-	],
+	],*/
 	data() {
 		return{
 			tabulatorOptions: {
@@ -104,12 +108,14 @@ export default{
 	},
 	methods:{
 		actionNewAdress(){
-			bootstrap.Modal.getOrCreateInstance(this.$refs.newAdressModal).show();
+			/*bootstrap.Modal.getOrCreateInstance(this.$refs.newAdressModal).show();*/
+			this.$refs.newAdressModal.show();
 		},
 		actionEditAdress(adress_id){
 			this.loadAdress(adress_id).then(() => {
 				if(this.addressData.adresse_id)
-					bootstrap.Modal.getOrCreateInstance(this.$refs.editAdressModal).show();
+					this.$refs.editAdressModal.show();
+/*					bootstrap.Modal.getOrCreateInstance(this.$refs.editAdressModal).show();*/
 			});
 		},
 		actionDeleteAdress(adress_id){
@@ -118,7 +124,8 @@ export default{
 					if(this.addressData.heimatadresse)
 						this.$fhcAlert.alertError("Heimatadressen dürfen nicht gelöscht werden, da diese für die BIS-Meldung relevant sind. Um die Adresse dennoch zu löschen, entfernen sie das Häkchen bei Heimatadresse!");
 					else
-						bootstrap.Modal.getOrCreateInstance(this.$refs.deleteAdressModal).show();
+						this.$refs.deleteAdressModal.show();
+/*						bootstrap.Modal.getOrCreateInstance(this.$refs.deleteAdressModal).show();*/
 			});
 		},
 		addNewAddress(formData) {
@@ -135,6 +142,7 @@ export default{
 						const [key, value] = entry;
 						console.log(key, value);
 						this.$fhcAlert.alertError(value);
+						/*this.$fhcAlert.handleFormValidation(error, this.$refs.newAdressModal);*/
 					});
 				}
 			}).catch(error => {
@@ -252,6 +260,24 @@ export default{
 				}
 			);
 		},
+		getPlaces(plz){
+			CoreRESTClient
+				.get('components/stv/address/getPlaces/' + this.formData.address.plz, undefined, {
+					signal: this.abortController.places.signal
+				})
+				.then(result => CoreRESTClient.getData(result.data) || [])
+				.then(result => {
+					this.places = result;
+				})
+				.catch(error => {
+					if (error.code == 'ERR_BAD_REQUEST') {
+						return this.$fhcAlert.handleFormValidation(error, this.$refs.form);
+					}
+					// NOTE(chris): repeat request
+					if (error.code != "ERR_CANCELED")
+						window.setTimeout(this.loadPlaces, 100);
+				});
+		},
 		search(event) {
 			//console.log(event.query);
 			return CoreRESTClient
@@ -265,7 +291,7 @@ export default{
 			this.$refs.table.reloadTable();
 		},
 		hideModal(modalRef){
-			bootstrap.Modal.getOrCreateInstance(this.$refs[modalRef]).hide();
+			this.$refs[modalRef].hide();
 		},
 		resetModal(){
 			this.formData = {};
@@ -274,14 +300,21 @@ export default{
 		},
 	},
 	created(){
-		CoreRESTClient
-			.get('components/stv/Kontakt/getNations')
+/*		CoreRESTClient
+			.get('components/stv/Address/getNations')
 			.then(result => {
-				this.nations = result.data;
+				this.nations = result.data[];
 			})
 			.catch(err => {
 				console.error(err.response.data || err.message);
-			});
+			});*/
+		CoreRESTClient
+			.get('components/stv/Address/getNations')
+			.then(result => CoreRESTClient.getData(result.data) || [])
+			.then(result => {
+				this.nations = result;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
 		CoreRESTClient
 			.get('components/stv/Kontakt/getAdressentypen')
 			.then(result => {
@@ -293,32 +326,23 @@ export default{
 	},
 	template: `			
 		<div class="stv-list h-100 pt-3">
-					
-		<!--		<Modal>   
-		 TODO(MANU) use BSModal, Validierungen, utf-8? 
-		 -->
-				
-		<div ref="newAdressModal" class="modal fade" id="newAddressModal" tabindex="-1" aria-labelledby="newAddressModalLabel" aria-hidden="true">
-		  <div class="modal-dialog">
-			<div class="modal-content">
-			  <div class="modal-header">
-				<h5 class="modal-title" id="newAddressModalLabel">Neue Adresse anlegen</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-			  </div>
-			  <div class="modal-body">
-				<form  ref="formData">					
+		
+		<!--Modal: Add Address-->
+		<BsModal ref="newAdressModal">
+			<template #title>Adresse anlegen</template>
+				<form class="row g-3" ref="formData">
 					<div class="row mb-3">
 						<label for="adressentyp" class="form-label col-sm-4">Typ</label>
 						<div class="col-sm-5">
-							<select id="adressentyp" class="form-control" v-model="formData.typ">
+							<select id="adressentyp" class="form-select" v-model="formData.typ">
 								<option v-for="typ in adressentypen" :key="typ.adressentyp_kurzbz" :value="typ.adressentyp_kurzbz" >{{typ.bezeichnung}}</option>
 							</select>
 						</div>
 					</div>
 					<div class="row mb-3">											   
 						<label for="strasse" class="form-label col-sm-4">Strasse</label>
-						<div class="col-sm-3">
-							<input type="text" :readonly="readonly" class="form-control-sm" id="strasse" v-model="formData['strasse']">
+						<div class="col-sm-5">
+							<input type="text" :readonly="readonly" class="form-control" id="strasse" v-model="formData['strasse']">
 						</div>
 					</div>	
 						
@@ -333,8 +357,8 @@ export default{
 						
 					<div class="row mb-3">								
 						<label for="plz" class="required form-label col-sm-4" >PLZ</label>
-						 <div class="col-sm-3">
-							<input type="text" class="form-control-sm" required v-model="formData['plz']" >
+						 <div class="col-sm-5">
+							<input type="text" class="form-control" required v-model="formData['plz']" >
 						</div>
 					</div>	
 					
@@ -410,15 +434,152 @@ export default{
 					
 					<div class="row mb-3">
 						<label for="firma_name" class="form-label col-sm-4">Firma</label>
+							<div class="col-sm-5">
+									<PvAutoComplete v-model="formData['firma']" class="form-control" optionLabel="name" :suggestions="filteredFirmen" @complete="search" minLength="3"/>
+							</div>	
+					</div>	
+				
+					<div class="row mb-3">											   
+						<label for="name" class="form-label col-sm-4">Name</label>
+						<div class="col-sm-3">
+							<input type="text" :readonly="readonly" class="form-control" id="name" v-model="formData['name']">
+						</div>
+					</div>			
+					<div class="row mb-3">											   
+						<label for="anmerkung" class="form-label col-sm-4">Anmerkung</label>
+						<div class="col-sm-3">
+							<input type="text" :readonly="readonly" class="form-control-sm" id="anmerkung" v-model="formData['anmerkung']">
+						</div>
+					</div>	
+			</form>	
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+				<button type="button" class="btn btn-primary" @click="addNewAdress()">OK</button>
+            </template>
+		</BsModal>
+		
+								
+	<!--	<div ref="newAdressModal" class="modal fade" id="newAddressModal" tabindex="-1" aria-labelledby="newAddressModalLabel" aria-hidden="true">
+		  <div class="modal-dialog">
+			<div class="modal-content">
+			  <div class="modal-header">
+				<h5 class="modal-title" id="newAddressModalLabel">Neue Adresse anlegen</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			  </div>
+			  <div class="modal-body">
+				<form  ref="formData">					
+					<div class="row mb-3">
+						<label for="adressentyp" class="form-label col-sm-4">Typ</label>
+						<div class="col-sm-5">
+							<select id="adressentyp" class="form-select" v-model="formData.typ">
+								<option v-for="typ in adressentypen" :key="typ.adressentyp_kurzbz" :value="typ.adressentyp_kurzbz" >{{typ.bezeichnung}}</option>
+							</select>
+						</div>
+					</div>
+					<div class="row mb-3">											   
+						<label for="strasse" class="form-label col-sm-4">Strasse</label>
+						<div class="col-sm-5">
+							<input type="text" :readonly="readonly" class="form-control" id="strasse" v-model="formData['strasse']">
+						</div>
+					</div>	
+						
+					<div class="row mb-3">
+						<label for="nation" class="form-label col-sm-4">Nation</label>
+						<div class="col-sm-5">
+							<select id="nation" class="form-control" v-model="formData.nation">
+								<option v-for="nation in nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
+							</select>
+						</div>
+					</div>	
+						
+					<div class="row mb-3">								
+						<label for="plz" class="required form-label col-sm-4" >PLZ</label>
+						 <div class="col-sm-5">
+							<input type="text" class="form-control" required v-model="formData['plz']" >
+						</div>
+					</div>	
+					
+					<div class="row mb-3">
+						<label for="gemeinde" class="form-label col-sm-4">Gemeinde</label>
+						<div v-if="formData.plz && formData.nation === 'A'" class="col-sm-5">
+							<select id="gemeinde" class="form-control" v-model="formData['gemeinde']" @click="getGemeinden(formData.plz)">
+								<option value="">&#45;&#45; keine Auswahl &#45;&#45;</option>
+								<option v-for="gemeinde in gemeinden" :value="gemeinde.name" >{{gemeinde.name}}</option>
+							</select>	
+						</div>
+						<div v-else class="col-sm-3">
 							<div class="col-sm-3">
-									<PvAutoComplete v-model="formData['firma']" optionLabel="name" :suggestions="filteredFirmen" @complete="search" minLength="3"/>
+								<input id="ort" type="text" class="form-control-sm" v-model="formData['gemeinde']">
+							</div>
+						</div>
+					</div>
+						
+					<div class="row mb-3">	
+						<label for="ort" class="form-label col-sm-4">Ortschaft</label>  
+						<div v-if="formData.plz && formData.nation === 'A' && formData.gemeinde" class="col-sm-5">
+							<select id="ort" class="form-control" v-model="formData['ort']" @click="getOrtschaften(formData.plz + '/' + formData.gemeinde)">
+								<option value="">&#45;&#45; keine Auswahl &#45;&#45;</option>
+								<option v-for="ort in ortschaften" :value="ort.ortschaftsname" >{{ort.ortschaftsname}}</option>
+							</select>	
+						</div>
+						<div v-else-if="formData.plz && formData.nation === 'A'" class="col-sm-5">
+							<select id="ort" class="form-control" v-model="formData['ort']" @click="getOrtschaften(formData.plz)">
+								<option value="">&#45;&#45; keine Auswahl &#45;&#45;</option>
+								<option v-for="ort in ortschaften" :value="ort.ortschaftsname" >{{ort.ortschaftsname}}</option>
+							</select>	
+						</div>
+						<div v-else class="col-sm-3">
+							<div class="col-sm-3">
+								<input id="ort" type="text" class="form-control-sm" v-model="formData['ort']">
+							</div>
+						</div>
+					</div>	
+						
+					<div class="row mb-3">				
+						<label for="heimatadresse" class="form-label col-sm-4">Heimatadresse</label>
+						<div class="col-sm-3">
+							<div class="form-check">
+								<input id="heimatadresse" type="checkbox" class="form-check-input" value="1" v-model="formData['heimatadresse']">
+							</div>
+						</div>
+					</div>	
+						
+					<div class="row mb-3">
+						<label for="zustelladresse" class="form-label col-sm-4">Zustelladresse</label>
+						<div class="col-sm-3">
+							<div class="form-check">	
+								<input id="zustelladresse" type="checkbox" class="form-check-input" value="1" v-model="formData['zustelladresse']">
+							</div>
+						</div>
+					</div>	
+					
+					<div class="row mb-3">
+							<label for="co_name" class="form-label col-sm-4">Abweich.Empfänger. (c/o)</label>
+						<div class="col-sm-3">
+							<input type="text" id="co_name" class="form-control-sm" v-model="formData['co_name']">
+						</div>	
+					</div>
+					
+					<div class="row mb-3">
+						<label for="rechnungsadresse" class="form-label col-sm-4">Rechnungsadresse</label>
+						<div class="col-sm-3">
+							<div class="form-check">	
+								<input id="rechnungsadresse" type="checkbox" class="form-check-input" v-model="formData['rechnungsadresse']">
+							</div>
+						</div>
+					</div>			
+					
+					<div class="row mb-3">
+						<label for="firma_name" class="form-label col-sm-4">Firma</label>
+							<div class="col-sm-5">
+									<PvAutoComplete v-model="formData['firma']" class="form-control" optionLabel="name" :suggestions="filteredFirmen" @complete="search" minLength="3"/>
 							</div>	
 					</div>	
 					
 					<div class="row mb-3">											   
 						<label for="name" class="form-label col-sm-4">Name</label>
 						<div class="col-sm-3">
-							<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="formData['name']">
+							<input type="text" :readonly="readonly" class="form-control" id="name" v-model="formData['name']">
 						</div>
 					</div>		
 					
@@ -437,7 +598,19 @@ export default{
 			  </div>
 			</div>
 		  </div>
-		</div>
+		</div>-->
+		
+				<!--Modal: Edit Address-->
+<!--		<BsModal ref="newBankverbindungModal">
+			<template #title>Adresse anlegen</template>
+			<form class="row g-3" ref="formData">
+			
+			</form>	
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+				<button type="button" class="btn btn-primary" @click="addNewAdress()">OK</button>
+            </template>
+		</BsModal>-->
 		
 		<div ref="editAdressModal" class="modal fade" id="editAdressModal" tabindex="-1" aria-labelledby="editAdressModalLabel" aria-hidden="true">
 		  <div class="modal-dialog">
@@ -592,9 +765,8 @@ export default{
 							
 			  </div>
 			  <div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
 				<button ref="Close" type="button" class="btn btn-primary" @click="updateAddress(addressData.adresse_id)">OK</button>
-
 			  </div>
 			</div>
 		  </div>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
index ca55b08f7..ad632606a 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Bankaccount.js
@@ -1,6 +1,6 @@
 import {CoreFilterCmpt} from "../../../../filter/Filter.js";
 import {CoreRESTClient} from "../../../../../RESTClient";
-/*import {BsModal} from "../../../../Bootstrap/Modal.js";*/
+import BsModal from "../../../../Bootstrap/Modal.js";
 
 var editIcon = function(cell, formatterParams){ //plain text value
 	return "<i class='fa fa-edit'></i>";
@@ -12,7 +12,7 @@ var deleteIcon = function(cell, formatterParams) { //plain text value
 export default{
 	components: {
 		CoreFilterCmpt,
-/*		BsModal*/
+		BsModal
 	},
 	props: {
 		uid: String
@@ -53,18 +53,15 @@ export default{
 					},
 					{title:"Person_id", field:"person_id", visible:false},
 					{title:"Bankverbindung_id", field:"bankverbindung_id", visible:false},
-	/*				{title: "Actions",
-						columns:[*/
-							{formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => {
-									this.actionEditBankverbindung(cell.getData().bankverbindung_id);
-									console.log(cell.getRow().getIndex(), cell.getData(), this);
-								}, width:50, headerSort:false},
-							{formatter:deleteIcon, width:40, align:"center", cellClick: (e, cell) => {
-									this.actionDeleteBankverbindung(cell.getData().bankverbindung_id);
-									console.log(cell.getRow().getIndex(), cell.getData(), this);
-								}, width:50, headerSort:false },
-/*						],
-					},*/
+					{formatter:editIcon, width:40, align:"center", cellClick: (e, cell) => {
+							this.actionEditBankverbindung(cell.getData().bankverbindung_id);
+							console.log(cell.getRow().getIndex(), cell.getData(), this);
+						}, width:50, headerSort:false},
+					{formatter:deleteIcon, width:40, align:"center", cellClick: (e, cell) => {
+							this.actionDeleteBankverbindung(cell.getData().bankverbindung_id);
+							console.log(cell.getRow().getIndex(), cell.getData(), this);
+						}, width:50, headerSort:false },
+
 				],
 				layout: 'fitDataFill',
 				layoutColumnsOnNewData:	false,
@@ -86,18 +83,18 @@ export default{
 	},
 	methods:{
 		actionNewBankverbindung(){
-			bootstrap.Modal.getOrCreateInstance(this.$refs.newBankverbindungModal).show();
+			this.$refs.newBankverbindungModal.show();
 		},
 		actionEditBankverbindung(bankverbindung_id){
 			this.loadBankverbindung(bankverbindung_id).then(() => {
 				if(this.bankverbindungData.bankverbindung_id)
-					bootstrap.Modal.getOrCreateInstance(this.$refs.editBankverbindungModal).show();
+					this.$refs.editBankverbindungModal.show();
 			});
 		},
 		actionDeleteBankverbindung(bankverbindung_id){
 			this.loadBankverbindung(bankverbindung_id).then(() => {
-				if(this.bankverbindungData.bankverbindung_id)  //Todo(Manu) not optimal
-					bootstrap.Modal.getOrCreateInstance(this.$refs.deleteBankverbindungModal).show();
+				if(this.bankverbindungData.bankverbindung_id)
+					this.$refs.deleteBankverbindungModal.show();
 			});
 		},
 		addNewBankverbindung(bankverbindungData) {
@@ -106,19 +103,17 @@ export default{
 			).then(response => {
 				if (!response.data.error) {
 					this.$fhcAlert.alertSuccess('Speichern erfolgreich');
+/*					this.$refs.newBankverbindungModal.hide();*/
 					this.hideModal('newBankverbindungModal');
 					this.resetModal();
 				} else {
-					//console.log(response.data.retval);
 					const errorData = response.data.retval;
 					Object.entries(errorData).forEach(entry => {
 						const [key, value] = entry;
-						console.log(key, value);
 						this.$fhcAlert.alertError('Das Feld ' + key + ' ist erforderlich');
 					});
 					this.statusCode = 0;
 					this.statusMsg = response.data;
-					//console.log('Speichern nicht erfolgreich: ' + this.statusMsg);
 				}
 			}).catch(error => {
 				console.log(error);
@@ -134,7 +129,7 @@ export default{
 			return CoreRESTClient.get('components/stv/Kontakt/loadBankverbindung/' + bankverbindung_id
 			).then(
 				result => {
-					console.log(this.bankverbindungData, result);
+					//console.log(this.bankverbindungData, result);
 					if(!result.data.retval || result.data.retval.length < 1)
 					{
 						this.bankverbindungData = {};
@@ -152,7 +147,7 @@ export default{
 			CoreRESTClient.post('components/stv/Kontakt/updateBankverbindung/' + bankverbindung_id,
 				this.bankverbindungData
 			).then(response => {
-				console.log(response);
+				//console.log(response);
 				if (!response.data.error) {
 					this.$fhcAlert.alertSuccess('Speichern erfolgreich');
 					this.hideModal('editBankverbindungModal');
@@ -167,7 +162,7 @@ export default{
 				}
 			}).catch(error => {
 				this.statusMsg = 'Error in Catch';
-				console.log('Speichern nicht erfolgreich ' + this.statusMsg);
+				console.log('Speichern nicht erfolgreich ' + this.errorData);
 				this.$fhcAlert.alertError('Fehler bei Speicherroutine aufgetreten');
 			}).finally(() => {
 				window.scrollTo(0, 0);
@@ -177,7 +172,6 @@ export default{
 		deleteBankverbindung(bankverbindung_id){
 			CoreRESTClient.post('components/stv/Kontakt/deleteBankverbindung/' + bankverbindung_id)
 				.then(response => {
-					console.log(response);
 					if (!response.data.error || response.data === []) {
 						this.$fhcAlert.alertSuccess('Löschen erfolgreich');
 					} else {
@@ -193,7 +187,7 @@ export default{
 			});
 		},
 		hideModal(modalRef){
-			bootstrap.Modal.getOrCreateInstance(this.$refs[modalRef]).hide();
+			this.$refs[modalRef].hide();
 		},
 		reload(){
 			this.$refs.table.reloadTable();
@@ -206,231 +200,151 @@ export default{
 	template: `	
 		<div class="stv-list h-100 pt-3">
 		
-<!--		Todo(manu) BsModal-->
-<!--		<BsModal title="Bankverbindung anlegen" ref="newBankverbindungModal">
-            <template #body>
-                <form class="row g-3" v-if="currentAddress != null" ref="bankverbindungData" >
+		<!--Modal: Add Bankverbindung-->
+		<BsModal title="Bankverbindung anlegen" ref="newBankverbindungModal">
+			<template #title>Bankverbindung anlegen</template>
+			<form class="row g-3" ref="bankverbindungData">	
+				<div class="row mb-3">
+						<label for="name" class="form-label col-sm-4">Name</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="name" v-model="bankverbindungData['name']">
+						</div>
+					</div>
+					<div class="row mb-3">											   
+						<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="anschrift" v-model="bankverbindungData['anschrift']">
+						</div>
+					</div>	
+
+					<div class="row mb-3">											   
+						<label for="iban" class="form-label col-sm-4">IBAN</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" required class="form-control" id="iban" v-model="bankverbindungData['iban']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="bic" class="form-label col-sm-4">BIC</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="bic" v-model="bankverbindungData['bic']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="kontonr" v-model="bankverbindungData['kontonr']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="blz" class="form-label col-sm-4">BLZ</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="blz" v-model="bankverbindungData['blz']">
+						</div>
+					</div>		
 					<div class="row mb-3">
-							<label for="name" class="form-label col-sm-4">Name</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="bankverbindungData['name']">
+						<label for="typ" class="form-label col-sm-4">Typ</label>
+						<div class="col-sm-6">
+							<select  id="typ" class="form-select" required v-model="bankverbindungData['typ']">
+								<option  value="p">Privatkonto</option>
+								<option  value="f">Firmenkonto</option>
+							</select>
+						</div>
+					</div>	
+					<div class="row mb-3">
+						<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
+						<div class="col-sm-3">
+							<div class="form-check">	
+								<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
 							</div>
 						</div>
-						<div class="row mb-3">											   
-							<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="anschrift" v-model="bankverbindungData['anschrift']">
-							</div>
-						</div>	
-
-						<div class="row mb-3">											   
-							<label for="iban" class="form-label col-sm-4">IBAN</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" required class="form-control-sm" id="iban" v-model="bankverbindungData['iban']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="bic" class="form-label col-sm-4">BIC</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="bic" v-model="bankverbindungData['bic']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="kontonr" v-model="bankverbindungData['kontonr']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="blz" class="form-label col-sm-4">BLZ</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="blz" v-model="bankverbindungData['blz']">
-							</div>
-						</div>		
-						<div class="row mb-3">
-							<label for="typ" class="form-label col-sm-4">Typ</label>
-							<div class="col-sm-5">
-								<select  id="typ" class="form-control" required v-model="bankverbindungData['typ']">
-									<option  value="p">Privatkonto</option>
-									<option  value="f">Firmenkonto</option>
-								</select>
-							</div>
-						</div>	
-						<div class="row mb-3">
-							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
-							<div class="col-sm-3">
-								<div class="form-check">	
-									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
-								</div>
-							</div>
-						</div>	
-				</form>
-			</template>
+					</div>	
+			</form>
             <template #footer>
             		<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
 					<button type="button" class="btn btn-primary" @click="addNewBankverbindung()">OK</button>
             </template>
-					
-		</BsModal>-->
-		
-
-		<!--Modal: new Bankverbindung-->
-			<div ref="newBankverbindungModal" class="modal fade" id="newBankverbindungModal" tabindex="-1" aria-labelledby="newBankverbindungModalLabel" aria-hidden="true">
-			  <div class="modal-dialog">
-				<div class="modal-content">
-				  <div class="modal-header">
-					<h5 class="modal-title" id="newBankverbindungModalLabel">Bankverbindung anlegen</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-				  </div>
-				  <div class="modal-body">
-					<form ref="bankverbindungData">				
-						<div class="row mb-3">
-							<label for="name" class="form-label col-sm-4">Name</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="bankverbindungData['name']">
+		</BsModal>
+				
+		<!--Modal: Edit Bankverbindung-->
+		<BsModal ref="editBankverbindungModal" >
+			<template #title>Bankverbindung bearbeiten</template>
+				<form class="row g-3" ref="bankverbindungData" >
+				
+					<div class="row mb-3">
+						<label for="name" class="form-label col-sm-4">Name</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="name" v-model="bankverbindungData['name']">
+						</div>
+					</div>
+											
+					<div class="row mb-3">											   
+						<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="anschrift" v-model="bankverbindungData['anschrift']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="iban" class="form-label col-sm-4">IBAN</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" required class="form-control" id="iban" v-model="bankverbindungData['iban']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="bic" class="form-label col-sm-4">BIC</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="bic" v-model="bankverbindungData['bic']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="kontonr" v-model="bankverbindungData['kontonr']">
+						</div>
+					</div>	
+					<div class="row mb-3">											   
+						<label for="blz" class="form-label col-sm-4">BLZ</label>
+						<div class="col-sm-6">
+							<input type="text" :readonly="readonly" class="form-control" id="blz" v-model="bankverbindungData['blz']">
+						</div>
+					</div>		
+					<div class="row mb-3">
+						<label for="typ" class="form-label col-sm-4">Typ</label>
+						<div class="col-sm-6">
+							<select  id="typ" class="form-select" required v-model="bankverbindungData['typ']">
+								<option  value="p">Privatkonto</option>
+								<option  value="f">Firmenkonto</option>
+							</select>
+						</div>
+					</div>	
+					<div class="row mb-3">
+						<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
+						<div class="col-sm-3">
+							<div class="form-check">	
+								<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
 							</div>
 						</div>
-						<div class="row mb-3">											   
-							<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="anschrift" v-model="bankverbindungData['anschrift']">
-							</div>
-						</div>	
-
-						<div class="row mb-3">											   
-							<label for="iban" class="form-label col-sm-4">IBAN</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" required class="form-control-sm" id="iban" v-model="bankverbindungData['iban']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="bic" class="form-label col-sm-4">BIC</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="bic" v-model="bankverbindungData['bic']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="kontonr" v-model="bankverbindungData['kontonr']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="blz" class="form-label col-sm-4">BLZ</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="blz" v-model="bankverbindungData['blz']">
-							</div>
-						</div>		
-						<div class="row mb-3">
-							<label for="typ" class="form-label col-sm-4">Typ</label>
-							<div class="col-sm-5">
-								<select  id="typ" class="form-control" required v-model="bankverbindungData['typ']">
-									<option  value="p">Privatkonto</option>
-									<option  value="f">Firmenkonto</option>
-								</select>
-							</div>
-						</div>	
-						<div class="row mb-3">
-							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
-							<div class="col-sm-3">
-								<div class="form-check">	
-									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
-								</div>
-							</div>
-						</div>	
-											   
-					</form>  
-								
-				  </div>
-				  <div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
-					<button type="button" class="btn btn-primary" @click="addNewBankverbindung()">OK</button>
-				  </div>
-				</div>
-			  </div>
-			</div>
-				
-			<!--Modal: Edit Bankverbindung-->
-			<div ref="editBankverbindungModal" class="modal fade" id="editBankverbindungModal" tabindex="-1" aria-labelledby="editBankverbindungModalLabel" aria-hidden="true">
-			  <div class="modal-dialog">
-				<div class="modal-content">
-				  <div class="modal-header">
-					<h5 class="modal-title" id="editBankverbindungModalLabel">Bankverbindung bearbeiten</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetModal"></button>
-				  </div>
-				  <div class="modal-body">
-						<form ref="bankverbindungData">
-						
-							<div class="row mb-3">
-								<label for="name" class="form-label col-sm-4">Name</label>
-								<div class="col-sm-3">
-									<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="bankverbindungData['name']">
-								</div>
-							</div>
-													
-							<div class="row mb-3">											   
-							<label for="anschrift" class="form-label col-sm-4">Anschrift</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="anschrift" v-model="bankverbindungData['anschrift']">
-							</div>
-						</div>	
-
-						<div class="row mb-3">											   
-							<label for="iban" class="form-label col-sm-4">IBAN</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" required class="form-control-sm" id="iban" v-model="bankverbindungData['iban']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="bic" class="form-label col-sm-4">BIC</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="bic" v-model="bankverbindungData['bic']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="kontonr" class="form-label col-sm-4">Kontonummer</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="kontonr" v-model="bankverbindungData['kontonr']">
-							</div>
-						</div>	
-						<div class="row mb-3">											   
-							<label for="blz" class="form-label col-sm-4">BLZ</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="blz" v-model="bankverbindungData['blz']">
-							</div>
-						</div>		
-						<div class="row mb-3">
-							<label for="typ" class="form-label col-sm-4">Typ</label>
-							<div class="col-sm-5">
-								<select  id="typ" class="form-control" required v-model="bankverbindungData['typ']">
-									<option  value="p">Privatkonto</option>
-									<option  value="f">Firmenkonto</option>
-								</select>
-							</div>
-						</div>	
-						<div class="row mb-3">
-							<label for="verrechnung" class="form-label col-sm-4">Verrechnung</label>
-							<div class="col-sm-3">
-								<div class="form-check">	
-									<input id="verrechnung" type="checkbox" class="form-check-input" value="1" v-model="bankverbindungData['verrechnung']">
-								</div>
-							</div>
-						</div>	
-																				   
-					</form>  
-								
-				  </div>
-				  <div class="modal-footer">
+					</div>																	   
+				</form> 
+				<template #footer>
 					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
 					<button ref="Close" type="button" class="btn btn-primary" @click="updateBankverbindung(bankverbindungData.bankverbindung_id)">OK</button>
-	
-				  </div>
-				</div>
-			  </div>
-			</div>
+            	</template> 
+		</BsModal>
+		
+		<!--Modal: Delete Bankverbindung TODO(manu) Formatierung mit zuviel Abstand-->		
+		<BsModal ref="deleteBankverbindungModal" >
+			<template #title>Bankverbindung löschen</template>  
+			<template #default>
+				<p>Bankverbindung wirklich löschen?</p>	
+			</template>												
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
+				<button ref="Close" type="button" class="btn btn-primary" @click="deleteBankverbindung(bankverbindungData.bankverbindung_id)">OK</button>
+			</template> 
+		</BsModal>
 				
-			<!-- Modal: Delete Bankverbindung-->
-			<div ref="deleteBankverbindungModal" class="modal fade" id="deleteBankverbindungModal" tabindex="-1" aria-labelledby="deleteBankverbindungModalLabel" aria-hidden="true">
+			
+<!--		<div ref="deleteBankverbindungModal" class="modal fade" id="deleteBankverbindungModal" tabindex="-1" aria-labelledby="deleteBankverbindungModalLabel" aria-hidden="true">
 			  <div class="modal-dialog">
 				<div class="modal-content">
 				  <div class="modal-header">
@@ -446,7 +360,7 @@ export default{
 				  </div>
 				</div>
 			  </div>
-			</div>
+			</div>-->
 			
 	
 			<core-filter-cmpt
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
index e5e7f322a..750d03dab 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Kontakt/Contact.js
@@ -1,6 +1,7 @@
 import {CoreFilterCmpt} from "../../../../filter/Filter.js";
 import {CoreRESTClient} from "../../../../../RESTClient";
-import PvToast from "../../../../../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";
+import BsModal from "../../../../Bootstrap/Modal.js";
+/*import PvToast from "../../../../../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";*/
 import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js";
 
 var editIcon = function(cell, formatterParams){ //plain text value
@@ -14,7 +15,7 @@ export default{
 	components: {
 		CoreFilterCmpt,
 		PvAutoComplete,
-		PvToast
+		BsModal
 	},
 	props: {
 		uid: String
@@ -79,25 +80,22 @@ export default{
 	},
 	methods:{
 		actionNewContact(){
-			console.log("Neuen Kontakt anlegen");
-			bootstrap.Modal.getOrCreateInstance(this.$refs.newContactModal).show();
+			this.$refs.newContactModal.show();
+/*			bootstrap.Modal.getOrCreateInstance(this.$refs.newContactModal).show();*/
 		},
 		actionEditContact(contact_id){
-			console.log("Edit Contact mit contact_id " + contact_id);
 			this.loadContact(contact_id);
-			bootstrap.Modal.getOrCreateInstance(this.$refs.editContactModal).show();
+			this.$refs.editContactModal.show();
 
 		},
 		actionDeleteContact(contact_id){
-			console.log("Delete Contact " + contact_id);
 			this.loadContact(contact_id);
-			bootstrap.Modal.getOrCreateInstance(this.$refs.deleteContactModal).show();
+			this.$refs.deleteContactModal.show();
 		},
 		addNewContact(formData) {
 			CoreRESTClient.post('components/stv/Kontakt/addNewContact/' + this.uid,
 				this.contactData
 			).then(response => {
-				console.log(response);
 				if (!response.data.error) {
 					this.$fhcAlert.alertSuccess('Speichern erfolgreich');
 					this.hideModal("newContactModal");
@@ -106,7 +104,7 @@ export default{
 					const errorData = response.data.retval;
 					Object.entries(errorData).forEach(entry => {
 						const [key, value] = entry;
-						console.log(key, value);
+						//console.log(key, value);
 						this.$fhcAlert.alertError(value);
 					});
 				}
@@ -141,11 +139,10 @@ export default{
 		deleteContact(kontakt_id){
 			CoreRESTClient.post('components/stv/Kontakt/deleteContact/' + kontakt_id)
 				.then(response => {
-					console.log(response);
 					if (!response.data.error) {
 						this.statusCode = 0;
 						this.statusMsg = 'success';
-						console.log('Löschen erfolgreich: ' + this.statusMsg);
+						//console.log('Löschen erfolgreich: ' + this.statusMsg);
 						this.$fhcAlert.alertSuccess('Löschen erfolgreich');
 					} else {
 						this.statusCode = 0;
@@ -200,7 +197,7 @@ export default{
 			});
 		},
 		hideModal(modalRef){
-			bootstrap.Modal.getOrCreateInstance(this.$refs[modalRef]).hide();
+			this.$refs[modalRef].hide();
 		},
 		reload(){
 			this.$refs.table.reloadTable();
@@ -231,40 +228,35 @@ export default{
 		<div class="stv-list h-100 pt-3">
 		
 		<!--Modal: new Contact-->
-			<div ref="newContactModal" class="modal fade" id="newAContactModal" tabindex="-1" aria-labelledby="newAContactModalLabel" aria-hidden="true">
-			  <div class="modal-dialog">
-				<div class="modal-content">
-				  <div class="modal-header">
-					<h5 class="modal-title" id="newContactModalLabel">Details</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-				  </div>
-				  <div class="modal-body">
-					<form  ref="contactData">						
+		<BsModal ref="newContactModal">
+			<template #title>Kontakt anlegen</template>
+				<form class="row g-3" ref="contactData">
+				
 						<div class="row mb-3">
 							<label for="kontakttyp" class="form-label col-sm-4">Typ</label>
-							<div class="col-sm-5">
+							<div class="col-sm-6">
 								<select id="kontakttyp" class="form-control" v-model="contactData.kontakttyp">
-									<option value="">-- keine Auswahl --</option>
+									<option value="">keine Auswahl</option>
 									<option v-for="typ in kontakttypen" :key="typ.kontakttyp_kurzbz" :value="typ.kontakttyp" >{{typ.kontakttyp}}</option>
 								</select>
 							</div>
 						</div>
 						<div class="row mb-3">											   
 							<label for="kontakt" class="form-label col-sm-4">Kontakt</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="kontakt" v-model="contactData['kontakt']">
+							<div class="col-sm-6">
+								<input type="text" :readonly="readonly" class="form-control" id="kontakt" v-model="contactData['kontakt']">
 							</div>
 						</div>	
 						<div class="row mb-3">											   
 							<label for="anmerkung" class="form-label col-sm-4">Anmerkung</label>
-							<div class="col-sm-3">
-								<input type="text" :readonly="readonly" class="form-control-sm" id="anmerkung" v-model="contactData['anmerkung']">
+							<div class="col-sm-6">
+								<input type="text" :readonly="readonly" class="form-control" id="anmerkung" v-model="contactData['anmerkung']">
 							</div>
 						</div>	
 						
 						<div class="row mb-3">
 							<label for="zustellung" class="form-label col-sm-4">Zustellung</label>
-							<div class="col-sm-3">
+							<div class="col-sm-6">
 								<div class="form-check">	
 									<input id="zustellung" type="checkbox" class="form-check-input" value="1" v-model="contactData['zustellung']">
 								</div>
@@ -273,98 +265,84 @@ export default{
 							
 						<div class="row mb-3">
 							<label for="firma_name" class="form-label col-sm-4">Firma / Standort</label>
-								<div class="col-sm-3">
+								<div class="col-sm-6">
 									<PvAutoComplete v-model="contactData['standort']" optionLabel="kurzbz" :suggestions="filteredStandorte" @complete="search" minLength="3"/>
 								</div>	
-						</div>		
-																						   
-					</form>  
-								
-				  </div>
-				  <div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+						</div>	
+				</form>
+			    <template #footer>
+            		<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
 					<button type="button" class="btn btn-primary" @click="addNewContact()">OK</button>
-				  </div>
-				</div>
-			  </div>
-			</div>
+            	</template>
+		</BsModal>
 				
-			<!--Modal: Edit Contact-->
-			<div ref="editContactModal" class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel" aria-hidden="true">
-			  <div class="modal-dialog">
-				<div class="modal-content">
-				  <div class="modal-header">
-					<h5 class="modal-title" id="editContactModalLabel">Kontakt bearbeiten</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetModal"></button>
-				  </div>
-				  <div class="modal-body">
-						<form ref="contactData">
-													
-							<div class="row mb-3">
-								<label for="kontakttyp" class="form-label col-sm-4">Typ</label>
-								<div class="col-sm-5">
-									<select id="kontakttyp" class="form-control" v-model="contactData.kontakttyp">
-										<option value="">-- keine Auswahl --</option>
-										<option v-for="typ in kontakttypen" :key="typ.kontakttyp_kurzbz" :value="typ.kontakttyp" >{{typ.kontakttyp}}</option>
-									</select>
-								</div>
-							</div>
-							<div class="row mb-3">											   
-								<label for="kontakt" class="form-label col-sm-4">Kontakt</label>
-								<div class="col-sm-3">
-									<input type="text" :readonly="readonly" class="form-control-sm" id="kontakt" v-model="contactData['kontakt']">
-								</div>
-							</div>	
-							<div class="row mb-3">											   
-								<label for="anmerkung" class="form-label col-sm-4">Anmerkung</label>
-								<div class="col-sm-3">
-									<input type="text" :readonly="readonly" class="form-control-sm" id="anmerkung" v-model="contactData['anmerkung']">
-								</div>
-							</div>	
-							
-							<div class="row mb-3">
-								<label for="zustellung" class="form-label col-sm-4">Zustellung</label>
-								<div class="col-sm-3">
-									<div class="form-check">	
-										<input id="zustellung" type="checkbox" class="form-check-input" value="1" v-model="contactData['zustellung']">
-									</div>
-								</div>
-							</div>	
-							
-							<div class="row mb-3">					
-								<input type="hidden" :readonly="readonly" class="form-control-sm" id="standort_id" v-model="contactData.standort_id">
-							</div>
-							
-<!--							<div class="row mb-3">											   
-								<label for="name" class="form-label col-sm-4">Firma/Standort</label>
-								<div class="col-sm-2">
-									<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="addressData['name']">
-								</div>
-							</div>	-->
-							
-							<div class="row mb-3">
-								<label for="standort" class="form-label col-sm-4">Firma / Standort</label>
-									<div v-if="contactData.kurzbz" class="col-sm-3">
-										<input type="text" :readonly="readonly" class="form-control-sm" id="name" v-model="contactData.kurzbz">
-									</div>					
-									<div v-else class="col-sm-3">
-										<PvAutoComplete v-model="contactData['standort']" optionLabel="kurzbz" :suggestions="filteredStandorte" @complete="search" minLength="3"/>
-									</div>	
-							</div>																					   
-					</form>  
-								
-				  </div>
-				  <div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
-					<button ref="Close" type="button" class="btn btn-primary" @click="updateContact(contactData.kontakt_id)">OK</button>
-	
-				  </div>
+					
+		<!--Modal: Edit Contact-->
+		<BsModal ref="editContactModal">
+			<template #title>Kontakt bearbeiten</template>
+			<form class="row g-3" ref="contactData">	
+				<div class="row mb-3">
+					<label for="kontakttyp" class="form-label col-sm-4">Typ</label>
+					<div class="col-sm-6">
+						<select id="kontakttyp" class="form-control" v-model="contactData.kontakttyp">
+							<option value="">-- keine Auswahl --</option>
+							<option v-for="typ in kontakttypen" :key="typ.kontakttyp_kurzbz" :value="typ.kontakttyp" >{{typ.kontakttyp}}</option>
+						</select>
+					</div>
+				</div>
+				<div class="row mb-3">											   
+					<label for="kontakt" class="form-label col-sm-4">Kontakt</label>
+					<div class="col-sm-6">
+						<input type="text" :readonly="readonly" class="form-control" id="kontakt" v-model="contactData['kontakt']">
+					</div>
+				</div>	
+				<div class="row mb-3">											   
+					<label for="anmerkung" class="form-label col-sm-4">Anmerkung</label>
+					<div class="col-sm-6">
+						<input type="text" :readonly="readonly" class="form-control" id="anmerkung" v-model="contactData['anmerkung']">
+					</div>
+				</div>		
+				<div class="row mb-3">
+					<label for="zustellung" class="form-label col-sm-4">Zustellung</label>
+					<div class="col-sm-6">
+						<div class="form-check">	
+							<input id="zustellung" type="checkbox" class="form-check-input" value="1" v-model="contactData['zustellung']">
+						</div>
+					</div>
+				</div>	
+				<div class="row mb-3">					
+					<input type="hidden" :readonly="readonly" class="form-control" id="standort_id" v-model="contactData.standort_id">
 				</div>
-			  </div>
-			</div>
 				
-			<!--		Modal: Delete Contact-->
-			<div ref="deleteContactModal" class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
+				<div class="row mb-3">
+					<label for="standort" class="form-label col-sm-4">Firma / Standort</label>
+						<div v-if="contactData.kurzbz" class="col-sm-3">
+							<input type="text" :readonly="readonly" class="form-control" id="name" v-model="contactData.kurzbz">
+						</div>					
+						<div v-else class="col-sm-3">
+							<PvAutoComplete v-model="contactData['standort']" optionLabel="kurzbz" :suggestions="filteredStandorte" @complete="search" minLength="3"/>
+						</div>	
+				</div>	
+			</form>
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
+				<button type="button" class="btn btn-primary" @click="updateContact(contactData.kontakt_id)">OK</button>
+			</template>
+		</BsModal>
+									
+		<!--		Modal: Delete Contact TODO(manu) Formatierung-->
+		<BsModal ref="deleteContactModal" >
+			<template #title>Kontakt löschen</template>  
+			<template #default>
+				<p>Kontakt wirklich löschen?</p>	
+			</template>												
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetModal">Abbrechen</button>
+				<button ref="Close" type="button" class="btn btn-primary" @click="deleteContact(contactData.kontakt_id)">OK</button>
+			</template> 
+		</BsModal>
+		
+<!--		<div ref="deleteContactModal" class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
 			  <div class="modal-dialog">
 				<div class="modal-content">
 				  <div class="modal-header">
@@ -380,7 +358,7 @@ export default{
 				  </div>
 				</div>
 			  </div>
-			</div>
+			</div>-->
 				
 			<core-filter-cmpt
 				ref="table"