Merge branch 'master' into epic-56039/LV-Evaluierung

# Conflicts:
#	system/dbupdate_3.4.php
#	system/phrasesupdate.php

public/css/Studentenverwaltung.css

@@ -1,15 +1,21 @@
 @import './Fhc.css';
+@import './SvgIcons.css';
 @import './components/searchbar/searchbar.css';
 @import './components/verticalsplit.css';
 @import './components/FilterComponent.css';
 @import './components/Tabs.css';
 @import './components/Notiz.css';
 @import './components/Messages.css';
+@import './components/AppMenu.css';
 
 html {
   font-size: .875em;
 }
 
+#appMenu {
+	width: 300px;
+}
+
 .navbar-dark .navbar-brand:focus {
 	box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
 	z-index: 3;
@@ -37,10 +43,6 @@ html {
 	flex: 1 1 auto;
 }
 
-#sidebarMenu {
-	width: 0%;
-}
-
 .tabulator-row.disabled.tabulator-row-odd .tabulator-cell {
 	color: var(--gray-400);
 }

public/css/SvgIcons.css

@@ -0,0 +1,28 @@
+/* Themable Variables */
+:root {
+	--svg-icon-apps: var(--fhc-icon-apps, url('data:image/svg+xml,\
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
+			<circle cx="15" cy="15" r="15"/>\
+			<circle cx="15" cy="50" r="15"/>\
+			<circle cx="15" cy="85" r="15"/>\
+			<circle cx="50" cy="15" r="15"/>\
+			<circle cx="50" cy="50" r="15"/>\
+			<circle cx="50" cy="85" r="15"/>\
+			<circle cx="85" cy="15" r="15"/>\
+			<circle cx="85" cy="50" r="15"/>\
+			<circle cx="85" cy="85" r="15"/>\
+		</svg>'));
+}
+.svg-icon {
+	display: inline-block;
+	width: 1rem;
+	line-height: 1;
+	background-color: currentColor;
+}
+.svg-icon:before {
+	content: "\00a0";
+}
+.svg-icon.svg-icon-apps {
+	-webkit-mask-image: var(--svg-icon-apps);
+	mask-image: var(--svg-icon-apps);
+}

public/css/components/AppMenu.css

@@ -0,0 +1,26 @@
+.fhc-app-menu {
+	display: flex;
+	flex-direction: column;
+	padding-left: 0;
+	margin: calc(var(--bs-offcanvas-padding-y) * -1) calc(var(--bs-offcanvas-padding-x) * -1);
+}
+.fhc-app-menu li {
+	display: block;
+	border: var(--bs-border-width) solid var(--bs-border-color);
+}
+.fhc-app-menu li + li {
+	border-top-width: 0;
+}
+.fhc-app-menu li a {
+	display: block;
+	padding: .5rem 1rem;
+	text-decoration: none;
+}
+.fhc-app-menu li a.active,
+.fhc-app-menu li a:hover {
+	--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+	background: var(--surface-hover);
+}
+.fhc-app-menu li a.active {
+	pointer-events: none;
+}

public/css/components/primevue.css

@@ -5690,3 +5690,32 @@
   outline: 0;
   box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
 }
+
+/* input-group */
+/* autocomplete */
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) > .p-autocomplete-input,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control > .p-autocomplete-input,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select > .p-autocomplete-input,
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > .p-autocomplete-input,
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) > .p-autocomplete > .p-autocomplete-input,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control > .p-autocomplete > .p-autocomplete-input,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select > .p-autocomplete > .p-autocomplete-input,
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > .p-autocomplete > .p-autocomplete-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > .p-autocomplete-input,
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > .p-autocomplete > .p-autocomplete-input {
+  margin-left: calc(var(--bs-border-width) * -1);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.p-inputtext.is-invalid:enabled:hover {
+  border-color: var(--bs-form-invalid-border-color);
+}
+.p-inputtext.is-invalid:enabled:focus,
+.was-validated .p-inputtext:invalid:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
+}

public/js/api/factory/messages/messages.js

@@ -62,10 +62,10 @@ export default {
 			url: 'api/frontend/v1/messages/messages/getUid/' + userParams.id + '/' + userParams.type_id
 		};
 	},
-	getVorlagentext(vorlage_kurzbz){
+	getDataVorlage(vorlage_kurzbz){
 		return {
 			method: 'get',
-			url: 'api/frontend/v1/messages/messages/getVorlagentext/' + vorlage_kurzbz
+			url: 'api/frontend/v1/messages/messages/getDataVorlage/' + vorlage_kurzbz
 		};
 	},
 	getNameOfDefaultRecipient(params){

public/js/api/factory/studstatus/leitung.js

@@ -34,7 +34,7 @@ export default {
 			url: '/api/frontend/v1/studstatus/leitung/getHistory/' + antrag_id
 		};
 	},
-	getPrestudents(query, signal) {
+	getPrestudents(query) {
 		return {
 			method: 'post',
 			url: '/api/frontend/v1/studstatus/leitung/getPrestudents',

public/js/api/factory/stv/abschlusspruefung.js

@@ -86,13 +86,15 @@ export default {
 	getMitarbeiter(searchString) {
 		return {
 			method: 'get',
-			url: 'api/frontend/v1/stv/abschlusspruefung/getMitarbeiter/' + searchString
+			url: 'api/frontend/v1/stv/abschlusspruefung/getMitarbeiter',
+			params: { searchString }
 		};
 	},
 	getPruefer(searchString) {
 		return {
 			method: 'get',
-			url: 'api/frontend/v1/stv/abschlusspruefung/getPruefer/' + searchString
+			url: 'api/frontend/v1/stv/abschlusspruefung/getPruefer',
+			params: { searchString }
 		};
 	},
 	getNoten() {
@@ -108,16 +110,11 @@ export default {
 			params: { uids }
 		};
 	},
-	getAllMitarbeiter(){
+	searchPerson(searchString) {
 		return {
 			method: 'get',
-			url: 'api/frontend/v1/stv/abschlusspruefung/getAllMitarbeiter/'
+			url: 'api/frontend/v1/stv/abschlusspruefung/searchPerson/',
+			params: { id }
 		};
 	},
-	getAllPersons(){
-		return {
-			method: 'get',
-			url: 'api/frontend/v1/stv/abschlusspruefung/getAllPersons/'
-		};
-	}
-};
+};

public/js/api/factory/stv/app.js

@@ -16,6 +16,12 @@
  */
 
 export default {
+	configFilter() {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/config/filter'
+		};
+	},
 	configStudent() {
 		return {
 			method: 'get',

public/js/api/factory/stv/archiv.js

@@ -39,5 +39,5 @@ export default {
 			url: 'api/frontend/v1/stv/archiv/delete',
 			params: {akte_id, studiengang_kz}
 		};
-	}
+	},
 };

public/js/api/factory/stv/details.js

@@ -35,4 +35,14 @@ export default {
 			params
 		};
 	},
+	saveStudent(student_uid, studiensemester_kurzbz, params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/student/saveStudent/'
+				+ encodeURIComponent(student_uid)
+				+ '/'
+				+ encodeURIComponent(studiensemester_kurzbz),
+			params
+		};
+	}
 };

public/js/api/factory/stv/documents.js

@@ -73,4 +73,17 @@ export default {
 			params
 		};
 	},
+	getDocumentDropdown(params){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/dokumente/getDocumentDropDown/' + params.prestudent_id + '/' + params.studiensemester_kurzbz + '/' + params.studiengang_kz,
+		};
+	},
+	getDocumentDropdownMulti(studentUids, params){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/dokumente/getDocumentDropDownMulti/' + params.studiensemester_kurzbz + '/' + params.studiengang_kz,
+			params: {studentUids}
+		};
+	}
 }

public/js/api/factory/stv/group.js

@@ -16,6 +16,27 @@
  */
 
 export default {
+	add(uid, gruppe_kurzbz, studiensemester_kurzbz) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/gruppen/add/',
+			params: {
+				uid,
+				gruppe_kurzbz,
+				studiensemester_kurzbz
+			}
+		};
+	},
+	search(query, studiengang_kz) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/gruppen/search/',
+			params: {
+				query,
+				studiengang_kz
+			}
+		};
+	},
 	getGruppen(id) {
 		return {
 			method: 'get',

public/js/api/factory/stv/lehrverband.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (C) 2025 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export default {
+	hasOrgforms(studiengang_kz) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/lehrverband/hasOrgforms/' + studiengang_kz
+		};
+	},
+	getTree(studiengang_kz) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/lehrverband/getTree/' + studiengang_kz
+		};
+	}
+};

public/js/api/factory/stv/projektarbeit.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (C) 2025 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export default {
+	getProjektarbeit(uid) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/getProjektarbeit',
+			params: { uid }
+		};
+	},
+	getTypenProjektarbeit() {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/getTypenProjektarbeit'
+		};
+	},
+	getFirmen(searchString) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/getFirmen',
+			params: {searchString}
+		};
+	},
+	getLehrveranstaltungen(student_uid, studiengang_kz, studiensemester_kurzbz, additional_lehrveranstaltung_id) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/getLehrveranstaltungen',
+			params: { student_uid, studiengang_kz, studiensemester_kurzbz, additional_lehrveranstaltung_id }
+		};
+	},
+	getNoten() {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/getNoten'
+		};
+	},
+	loadProjektarbeit(projektarbeit_id) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektarbeit/loadProjektarbeit',
+			params: { projektarbeit_id }
+		};
+	},
+	addNewProjektarbeit(params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektarbeit/insertProjektarbeit',
+			params
+		};
+	},
+	updateProjektarbeit(params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektarbeit/updateProjektarbeit',
+			params
+		};
+	},
+	deleteProjektarbeit(projektarbeit_id) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektarbeit/deleteProjektarbeit',
+			params: { projektarbeit_id }
+		};
+	}
+};

public/js/api/factory/stv/projektbetreuer.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (C) 2025 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export default {
+	getProjektbetreuer(projektarbeit_id ) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getProjektbetreuer',
+			params: { projektarbeit_id }
+		};
+	},
+	getBetreuerarten() {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getBetreuerarten'
+		};
+	},
+	getDefaultStundensaetze(person_id, studiensemester_kurzbz) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getDefaultStundensaetze',
+			params: { person_id, studiensemester_kurzbz }
+		};
+	},
+	getNoten() {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getNoten'
+		};
+	},
+	saveProjektbetreuer(projektarbeit_id, projektbetreuer) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektbetreuer/saveProjektbetreuer',
+			params: { projektarbeit_id, projektbetreuer }
+		};
+	},
+	deleteProjektbetreuer(projektarbeit_id, person_id, betreuerart_kurzbz) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektbetreuer/deleteProjektbetreuer',
+			params: { projektarbeit_id, person_id, betreuerart_kurzbz }
+		};
+	},
+	getProjektbetreuerBySearchQuery(searchString) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getProjektbetreuerBySearchQuery',
+			params: { searchString }
+		};
+	},
+	getPerson(person_id) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/projektbetreuer/getPerson',
+			params: { person_id }
+		};
+	},
+	validateProjektbetreuer(projektbetreuer) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/projektbetreuer/validateProjektbetreuer',
+			params: { projektbetreuer }
+		};
+	}
+};

public/js/api/factory/stv/students.js

@@ -58,5 +58,12 @@ export default {
 			url: 'api/frontend/v1/stv/student/check',
 			params
 		};
+	},
+	add(params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/stv/student/add',
+			params
+		};
 	}
-};
+};

public/js/api/factory/stv/vertrag.js

@@ -0,0 +1,20 @@
+export default {
+
+	getVertrag(vertrag_id)
+	{
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/stv/vertrag/getVertrag',
+			params: { vertrag_id },
+		};
+	},
+
+	cancelVertrag(data)
+	{
+		return {
+			method: 'post',
+			url: '/api/frontend/v1/stv/vertrag/cancelVertrag/',
+			params: data
+		};
+	}
+}

public/js/api/messages/person.js

@@ -20,8 +20,8 @@ export default {
 		getUid(params){
 			return this.$fhcApi.get('api/frontend/v1/messages/messages/getUid/'+ params.id + '/' + params.type_id);
 		},
-		getVorlagentext(vorlage_kurzbz){
-			return this.$fhcApi.get('api/frontend/v1/messages/messages/getVorlagentext/' + vorlage_kurzbz);
+		getDataVorlage(vorlage_kurzbz){
+			return this.$fhcApi.get('api/frontend/v1/messages/messages/getDataVorlage/' + vorlage_kurzbz);
 		},
 		getNameOfDefaultRecipient(params){
 			return this.$fhcApi.get('api/frontend/v1/messages/messages/getNameOfDefaultRecipient/' + params.id + '/' + params.type_id);

public/js/apps/Dashboard/Fhc.js

@@ -19,6 +19,7 @@ import Studium from "../../components/Cis/Studium/Studium.js";
 
 import ApiRenderers from '../../api/factory/renderers.js';
 import ApiRouteInfo from '../../api/factory/routeinfo.js';
+import {capitalize} from "../../helpers/StringHelpers.js";
 
 const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 
@@ -320,7 +321,7 @@ const app = Vue.createApp({
 
 // kind of a bandaid for bad css on some pages to avoid horizontal scroll
 setScrollbarWidth();
-
+app.config.globalProperties.$capitalize = capitalize;
 app.use(router);
 app.use(primevue.config.default, {
 	zIndex: {

public/js/components/AppMenu.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (C) 2025 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import ApiNavigation from '../api/factory/navigation.js';
+
+export default {
+	name: 'AppMenu',
+	props: {
+		appIdentifier: {
+			type: String,
+			required: true
+		},
+		navigationPage: {
+			type: String,
+			default: 'apps'
+		}
+	},
+	data() {
+		return {
+			items: []
+		};
+	},
+	watch: {
+		navigationPage() {
+			this.getItems();
+		}
+	},
+	methods: {
+		getItems() {
+			this.$api
+				.call(ApiNavigation.getMenu(this.navigationPage))
+				.then(result => {
+					this.items = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+	},
+	created() {
+		this.getItems();
+	},
+	template: /* html */`
+	<ul class="fhc-app-menu">
+		<li v-for="(menu, key) in items" :key="key">
+			<a
+				:href="menu.link"
+				@click="menu.onClickCall"
+				:class="{ active: key === appIdentifier }"
+			>
+				<i v-if="menu.icon" class="fa fa-fw" :class="'fa-'+ menu.icon" />
+				{{ menu.description }}
+			</a>
+		</li>
+	</ul>`
+};

public/js/components/Calendar/Base/DragAndDrop.js

@@ -96,8 +96,11 @@ export default {
 	},
 	methods: {
 		onDragstart(evt) {
-			DragAndDrop.setTransferData(evt.detail.originalEvent, evt.detail.item.orig);
-			this.draggedInternalEvent = evt.detail.item;
+			const data = DragAndDrop.convertToTransferData(evt.detail.item.orig);
+			if (DragAndDrop.isValidDragObject(data)) {
+				DragAndDrop.setTransferData(evt.detail.originalEvent, data);
+				this.draggedInternalEvent = evt.detail.item;
+			}
 		},
 		onDragend() {
 			this.draggedInternalEvent = null;

public/js/components/Cis/Cms/Content_types/Raum_contentmittitel.js

@@ -100,6 +100,11 @@ export default {
 				link_element.href = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + "/CisVue/Cms/getRoomInformation/" + room_name;
 				link_element.appendChild(title.cloneNode(true));
 				title.replaceWith(link_element);
+
+				let lvplanlinks = document.querySelectorAll('.menubox a[href*="stpl_week.php"]');
+				for(let lvplanlink of lvplanlinks) {
+					lvplanlink.href = link_element.href;
+				}
 			}
 			else
 			{

public/js/components/DetailHeader/DetailHeader.js

@@ -121,7 +121,8 @@ export default {
 						class="d-flex flex-column align-items-center h-100 position-relative d-inline-block"
 					>
 						<img
-						  class="d-block h-100 rounded"
+						  class="d-block rounded"
+						  style="height: 84px;"
 						  alt="Profilbild"
 						  :src="getFotoSrc(person.foto)"
 						/>
@@ -175,7 +176,8 @@ export default {
 				<div class="col-md-2 d-flex justify-content-start align-items-center w-30 pb-3 gap-3 position-relative"
 						style="max-height: 8rem; max-width: 6rem; overflow: hidden;">
 					<img
-					  class="d-block h-100 rounded"
+					  class="d-block rounded"
+					  style="height: 84px;"
 					  alt="Profilbild"
 					  :src="'data:image/jpeg;base64,' + headerDataMa.foto"
 					/>

public/js/components/LVVerwaltung/LVVerwaltung.js

@@ -1,5 +1,6 @@
 import CoreSearchbar from "../searchbar/searchbar.js";
 import VerticalSplit from "../verticalsplit/verticalsplit.js";
+import AppMenu from "../AppMenu.js";
 import StvVerband from "../Stv/Studentenverwaltung/Verband.js";
 import StvStudiensemester from "../Stv/Studentenverwaltung/Studiensemester.js";
 import LvTable from "./Setup/Table.js";
@@ -17,6 +18,7 @@ export default {
 	components: {
 		CoreSearchbar,
 		VerticalSplit,
+		AppMenu,
 		StvVerband,
 		StvStudiensemester,
 		LvTable,
@@ -247,14 +249,47 @@ export default {
 			.catch(this.$fhcAlert.handleSystemError);
 	},
 
-	template: `
+	template: /* html */`
 	<div class="stv">
 		<header class="navbar navbar-expand-lg navbar-dark bg-dark flex-md-nowrap p-0 shadow">
-			<a class="navbar-brand col-md-4 col-lg-3 col-xl-2 me-0 px-3">LV Verwaltung</a>
+			<div class="col-md-4 col-lg-3 col-xl-2 d-flex align-items-center">
+				<button
+					class="btn btn-outline-light border-0 m-1 collapsed"
+					type="button"
+					data-bs-toggle="offcanvas"
+					data-bs-target="#appMenu"
+					aria-controls="appMenu"
+					aria-expanded="false"
+					:aria-label="$p.t('ui/toggle_nav')"
+				>
+					<span class="svg-icon svg-icon-apps"></span>
+				</button>
+				<a class="navbar-brand me-0">LV Verwaltung</a>
+			</div>
+			<button
+				class="btn btn-outline-light border-0 d-md-none m-1 collapsed"
+				type="button"
+				data-bs-toggle="offcanvas"
+				data-bs-target="#sidebarMenu"
+				aria-controls="sidebarMenu"
+				aria-expanded="false"
+				:aria-label="$p.t('ui/toggle_nav')"
+			>
+				<span class="fa-solid fa-table-list"></span>
+			</button>
 			<core-searchbar :searchoptions="searchbaroptions" :searchfunction=searchfunction class="searchbar w-100"></core-searchbar>
 		</header>
 		<div class="container-fluid overflow-hidden">
 			<div class="row h-100">
+				<aside id="appMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
+					<div class="offcanvas-header">
+						LV Verwaltung
+						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>
+					</div>
+					<div class="offcanvas-body">
+						<app-menu app-identifier="lvv" />
+					</div>
+				</aside>
 				<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
 					<div class="offcanvas-header justify-content-end px-1 d-md-none">
 						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>

public/js/components/Messages/Details/NewMessage/Modal.js

@@ -136,17 +136,13 @@ export default {
 					}
 				);
 		},
-		getVorlagentext(vorlage_kurzbz){
+		getDataVorlage(vorlage_kurzbz){
 			return this.$api
-				.call(this.endpoint.getVorlagentext(vorlage_kurzbz))
+				.call(this.endpoint.getDataVorlage(vorlage_kurzbz))
 				.then(response => {
-					this.formData.body = response.data;
-				}).catch(this.$fhcAlert.handleSystemError)
-				.finally(() => {
-					//this.resetForm();
-					//closeModal
-					//closewindwo
-				});
+					this.formData.body = response.data.text;
+					this.formData.subject = response.data.subject;
+				}).catch(this.$fhcAlert.handleSystemError);
 		},
 		getPreviewText(){
 			const data = new FormData();
@@ -197,8 +193,7 @@ export default {
 		},
 		handleSelectedVorlage(vorlage_kurzbz) {
 			if (typeof vorlage_kurzbz === "string") {
-				this.getVorlagentext(vorlage_kurzbz);
-				this.formData.subject = vorlage_kurzbz;
+				this.getDataVorlage(vorlage_kurzbz);
 			}
 		},
 		showPreview(){
@@ -240,7 +235,7 @@ export default {
 			handler(newVal){
 				if (newVal && newVal != null) {
 					this.formData.subject = newVal;
-					return this.getVorlagentext(newVal);
+					return this.getDataVorlage(newVal);
 				}
 			}
 		},

public/js/components/Messages/Details/NewMessage/NewDiv.js

@@ -136,15 +136,13 @@ export default {
 					}
 				);
 		},
-		getVorlagentext(vorlage_kurzbz){
+		getDataVorlage(vorlage_kurzbz){
 			return this.$api
-				.call(this.endpoint.getVorlagentext(vorlage_kurzbz))
+				.call(this.endpoint.getDataVorlage(vorlage_kurzbz))
 				.then(response => {
-					this.formData.body = response.data;
-				}).catch(this.$fhcAlert.handleSystemError)
-				.finally(() => {
-					//this.resetForm();
-				});
+					this.formData.body = response.data.text;
+					this.formData.subject = response.data.subject;
+				}).catch(this.$fhcAlert.handleSystemError);
 		},
 		getPreviewText(id, typeId){
 			const data = new FormData();
@@ -164,20 +162,11 @@ export default {
 		insertVariable(selectedItem){
 			if (this.editor) {
 				this.editor.insertContent(selectedItem.value + " ");
-				//TODO(Manu) check: Laden von Variblen geht nicht wenn kein Zeichen danach kommt
-				// nicht mal mit Punkt adden gehts ohne eintrag nach vars
-								//this.editor.focus();
-							//	this.editor.setDirty(true);
 
-				this.editor.setDirty(true);//seting dirty true if changes appear
-			//	console.log(tinyMCE.activeEditor.isDirty());//dirty output  = true
-
-
-				//this.editor.undoManager.add();
-
-				//this.editor.insertContent(selectedItem.value + "\u00A0");
-				//this.editor.insertContent(`<span>${selectedItem.value}&nbsp;</span>`);
-				//this.editor.selection.setCursorLocation(this.editor.getBody(), 1);
+				this.editor.fire('input');
+				this.editor.fire('change');
+				this.editor.setDirty(true);
+				this.editor.save();
 
 			} else {
 				console.error("Editor instance is not available.");
@@ -202,8 +191,7 @@ export default {
 		},
 		handleSelectedVorlage(vorlage_kurzbz) {
 			if (typeof vorlage_kurzbz === "string") {
-				this.getVorlagentext(vorlage_kurzbz);
-				this.formData.subject = vorlage_kurzbz;
+				this.getDataVorlage(vorlage_kurzbz);
 			}
 		},
 		hideTemplate(){
@@ -248,7 +236,7 @@ export default {
 
 				if (newVal && newVal != null) {
 					this.formData.subject = newVal;
-					return this.getVorlagentext(newVal);
+					return this.getDataVorlage(newVal);
 				}
 			}
 		},

public/js/components/Messages/Details/TableMessages.js

@@ -274,6 +274,11 @@ export default {
 			this.$refs.table.reloadTable();
 		},
 		buildTreemap(messages) {
+			if (!messages || !messages.data || messages.data.length === 0)
+			{
+				return {data: [], last_page: 0};
+			}
+
 			const last_page = messages.meta.count;
 			messages = messages.data;
 			const messageMap = new Map();

public/js/components/Studierendenantrag/Leitung/Actions/New.js

@@ -37,16 +37,16 @@ export default {
 			});
 		},
 		loadData(evt) {
-                        if( evt.query.length < 2 )
-                        {
-                            return false;
-                        }
+			if (evt.query.length < 2)
+			{
+				return false;
+			}
+
+			if (this.abortController)
+			{
+				this.abortController.abort();
+			}
 
-			if (this.abortController instanceof AbortController
-                            && this.abortController.signal.aborted === false)
-                        {
-                            this.abortController.abort();
-                        }
 			this.abortController = new AbortController();
 
 			this.$api
@@ -56,16 +56,8 @@ export default {
 				})
 				.then(result => {
 					this.data = result.data;
-                                        this.abortController = null;
 				})
-				.catch(error => {
-                                    if (this.abortController instanceof AbortController 
-                                        && this.abortController.signal.aborted === false)
-                                    {
-                                        this.abortController.abort();
-                                    }
-                                    this.$fhcAlert.handleSystemError(error);
-                                });
+				.catch(this.$fhcAlert.handleSystemError);
 		}
 	},
 	template: `

public/js/components/Stv/Studentenverwaltung.js

@@ -17,6 +17,7 @@
 
 import CoreSearchbar from "../searchbar/searchbar.js";
 import VerticalSplit from "../verticalsplit/verticalsplit.js";
+import AppMenu from "../AppMenu.js";
 import StvVerband from "./Studentenverwaltung/Verband.js";
 import StvList from "./Studentenverwaltung/List.js";
 import StvDetails from "./Studentenverwaltung/Details.js";
@@ -32,6 +33,7 @@ export default {
 	components: {
 		CoreSearchbar,
 		VerticalSplit,
+		AppMenu,
 		StvVerband,
 		StvList,
 		StvDetails,
@@ -345,11 +347,34 @@ export default {
 		//FHC_JS_DATA_STORAGE_OBJECT.systemerror_mailto = '[email protected]';this.$fhcAlert.handleSystemError(1);
 		this.handlePersonUrl();
 	},
-	template: `
+	template: /* html */`
 	<div class="stv">
 		<header class="navbar navbar-expand-lg navbar-dark bg-dark flex-md-nowrap p-0 shadow">
-			<a class="navbar-brand col-md-4 col-lg-3 col-xl-2 me-0 px-3" :href="stvRoot">StudVw: {{studiensemesterKurzbz}} {{studiengangKuerzel}}</a>
-			<button class="navbar-toggler d-md-none m-1 collapsed" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" :aria-label="$p.t('ui/toggle_nav')"><span class="navbar-toggler-icon"></span></button>
+			<div class="col-md-4 col-lg-3 col-xl-2 d-flex align-items-center">
+				<button
+					class="btn btn-outline-light border-0 m-1 collapsed"
+					type="button"
+					data-bs-toggle="offcanvas"
+					data-bs-target="#appMenu"
+					aria-controls="appMenu"
+					aria-expanded="false"
+					:aria-label="$p.t('ui/toggle_nav')"
+				>
+					<span class="svg-icon svg-icon-apps"></span>
+				</button>
+				<a class="navbar-brand me-0" :href="stvRoot">StudVw: {{studiensemesterKurzbz}} {{studiengangKuerzel}}</a>
+			</div>
+			<button
+				class="btn btn-outline-light border-0 d-md-none m-1 collapsed"
+				type="button"
+				data-bs-toggle="offcanvas"
+				data-bs-target="#sidebarMenu"
+				aria-controls="sidebarMenu"
+				aria-expanded="false"
+				:aria-label="$p.t('ui/toggle_nav')"
+			>
+				<span class="fa-solid fa-table-list"></span>
+			</button>
 			<core-searchbar
 				:searchoptions="searchbaroptions"
 				:searchfunction="searchfunction"
@@ -358,6 +383,15 @@ export default {
 		</header>
 		<div class="container-fluid overflow-hidden">
 			<div class="row h-100">
+				<aside id="appMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
+					<div class="offcanvas-header">
+						StudVw: {{studiensemesterKurzbz}} {{studiengangKuerzel}}
+						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>
+					</div>
+					<div class="offcanvas-body">
+						<app-menu app-identifier="stv" />
+					</div>
+				</aside>
 				<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
 					<div class="offcanvas-header justify-content-end px-1 d-md-none">
 						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>

public/js/components/Stv/Studentenverwaltung/Details.js

@@ -31,10 +31,14 @@ export default {
 			if (this.students.length == 1) {
 				const student = this.students[0];
 				if (student.uid)
-					return Object.fromEntries(Object.entries(this.configStudent).filter(([key, value]) => !value.showOnlyWithoutUid));
-				return Object.fromEntries(Object.entries(this.configStudent).filter(([key, value]) => !value.showOnlyWithUid));
+					return Object.fromEntries(Object.entries(this.configStudent).filter(([ , value ]) => !value.showOnlyWithoutUid));
+				return Object.fromEntries(Object.entries(this.configStudent).filter(([ , value ]) => !value.showOnlyWithUid));
+			} else if (this.students.every(student => student.uid)) {
+				return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithoutUid));
+			} else if (this.students.every(student => !student.uid)) {
+					return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid));
 			}
-			return this.configStudents;
+			return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid && !value.showOnlyWithUid));
 		}
 	},
 	methods: {
@@ -58,11 +62,11 @@ export default {
 			.catch(this.$fhcAlert.handleSystemError);
 	},
 	template: `
-	<div class="stv-details h-100 pb-3 d-flex flex-column">
+	<div class="stv-details h-100 d-flex flex-column">
 		<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
 			{{$p.t('ui', 'chooseStudent')}}
 		</div>
-		<div v-else-if="configStudent && configStudents" class="d-flex flex-column h-100 pb-3">
+		<div v-else-if="configStudent && configStudents" class="d-flex flex-column h-100">
 			<fhc-header
 				:headerData="students"
 				typeHeader="student"

public/js/components/Stv/Studentenverwaltung/Details/Abschlusspruefung/Abschlusspruefung.js

@@ -7,7 +7,6 @@ import AbschlusspruefungDropdown from "./AbschlusspruefungDropdown.js";
 
 import ApiStudiengang from '../../../../../api/factory/studiengang.js';
 import ApiStvAbschlusspruefung from '../../../../../api/factory/stv/abschlusspruefung.js';
-import ApiStvAddress from "../../../../../api/factory/stv/kontakt/address.js";
 
 export default {
 	components: {
@@ -260,14 +259,16 @@ export default {
 			arrAkadGrad: [],
 			arrNoten: [],
 			selectedVorsitz: null,
-			listeFilteredMitarbeiter: [],
-			listeAllMitarbeiter: [],
-			listeAllPersons: [],
+			filteredMitarbeiter: [],
+			filteredPersons: [],
 			selectedPruefer1: null,
 			selectedPruefer2: null,
 			selectedPruefer3: null,
-			listeFilteredPersons: [],
-			stgInfo: { typ: '', oe_kurzbz: '' }
+			stgInfo: { typ: '', oe_kurzbz: '' },
+			abortController: {
+				mitarbeiter: null,
+				persons: null
+			},
 		}
 	},
 	watch: {
@@ -307,23 +308,39 @@ export default {
 		actionEditAbschlusspruefung(abschlusspruefung_id) {
 			this.resetForm();
 			this.statusNew = false;
-			this.loadAbschlusspruefung(abschlusspruefung_id).then(() => {
+			this.loadAbschlusspruefung(abschlusspruefung_id).then((result) => {
 				//set selectedData to enable viewing label in primevue autocomplete fields
-				this.selectedVorsitz = this.listeAllMitarbeiter.find(
-					item => item.mitarbeiter_uid === this.formData.vorsitz
-				);
-				this.selectedPruefer1 = this.listeAllPersons.find(
-					item => item.person_id === this.formData.pruefer1
-				);
-				this.selectedPruefer2= this.listeAllPersons.find(
-					item => item.person_id === this.formData.pruefer2
-				);
-				this.selectedPruefer3= this.listeAllPersons.find(
-					item => item.person_id === this.formData.pruefer3
-				);
+				const data = result.data;
+				this.selectedVorsitz = {
+					label: this.getPersonLabel(data.pv_titelpre, data.pv_nachname, data.pv_vorname, data.pv_titelpost, data.pv_uid),
+					person_id: data.pv_person_id,
+					mitarbeiter_uid: data.pv_uid
+				};
+				if (data.p1_person_id) {
+					this.selectedPruefer1 = {
+						label: this.getPersonLabel(data.p1_titelpre, data.p1_nachname, data.p1_vorname, data.p1_titelpost),
+						person_id: data.p1_person_id
+					};
+				}
+				if (data.p2_person_id) {
+					this.selectedPruefer2 = {
+						label: this.getPersonLabel(data.p2_titelpre, data.p2_nachname, data.p2_vorname, data.p2_titelpost),
+						person_id: data.p2_person_id
+					}
+				};
+				if (data.p3_person_id) {
+					this.selectedPruefer3= {
+						label: this.getPersonLabel(data.p3_titelpre, data.p3_nachname, data.p3_vorname, data.p3_titelpost),
+						person_id: data.p3_person_id
+					};
+				}
 			});
 			this.$refs.finalexamModal.show();
 		},
+		getPersonLabel(titelpre, nachname, vorname, titelpost, uid) {
+			return nachname + ' ' + vorname + (titelpre ? ' ' + titelpre : '') + (titelpost ? ' ' + titelpost : '') + (uid ? ' (' + uid + ')' : '');
+				
+		},
 		actionDeleteAbschlusspruefung(abschlusspruefung_id) {
 			this.$fhcAlert
 				.confirmDelete()
@@ -439,22 +456,61 @@ export default {
 		printDocument(link) {
 			window.open(link, '_blank');
 		},
-		filterMitarbeiter(event){
-			const query = event?.query?.toLowerCase()?.trim() || "";
+		searchMitarbeiter(event) {
+			if (this.abortController.mitarbeiter) {
+				this.abortController.mitarbeiter.abort();
+			}
 
-			this.listeFilteredMitarbeiter = this.listeAllMitarbeiter.filter(item => {
-				const label = (item.label || "").toLowerCase();
-				return label.includes(query);
-			});
+			this.abortController.mitarbeiter = new AbortController();
+
+			return this.$api
+				.call(ApiStvAbschlusspruefung.getMitarbeiter(event.query))
+				.then(result => {
+					this.filteredMitarbeiter = [];
+					for (let mitarbeiter of result.data.retval) {
+						this.filteredMitarbeiter.push(
+							{
+								label: this.getPersonLabel(
+									mitarbeiter.titelpre,
+									mitarbeiter.nachname,
+									mitarbeiter.vorname,
+									mitarbeiter.titelpost,
+									mitarbeiter.mitarbeiter_uid
+								),
+								person_id: mitarbeiter.person_id,
+								mitarbeiter_uid: mitarbeiter.mitarbeiter_uid
+							}
+						);
+					}
+				});
 		},
-		filterPersons(event){
-			const query = event?.query?.toLowerCase()?.trim() || "";
+		searchPerson(event) {
+			if (this.abortController.persons) {
+				this.abortController.persons.abort();
+			}
 
-			this.listeFilteredPersons = this.listeAllPersons.filter(item => {
-				const label = (item.label || "").toLowerCase();
-				return label.includes(query);
-			});
-		}
+			this.abortController.persons = new AbortController();
+
+			return this.$api
+				.call(ApiStvAbschlusspruefung.getPruefer(event.query))
+				.then(result => {
+					this.filteredPersons = [];
+					for (let person of result.data.retval) {
+						this.filteredPersons.push(
+							{
+								label: this.getPersonLabel(
+									person.titelpre,
+									person.nachname,
+									person.vorname,
+									person.titelpost,
+									person.person_uid
+								),
+								person_id: person.person_id
+							}
+						);
+					}
+				});
+		},
 	},
 	created() {
 		this.$api
@@ -492,20 +548,6 @@ export default {
 			})
 			.catch(this.$fhcAlert.handleSystemError);
 
-		this.$api
-			.call(ApiStvAbschlusspruefung.getAllMitarbeiter())
-			.then(result => {
-				this.listeAllMitarbeiter = result.data;
-			})
-			.catch(this.$fhcAlert.handleSystemError);
-
-		this.$api
-			.call(ApiStvAbschlusspruefung.getAllPersons())
-			.then(result => {
-				this.listeAllPersons = result.data;
-			})
-			.catch(this.$fhcAlert.handleSystemError);
-
 		if (!this.student.length) {
 			this.$api
 				.call(ApiStudiengang.getStudiengangByKz(this.student.studiengang_kz))
@@ -623,8 +665,8 @@ export default {
 						optionValue="mitarbeiter_uid"
 						dropdown
 						forceSelection
-						:suggestions="listeFilteredMitarbeiter"
-						@complete="filterMitarbeiter"
+						:suggestions="filteredMitarbeiter"
+						@complete="searchMitarbeiter"
 						:min-length="3"
 					>
 					</form-input>
@@ -636,9 +678,10 @@ export default {
 						v-model="selectedPruefer1"
 						optionLabel="label"
 						optionValue="person_id"
+						dropdown
 						forceSelection
-						:suggestions="listeFilteredPersons"
-						@complete="filterPersons"
+						:suggestions="filteredPersons"
+						@complete="searchPerson"
 						:min-length="3"
 					>
 					</form-input>
@@ -669,9 +712,10 @@ export default {
 						v-model="selectedPruefer2"
 						optionLabel="label"
 						optionValue="person_id"
+						dropdown
 						forceSelection
-						:suggestions="listeFilteredPersons" 
-						@complete="filterPersons"
+						:suggestions="filteredPersons" 
+						@complete="searchPerson"
 						:min-length="3"
 					>
 					</form-input>
@@ -701,9 +745,10 @@ export default {
 						v-model="selectedPruefer3"
 						optionLabel="label"
 						optionValue="person_id"
+						dropdown
 						forceSelection
-						:suggestions="listeFilteredPersons" 
-						@complete="filterPersons"
+						:suggestions="filteredPersons" 
+						@complete="searchPerson"
 						:min-length="3"
 					>
 					</form-input>

public/js/components/Stv/Studentenverwaltung/Details/Archiv.js

@@ -3,18 +3,29 @@ import FormInput from "../../../Form/Input.js";
 import AkteEdit from "./Archiv/Edit.js";
 
 import ApiStvArchiv from '../../../../api/factory/stv/archiv.js';
+import ApiStvDocuments from '../../../../api/factory/stv/documents.js';
+import DocumentDropdown from "../Details/Archiv/DocumentDropdown.js";
+
 
 export default {
 	name: 'Archiv',
 	components: {
 		CoreFilterCmpt,
 		FormInput,
-		AkteEdit
+		AkteEdit,
+		DocumentDropdown
 	},
 	inject: {
 		currentSemester: {
 			from: 'currentSemester'
-		}
+		},
+		/* isBerechtigtDocAndOdt: {
+			from: 'hasPermissionOutputformat',
+			default: false
+		},*/
+		cisRoot: {
+			from: 'cisRoot'
+		},
 	},
 	props: {
 		modelValue: Object,
@@ -64,7 +75,8 @@ export default {
 				'abschlussdokument_lehrgaenge.xml.php': [
 						'AbschlussdokumentLehrgaenge'
 				]
-			}
+			},
+			documentDropdownObject: {}
 		};
 	},
 	computed: {
@@ -184,6 +196,38 @@ export default {
 			];
 
 			return events;
+		},
+		studentUids() {
+			if (this.modelValue.uid)
+			{
+				return [this.modelValue.uid];
+			}
+			return this.modelValue.map(e => e.uid);
+		},
+		studentKzs(){
+			if (this.modelValue.uid)
+			{
+				return [this.modelValue.studiengang_kz];
+			}
+			return this.modelValue.map(e => e.studiengang_kz);
+		},
+		stg_kz(){
+			return this.studentKzs[0];
+		},
+		showAllFormats() {
+			if( this.isBerechtigtDocAndOdt === false
+				|| !Array.isArray(this.isBerechtigtDocAndOdt) )
+			{
+				return false;
+			}
+			let retval = this.isBerechtigtDocAndOdt.includes(this.stgInfo.oe_kurzbz);
+			return retval;
+		},
+		showDropDownMulti(){
+			if (this.modelValue.length) {
+				return true;
+			}
+			return false;
 		}
 	},
 	watch: {
@@ -252,14 +296,43 @@ export default {
 		}
 	},
 	created() {
+		this.$api
+			.call(ApiStvArchiv.getArchivVorlagen())
+			.then(result => {
+				this.vorlagenArchiv = result.data;
+				this.selectedVorlage = result.data.filter(o => o.vorlage_kurzbz == 'Zeugnis')[0];
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+
+		if (this.modelValue.length) {
+			const params = {
+				studiensemester_kurzbz: this.currentSemester,
+				studiengang_kz: this.stg_kz
+			};
 			this.$api
-				.call(ApiStvArchiv.getArchivVorlagen())
-				.then(result => {this.vorlagenArchiv = result.data; this.selectedVorlage = result.data.filter(o => o.vorlage_kurzbz == 'Zeugnis')[0];})
+				.call(ApiStvDocuments.getDocumentDropdownMulti(this.studentUids, params))
+				.then(result => {
+					this.documentDropdownObject = result;
+				})
 				.catch(this.$fhcAlert.handleSystemError);
+		} else {
+			const params = {
+				prestudent_id: this.modelValue.prestudent_id,
+				studiensemester_kurzbz: this.currentSemester,
+				studiengang_kz: this.modelValue.studiengang_kz
+			};
+			this.$api
+				.call(ApiStvDocuments.getDocumentDropdown(params))
+				.then(result => {
+					this.documentDropdownObject = result;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
 
 	},
 	template: `
 	<div class="stv-details-archiv h-100 d-flex flex-column">
+
 		<core-filter-cmpt
 			ref="table"
 			table-only
@@ -270,6 +343,7 @@ export default {
 			:reload-btn-infotext="this.$p.t('table', 'reload')"
 			>
 			<template #actions>
+
 				<div class="input-group w-auto">
 					<select class="form-select" v-model="selectedVorlage">
 						<option v-for="vorlage in vorlagenArchiv" :key="vorlage.vorlage_kurzbz" :value="vorlage">
@@ -285,6 +359,17 @@ export default {
 						{{ $p.t('stv/archiv_dokument_archivieren') }}
 					</button>
 				</div>
+
+				<document-dropdown
+					v-if="documentDropdownObject.data"
+					:documents="documentDropdownObject.data"
+					:showAllFormats='true'
+					:studentUids="studentUids"
+					:showDropDownMulti="showDropDownMulti"
+					:cisRoot="cisRoot"
+					:stgKz="stg_kz"
+				></document-dropdown>
+
 			</template>
 		</core-filter-cmpt>
 		<akte-edit ref="edit" :config="config" @saved="updateData"></akte-edit>

public/js/components/Stv/Studentenverwaltung/Details/Archiv/DocumentDropdown.js

@@ -0,0 +1,99 @@
+export default {
+	name: "DocumentDropdown",
+	props: {
+		documents: {
+			type: [Object, Array],
+			required: true,
+		},
+		studentUids: {
+			type: [Array, String],
+			required: true,
+			default: () => []
+		},
+		showDropDownMulti: {
+			type: Boolean,
+			required: true
+		},
+		cisRoot: {
+			type: String,
+			required: true
+		},
+		stgKz: {
+			type: Number,
+			required: true
+		},
+		showAllFormats: {
+			type: Boolean,
+			required: true
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		printDokument(url, scope){
+			//TODO Manu(check if logic not in content (Zutrittkarte also in content folder))
+			let linkToPdf = this.cisRoot + 'content/' + url;
+			window.open(linkToPdf, '_blank');
+		}
+	},
+	template: `
+		<div class="stv-document-dropdown btn-group">
+			<button
+				ref="toolbarButton"
+				type="button"
+				class="btn btn-secondary dropdown-toggle px-5 ms-5"
+				data-bs-toggle="dropdown"
+				data-bs-auto-close="outside"
+				aria-expanded="false"
+				>
+				{{this.$p.t('dokumente','dokument_erstellen')}}
+			</button>
+
+			<ul class="dropdown-menu dropdown-menu-right">
+				<template v-for="doc in documents" :key="doc.id">
+					<li v-if="doc.type === 'documenturl'">
+					  <button class="dropdown-item" type="button" @click="printDokument(doc.url, doc.scope)">
+					  {{ doc.name }}
+					  </button>
+					</li>
+
+					<li v-else-if="doc.type === 'submenu'" class="dropend">
+					  <a
+					  class="dropdown-item dropdown-toggle"
+					  href="#"
+					  role="button"
+					  data-bs-toggle="dropdown"
+					  aria-expanded="false"
+					  >
+					  {{ doc.name }}
+					  </a>
+
+					  <ul class="dropdown-menu">
+						  <template v-for="child in doc.data" :key="child.id">
+							<li v-if="child.type === 'documenturl'">
+							<button class="dropdown-item" type="button" @click="printDokument(child.url, child.scope)">
+							  {{ child.name }}
+							</button>
+							</li>
+							<li v-else-if="child.type === 'submenu'" class="dropend">
+							<a
+							  class="dropdown-item dropdown-toggle"
+							  href="#"
+							  role="button"
+							  data-bs-toggle="dropdown"
+							  aria-expanded="false"
+							>
+							  {{ child.name }}
+							</a>
+							</li>
+						  </template>
+					  </ul>
+					</li>
+				</template>
+		  </ul>
+
+	</div>`
+};
+
+

public/js/components/Stv/Studentenverwaltung/Details/Groups.js

@@ -0,0 +1,216 @@
+import GroupsLvb from './Groups/Lvb.js';
+import GroupsSpecial from './Groups/Special.js';
+import GroupsList from './Groups/List.js';
+
+import ApiStvGroups from '../../../../api/factory/stv/group.js';
+import ApiStvDetails from '../../../../api/factory/stv/details.js';
+
+export default {
+	name: 'TabGroups',
+	components: {
+		GroupsLvb,
+		GroupsSpecial,
+		GroupsList
+	},
+	inject: {
+		$reloadList: {
+			from: '$reloadList',
+			required: true
+		},
+		currentSemester: {
+			form: 'currentSemester',
+			required: true
+		}
+	},
+	props: {
+		modelValue: [Object, Array]
+	},
+	data() {
+		return {
+			hasOrgforms: false,
+			lvbList: [],
+			specialGroups: [],
+			selectedOrgform: false,
+			selectedSemester: false,
+			selectedVerband: false,
+			selectedGruppe: false,
+			multiFormHandler: (form, errors) => {
+				function _split_errors(result, [uid, errors]) {
+					const gruppe_kurzbz = [];
+					const studiensemester_kurzbz = [];
+					const others = {};
+					errors.forEach(error => {
+						_split_messages(error.messages, gruppe_kurzbz, studiensemester_kurzbz, others);
+					});
+					if (gruppe_kurzbz.length) {
+						if (!result.formFeedback.gruppe_kurzbz)
+							result.formFeedback.gruppe_kurzbz = [];
+						result.formFeedback.gruppe_kurzbz.push(...gruppe_kurzbz);
+					}
+					if (studiensemester_kurzbz.length) {
+						if (!result.formFeedback.studiensemester_kurzbz)
+							result.formFeedback.studiensemester_kurzbz = [];
+						result.formFeedback.studiensemester_kurzbz.push(...studiensemester_kurzbz);
+					}
+					if (Object.keys(others).length) {
+						result.toast[uid] = [
+							{ type: 'validation', messages: others }
+						];
+					}
+					return result;
+				}
+				function _split_messages(messages, gruppe_kurzbz, studiensemester_kurzbz, others) {
+					Object.entries(messages).forEach(([field, msg]) => {
+						if (field == 'gruppe_kurzbz') {
+							gruppe_kurzbz.push(msg);
+						} else if (field == 'studiensemester_kurzbz') {
+							studiensemester_kurzbz.push(msg);
+						} else {
+							if (!others[field])
+								others[field] = [];
+							others[field].push(msg);
+						}
+					});
+				}
+				const { formFeedback, toast } = Object.entries(errors)
+					.reduce(_split_errors, { formFeedback: {}, toast: {} });
+
+				if (formFeedback.gruppe_kurzbz)
+					formFeedback.gruppe_kurzbz = formFeedback.gruppe_kurzbz
+						.filter((v,k,a) => a.indexOf(v) == k);
+				if (formFeedback.studiensemester_kurzbz)
+					formFeedback.studiensemester_kurzbz = formFeedback.studiensemester_kurzbz
+						.filter((v,k,a) => a.indexOf(v) == k);
+
+				form.clearValidation();
+				if (Object.keys(formFeedback)) {
+					form.setFeedback(false, formFeedback);
+				}
+
+				if (Object.keys(toast).length) {
+					console.log(toast);
+					this.$api.getErrorHandler().handler.toast(toast);
+				}
+			}
+		};
+	},
+	computed: {
+		allAreStudents() {
+			if (Array.isArray(this.modelValue))
+				return this.modelValue.every(ps => ps.uid);
+			return this.modelValue.uid;
+		},
+		sharedStg() {
+			if (Array.isArray(this.modelValue)) {
+				const first = this.modelValue.find(Boolean);
+				if (this.modelValue.every(ps => ps.studiengang_kz === first.studiengang_kz))
+					return first.studiengang_kz;
+				return undefined;
+			}
+			return this.modelValue.studiengang_kz;
+		}
+	},
+	methods: {
+		showNewGroupModal() {
+			this.$refs.newGroupModal.show()
+		},
+		changeLvb(params) {
+			let data = { semester: params.semester };
+			if (params.verband && params.verband != " ") {
+				data.verband = params.verband;
+				if (params.gruppe && params.gruppe != " ")
+					data.gruppe = params.gruppe;
+			}
+
+			let endpoint;
+
+			if (Array.isArray(this.modelValue)) {
+				endpoint = this.modelValue.map(student => [
+					student.uid + ' (' + student.vorname + ' ' + student.nachname + ')',
+					ApiStvDetails.save(
+						student.prestudent_id,
+						this.currentSemester,
+						data
+					)
+				]);
+			} else {
+				endpoint = ApiStvDetails.save(
+					this.modelValue.prestudent_id,
+					this.currentSemester,
+					data
+				);
+			}
+			this.$api
+				.call(endpoint)
+				.then(() => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
+					this.$reloadList();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		addSpecialGroup() {
+			const gruppe_kurzbz = this.$refs.newGroupModal.value.gruppe_kurzbz || this.$refs.newGroupModal.value;
+
+			if (Array.isArray(this.modelValue)) {
+				this.$refs.newGroupModal.$refs.form
+					.call(
+						this.modelValue.map(student => [
+							student.uid + ' (' + student.vorname + ' ' + student.nachname + ')',
+							ApiStvGroups.add(
+								student.uid,
+								gruppe_kurzbz,
+								this.currentSemester
+							)
+						]),
+						{
+							errorHandling: {
+								combine: { form: ['validation'] },
+								handler: { form: this.multiFormHandler }
+							}
+						}
+					)
+					.then(result => {
+						const successes = result.filter(res => res.status == 'fulfilled');
+						if (result.length == successes.length) {
+							this.$refs.newGroupModal.hide();
+						}
+						if (successes.length) {
+							this.$fhcAlert.alertSuccess(this.$p.t('gruppenmanagement/groups_added', { n: successes.length }));
+							this.$refs.list.reload();
+						}
+					})
+					.catch(this.$fhcAlert.handleSystemError);
+			} else {
+				this.$refs.newGroupModal.$refs.form
+					.call(ApiStvGroups.add(this.modelValue.uid, gruppe_kurzbz, this.currentSemester))
+					.then(() => {
+						this.$refs.newGroupModal.hide();
+						this.$fhcAlert.alertSuccess(this.$p.t('gruppenmanagement/groups_added', { n: 1 }));
+						this.$refs.list.reload();
+					})
+					.catch(this.$fhcAlert.handleSystemError);
+			}
+		}
+	},
+	template: /* html */`
+	<div class="stv-details-groups h-100 d-flex flex-column">
+		<h3>{{ $p.t('gruppenmanagement/special_groups') }}</h3>
+		<groups-special
+			ref="newGroupModal"
+			:default-stg="sharedStg"
+			@submit.capture.prevent="addSpecialGroup"
+		/>
+		<groups-list
+			ref="list"
+			class="mb-3"
+			:students="modelValue"
+			@new="showNewGroupModal"
+		/>
+
+		<h3>{{ $p.t('lehre/lehrverband') }}</h3>
+		<groups-lvb
+			:students="modelValue"
+			@submit="changeLvb"
+		/>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Groups/List.js

@@ -0,0 +1,171 @@
+import { CoreFilterCmpt } from "../../../../filter/Filter.js";
+
+import ApiStvGroups from '../../../../../api/factory/stv/group.js';
+
+export default {
+	name: 'TabGroupsList',
+	components: {
+		CoreFilterCmpt
+	},
+	inject: [
+		"currentSemester"
+	],
+	props: {
+		students: Object
+	},
+	emits: [
+		"new"
+	],
+	data() {
+		return {
+			phrasenLoaded: false,
+			optionsReady: true
+		};
+	},
+	computed: {
+		tabulatorOptions() {
+			let ajaxRequestFunc, ajaxResponse, initialFilter;
+			if (Array.isArray(this.students)) {
+				ajaxRequestFunc = () => {
+					return this.$api.call(
+						this.students.map(student => ApiStvGroups.getGruppen(student.uid))
+					);
+				};
+				ajaxResponse = (url, params, response) => {
+					return response.reduce((data, result) => [
+						...data,
+						...result.value.data
+					], []);
+				};
+				initialFilter = [
+					this.students.map(student => {
+						return { field: "uid", type: "=", value: student.uid };
+					}),
+					[
+						{ field: "studiensemester_kurzbz", type: "=", value: null },
+						{ field: "studiensemester_kurzbz", type: "=", value: this.currentSemester }
+					]
+				];
+			} else {
+				ajaxRequestFunc = () => {
+					return this.$api.call(
+						ApiStvGroups.getGruppen(this.students.uid)
+					);
+				};
+				ajaxResponse = (url, params, response) => {
+					return response.data;
+				};
+				initialFilter = [
+					{ field: "uid", type: "=", value: this.students.uid },
+					[
+						{ field: "studiensemester_kurzbz", type: "=", value: null },
+						{ field: "studiensemester_kurzbz", type: "=", value: this.currentSemester }
+					]
+				];
+			}
+			return {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc,
+				ajaxResponse,
+				initialFilter,
+				columns: [
+					{ title: this.$p.t('gruppenmanagement/gruppe'), field: "gruppe_kurzbz" },
+					{ title: this.$p.t('ui/bezeichnung'), field: "bezeichnung" },
+					{ title: this.$p.t('lehre/studiensemester'), field: "studiensemester_kurzbz" },
+					{
+						title: this.$p.t('gruppenmanagement/automatisch_generiert'),
+						field: "generiert",
+						formatter: "tickCross",
+						hozAlign: "center",
+						formatterParams: {
+							tickElement: '<i class="fa fa-check text-success"></i>',
+							crossElement: '<i class="fa fa-xmark text-danger"></i>'
+						}
+					},
+					{ title: this.$p.t('ui/student_uid'), field: "uid" },
+					{
+						title: this.$p.t('global/actions'),
+						field: 'actions',
+						minWidth: 150, // Ensures Action-buttons will be always fully displayed
+						formatter: (cell, formatterParams, onRendered) => {
+							const container = document.createElement('div');
+							container.className = "d-flex gap-2";
+
+							const data = cell.getData();
+
+							const button = document.createElement('button');
+							button.className = 'btn btn-outline-secondary btn-action';
+							button.innerHTML = '<i class="fa fa-xmark"></i>';
+							button.title = this.$p.t('ui', 'loeschen');
+							button.addEventListener('click', () =>
+								this.actionDeleteGroup(data)
+							);
+							if (data.generiert)
+								button.disabled = true;
+							container.append(button);
+
+							return container;
+						},
+						frozen: true
+					}
+				],
+				height: 'auto',
+				index: 'group_id',
+				persistenceID: 'stv-details-group-list'
+			};
+		}
+	},
+	watch: {
+		tabulatorOptions() {
+			// Refresh Tabulator if options have changed
+			this.optionsReady = false;
+			this.$nextTick(() => this.optionsReady = true);
+		}
+	},
+	methods: {
+		actionDeleteGroup(data) {
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? data
+					: Promise.reject({handled: true}))
+				.then(this.deleteGroup)
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		deleteGroup(params) {
+			return this.$api
+				.call(ApiStvGroups.deleteGroup(params))
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
+					this.reload();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		reload() {
+			this.$refs.table.reloadTable();
+		}
+	},
+	mounted() {
+		this.$p
+			.loadCategory(['global', 'lehre', 'ui', 'gruppenmanagement'])
+			.then(() => {
+				this.phrasenLoaded = true;
+			});
+	},
+	template: /* html */`
+	<div class="stv-details-groups-list">
+		<core-filter-cmpt
+			v-if="phrasenLoaded && optionsReady"
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			table-only
+			:side-menu="false"
+			reload
+			:reload-btn-infotext="$p.t('table/reload')"
+			new-btn-show
+			:new-btn-label="$p.t('lehre/gruppe')"
+			@click:new="$emit('new')"
+		>
+		</core-filter-cmpt>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Groups/Lvb.js

@@ -0,0 +1,241 @@
+import FhcForm from "../../../../Form/Form.js";
+
+import ApiStvLvb from '../../../../../api/factory/stv/lehrverband.js';
+
+export default {
+	name: 'TabGroupsLvb',
+	components: {
+		FhcForm
+	},
+	props: {
+		students: Object
+	},
+	emits: [
+		"submit"
+	],
+	data() {
+		return {
+			lvbList: [],
+			selectedSemester: false,
+			selectedVerband: false,
+			selectedGruppe: false
+		};
+	},
+	computed: {
+		allAreStudents() {
+			if (Array.isArray(this.students))
+				return this.students.every(ps => ps.uid);
+			return this.students.uid;
+		},
+		studiengang_kz() {
+			if (Array.isArray(this.students)) {
+				const first = this.students.find(Boolean);
+				if (this.students.every(ps => ps.studiengang_kz === first.studiengang_kz))
+					return first.studiengang_kz;
+				return false;
+			}
+			return this.students.studiengang_kz;
+		},
+		semester: {
+			get() {
+				if (this.selectedSemester !== false) {
+					if (this.lvbList.some(item => item.semester == this.selectedSemester))
+						return this.selectedSemester;
+					return false;
+				}
+				if (Array.isArray(this.students)) {
+					const first = this.students.find(Boolean);
+					if (this.lvbList.every(item => item.semester != first.semester))
+						return false;
+					if (this.students.every(ps => ps.semester === first.semester))
+						return first.semester;
+					return false;
+				}
+				if (this.lvbList.some(item => item.semester == this.students.semester))
+					return this.students.semester;
+				return false;
+			},
+			set(value) {
+				this.selectedSemester = value;
+			}
+		},
+		verband: {
+			get() {
+				if (this.semester === false)
+					return false;
+				if (this.selectedVerband !== false) {
+					if (this.lvbListVerband.some(item => item.verband == this.selectedVerband))
+						return this.selectedVerband;
+					return false;
+				}
+				if (Array.isArray(this.students)) {
+					const first = this.students.find(Boolean);
+					if (this.lvbListVerband.every(item => item.verband != first.verband))
+						return false;
+					if (this.students.every(ps => ps.verband === first.verband))
+						return first.verband;
+					return false;
+				}
+				if (this.lvbListVerband.some(item => item.verband == this.students.verband))
+					return this.students.verband;
+				return false;
+			},
+			set(value) {
+				this.selectedVerband = value;
+			}
+		},
+		gruppe: {
+			get() {
+				if (this.verband === false)
+					return false;
+				if (this.selectedGruppe !== false) {
+					if (this.lvbListGruppe.some(item => item.gruppe == this.selectedGruppe))
+						return this.selectedGruppe;
+					return false;
+				}
+				if (Array.isArray(this.students)) {
+					const first = this.students.find(Boolean);
+					if (this.lvbListGruppe.every(item => item.gruppe != first.gruppe))
+						return false;
+					if (this.students.every(ps => ps.gruppe === first.gruppe))
+						return first.gruppe;
+					return false;
+				}
+				if (this.lvbListGruppe.some(item => item.gruppe == this.students.gruppe))
+					return this.students.gruppe;
+				return false;
+			},
+			set(value) {
+				this.selectedGruppe = value;
+			}
+		},
+		stgSemester() {
+			if (!this.lvbList.length)
+				return [];
+
+			const semester = new Set(this.lvbList.map(lvb => lvb.semester));
+
+			return Array.from(semester).sort((a, b) => a - b);
+		},
+		lvbListVerband() {
+			if (!this.lvbList.length)
+				return [];
+			if (this.semester === false)
+				return [];
+
+			return this.lvbList.filter(lvb => this.semester == lvb.semester);
+		},
+		semesterVerband() {
+			if (!this.lvbListVerband.length)
+				return [];
+
+			const verband = new Set(this.lvbListVerband.map(lvb => lvb.verband.replace(/ /g, '')));
+
+			return Array.from(verband).filter(Boolean).sort();
+		},
+		lvbListGruppe() {
+			if (!this.lvbListVerband.length)
+				return [];
+			if (this.verband === false)
+				return [];
+
+			return this.lvbListVerband.filter(lvb => this.verband == lvb.verband);
+		},
+		verbandGruppe() {
+			if (!this.lvbListGruppe.length)
+				return [];
+
+			const gruppe = new Set(this.lvbListGruppe.map(lvb => lvb.gruppe.replace(/ /g, '')));
+
+			return Array.from(gruppe).filter(Boolean).sort();
+		}
+	},
+	watch: {
+		studiengang_kz() {
+			this.loadGroupsForStg();
+		}
+	},
+	methods: {
+		loadGroupsForStg() {
+			this.lvbList = [];
+
+			if (this.studiengang_kz === false)
+				return;
+
+			this.$api
+				.call(ApiStvLvb.getTree(this.studiengang_kz))
+				.then(result => this.lvbList = result.data)
+				.catch(this.$fhcAlert.handleSystemError)
+		},
+		onSubmit() {
+			let params = {
+				studiengang_kz: this.studiengang_kz,
+				semester: this.semester,
+				verband: this.verband,
+				gruppe: this.gruppe
+			};
+			this.$emit("submit", params);
+		}
+	},
+	created() {
+		this.loadGroupsForStg();
+	},
+	template: /* html */`
+	<div class="stv-details-groups-lvb">
+		<fhc-form
+			v-if="allAreStudents && studiengang_kz"
+			ref="form"
+			class="input-group"
+			@submit.prevent="onSubmit"
+		>
+			<span class="input-group-text">
+				{{ $p.t('lehre/semester') }}
+			</span>
+			<select
+				v-model="semester"
+				class="form-select"
+			>
+				<option v-for="semester in stgSemester">{{ semester }}</option>
+			</select>
+			<span
+				class="input-group-text"
+				:class="{'text-muted': semester === false}"
+			>
+				{{ $p.t('lehre/verband') }}
+			</span>
+			<select
+				v-model="verband"
+				class="form-select"
+				:disabled="semester === false"
+			>
+				<option v-for="verband in semesterVerband">{{ verband }}</option>
+			</select>
+			<span
+				class="input-group-text"
+				:class="{'text-muted': verband === false}"
+			>
+				{{ $p.t('lehre/gruppe') }}
+			</span>
+			<select
+				v-model="gruppe"
+				class="form-select"
+				:disabled="verband === false"
+			>
+				<option v-for="gruppe in verbandGruppe">{{ gruppe }}</option>
+			</select>
+			<button
+				type="submit"
+				class="btn btn-primary"
+				:disabled="gruppe === false && verband === false"
+			>
+				{{ $p.t('ui/change') }}
+			</button>
+		</fhc-form>
+		<div v-if="!allAreStudents" class="alert alert-danger">
+			{{ $p.t('stv/groups_error_notallstudents') }}
+		</div>
+		<div v-if="!studiengang_kz" class="alert alert-danger">
+			{{ $p.t('stv/groups_error_notsamestg') }}
+		</div>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Groups/Special.js

@@ -0,0 +1,97 @@
+import BsModal from "../../../../Bootstrap/Modal.js";
+import FhcForm from "../../../../Form/Form.js";
+import FormValidation from "../../../../Form/Validation.js";
+import FormInput from "../../../../Form/Input.js";
+
+import ApiStvGroups from '../../../../../api/factory/stv/group.js';
+
+export default {
+	name: 'TabGroupsSpecial',
+	components: {
+		BsModal,
+		FhcForm,
+		FormValidation,
+		FormInput,
+		PvAutocomplete: primevue.autocomplete
+	},
+	props: {
+		defaultStg: Number
+	},
+	emits: [
+		"chosen"
+	],
+	data() {
+		return {
+			value: '',
+			groupSuggestions: []
+		};
+	},
+	methods: {
+		show() {
+			this.$refs.popup.show();
+		},
+		hide() {
+			this.$refs.popup.hide();
+		},
+		getGroupSuggestions({ query }) {
+			this.$api
+				.call(ApiStvGroups.search(query, this.defaultStg))
+				.then(result => this.groupSuggestions = result.data)
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		onSubmit(evt) {
+			if (!evt.defaultPrevented) {
+				evt.preventDefault();
+				this.hide();
+			}
+		},
+		onEnter() {
+			/**
+			 * NOTE(chris): PrimeVue: AutoComplete: Enter does not submit form #5618
+			 * @see https://github.com/primefaces/primevue/issues/5618
+			 *
+			 * this is fixed in 3.52.0
+			 * until then this function fill fix it
+			 */
+			if (!this.$refs.autocomplete.$refs.input.overlayVisible) {
+				this.$refs.form.$el.requestSubmit();
+			}
+		},
+		modalOpened() {
+			this.$refs.autocomplete.$refs.input.$refs.focusInput.focus();
+		},
+		modalClosed() {
+			this.value = '';
+			this.$refs.form.clearValidation();
+		}
+	},
+	template: /* html */`
+	<bs-modal
+		ref="popup"
+		class="stv-details-groups-special"
+		@hide-bs-modal="modalClosed"
+		@shown-bs-modal="modalOpened"
+	>
+		<template #title>
+			{{ $p.t('gruppenmanagement/add_group') }}
+		</template>
+		<fhc-form ref="form" @submit="onSubmit">
+			<form-validation />
+			<div class="input-group">
+				<form-input
+					ref="autocomplete"
+					type="autocomplete"
+					name="gruppe_kurzbz"
+					v-model="value"
+					container-class="flex-grow-1"
+					input-class="w-100"
+					:suggestions="groupSuggestions"
+					:option-label="el => el.gruppe_kurzbz + (el.bezeichnung ? ' (' + el.bezeichnung + ')' : '')"
+					@complete="getGroupSuggestions"
+					@keydown.enter.capture="onEnter"
+				/>
+				<button type="submit" class="btn btn-primary">{{ $p.t('ui/hinzufuegen') }}</button>
+			</div>
+		</fhc-form>
+	</bs-modal>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Gruppen/Gruppen.js

@@ -1,187 +0,0 @@
-import {CoreFilterCmpt} from "../../../../filter/Filter.js";
-
-import ApiStvGroups from '../../../../../api/factory/stv/group.js';
-
-export default {
-	name: 'TblGroups',
-	components: {
-		CoreFilterCmpt,
-	},
-	inject: {
-		currentSemester: {
-			from: 'currentSemester',
-		},
-	},
-	props: {
-		student: Object
-	},
-	data() {
-		return {
-			tabulatorOptions: {
-				ajaxURL: 'dummy',
-				ajaxRequestFunc: () => this.$api.call(
-					ApiStvGroups.getGruppen(this.student.uid)
-				),
-				ajaxResponse: (url, params, response) => response.data,
-				initialFilter: {
-					logic: "and",
-					filters: [
-						{ field: "uid", operator: "eq", value: this.student.uid },
-						{
-							logic: "or",
-							filters: [
-								{ field: "studiensemester_kurzbz", operator: "eq", value: null },
-								{ field: "studiensemester_kurzbz", operator: "eq", value: this.currentSemester }
-							]
-						}
-					]
-				},
-				columns: [
-					{title: "Gruppe", field: "gruppe_kurzbz"},
-					{title: "Bezeichnung", field: "bezeichnung"},
-					{title: "Semester", field: "studiensemester_kurzbz"},
-					{
-						title: "automatisch generiert",
-						field: "generiert",
-						formatter: "tickCross",
-						hozAlign: "center",
-						formatterParams: {
-							tickElement: '<i class="fa fa-check text-success"></i>',
-							crossElement: '<i class="fa fa-xmark text-danger"></i>'
-						}
-					},
-					{title: "UID", field: "uid"},
-					{
-						title: 'Aktionen', field: 'actions',
-						minWidth: 150, // Ensures Action-buttons will be always fully displayed
-						formatter: (cell, formatterParams, onRendered) => {
-							const container = document.createElement('div');
-							container.className = "d-flex gap-2";
-
-							const data = cell.getData();
-
-							const button = document.createElement('button');
-							button.className = 'btn btn-outline-secondary btn-action';
-							button.innerHTML = '<i class="fa fa-xmark"></i>';
-							button.title = this.$p.t('ui', 'loeschen');
-							button.addEventListener('click', () =>
-								this.actionDeleteGroup(data.gruppe_kurzbz)
-							);
-							if (data.generiert)
-								button.disabled = true;
-							container.append(button);
-
-							return container;
-						},
-						frozen: true
-					},
-				],
-				layout: 'fitDataFill',
-				height: 'auto',
-				index: 'group_id',
-				persistenceID: 'stv-details-gruppe'
-			},
-			tabulatorEvents: [
-				{
-					event: 'tableBuilt',
-					handler: async () => {
-
-						await this.$p.loadCategory(['global', 'person', 'stv', 'ui', 'gruppenmanagement']);
-
-						let cm = this.$refs.table.tabulator.columnManager;
-
-						cm.getColumnByField('gruppe_kurzbz').component.updateDefinition({
-							title: this.$p.t('gruppenmanagement', 'gruppe')
-						});
-
-						cm.getColumnByField('bezeichnung').component.updateDefinition({
-							title: this.$p.t('ui', 'bezeichnung')
-						});
-
-						cm.getColumnByField('generiert').component.updateDefinition({
-							title: this.$p.t('gruppenmanagement', 'automatisch_generiert')
-						});
-
-						cm.getColumnByField('uid').component.updateDefinition({
-							title: this.$p.t('ui', 'student_uid')
-						});
-
-						//Interference with Filter if not commented out
-						/*
-						cm.getColumnByField('studiensemester_kurzbz').component.updateDefinition({
-							title: this.$p.t('lehre', 'studiensemester')
-						});*/
-
-					}
-				}
-			],
-		}
-	},
-	methods: {
-		actionDeleteGroup(gruppe_kurzbz) {
-			this.$fhcAlert
-				.confirmDelete()
-				.then(result => result
-					? gruppe_kurzbz
-					: Promise.reject({handled: true}))
-				.then(this.deleteGroup)
-				.catch(this.$fhcAlert.handleSystemError);
-
-		},
-		deleteGroup(gruppe_kurzbz) {
-			const group_id = {
-				id: this.student.uid,
-				gruppe_kurzbz: gruppe_kurzbz
-			};
-
-			return this.$api
-				.call(ApiStvGroups.deleteGroup(group_id))
-				.then(response => {
-					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
-				}).catch(this.$fhcAlert.handleSystemError)
-				.finally(() => {
-					window.scrollTo(0, 0);
-					this.reload();
-				});
-		},
-		reload() {
-			this.$refs.table.reloadTable();
-		},
-	},
-	watch: {
-		currentSemester(newVal) {
-			if (newVal) {
-				this.$refs.table.tabulator.clearFilter(); // Clear old filters
-
-				this.$refs.table.tabulator.setFilter((data) => {
-					return (
-						data.uid === this.student.uid &&
-						(
-							data.studiensemester_kurzbz === newVal ||
-							data.studiensemester_kurzbz === null
-						)
-					);
-				});
-			}
-		},
-		student() {
-			this.$refs.table.reloadTable();
-		}
-	},
-	template: `
-				<div class="stv-details-gruppen h-100 pb-3">
-					<h5>{{$p.t('stv', 'tab_groups')}}</h5>
-
-					<core-filter-cmpt
-						ref="table"
-						:tabulator-options="tabulatorOptions"
-						:tabulator-events="tabulatorEvents"
-						table-only
-						:side-menu="false"
-						reload
-						:reload-btn-infotext="this.$p.t('table', 'reload')"
-					>
-					</core-filter-cmpt>
-				</div>
-			`
-}

public/js/components/Stv/Studentenverwaltung/Details/Kontaktieren.js

@@ -0,0 +1,101 @@
+export default {
+	name: "Kontaktieren",
+	computed: {
+		internMails() {
+			if (this.modelValue.mail_intern)
+			{
+				return [this.modelValue.mail_intern];
+			}
+			return this.modelValue.map(e => e.mail_intern);
+		},
+		privateMails()
+		{
+			if (this.modelValue.mail_privat)
+			{
+				return [this.modelValue.mail_privat];
+			}
+			return this.modelValue.map(e => e.mail_privat);
+		},
+	},
+	props: {
+		modelValue: Object
+	},
+
+	methods: {
+		async splitMails(mails, event) {
+			let splititem = ",";
+			let maillist = mails.join(splititem);
+			let mailto = "";
+
+			if (maillist.length > 2024)
+			{
+				if (await this.$fhcAlert.confirm({message: this.$p.t('stv', 'zuvieleEMails') }) === false)
+					return;
+			}
+
+			let firstrun = true;
+			let useBcc = event?.ctrlKey || event?.metaKey;
+			while (maillist.length > 0)
+			{
+				if (maillist.length > 2024)
+				{
+					let splitposition = maillist.lastIndexOf(splititem, 1900);
+					mailto = maillist.substring(0, splitposition);
+					maillist = maillist.substring(splitposition + 1);
+				}
+				else
+				{
+					mailto = maillist;
+					maillist = "";
+				}
+
+				let mailLink = useBcc ? `mailto:?bcc=${mailto}` : `mailto:${mailto}`;
+
+				if (firstrun)
+				{
+					window.location.href = mailLink;
+					firstrun = false;
+				}
+				else
+				{
+					if (await this.$fhcAlert.confirm({message: this.$p.t('stv', 'weitereEMail')}) === true)
+					{
+						window.location.href = mailLink;
+					}
+				}
+
+			}
+		},
+		internMail(event) {
+			if (this.internMails.length)
+			{
+				this.splitMails(this.internMails, event);
+			}
+		},
+		privateMail(event) {
+			if (this.privateMails.length)
+			{
+				this.splitMails(this.privateMails, event);
+			}
+		}
+	},
+	template: `
+	<div>
+	<div id="elementID"></div>
+		<div class="row">
+			<div class="col-lg-2">
+				<button class="btn btn-primary mb-2" @click="internMail($event)" :title="$p.t('stv', 'bccEMail')">
+					<i class="fa-solid fa-mail"></i> {{$p.t('stv', 'internEMail')}}
+				</button>
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="col-lg-2">
+				<button class="btn btn-primary mb-2" @click="privateMail($event)" :title="$p.t('stv', 'bccEMail')">
+					<i class="fa-solid fa-mail"></i> {{$p.t('stv', 'privateEMail')}}
+				</button>
+			</div>
+		</div>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js

@@ -401,7 +401,7 @@ export default{
 		this.$api
 			.call(ApiStvPrestudent.getLastBismeldestichtag())
 			.then(result => {
-				this.dataMeldestichtag = result.data[0].meldestichtag;
+				this.dataMeldestichtag = result.data[0]?.meldestichtag;
 				if (this.$refs.table && this.$refs.table.tableBuilt)
 					this.$refs.table.tabulator.redraw(true);
 			})

public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit.js

@@ -0,0 +1,24 @@
+import Projektarbeit from './Projektarbeit/Projektarbeit.js';
+
+export default {
+	name: "TabProjektarbeit",
+	components: {
+		Projektarbeit
+	},
+	provide() {
+		return {
+			config: this.config
+		};
+	},
+	props: {
+		modelValue: Object,
+		config: Object
+	},
+	data(){
+		return {}
+	},
+	template: `
+	<div class="stv-details-projektarbeit h-100 d-flex flex-column">
+		<projektarbeit ref="projektarbeit" :student="modelValue"></projektarbeit>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Details.js

@@ -0,0 +1,411 @@
+import FormForm from '../../../../Form/Form.js';
+import FormInput from '../../../../Form/Input.js';
+import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js";
+
+import ApiStvProjektarbeit from '../../../../../api/factory/stv/projektarbeit.js';
+
+export default {
+	components: {
+		FormForm,
+		FormInput,
+		PvAutoComplete
+	},
+	emits: ['projekttypChanged'],
+	inject: {
+		defaultSemester: {
+			from: 'defaultSemester'
+		}
+	},
+	computed: {
+		// prepared Lehreinheiten (with compound Bezeichnung)
+		arrLes() {
+			let lehreinheiten = [];
+			if (this.formData.lehrveranstaltung_id) {
+				let lv = this.arrLvs.find(lv => {return lv.lehrveranstaltung_id == this.formData.lehrveranstaltung_id});
+				if (lv) lehreinheiten = lv.lehreinheiten
+			}
+
+			for (let le of lehreinheiten)
+			{
+				let bezeichnung = le.lehrfach_kurzbz + '-' + le.lehrform_kurzbz + ' ' + le.lehrfach_bezeichnung + ' ';
+
+				for (let grp of le.lehreinheitgruppen)
+				{
+					bezeichnung += grp.gruppe_kurzbz ? grp.gruppe_kurzbz : '' + grp.semester ?? '' + grp.verband ?? '' + grp.gruppe ?? '';
+				}
+
+				bezeichnung += ' (' + le.lektoren.join(' ') + ') ID: ' + le.lehreinheit_id;
+
+				le.bezeichnung = bezeichnung;
+			}
+
+			return lehreinheiten;
+		}
+	},
+	props: {
+		statusNew: Boolean,
+		student: Object,
+		projektarbeit: Object
+	},
+	data() {
+		return {
+			formData: {
+				projektarbeit_id: null,
+				titel: null,
+				titel_english: null,
+				themenbereich: null,
+				projekttyp_kurzbz: null,
+				firma: null,
+				lehrveranstaltung_id: null,
+				lehreinheit_id: null,
+				beginn: null,
+				ende: null,
+				freigegeben: true,
+				gesperrtbis: null,
+				note: null,
+				final: true,
+				anmerkung: null
+			},
+			arrTypen: [],
+			arrFirmen: [],
+			arrLvs: [],
+			arrNoten: [],
+			filteredFirmen: [],
+			abortController: {
+				firma: null
+			}
+		}
+	},
+	watch: {
+		'formData.projekttyp_kurzbz'(newValue, oldValue) {
+			this.$emit('projekttypChanged', newValue);
+		}
+	},
+	methods: {
+		resetForm() {
+			this.formData.projektarbeit_id = null;
+			this.formData.titel = null;
+			this.formData.titel_english = null;
+			this.formData.themenbereich = null;
+			this.formData.projekttyp_kurzbz = null;
+			this.formData.firma = null;
+			this.formData.lehrveranstaltung_id = null;
+			this.formData.lehreinheit_id = null;
+			this.formData.beginn = null;
+			this.formData.ende = null;
+			this.formData.freigegeben = true;
+			this.formData.gesperrtbis = null;
+			this.formData.note = null;
+			this.formData.final = true;
+			this.formData.anmerkung = null;
+			this.$refs.formDetails.clearValidation();
+		},
+		getFormData(statusNew, studiensemester_kurzbz, additional_lehrveranstaltung_id) {
+
+			this.$api
+				.call(ApiStvProjektarbeit.getTypenProjektarbeit())
+				.then(result => {
+					this.arrTypen = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+
+			this.$api
+				.call(ApiStvProjektarbeit.getLehrveranstaltungen(
+					this.student.uid,
+					statusNew ? this.student.studiengang_kz : null,
+					studiensemester_kurzbz ?? this.defaultSemester,
+					additional_lehrveranstaltung_id
+				))
+				.then(result => {
+						this.arrLvs = result.data
+					}
+				)
+				.catch(this.$fhcAlert.handleSystemError);
+
+			this.$api
+				.call(ApiStvProjektarbeit.getNoten())
+				.then(result => {
+					this.arrNoten = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+
+			if (statusNew) this.resetForm();
+		},
+		loadProjektarbeit(projektarbeit_id) {
+
+			if (this?.formData?.projektarbeit_id == projektarbeit_id) return;
+			this.resetForm();
+			return this.$api
+				.call(ApiStvProjektarbeit.loadProjektarbeit(projektarbeit_id))
+				.then(result => {
+					this.formData = result.data;
+					if (this.formData.firma_id) this.formData.firma = {firma_id: this.formData.firma_id, name: this.formData.firma_name};
+					return result;
+				})
+				.catch(this.$fhcAlert.handleSystemError)
+		},
+		addNewProjektarbeit() {
+
+			let dataToSend = {
+				uid: this.student.uid,
+				formData: this.getPreparedFormData()
+			};
+
+			return this.$refs.formDetails
+				.call(ApiStvProjektarbeit.addNewProjektarbeit(dataToSend));
+		},
+		updateProjektarbeit() {
+
+			let dataToSend = {
+				projektarbeit_id: this.formData.projektarbeit_id,
+				formData: this.getPreparedFormData()
+			};
+			return this.$refs.formDetails
+				.call(ApiStvProjektarbeit.updateProjektarbeit(dataToSend));
+		},
+		searchFirma(event) {
+			if (this.abortController.firma) {
+				this.abortController.firma.abort();
+			}
+			this.abortController.firma = new AbortController();
+
+			return this.$api
+				.call(ApiStvProjektarbeit.getFirmen(event.query))
+				.then(result => {
+					this.filteredFirmen = result.data;
+				});
+		},
+		lvChanged(event) {
+			this.formData.lehreinheit_id = null;
+		},
+		// enrich and modify data before sending
+		getPreparedFormData() {
+			let preparedFormData = JSON.parse(JSON.stringify(this.formData)); // deep copy
+
+			// set firma Id
+			if (preparedFormData.firma)
+				preparedFormData.firma_id = preparedFormData.firma.firma_id;
+			else
+				preparedFormData.firma_id = null;
+
+			// delete "helper" fields
+			if (preparedFormData.projektarbeit_id == null) delete(preparedFormData.projektarbeit_id);
+			delete(preparedFormData.firma);
+			delete(preparedFormData.firma_name);
+			delete(preparedFormData.lehrveranstaltung_id);
+
+			return preparedFormData;
+		}
+	},
+	template: `
+			<form-form v-if="!this.student.length" ref="formDetails" @submit.prevent>
+
+				<legend>Details</legend>
+				<p v-if="statusNew">[{{$p.t('ui', 'neu')}}]</p>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-titel"
+						type="text"
+						name="titel"
+						:label="$p.t('projektarbeit', 'titel')"
+						v-model="formData.titel">
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-titel_english"
+						type="text"
+						name="titel_english"
+						:label="$p.t('projektarbeit', 'titelEnglisch')"
+						v-model="formData.titel_english"
+						>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-themenbereich"
+						type="text"
+						name="themenbereich"
+						:label="$p.t('projektarbeit', 'themenbereich')"
+						v-model="formData.themenbereich"
+						>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-typ"
+						:label="$p.t('projektarbeit', 'typ')"
+						type="select"
+						v-model="formData.projekttyp_kurzbz"
+						name="projekttyp_kurzbz"
+						>
+						<option
+							v-for="typ in arrTypen"
+							:key="typ.projekttyp_kurzbz"
+							:value="typ.projekttyp_kurzbz"
+							>
+							{{typ.bezeichnung}}
+						</option>
+					</form-input>
+				</div>
+
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-firma"
+						:label="$p.t('projektarbeit', 'firma')"
+						type="autocomplete"
+						optionLabel="name"
+						v-model="formData.firma"
+						name="firma"
+						:suggestions="filteredFirmen"
+						@complete="searchFirma"
+						:min-length="3"
+						>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-lv"
+						:label="$p.t('projektarbeit', 'lehrveranstaltung')"
+						type="select"
+						v-model="formData.lehrveranstaltung_id"
+						name="lehrveranstaltung_id"
+						@change="lvChanged($event)"
+						>
+						<option :value="null"> -- {{$p.t('fehlermonitoring', 'keineAuswahl')}} -- </option>
+						<option
+							v-for="lv in arrLvs"
+							:key="lv.lehrveranstaltung_id"
+							:value="lv.lehrveranstaltung_id"
+							>
+							{{lv.bezeichnung + (lv.orgform_kurzbz ? ' ' + lv.orgform_kurzbz : '') + ' (' + lv.semester + ' Sem) ID: ' + lv.lehrveranstaltung_id}}
+						</option>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-le"
+						:label="$p.t('projektarbeit', 'lvTeil')"
+						type="select"
+						v-model="formData.lehreinheit_id"
+						name="lehreinheit_id"
+						>
+						<option :value="null"> -- {{$p.t('fehlermonitoring', 'keineAuswahl')}} -- </option>
+						<option
+							v-for="le in arrLes"
+							:key="le.lehreinheit_id"
+							:value="le.lehreinheit_id"
+							>
+							{{le.bezeichnung}}
+						</option>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="col-6 stv-details-projektarbeit-beginn"
+						:label="$p.t('projektarbeit', 'beginn')"
+						type="DatePicker"
+						v-model="formData.beginn"
+						auto-apply
+						:enable-time-picker="false"
+						text-input
+						locale="de"
+						format="dd.MM.yyyy"
+						model-type="yyyy-MM-dd"
+						name="beginn"
+						>
+					</form-input>
+					<form-input
+						container-class="col-6 stv-details-projektarbeit-ende"
+						:label="$p.t('projektarbeit', 'ende')"
+						type="DatePicker"
+						v-model="formData.ende"
+						auto-apply
+						:enable-time-picker="false"
+						text-input
+						locale="de"
+						format="dd.MM.yyyy"
+						model-type="yyyy-MM-dd"
+						name="ende"
+						>
+					</form-input>
+				</div>
+
+				<div class="row mb-3 align-items-center">
+					<form-input
+						container-class="col-8 stv-details-projektarbeit-gesperrtbis"
+						:label="$p.t('projektarbeit', 'gesperrtBis')"
+						type="DatePicker"
+						v-model="formData.gesperrtbis"
+						auto-apply
+						:enable-time-picker="false"
+						text-input
+						locale="de"
+						format="dd.MM.yyyy"
+						model-type="yyyy-MM-dd"
+						name="gesperrtbis"
+						>
+					</form-input>
+					<div class="col-4">
+						<form-input
+							container-class="form-check stv-details-projektarbeit-freigegeben"
+							type="checkbox"
+							name="freigegeben"
+							:label="$p.t('projektarbeit','freigegeben')"
+							v-model="formData.freigegeben"
+						>
+						</form-input>
+					</div>
+				</div>
+
+				<div class="row mb-3 align-items-center">
+					<form-input
+						container-class="col-8 stv-details-projektarbeit-note"
+						:label="$p.t('projektarbeit', 'note')"
+						type="select"
+						v-model="formData.note"
+						name="note"
+						>
+						<option :value="null"> -- {{$p.t('fehlermonitoring', 'keineAuswahl')}} -- </option>
+						<option
+							v-for="note in arrNoten"
+							:key="note.note"
+							:value="note.note"
+							>
+							{{note.bezeichnung}}
+						</option>
+					</form-input>
+					<div class="col-4">
+						<form-input
+							container-class="form-check stv-details-projektarbeit-final"
+							type="checkbox"
+							name="final"
+							label="final"
+							v-model="formData.final"
+						>
+						</form-input>
+					</div>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="col-12 stv-details-abschlusspruefung-anmerkung"
+						:label="$p.t('projektarbeit', 'anmerkung')"
+						type="textarea"
+						v-model="formData.anmerkung"
+						name="anmerkung"
+						:rows= 3
+						>
+					</form-input>
+				</div>
+
+			</form-form>`
+}

public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Projektarbeit.js

@@ -0,0 +1,407 @@
+import {CoreFilterCmpt} from "../../../../filter/Filter.js";
+import BsModal from "../../../../Bootstrap/Modal.js";
+import FormForm from '../../../../Form/Form.js';
+import FormInput from '../../../../Form/Input.js';
+import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js";
+
+import ApiStvProjektarbeit from '../../../../../api/factory/stv/projektarbeit.js';
+import ProjektarbeitDetails from "./Details.js";
+import Projektbetreuer from "./Projektbetreuer.js";
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		FormForm,
+		FormInput,
+		PvAutoComplete,
+		ProjektarbeitDetails,
+		Projektbetreuer
+	},
+	inject: {
+		cisRoot: {
+			from: 'cisRoot'
+		},
+		config: {
+			from: 'config',
+			required: true
+		},
+		$reloadList: {
+			from: '$reloadList',
+			required: true
+		}
+	},
+	props: {
+		student: Object
+	},
+	data() {
+		return {
+			tabulatorEvents: [
+				{
+					event: 'dataLoaded',
+					handler: data => this.tabulatorData = data.map(item => {
+						item.actionDiv = document.createElement('div');
+						return item;
+					}),
+				},
+				{
+					event: 'tableBuilt',
+					handler: async() => {
+						await this.$p.loadCategory(['global', 'person', 'stv', 'ui', 'projektarbeit']);
+
+						let cm = this.$refs.table.tabulator.columnManager;
+
+						cm.getColumnByField('projekttyp_kurzbz').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'typ')
+						});
+						cm.getColumnByField('titel').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'titel')
+						});
+						cm.getColumnByField('beginn').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'beginn')
+						});
+						cm.getColumnByField('ende').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'ende')
+						});
+						cm.getColumnByField('freigegeben').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'freigegeben')
+						});
+						cm.getColumnByField('gesperrtbis').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'gesperrtBis')
+						});
+						cm.getColumnByField('themenbereich').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'themenbereich')
+						});
+						cm.getColumnByField('anmerkung').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'anmerkung')
+						});
+						cm.getColumnByField('firma_id').component.updateDefinition({
+							title: this.$p.t('projektarbeit', 'firmaId')
+						});
+					}
+				},
+			],
+			tabulatorData: [],
+			editedProjektarbeit: null,
+			statusNew: true,
+			studiensemester_kurzbz: null,
+			lehrveranstaltung_id: null,
+			activeTab: 'details'
+		}
+	},
+	computed: {
+		tabulatorOptions() {
+			const options = {
+				ajaxURL: 'dummy',
+				ajaxRequestFunc: () => this.$api.call(ApiStvProjektarbeit.getProjektarbeit(this.student.uid)),
+				ajaxResponse: (url, params, response) => response.data,
+				columns: [
+					{title: "Projektarbeit ID", field: "projektarbeit_id", visible: false},
+					{title: "Typ", field: "bezeichnung"},
+					{title: "Typ Kurzbz", field: "projekttyp_kurzbz", visible: false},
+					{title: "Studiensemester", field: "studiensemester_kurzbz"},
+					{title: "Titel", field: "titel"},
+					{
+						title: "Abgabe Enduplad",
+						field: "abgabedatum",
+						formatter: function (cell) {
+							const dateStr = cell.getValue();
+							if (!dateStr) return "";
+
+							const date = new Date(dateStr);
+							return date.toLocaleString("de-DE", {
+								day: "2-digit",
+								month: "2-digit",
+								year: "numeric",
+								hour12: false
+							});
+						}
+					},
+					{
+						title: "Beginn",
+						field: "beginn",
+						formatter: function (cell) {
+							const dateStr = cell.getValue();
+							if (!dateStr) return "";
+
+							const date = new Date(dateStr);
+							return date.toLocaleString("de-DE", {
+								day: "2-digit",
+								month: "2-digit",
+								year: "numeric",
+								hour12: false
+							});
+						},
+						visible: false
+					},
+					{
+						title: "Ende",
+						field: "ende",
+						formatter: function (cell) {
+							const dateStr = cell.getValue();
+							if (!dateStr) return "";
+
+							const date = new Date(dateStr);
+							return date.toLocaleString("de-DE", {
+								day: "2-digit",
+								month: "2-digit",
+								year: "numeric",
+								hour12: false
+							});
+						},
+						visible: false
+					},
+					{
+						title:"Freigegeben",
+						field:"freigegeben",
+						formatter:"tickCross",
+						hozAlign:"center",
+						formatterParams: {
+							tickElement: '<i class="fa fa-check text-success"></i>',
+							crossElement: '<i class="fa fa-xmark text-danger"></i>'
+						},
+						visible: false
+					},
+					{
+						title: "Gesperrt bis",
+						field: "gesperrtbis",
+						formatter: function (cell) {
+							const dateStr = cell.getValue();
+							if (!dateStr) return "";
+
+							const date = new Date(dateStr);
+							return date.toLocaleString("de-DE", {
+								day: "2-digit",
+								month: "2-digit",
+								year: "numeric",
+								hour12: false
+							});
+						},
+						visible: false
+					},
+					{title: "Themenbereich", field: "themenbereich", visible: false},
+					{title: "Anmerkung", field: "anmerkung", visible: false},
+					{title: "Lehreinheit ID", field: "lehreinheit_id", visible: false},
+					{title: "Student UID", field: "student_uid", visible: false},
+					{
+						title:"Final",
+						field:"final",
+						formatter:"tickCross",
+						hozAlign:"center",
+						formatterParams: {
+							tickElement: '<i class="fa fa-check text-success"></i>',
+							crossElement: '<i class="fa fa-xmark text-danger"></i>'
+						},
+						visible: false
+					},
+					{title: "Firma ID", field: "firma_id", visible: false},
+					{
+						title: 'Aktionen', field: 'actions',
+						minWidth: 150, // Ensures Action-buttons will be always fully displayed
+						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 = this.$p.t('ui', 'bearbeiten');
+							button.addEventListener('click', (event) => {
+								let data = cell.getData();
+								this.editedProjektarbeit = data;
+								this.actionEditProjektarbeit();
+							});
+							container.append(button);
+
+							button = document.createElement('button');
+							button.className = 'btn btn-outline-secondary btn-action';
+							button.innerHTML = '<i class="fa fa-users"></i>';
+							button.title = this.$p.t('projektarbeit', 'betreuerBearbeiten');
+							button.addEventListener('click', (event) => {
+								let data = cell.getData();
+								this.editedProjektarbeit = data;
+								this.actionEditBetreuer();
+							});
+							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 = this.$p.t('ui', 'loeschen');
+							button.addEventListener('click', () =>
+								this.actionDeleteProjektarbeit(cell.getData().projektarbeit_id)
+							);
+							container.append(button);
+
+							container.append(cell.getData().actionDiv);
+
+							return container;
+						},
+						frozen: true
+					},
+				],
+				//layout: 'fitDataFill',
+				height: 'auto',
+				minHeight: '200',
+				selectable: 1,
+				index: 'projektarbeit_id',
+				persistence:{
+					columns: true, //persist column layout
+				},
+				persistenceID: 'stv-details-projektarbeit'
+			}
+			return options;
+		}
+	},
+	methods: {
+		actionNewProjektarbeit() {
+			this.statusNew = true;
+			this.editedProjektarbeit = null;
+			this.toggleMenu('details');
+			this.$refs.projektarbeitDetails.getFormData(this.statusNew);
+			this.$refs.projektarbeitModal.show();
+		},
+		actionEditProjektarbeit() {
+			this.statusNew = false;
+			this.toggleMenu('details');
+			this.$refs.projektarbeitModal.show();
+		},
+		actionEditBetreuer() {
+			this.statusNew = false;
+			this.toggleMenu('betreuer');
+			this.$refs.projektarbeitModal.show();
+		},
+		actionDeleteProjektarbeit(projektarbeit_id) {
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? projektarbeit_id
+					: Promise.reject({handled: true}))
+				.then(this.deleteProjektarbeit)
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		addNewProjektarbeit() {
+			this.$refs.projektarbeitDetails.addNewProjektarbeit()
+				.then((result) => {
+					this.projektarbeitSaved();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		updateProjektarbeit() {
+			this.$refs.projektarbeitDetails.updateProjektarbeit()
+				.then((result) => {
+					this.projektarbeitSaved();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		deleteProjektarbeit(projektarbeit_id) {
+			return this.$api
+				.call(ApiStvProjektarbeit.deleteProjektarbeit(projektarbeit_id))
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
+				})
+				.catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					this.reload();
+				});
+		},
+		projektarbeitSaved() {
+			this.reload();
+			this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
+			this.hideModal('projektarbeitModal');
+		},
+		setDefaultStunden(projekttyp_kurzbz) {
+			this.$refs.projektbetreuer.setDefaultStunden(projekttyp_kurzbz);
+		},
+		hideModal(modalRef){
+			this.$refs[modalRef].hide();
+		},
+		reload() {
+			this.$refs.table.reloadTable();
+		},
+		toggleMenu(tabId) {
+			this.activeTab = tabId;
+			if (this.statusNew == false) {
+				switch(tabId) {
+					case 'details':
+						this.$refs.projektarbeitDetails.getFormData(
+							this.statusNew, this.editedProjektarbeit?.studiensemester_kurzbz, this.editedProjektarbeit?.lehrveranstaltung_id
+						);
+						this.$refs.projektarbeitDetails.loadProjektarbeit(this.editedProjektarbeit?.projektarbeit_id);
+						break;
+					case 'betreuer':
+						this.$refs.projektbetreuer.getFormData(
+							this.editedProjektarbeit ? this.editedProjektarbeit.projekttyp_kurzbz : null
+						);
+						this.$refs.projektbetreuer.getProjektbetreuer(this.editedProjektarbeit?.projektarbeit_id, this.editedProjektarbeit?.studiensemester_kurzbz);
+						break;
+				}
+			}
+		}
+	},
+	template: `
+	<div class="stv-details-projektarbeit h-100 pb-3">
+		<h4>{{this.$p.t('stv','tab_projektarbeit')}}</h4>
+
+		<core-filter-cmpt
+			v-if="!this.student.length"
+			ref="table"
+			:tabulator-options="tabulatorOptions"
+			:tabulator-events="tabulatorEvents"
+			table-only
+			:side-menu="false"
+			reload
+			new-btn-show
+			:new-btn-label="this.$p.t('stv', 'tab_projektarbeit')"
+			@click:new="actionNewProjektarbeit"
+			>
+		</core-filter-cmpt>
+
+		<!--Modal: projektarbeitModal-->
+		<bs-modal ref="projektarbeitModal" dialog-class="modal-xl modal-dialog-scrollable" header-class="flex-wrap pb-0">
+			<template #title>
+				<p v-if="statusNew" class="fw-bold mt-3">{{$p.t('projektarbeit', 'projektarbeitAnlegen')}}</p>
+				<p v-else class="fw-bold mt-3">{{$p.t('projektarbeit', 'projektarbeitBearbeiten')}}</p>
+			</template>
+
+			<template #modal-header-content v-if="!statusNew">
+				<ul class="nav nav-tabs w-100 mt-3 msg_preview" id="pa_tabs" role="tablist">
+					<li class="nav-item" role="presentation">
+						<button class="nav-link" :class="activeTab == 'details' ? 'active' : ''" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true" @click="toggleMenu('details')">Details</button>
+					</li>
+					<li class="nav-item" role="presentation">
+						<button class="nav-link" :class="activeTab == 'betreuer' ? 'active' : ''" id="betreuer-tab" data-bs-toggle="tab" data-bs-target="#betreuer" type="button" role="tab" aria-controls="betreuer" aria-selected="false" @click="toggleMenu('betreuer')">{{$p.t('projektarbeit', 'betreuerGross')}}</button>
+					</li>
+				</ul>
+			</template>
+
+			<div class="tab-content" id="pa_content">
+				<div class="tab-pane fade show" :class="activeTab == 'details' ? 'active' : ''" id="details" role="tabpanel" aria-labelledby="details-tab">
+					<div class="row">
+						<div class="col-12">
+							<projektarbeit-details ref="projektarbeitDetails" :student="student" @projekttyp-changed="setDefaultStunden">
+							</projektarbeit-details>
+						</div>
+					</div>
+				</div>
+
+				<div class="tab-pane fade show" :class="activeTab == 'betreuer' ? 'active' : ''" id="betreuer" role="tabpanel" aria-labelledby="betreuer-tab">
+					<div class="row">
+						<div class="col-12">
+							<projektbetreuer ref="projektbetreuer" :config="config"></projektbetreuer>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<template #footer>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{$p.t('ui', 'abbrechen')}}</button>
+					<button v-if="statusNew" class="btn btn-primary" @click="addNewProjektarbeit()"> {{$p.t('ui', 'speichern')}}</button>
+					<button v-if="!statusNew && activeTab == 'details'" class="btn btn-primary" @click="updateProjektarbeit()"> {{$p.t('ui', 'speichern')}}</button>
+			</template>
+
+		</bs-modal>
+	</div>
+`
+}
+

public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Projektbetreuer.js

@@ -0,0 +1,561 @@
+import {CoreFilterCmpt} from "../../../../filter/Filter.js";
+import BsModal from "../../../../Bootstrap/Modal.js";
+import FormForm from '../../../../Form/Form.js';
+import FormInput from '../../../../Form/Input.js';
+import PvAutoComplete from "../../../../../../../index.ci.php/public/js/components/primevue/autocomplete/autocomplete.esm.min.js";
+import NewPerson from "../../List/New.js";
+import Contact from "../Kontakt/Contact.js";
+import Vertrag from "./Vertrag.js";
+
+import ApiStvProjektbetreuer from '../../../../../api/factory/stv/projektbetreuer.js';
+
+export default {
+	components: {
+		CoreFilterCmpt,
+		BsModal,
+		FormForm,
+		FormInput,
+		PvAutoComplete,
+		NewPerson,
+		Contact,
+		Vertrag
+	},
+	provide() {
+		return {
+			configShowVertragsdetails: this.config.showVertragsdetails
+		}
+	},
+	computed: {
+		betreuerFormOpened() {
+			return this.newMode || this.editMode;
+		}
+	},
+	props: {
+		config: {
+			type: Object,
+			default: {}
+		}
+	},
+	data() {
+		return {
+			tabulatorOptions: {
+				columns: [
+					{title: "Nachname", field: "nachname"},
+					{title: "Vorname", field: "vorname"},
+					{title: "Note", field: "note"},
+					{title: "Punkte", field: "punkte"},
+					{title: "Stunden", field: "stunden"},
+					{title: "Stundensatz", field: "stundensatz", visible: false},
+					{title: "Art", field: "betreuerart_kurzbz", visible: false},
+					{title: "Person ID", field: "person_id", visible: false},
+					{title: "Vertrag ID", field: "vertrag_id", visible: false},
+					{title: "Projektarbeit ID", field: "projektarbeit_id", visible: false},
+					{
+						title: 'Aktionen',
+						field: 'actions',
+						minWidth: 150, // Ensures Action-buttons will be always fully displayed
+						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 = this.$p.t('ui', 'bearbeiten');
+							button.addEventListener('click', (event) => {
+								event.stopPropagation();
+								event.preventDefault();
+								let data = cell.getData();
+								this.actionEditProjektbetreuer(data.projektarbeit_id, data.person_id, data.betreuerart_kurzbz);
+							});
+							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 = this.$p.t('ui', 'loeschen');
+							button.addEventListener('click', (event) => {
+								event.stopPropagation();
+								event.preventDefault();
+								const data = cell.getData();
+								this.actionDeleteProjektbetreuer(data.betreuer_id, data.projektarbeit_id, data.person_id, data.betreuerart_kurzbz)
+							});
+							container.append(button);
+
+							let data = cell.getData();
+							if (data.beurteilungDownloadLink !== null) {
+								if (data.beurteilungDownloadLink == '') {
+									button = document.createElement('span');
+									button.title = this.$p.t('projektarbeit', 'projektarbeitNochNichtBeurteilt')
+									button.innerHTML = '<button class="btn btn-outline-secondary btn-action" disabled>'+
+										'<i class="fa-regular fa-file-pdf"></i></button>';
+									button.addEventListener('click', (event) => {
+										event.stopPropagation();
+										event.preventDefault();
+									});
+								}
+								else {
+									button = document.createElement('a');
+									button.setAttribute('href', data.beurteilungDownloadLink);
+									button.setAttribute('role', 'button');
+									button.innerHTML = '<i class="fa fa-file-pdf"></i>';
+									button.title = this.$p.t('projektarbeit', 'projektbeurteilungErstellen');
+									button.className = 'btn btn-outline-secondary btn-action';
+									button.addEventListener('click', (event) => {
+										event.stopPropagation();
+										event.preventDefault();
+										window.location.href = data.beurteilungDownloadLink;
+									});
+								}
+								container.append(button);
+							}
+
+							return container;
+						},
+						frozen: true
+					},
+				],
+				//layout: 'fitDataFill',
+				layoutColumnsOnNewData: false,
+				height: 'auto',
+				minHeight: '100',
+				selectable: true,
+				selectable: 1,
+				index: 'betreuer_id',
+				persistence:{
+					columns: true, //persist column layout
+				},
+				persistenceID: 'stv-details-projektbetreuer'
+			},
+			tabulatorEvents: [
+				{
+					event: 'tableBuilt',
+					handler: async() => {
+						await this.$p.loadCategory(['global', 'person', 'stv', 'projektarbeit', 'ui']);
+
+						// Force layout recalculation for handling overflow text
+						this.$refs.projektbetreuerTable.tabulator.redraw(true);
+
+					}
+				},
+				{
+					event: 'rowSelected',
+					handler: row => {
+						let data = row.getData();
+						this.actionEditProjektbetreuer(data.projektarbeit_id, data.person_id, data.betreuerart_kurzbz);
+					}
+				}
+			],
+			formData: {
+				betreuerart_kurzbz: null,
+				note: null,
+				stunden: null,
+				stundensatz: null
+			},
+			newMode: false,
+			editMode: false,
+			initialFormData: null,
+			defaultFormDataValues: {stunden: null, stundensatz: null},
+			projektarbeit_id: null,
+			editedBetreuerIdx: -1,
+			arrBetreuerart: [],
+			arrNoten: [],
+			filteredBetreuer: [],
+			autocompleteSelectedBetreuer: null,
+			beurteilungDownloadLink: null,
+			vertragFieldsDisabled: false,
+			abortController: {
+				betreuer: null
+			}
+		}
+	},
+	methods: {
+		actionNewProjektbetreuer() {
+			this.resetForm();
+			this.newMode = !this.newMode;
+			this.editMode = false;
+			this.captureFormData();
+		},
+		actionEditProjektbetreuer(projektarbeit_id, person_id, betreuerart_kurzbz) {
+			this.editMode = true;
+			this.newMode = false;
+			this.$api
+				.call(ApiStvProjektbetreuer.getDefaultStundensaetze(person_id, this.studiensemester_kurzbz))
+				.then(result => {
+					this.resetForm();
+
+					// get betreuer from tabulator list
+					let projektbetreuerListe = this.$refs.projektbetreuerTable.tabulator.getData();
+					const idx = projektbetreuerListe.findIndex(
+							betr =>
+								betr.person_id === person_id &&
+								betr.projektarbeit_id === projektarbeit_id &&
+								betr.betreuerart_kurzbz === betreuerart_kurzbz
+						);
+
+					if (idx >= 0) { // if betreuer found
+
+						// set currently edited betreuer (deep copy)
+						this.formData = JSON.parse(JSON.stringify(projektbetreuerListe[idx]));
+
+						// set download link
+						if (this.formData.beurteilungDownloadLink !== null) this.beurteilungDownloadLink = this.formData.beurteilungDownloadLink;
+
+						// set betreuer for autocomplete field
+						this.autocompleteSelectedBetreuer = {
+							person_id: this.formData.person_id,
+							name: this.formData.name,
+							vorname: this.formData.vorname,
+							nachname: this.formData.nachname,
+							vertrag_id: this.formData.vertrag_id
+						};
+					}
+
+					// set default stundensatz (if no other is set yet)
+					if (this.formData.stundensatz == null) this.formData.stundensatz = result.data;
+
+					// capture initial form data for detecting changes
+					this.captureFormData();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		actionDeleteProjektbetreuer(betreuer_id, projektarbeit_id, person_id, betreuerart_kurzbz) {
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? {projektarbeit_id, person_id, betreuerart_kurzbz}
+					: Promise.reject({handled: true}))
+				.then(result => {
+					return this.$api
+						.call(ApiStvProjektbetreuer.deleteProjektbetreuer(projektarbeit_id, person_id, betreuerart_kurzbz))
+				})
+				.then(result => {
+					this.$refs.projektbetreuerTable.tabulator.deleteRow(betreuer_id);
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		getFormData(projekttyp_kurzbz) {
+			// default Stundensätze from config
+			this.defaultFormDataValues.stunden = this.getDefaultStunden(projekttyp_kurzbz);
+			this.defaultFormDataValues.stundensatz = this.config.defaultProjektbetreuerStundensatz;
+
+			// get other initial data
+			this.$api
+				.call(ApiStvProjektbetreuer.getBetreuerarten())
+				.then(result => {
+					this.arrBetreuerart = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+
+			this.$api
+				.call(ApiStvProjektbetreuer.getNoten())
+				.then(result => {
+					this.arrNoten = result.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		getProjektbetreuer(projektarbeit_id, studiensemester_kurzbz) {
+			if (projektarbeit_id) {
+				// if projektarbeit changed, reset the form to hold new data
+				if (this.projektarbeit_id != projektarbeit_id) {
+					this.resetForm();
+					this.resetModes();
+				}
+				this.projektarbeit_id = projektarbeit_id;
+				this.studiensemester_kurzbz = studiensemester_kurzbz;
+				this.$api
+					.call(ApiStvProjektbetreuer.getProjektbetreuer(this.projektarbeit_id))
+					.then(result => {
+						this.$refs.projektbetreuerTable.tabulator.replaceData(this.addIds(result.data));
+					})
+					.catch(this.$fhcAlert.handleSystemError);
+			} else {
+				this.emptyBetreuer();
+			}
+		},
+		saveProjektbetreuer() {
+			this.$refs.formProjektbetreuer.call(
+				ApiStvProjektbetreuer.saveProjektbetreuer(this.projektarbeit_id, this.getFormDataWithBetreuer())
+			)
+			.then(result => {
+				this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
+				this.getProjektbetreuer(this.projektarbeit_id, this.studiensemester_kurzbz);
+				this.resetModes();
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+		},
+		searchBetreuer(event) {
+			if (this.abortController.betreuer) {
+				this.abortController.betreuer.abort();
+			}
+			this.abortController.betreuer = new AbortController();
+
+			return this.$api
+				.call(ApiStvProjektbetreuer.getProjektbetreuerBySearchQuery(event.query))
+				.then(result => {
+					this.filteredBetreuer = result.data;
+				});
+		},
+		emptyBetreuer() {
+			this.$refs.projektbetreuerTable.tabulator.clearData();
+		},
+		resetForm() {
+			this.formData = this.getDefaultFormData();
+			if (this.beurteilungDownloadLink !== null) this.beurteilungDownloadLink = '';
+			this.autocompleteSelectedBetreuer = null;
+			this.initialFormData = null;
+			if (this.projekttyp_kurzbz) this.setDefaultStunden(this.projekttyp_kurzbz);
+			this.disableVertragFields(false);
+			this.$refs.formProjektbetreuer.clearValidation();
+		},
+		resetModes() {
+			this.newMode = false;
+			this.editMode = false;
+		},
+		getDefaultFormData() {
+			let formData = {betreuerart_kurzbz : null, note: null};
+
+			for (const name in this.defaultFormDataValues) {
+				formData[name] = this.defaultFormDataValues[name];
+			}
+
+			return formData;
+		},
+		captureFormData() {
+			this.initialFormData = JSON.parse(JSON.stringify(this.formData)); // deep copy
+		},
+		// add own betreuer ids to betreuer liste
+		addIds(betreuerListe) {
+
+			for (const idx in betreuerListe) {
+				let betreuer = betreuerListe[idx];
+
+				betreuer.person_id_old = betreuer.person_id;
+				betreuer.betreuerart_kurzbz_old = betreuer.betreuerart_kurzbz;
+				betreuer.betreuer_id = parseInt(idx);
+			}
+			return betreuerListe;
+		},
+		// add the betreuer selected in automomplete to betreuer liste
+		getFormDataWithBetreuer() {
+			let preparedFormData = this.formData;
+
+			preparedFormData.projektarbeit_id = this.projektarbeit_id;
+			if (this.autocompleteSelectedBetreuer) {
+				preparedFormData.person_id = this.autocompleteSelectedBetreuer.person_id;
+				preparedFormData.name = this.autocompleteSelectedBetreuer.name;
+				preparedFormData.vorname = this.autocompleteSelectedBetreuer.vorname;
+				preparedFormData.nachname = this.autocompleteSelectedBetreuer.nachname;
+			}
+
+			return preparedFormData;
+		},
+		// get default values for stunden
+		getDefaultStunden(projekttyp_kurzbz) {
+			let stunden = '0.0';
+			if (projekttyp_kurzbz == 'Bachelor') stunden = this.config.defaultProjektbetreuerStunden;
+			if (projekttyp_kurzbz == 'Diplom') stunden = this.config.defaultProjektbetreuerStundenDiplom;
+			return stunden;
+		},
+		setDefaultStunden(projekttyp_kurzbz) {
+			this.projekttyp_kurzbz = projekttyp_kurzbz;
+			// if form data has not already been modified by user, set the default stunden
+			if (!this.formDataModified()) {
+				let defaultStunden = this.getDefaultStunden(projekttyp_kurzbz);
+				// adapt initial form data so it does not count as modified
+				if (this.initialFormData) this.initialFormData.stunden = defaultStunden;
+				// set default Stunden
+				this.formData.stunden = defaultStunden;
+			}
+		},
+		// check if form data has been modified since initial data has been captured
+		formDataModified() {
+			if (this.autocompleteSelectedBetreuer != null) return true;
+
+			for (const prop in this.initialFormData) {
+				if (typeof this.formData[prop] == 'undefined') return true;
+				if (this.formData[prop] != this.initialFormData[prop]) return true;
+			}
+
+			return false;
+		},
+		actionNewPerson() {
+			this.$refs.newPersonModal.reset();
+			this.$refs.newPersonModal.open();
+		},
+		actionKontaktdatenBearbeiten() {
+			if (!this.autocompleteSelectedBetreuer) return;
+			this.$refs.kontaktdatenModal.show();
+		},
+		// stuff to do after new person has been saved
+		personSaved(result) {
+			this.$api
+				.call(ApiStvProjektbetreuer.getPerson(result))
+				.then(response => {
+					// set the new person in Betreuer autocomplete field
+					this.autocompleteSelectedBetreuer = response.data;
+				})
+				.catch(this.$fhcAlert.handleSystemError)
+		},
+		// disable fields which are dependent on Vertrag status
+		disableVertragFields(statusAkzeptiert) {
+			this.vertragFieldsDisabled = statusAkzeptiert;
+		}
+	},
+	template: `
+	<div class="stv-details-projektbetreuer h-100 pb-3 row">
+
+		<div :class="this.config.showVertragsdetails ? 'col-9' : 'col-12'">
+
+			<legend>{{this.$p.t('projektarbeit','betreuerGross')}}</legend>
+
+			<core-filter-cmpt
+				ref="projektbetreuerTable"
+				:tabulator-options="tabulatorOptions"
+				:tabulator-events="tabulatorEvents"
+				table-only
+				:side-menu="false"
+				new-btn-show
+				:new-btn-label="this.$p.t('projektarbeit', 'betreuerGross')"
+				@click:new="actionNewProjektbetreuer"
+				>
+			</core-filter-cmpt>
+
+			<form-form ref="formProjektbetreuer" v-show="betreuerFormOpened" @submit.prevent>
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektarbeit-betreuer"
+						:label="$p.t('projektarbeit', 'betreuer')"
+						type="autocomplete"
+						optionLabel="name"
+						v-model="autocompleteSelectedBetreuer"
+						name="person_id"
+						:suggestions="filteredBetreuer"
+						@complete="searchBetreuer"
+						:min-length="3"
+						:disabled="vertragFieldsDisabled"
+						>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<div class="col-6">
+						<button class="btn btn-outline-secondary" @click="actionNewPerson">{{ $p.t('projektarbeit', 'neuePersonAnlegen') }}</button>
+					</div>
+					<div class="col-6">
+						<button class="btn btn-outline-secondary float-end" @click="actionKontaktdatenBearbeiten">{{ $p.t('projektarbeit', 'kontaktdatenBearbeiten') }}</button>
+					</div>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektbetreuer-betreuerart"
+						:label="$p.t('projektarbeit', 'betreuerart')"
+						type="select"
+						v-model="formData.betreuerart_kurzbz"
+						name="betreuerart_kurzbz"
+						>
+						<option
+							v-for="art in arrBetreuerart"
+							:key="art.betreuerart_kurzbz"
+							:value="art.betreuerart_kurzbz"
+							>
+							{{art.beschreibung}}
+						</option>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<form-input
+						container-class="stv-details-projektbetreuer-note"
+						:label="$p.t('projektarbeit', 'note')"
+						type="select"
+						v-model="formData.note"
+						name="note"
+						>
+						<option :value="null"> -- {{$p.t('fehlermonitoring', 'keineAuswahl')}} -- </option>
+						<option
+							v-for="note in arrNoten"
+							:key="note.note"
+							:value="note.note"
+							>
+							{{note.bezeichnung}}
+						</option>
+					</form-input>
+				</div>
+
+				<div class="row mb-3">
+					<div class="col-6">
+						<form-input
+							container-class="stv-details-projektarbeit-stunden"
+							type="text"
+							name="stunden"
+							:label="$p.t('projektarbeit', 'stunden')"
+							:disabled="vertragFieldsDisabled"
+							v-model="formData.stunden"
+							>
+						</form-input>
+					</div>
+					<div class="col-6">
+						<form-input
+							container-class="stv-details-projektarbeit-stundensatz"
+							type="text"
+							name="stundensatz"
+							:label="$p.t('projektarbeit', 'stundensatz')"
+							:disabled="vertragFieldsDisabled"
+							v-model="formData.stundensatz"
+							>
+						</form-input>
+					</div>
+				</div>
+
+			</form-form>
+
+			<button class="btn btn-primary" v-show="betreuerFormOpened" @click="saveProjektbetreuer">
+				{{ $p.t('projektarbeit', 'betreuerSpeichern') }}
+			</button>
+			<!-- <div class = "mt-5" v-if="beurteilungDownloadLink !== null">
+				<div class="mb-1">
+					<a :href="beurteilungDownloadLink" class="btn btn-primary d-block" :class="{ 'disabled' : beurteilungDownloadLink === ''}">
+						{{ $p.t('projektarbeit', 'projektbeurteilungErstellen') }}
+					</a>
+				</div>
+				{{ autocompleteSelectedBetreuer?.person_id && beurteilungDownloadLink === '' ? $p.t('projektarbeit', 'projektarbeitNochNichtBeurteilt') : ''}}
+			</div> -->
+		</div>
+
+		<div class="col-3">
+			<vertrag ref="vertrag"
+				:vertrag_id="autocompleteSelectedBetreuer?.vertrag_id"
+				:person_id="autocompleteSelectedBetreuer?.person_id"
+				:betreuerProjektarbeit="initialFormData"
+				@vertragsstatusChanged="disableVertragFields">
+			</vertrag>
+		</div>
+
+	</div>
+
+	<!--Modal: new Person modal -->
+	<new-person ref="newPersonModal" :personOnly="true" @saved="personSaved"></new-person>
+
+	<!--Modal: KontaktdatenModal -->
+	<bs-modal
+		ref="kontaktdatenModal"
+		dialog-class="modal-xl modal-dialog-scrollable"
+		v-if="autocompleteSelectedBetreuer && autocompleteSelectedBetreuer.person_id">
+
+		<template #title>
+			<p class="fw-bold mt-3">{{$p.t('projektarbeit', 'kontaktdatenBearbeiten')}}</p>
+		</template>
+
+		<div class="row">
+			<div class="col-12">
+				<contact ref="contact" :uid="autocompleteSelectedBetreuer.person_id">
+				</contact>
+			</div>
+		</div>
+
+	</bs-modal>
+`
+}

public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Vertrag.js

@@ -0,0 +1,160 @@
+import CoreForm from '../../../../Form/Form.js';
+import FormInput from '../../../../Form/Input.js';
+import ApiVertrag from '../../../../../api/factory/stv/vertrag.js';
+
+export default{
+	name: "ProjektarbeitVertrag",
+	components: {
+		CoreForm,
+		FormInput
+	},
+	emits: [
+		'canceledVertrag',
+		'vertragsstatusChanged'
+	],
+	props: {
+		vertrag_id: Number,
+		person_id: Number,
+		betreuerProjektarbeit: Object
+	},
+
+	inject: {
+		showVertragsdetails: {
+			from: 'configShowVertragsdetails',
+			default: false
+		}
+	},
+
+	data() {
+		return{
+			data: {
+				vertragsstatus: null,
+				vertragsstunden: null,
+				vertragsstunden_studiensemester_kurzbz: null
+			},
+			// status names for stages of Vertrag ("constants")
+			vertragsstatus_akzeptiert: 'Akzeptiert',
+			vertragsstatus_geaendert:'Geändert',
+			vertragsstatus_storniert: 'Storno'
+		}
+	},
+	watch: {
+		vertrag_id:
+		{
+			//deep: true,
+			handler(newVal, oldVal) {
+				this.resetForm();
+				if (newVal !== null && newVal !== undefined) this.getVertrag();
+			}
+		},
+	},
+	computed: {
+		vertragsstatus() {
+			// not show Vertragsstatus if no data
+			if (!this.data?.vertragsstatus || !this.betreuerProjektarbeit?.betreuerart_kurzbz) return;
+
+			const betragVertrag = Number(this.data.betrag) || 0;
+			const stundenVertrag = Number(this.data.vertragsstunden) || 0;
+
+			const semStunden = Number(this.betreuerProjektarbeit.stunden) || 0;
+			const stundensatz = Number(this.betreuerProjektarbeit.stundensatz) || 0;
+
+			const kostenAktuell  = semStunden * stundensatz;
+
+			// Vertragsstunden amount should be same as Semesterstunden amount, otherwise there has been a change
+			let vertragsstatus = (stundenVertrag !== semStunden || betragVertrag !== kostenAktuell)
+				? this.vertragsstatus_geaendert
+				: (this.data.vertragsstatus || '');
+
+			// vertragsstatus changed to "akzeptiert"
+			this.$emit('vertragsstatusChanged', vertragsstatus == this.vertragsstatus_akzeptiert);
+
+			return vertragsstatus;
+		},
+	},
+	methods: {
+		getVertrag() {
+			if (this.showVertragsdetails === false)
+				return;
+
+			if (!this.vertrag_id)
+				return;
+
+			this.$api.call(ApiVertrag.getVertrag(this.vertrag_id))
+				.then(result => {
+					if (result.data.vertragsstatus != this.vertragsstatus_storniert) {
+						this.data = result.data;
+					}
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+
+		cancelVertrag() {
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? {vertrag_id: this.vertrag_id, person_id: this.person_id}
+					: Promise.reject({handled: true}))
+				.then(result => {
+					return this.$api.call(ApiVertrag.cancelVertrag({vertrag_id: this.vertrag_id, person_id: this.person_id}))
+				})
+				.then(result => {
+					this.resetForm();
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
+					this.$emit('canceledVertrag');
+					// vertragsstatus not "akzeptiert" anymore
+					this.$emit('vertragsstatusChanged', false);
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		resetForm() {
+			this.data = {
+				vertrag_id: null,
+				vertragsstatus: null,
+				vertragsstunden: null,
+				vertragsstunden_studiensemester_kurzbz: null
+			}
+		}
+	},
+	template: `
+		<core-form ref="form">
+			<fieldset class="overflow-hidden" v-if="showVertragsdetails">
+				<legend>
+					{{$p.t('lehre', 'vertragsdetails')}}
+				</legend>
+				<div class="mb-3">
+					{{ betreuerProjektarbeit?.betreuerart_kurzbz && betreuerProjektarbeit?.vertrag_id == null ? ' – '+$p.t('lehre', 'nochKeinVertrag') : '' }}
+				</div>
+				<div class="row mb-3">
+					<div class="col-12">
+						{{ $p.t('lehre', 'vertragsstatus') }}: {{ vertragsstatus }}
+					</div>
+				</div>
+				<div class="row mb-3">
+					<div class="col-12">
+						{{$p.t('lehre', 'vertragurfassung')}}
+					</div>
+				</div>
+				<div class="row mb-3">
+					<div class="col-12">
+						{{ $p.t('lehre', 'semesterstunden') }}: {{ data.vertragsstunden }}
+						<br>
+						<span class="text-capitalize">{{ $p.t('lehre', 'studiensemester') }}</span>: {{ data.vertragsstunden_studiensemester_kurzbz }}
+					</div>
+				</div>
+				<div class="row mb-3" v-if="data?.vertragsstatus">
+					<div class="col-12">
+						<button
+							type="button"
+							class="btn btn-outline-secondary"
+							:disabled="vertragsstatus == vertragsstatus_storniert"
+							@click="cancelVertrag"
+						>
+							{{ $p.t('lehre', 'vertragStornieren') }}
+						</button>
+					</div>
+				</div>
+			</fieldset>
+		</core-form>
+	`
+};

public/js/components/Stv/Studentenverwaltung/List.js

@@ -1,18 +1,28 @@
 import {CoreFilterCmpt} from "../../filter/Filter.js";
 import ListNew from './List/New.js';
+import ListFilter from './List/Filter.js';
 
+import draggable from '../../../directives/draggable.js';
 
 export default {
 	name: "ListPrestudents",
 	components: {
 		CoreFilterCmpt,
-		ListNew
+		ListNew,
+		ListFilter
+	},
+	directives: {
+		draggable
 	},
 	inject: {
-		'lists': {
+		lists: {
 			from: 'lists',
 			required: true
 		},
+		$reloadList: {
+			from: '$reloadList',
+			required: true
+		},
 		currentSemester: {
 			from: 'currentSemester',
 			required: true
@@ -51,8 +61,12 @@ export default {
 					{title:"Vornamen", field:"vornamen", visible:false, headerFilter: true},
 					{title:"TitelPost", field:"titelpost", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
 					{title:"Ersatzkennzeichen", field:"ersatzkennzeichen", headerFilter: true},
-					{title:"Geburtsdatum", field:"gebdatum", formatter:dateFormatter, 
-						headerFilter: true, headerFilterFunc: function(headerValue, rowValue, rowData, filterParams) {
+					{
+						title: "Geburtsdatum",
+						field: "gebdatum",
+						formatter: dateFormatter, 
+						headerFilter: true,
+						headerFilterFunc(headerValue, rowValue) {
 							const matches = headerValue.match(/^(([0-9]{2})\.)?([0-9]{2})\.([0-9]{4})?$/);
 							let comparestr = headerValue;
 							if(matches !== null) {
@@ -119,7 +133,7 @@ export default {
 					{
 						return Promise.resolve({ data: []});
 					}
-					return this.$api.call({url, params});
+					return this.$api.call({method: 'post', url, params});
 				},
 				ajaxResponse: (url, params, response) => {
 					return response?.data;
@@ -157,14 +171,63 @@ export default {
 			],
 			focusObj: null, // TODO(chris): this should be in the filter component
 			lastSelected: null,
-			filterKontoCount0: undefined,
-			filterKontoMissingCounter: undefined,
+			filter: [],
 			count: 0,
 			filteredcount: 0,
 			selectedcount: 0,
 			currentEndpointRawUrl: ''
 		}
 	},
+	computed: {
+		countsToHTML: function() {
+			return this.$p.t('global/ausgewaehlt')
+				+ ': <strong>' + (this.selectedcount || 0) + '</strong>'
+				+ ' | '
+				+ this.$p.t('global/gefiltert')
+				+ ': '
+				+ '<strong>' + (this.filteredcount || 0) + '</strong>'
+				+ ' | '
+				+ this.$p.t('global/gesamt')
+				+ ': <strong>' + (this.count || 0) + '</strong>';
+		},
+		selectedDragObject() {
+			return this.selected.map(item => {
+				let type, id;
+				if (item.uid) {
+					type = 'student';
+					id = item.uid;
+				} else if (item.prestudent_id) {
+					type = 'prestudent';
+					id = item.prestudent_id;
+				} else if (item.person_id) {
+					type = 'person';
+					id = item.person_id;
+				}
+				return {
+					...item,
+					type,
+					id
+				};
+			});
+		},
+		downloadConfig() {
+			return {
+				csv: {
+					formatter: 'csv',
+					file: this.fileString,
+					options: {
+						delimiter: ';',
+						bom: true,
+					}
+				}
+			};
+		},
+		fileString() {
+			let today = new Date().toLocaleDateString('en-GB')
+				.replace(/\//g, '_');
+			return "StudentList_" + today + ".csv";
+		}
+	},
 	methods: {
 		reload() {
 			this.$refs.table.reloadTable();
@@ -172,10 +235,19 @@ export default {
 		actionNewPrestudent() {
 			this.$refs.new.open();
 		},
-		rowSelectionChanged(data) {
+		rowSelectionChanged(data, rows) {
 			this.selectedcount = data.length;
 			this.lastSelected = this.selected;
 			this.$emit('update:selected', data);
+
+			// set selected elements draggable
+			const tableEl = this.$refs.table?.$refs?.table;
+			if (tableEl) {
+				const oldDragables = tableEl.querySelectorAll('[draggable]');
+				for (const draggable of oldDragables)
+					draggable.removeAttribute('draggable');
+			}
+			rows.forEach(row => row.getElement().draggable = true);
 		},
 		autoSelectRows(data) {
 			if (this.lastSelected) {
@@ -194,6 +266,10 @@ export default {
 				}
 			}
 		},
+		updateFilter(filter) {
+			this.filter = filter;
+			this.updateUrl();
+		},
 		updateUrl(endpoint, first) {
 			this.lastSelected = first ? undefined : this.selected;
 
@@ -214,14 +290,9 @@ export default {
 				encodeURIComponent(this.currentSemester)
 				);
 
-			const params = {}, filter = {};
-			if (this.filterKontoCount0)
-				filter.konto_count_0 = this.filterKontoCount0;
-			if (this.filterKontoMissingCounter)
-				filter.konto_missing_counter = this.filterKontoMissingCounter;
-
-			if (filter.konto_count_0 || filter.konto_missing_counter)
-				params.filter = filter;
+			const params = {};
+			if (this.filter.length)
+				params.filter = this.filter;
 
 			if (!this.$refs.table.tableBuilt) {
 				if (!this.$refs.table.tabulator) {
@@ -234,14 +305,22 @@ export default {
 			} else
 				this.$refs.table.tabulator.setData(endpoint.url, params);
 		},
+		dragCleanup(evt) {
+			if (evt.dataTransfer.dropEffect == 'none')
+				return; // aborted or wrong target
+			
+			this.$reloadList();
+		},
 		onKeydown(e) { // TODO(chris): this should be in the filter component
 			if (!this.focusObj)
 				return;
+
+			var next;
 			switch (e.code) {
 				case 'Enter':
 				case 'Space':
 					e.preventDefault();
-					const e2 = new Event('click', e);
+					var e2 = new Event('click', e);
 					e2.altKey = e.altKey;
 					e2.ctrlKey = e.ctrlKey;
 					e2.shiftKey = e.shiftKey;
@@ -250,13 +329,13 @@ export default {
 					break;
 				case 'ArrowUp':
 					e.preventDefault();
-					var next = this.focusObj.previousElementSibling;
+					next = this.focusObj.previousElementSibling;
 					if (next)
 						this.changeFocus(this.focusObj, next);
 					break;
 				case 'ArrowDown':
 					e.preventDefault();
-					var next = this.focusObj.nextElementSibling;
+					next = this.focusObj.nextElementSibling;
 					if (next)
 						this.changeFocus(this.focusObj, next);
 					break;
@@ -296,24 +375,19 @@ export default {
 			}
 		}
 	},
-	computed: {
-		countsToHTML: function() {
-			return this.$p.t('global/ausgewaehlt')
-				+ ': <strong>' + (this.selectedcount || 0) + '</strong>'
-				+ ' | '
-				+ this.$p.t('global/gefiltert')
-				+ ': '
-				+ '<strong>' + (this.filteredcount || 0) + '</strong>'
-				+ ' | '
-				+ this.$p.t('global/gesamt')
-				+ ': <strong>' + (this.count || 0) + '</strong>';
-		}
-	},
 	// TODO(chris): focusin, focusout, keydown and tabindex should be in the filter component
 	// TODO(chris): filter component column chooser has no accessibilty features
 	template: `
 	<div class="stv-list h-100 pt-3">
-		<div class="tabulator-container d-flex flex-column h-100" :class="{'has-filter': filterKontoCount0 || filterKontoMissingCounter}" tabindex="0" @focusin="onFocus" @keydown="onKeydown">
+		<div
+			class="tabulator-container d-flex flex-column h-100"
+			:class="{'has-filter': filter.length}"
+			tabindex="0"
+			@focusin="onFocus"
+			@keydown="onKeydown"
+			v-draggable:copyLink.capture="selectedDragObject"
+			@dragend="dragCleanup"
+		>
 			<core-filter-cmpt
 				ref="table"
 				:description="countsToHTML"
@@ -322,6 +396,7 @@ export default {
 				table-only
 				:side-menu="false"
 				reload
+				:download="downloadConfig"
 				` + /* TODO(chris): Ausgeblendet für Testing
 				new-btn-show
 				*/`
@@ -331,29 +406,7 @@ export default {
 			<template #filter>
 				<div class="card">
 					<div class="card-body">
-						<div class="input-group mb-3">
-							<label class="input-group-text col-4" for="stv-list-filter-konto-count-0">{{ $p.t('stv/konto_filter_count_0') }}</label>
-							<select class="form-select" id="stv-list-filter-konto-count-0" v-model="filterKontoCount0" @input="$nextTick(updateUrl)">
-								<option v-for="typ in lists.buchungstypen" :key="typ.buchungstyp_kurzbz" :value="typ.buchungstyp_kurzbz">
-									{{ typ.beschreibung }}
-								</option>
-							</select>
-							<button v-if="filterKontoCount0" class="btn btn-outline-secondary" @click="filterKontoCount0 = undefined; updateUrl()">
-								<i class="fa fa-times"></i>
-							</button>
-						</div>
-						<div class="input-group">
-							<label class="input-group-text col-4" for="stv-list-filter-konto-missing-counter">{{ $p.t('stv/konto_filter_missing_counter') }}</label>
-							<select class="form-select" id="stv-list-filter-konto-missing-counter" v-model="filterKontoMissingCounter" @input="$nextTick(updateUrl)">
-								<option value="alle">{{ $p.t('stv/konto_all_types') }}</option>
-								<option v-for="typ in lists.buchungstypen" :key="typ.buchungstyp_kurzbz" :value="typ.buchungstyp_kurzbz">
-									{{ typ.beschreibung }}
-								</option>
-							</select>
-							<button v-if="filterKontoMissingCounter" class="btn btn-outline-secondary" @click="filterKontoMissingCounter = undefined; updateUrl()">
-								<i class="fa fa-times"></i>
-							</button>
-						</div>
+						<list-filter @change="updateFilter" />
 					</div>
 				</div>
 			</template>

public/js/components/Stv/Studentenverwaltung/List/Filter.js

@@ -0,0 +1,102 @@
+import FilterItem from './Filter/Item.js';
+
+import ApiStvApp from '../../../../api/factory/stv/app.js';
+
+export default {
+	name: "ListPrestudentsFilter",
+	components: {
+		FilterItem
+	},
+	emits: [
+		'change'
+	],
+	data() {
+		return {
+			filters: [],
+			filterConfig: [// TODO(chris): get from BE!
+				{
+					name: 'stv/konto_filter_count_0',
+					type: 'konto',
+					fixed: {
+						missing: true,
+						usestdsem: true
+					},
+					dynamic: {
+						buchungstyp_kurzbz: {
+							type: 'select',
+							values: {
+								test1: 'Test1',
+								test2: 'Test2'
+							}
+						}
+					}
+				},
+				{
+					name: 'stv/konto_filter_missing_counter',
+					type: 'konto_counter',
+					dynamic: {
+						buchungstyp_kurzbz: {
+							type: 'select',
+							values: {
+								test1: 'Test1',
+								test2: 'Test2'
+							}
+						},
+						samestg: {
+							type: 'bool',
+							label: 'stv/konto',
+							default: true
+						}
+					}
+				}
+			]
+		}
+	},
+	computed: {
+		cleanFilters() {
+			return this.filters.filter(filter => {
+				if (!filter.type)
+					return false;
+				if (Object.values(filter).some(v => v === undefined))
+					return false;
+				return true;
+			});
+		}
+	},
+	watch: {
+		cleanFilters(n) {
+			this.$emit('change', n);
+		}
+	},
+	methods: {
+		add() {
+			this.filters.push({});
+		},
+		remove(index) {
+			this.filters.splice(index, 1);
+		}
+	},
+	created() {
+		this.$api
+			.call(ApiStvApp.configFilter())
+			.then(result => {
+				this.filterConfig = result.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+	},
+	template: /* html */`
+	<div class="stv-list-filter h-100">
+		<button class="btn btn-outline-dark" type="button" @click="add">
+			<span class="fa-solid fa-plus" aria-hidden="true"></span>
+			{{ $p.t('filter/filter') }}
+		</button>
+		<filter-item
+			v-for="(filter, i) in filters"
+			:key="i"
+			v-model="filters[i]"
+			:filter-config="filterConfig"
+			class="mt-3"
+			@remove="remove(i)"
+		/>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/List/Filter/Item.js

@@ -0,0 +1,113 @@
+export default {
+	name: "FilterItem",
+	props: {
+		modelValue: Object,
+		filterConfig: Array
+	},
+	emits: [
+		'update:modelValue',
+		'remove'
+	],
+	data() {
+		return {
+			//type: this.modelValue.type
+		};
+	},
+	computed: {
+		value: {
+			get() {
+				return this.modelValue;
+			},
+			set(value) {
+				this.$emit('update:modelValue', value);
+			}
+		},
+		filterid: {
+			get() {
+				return this.modelValue.filterid
+			},
+			set(filterid) {
+				const config = this.filterConfig.find(config => config.id == filterid);
+				const dynamic = Object.fromEntries(
+					Object.keys(config.dynamic || {}).map(key => {
+						return [
+							key,
+							config.dynamic[key].default
+						];
+					})
+				);
+				this.value = {
+					filterid,
+					type: config.type,
+					...(config.fixed || {}),
+					...dynamic
+				};
+			}
+		},
+		currentConfig() {
+			return this.filterConfig.find(config => config.id == this.filterid);
+		}
+	},
+	methods: {
+		update() {
+			this.$emit('update:modelValue', this.value);
+		}
+	},
+	template: /* html */`
+	<div class="stv-list-filter-item input-group">
+		<label
+			class="input-group-text col-4"
+			for="stv-list-filter-konto-count-0"
+		>
+			{{ $p.t('stv/filter_for') }}
+		</label>
+		<select
+			v-model="filterid"
+			id="stv-list-filter-konto-count-0"
+			class="form-select"
+		>
+			<option
+				v-for="(filter, i) in filterConfig"
+				:key="i"
+				:value="filter.id"
+			>
+				{{ filter.label }}
+			</option>
+		</select>
+		<template v-for="(conf, key) in currentConfig?.dynamic" :key="key">
+			<select
+				v-if="conf.type == 'select'"
+				v-model="modelValue[key]"
+				class="form-select"
+				@input="update"
+			>
+				<option
+					v-for="(label, value) in conf.values"
+					:key="conf.value_key ? label[conf.value_key] : value"
+					:value="conf.value_key ? label[conf.value_key] : value"
+				>
+					{{ conf.label_key ? label[conf.label_key] : label }}
+				</option>
+			</select>
+			<template v-else-if="conf.type == 'bool'">
+				<div class="input-group-text">
+					<label class="form-check-label">
+						<input
+							v-model="modelValue[key]"
+							type="checkbox"
+							class="form-check-input me-1"
+							@input="update"
+						>
+						{{ conf.label }}
+					</label>
+				</div>
+			</template>
+		</template>
+		<button
+			class="btn btn-outline-secondary"
+			:title="$p.t('ui/entfernen')"
+			:aria-label="$p.t('ui/entfernen')"
+			@click="$emit('remove')"
+		><i class="fa fa-times"></i></button>
+	</div>`
+};

public/js/components/Stv/Studentenverwaltung/List/New.js

@@ -10,7 +10,7 @@ import ApiStvStudents from '../../../../api/factory/stv/students.js';
 var _uuid = 0;
 const FORMDATA_DEFAULT = {
 	address: {
-		func: 0,
+		func: 1,
 		nation: 'A'
 	},
 	geburtsnation: 'A',
@@ -33,7 +33,9 @@ export default {
 	inject: [
 		'lists'
 	],
+	emits: ['saved'],
 	props: {
+		personOnly: Boolean, 
 		studiengangKz: Number,
 		studiensemesterKurzbz: String
 	},
@@ -108,7 +110,7 @@ export default {
 				return;
 
 			this.abortController.suggestions = new AbortController();
-			
+
 			this.$api
 				.call(ApiStvStudents.check({
 					vorname: this.formData.vorname,
@@ -119,6 +121,11 @@ export default {
 				})
 				.then(result => this.suggestions = result.data)
 				.catch(error => {
+
+					if (error.code == 'ERR_BAD_REQUEST') {
+						return this.suggestions = [];
+					}
+
 					// NOTE(chris): repeat request
 					if (error.code != "ERR_CANCELED")
 						window.setTimeout(this.loadSuggestions, 100);
@@ -191,14 +198,22 @@ export default {
 			if (data.studiensemester_kurzbz === undefined)
 				data.studiensemester_kurzbz = this.studiensemesterKurzbz;
 
-			// TODO(chris): move to fhcapi.factory
-			this.$refs.form
-				.post('api/frontend/v1/stv/student/add', data)
-				.then(result => {
-					this.$fhcAlert.alertSuccess('Gespeichert');
-					this.$refs.modal.hide();
-				})
-				.catch(this.$fhcAlert.handleSystemError);
+			data.personOnly = this.personOnly;
+
+			this.$refs.form.call(
+				ApiStvStudents.add(data)
+			)
+			.then(result => {
+				this.$emit('saved', result.data);
+				this.$fhcAlert.alertSuccess('Gespeichert');
+				this.$refs.modal.hide();
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+		},
+		setPerson(suggestion)
+		{
+			this.person = suggestion;
+			this.formData.address.func = -1;
 		}
 	},
 	created() {
@@ -215,7 +230,7 @@ export default {
 	<fhc-form ref="form" class="stv-list-new" @submit.prevent="send">
 		<bs-modal ref="modal" dialog-class="modal-lg modal-dialog-scrollable" @hidden-bs-modal="reset">
 			<template #title>
-				InteressentIn anlegen
+				{{ personOnly ? $p.t('person', 'personAnlegen') : $p.t('lehre', 'interessentAnlegen') }}
 			</template>
 			<template #default>
 
@@ -225,36 +240,38 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Nachname*"
+								:label="$p.t('person', 'nachname')+'*'"
 								type="text"
 								id="stv-list-new-nachname"
 								name="nachname"
 								v-model="formDataPerson['nachname']"
-								:disabled="person"
+								:disabled="!!person"
 								@input="loadSuggestions"
+								:min-length="3"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Vorname"
+								:label="$p.t('person', 'vorname')"
 								type="text"
 								:id="'stv-list-new-vorname-' + uuid"
 								name="vorname"
 								v-model="formDataPerson['vorname']"
-								:disabled="person"
+								:disabled="!!person"
 								@input="loadSuggestions"
+								:min-length="3"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Geburtsdatum"
+								:label="$p.t('person', 'geburtsdatum')"
 								type="datepicker"
 								uid="stv-list-new-gebdatum"
 								name="gebdatum"
 								v-model="formDataPerson['gebdatum']"
-								:disabled="person"
+								:disabled="!!person"
 								@update:model-value="loadSuggestions"
 								text-input
 								auto-apply
@@ -267,13 +284,13 @@ export default {
 					</div>
 					<!-- TODO(chris): more details -->
 					<table class="table caption-top table-striped table-hover">
-						<caption>Prüfung ob Person bereits existiert</caption>
+						<caption>{{ $p.t('person', 'personExistiertPruefung') }}</caption>
 						<tbody>
 							<tr
 								v-for="(suggestion, index) in suggestions"
 								:key="suggestion.person_id"
 								:class="{'active': index == 2}"
-								@click="(index == 2) ? suggestions.shift() : person=suggestion"
+								@click="(index == 2) ? suggestions.shift() : setPerson(suggestion)"
 								v-accessibility:tab.vertical
 								>
 								<td>{{suggestion.vorname + ' ' + suggestion.nachname}}</td>
@@ -286,34 +303,34 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Anrede"
+								:label="$p.t('person', 'anrede')"
 								type="text"
 								id="stv-list-new-anrede"
 								name="anrede"
 								v-model="formDataPerson['anrede']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Titel (Pre)"
+								:label="$p.t('person', 'titelPre')"
 								type="text"
 								id="stv-list-new-titelpre"
 								name="titelpre"
 								v-model="formDataPerson['titelpre']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Titel (Post)"
+								:label="$p.t('person', 'titelPost')"
 								type="text"
 								id="stv-list-new-titelpost"
 								name="titelpost"
 								v-model="formDataPerson['titelpost']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 							</form-input>
 						</div>
@@ -321,36 +338,38 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Nachname*"
+								:label="$p.t('person', 'nachname')+'*'"
 								type="text"
 								id="stv-list-new-nachname"
 								name="nachname"
 								v-model="formDataPerson['nachname']"
-								:disabled="person"
+								:disabled="!!person"
 								@input="loadSuggestions"
+								:min-length="3"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Vorname"
+								:label="$p.t('person', 'vorname')"
 								type="text"
 								id="stv-list-new-vorname"
 								name="vorname"
 								v-model="formDataPerson['vorname']"
-								:disabled="person"
+								:disabled="!!person"
 								@input="loadSuggestions"
+								:min-length="3"
 								>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Weitere Vornamen"
+								:label="$p.t('person', 'weitereVornamen')"
 								type="text"
 								id="stv-list-new-vornamen"
 								name="vornamen"
 								v-model="formDataPerson['vornamen']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 							</form-input>
 						</div>
@@ -358,12 +377,12 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Wahlname"
+								:label="$p.t('person', 'wahlname')"
 								type="text"
 								id="stv-list-new-wahlname"
 								name="wahlname"
 								v-model="formDataPerson['wahlname']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 							</form-input>
 						</div>
@@ -371,24 +390,24 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Geschlecht*"
+								:label="$p.t('person', 'geschlecht')+'*'"
 								type="select"
 								id="stv-list-new-geschlecht"
 								name="geschlecht"
 								v-model="formDataPerson['geschlecht']"
-								:disabled="person"
+								:disabled="!!person"
 								>
 								<option v-for="geschlecht in lists.geschlechter" :key="geschlecht.geschlecht" :value="geschlecht.geschlecht">{{geschlecht.bezeichnung}}</option>
 							</form-input>
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Geburtsdatum"
+								:label="$p.t('person', 'geburtsdatum')"
 								type="datepicker"
 								uid="stv-list-new-gebdatum"
 								name="gebdatum"
 								v-model="formDataPerson['gebdatum']"
-								:disabled="person"
+								:disabled="!!person"
 								@update:model-value="loadSuggestions"
 								text-input
 								auto-apply
@@ -400,7 +419,7 @@ export default {
 						</div>
 					</div>
 					
-					<div v-if="person" class="row">
+					<div class="row">
 						<div class="col-sm-6 mb-3">
 							<form-input
 								type="select"
@@ -408,19 +427,19 @@ export default {
 								name="address[func]"
 								v-model="formData['address']['func']"
 								>
-								<option value="-1">Bestehende Adresse überschreiben</option>
-								<option value="1">Adresse hinzufügen</option>
-								<option value="0">Adresse nicht anlegen</option>
+								<option value="-1" v-if="person">{{ $p.t('person', 'bestehendeAdresseUeberschreiben') }}</option>
+								<option value="1">{{ $p.t('person', 'adresseHinzufuegen') }}</option>
+								<option value="0">{{ $p.t('person', 'adresseNichtAnlegen') }}</option>
 							</form-input>
 						</div>
 					</div>
 					
-					<fieldset v-if="!person || formData['address']['func']">
+					<fieldset v-if="formData['address']['func'] != 0">
 						<legend>Adresse</legend>
 						<div class="row">
 							<div class="col-sm-4 mb-3">
 								<form-input
-									label="Land"
+									:label="$p.t('person', 'land')"
 									type="select"
 									id="stv-list-new-address-nation"
 									name="address[nation]"
@@ -434,7 +453,7 @@ export default {
 						<div class="row">
 							<div class="col-sm-4 mb-3">
 								<form-input
-									label="PLZ"
+									:label="$p.t('person', 'plz')"
 									type="text"
 									id="stv-list-new-address-plz"
 									name="address[plz]"
@@ -445,18 +464,18 @@ export default {
 							</div>
 							<div class="col-sm-4 mb-3">
 								<form-input
-									label="Gemeinde"
+									:label="$p.t('person', 'gemeinde')"
 									type="select"
 									v-if="formData['address']['nation'] == 'A'"
 									id="stv-list-new-address-gemeinde"
 									name="address[gemeinde]"
 									v-model="formData['address']['gemeinde']"
 									>
-									<option v-if="!gemeinden.length" disabled>Bitte gültige PLZ wählen</option>
+									<option v-if="!gemeinden.length" disabled>$p.t('ui', 'bittePlzWaehlen')</option>
 									<option v-for="gemeinde in gemeinden" :key="gemeinde.name" :value="gemeinde.name">{{gemeinde.name}}</option>
 								</form-input>
 								<form-input
-									label="Gemeinde"
+									:label="$p.t('person', 'gemeinde')"
 									type="text"
 									v-else
 									id="stv-list-new-address-gemeinde"
@@ -467,7 +486,7 @@ export default {
 							</div>
 							<div class="col-sm-4 mb-3">
 								<form-input
-									label="Ort"
+									:label="$p.t('person', 'ort')"
 									type="select"
 									v-if="formData['address']['nation'] == 'A'"
 									id="stv-list-new-address-ort"
@@ -478,7 +497,7 @@ export default {
 									<option v-for="ort in orte" :key="ort.ortschaftsname" :value="ort.ortschaftsname">{{ort.ortschaftsname}}</option>
 								</form-input>
 								<form-input
-									label="Ort"
+									:label="$p.t('person', 'ort')"
 									type="text"
 									v-else
 									id="stv-list-new-address-ort"
@@ -491,7 +510,7 @@ export default {
 						<div class="row">
 							<div class="col-12 mb-3">
 								<form-input
-									label="Adresse"
+									:label="$p.t('person', 'adresse')"
 									type="text"
 									id="stv-list-new-address-address"
 									name="address[address]"
@@ -505,7 +524,7 @@ export default {
 					<div class="row">
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Geburtsnation"
+								:label="$p.t('person', 'geburtsnation')"
 								type="select"
 								id="stv-list-new-geburtsnation"
 								name="geburtsnation" class="form-select"
@@ -516,7 +535,7 @@ export default {
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Staatsbürgerschaft"
+								:label="$p.t('person', 'staatsbuergerschaft')"
 								type="select"
 								id="stv-list-new-staatsbuergerschaft"
 								name="staatsbuergerschaft"
@@ -539,7 +558,7 @@ export default {
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Telefon"
+								:label="$p.t('person', 'telefon')"
 								type="text"
 								id="stv-list-new-telefon"
 								name="telefon"
@@ -549,7 +568,7 @@ export default {
 						</div>
 						<div class="col-sm-4 mb-3">
 							<form-input
-								label="Mobil"
+								:label="$p.t('person', 'mobil')"
 								type="text"
 								id="stv-list-new-mobil"
 								name="mobil"
@@ -558,126 +577,128 @@ export default {
 							</form-input>
 						</div>
 					</div>
-					<div class="row">
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Letzte Ausbildung"
-								type="select"
-								id="stv-list-new-letzteausbildung"
-								name="letzteausbildung"
-								v-model="formData['letzteausbildung']"
-								>
-								<option v-for="ausbildung in lists.ausbildungen" :key="ausbildung.ausbildungcode" :value="ausbildung.ausbildungcode">{{ausbildung.ausbildungbez}}</option>
-							</form-input>
-						</div>
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Ausbildungsart"
-								type="text"
-								id="stv-list-new-ausbildungsart"
-								name="ausbildungsart"
-								v-model="formDataPerson['ausbildungsart']"
-								>
-							</form-input>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-8 mb-3">
-							<form-input
-								label="Anmerkungen"
-								type="textarea"
-								id="stv-list-new-anmerkungen"
-								name="anmerkungen"
-								v-model="formDataPerson['anmerkungen']"
-								>
-							</form-input>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Studiengang*"
-								type="select"
-								id="stv-list-new-studiengang_kz"
-								name="studiengang_kz"
-								v-model="formDataStg"
-								>
-								<option v-for="stg in lists.active_stgs" :key="stg.studiengang_kz" :value="stg.studiengang_kz">{{stg.kuerzel}}</option>
-							</form-input>
-						</div>
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Studiensemester*"
-								type="select"
-								id="stv-list-new-studiensemester_kurzbz"
-								name="studiensemester_kurzbz"
-								v-model="formDataSem"
-								>
-								<option v-for="sem in semester" :key="sem.studiensemester_kurzbz" :value="sem.studiensemester_kurzbz">{{sem.studiensemester_kurzbz}}</option>
-							</form-input>
-						</div>
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Ausbildungssemester*"
-								type="select"
-								id="stv-list-new-ausbildungssemester"
-								name="ausbildungssemester"
-								v-model="formData['ausbildungssemester']"
-								:disabled="formData['incoming']"
-								@input="loadStudienplaene"
-								>
-								<option v-for="sem in Array.from({length:8}).map((u,i) => i+1)" :key="sem" :value="sem">{{sem}}. Semester</option>
-							</form-input>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="OrgForm"
-								type="select"
-								id="stv-list-new-orgform_kurzbz"
-								name="orgform_kurzbz"
-								v-model="formData['orgform_kurzbz']"
-								@input="loadStudienplaene"
-								>
-								<option value="">-- keine Auswahl --</option>
-								<option v-for="orgform in lists.orgforms" :key="orgform.orgform_kurzbz" :value="orgform.orgform_kurzbz">{{orgform.bezeichnung}}</option>
-							</form-input>
-						</div>
-						<div class="col-sm-4 mb-3">
-							<form-input
-								label="Studienplan"
-								type="select"
-								id="stv-list-new-studienplan_id"
-								name="studienplan_id"
-								v-model="formData['studienplan_id']"
-								>
-								<option value="">-- keine Auswahl --</option>
-								<option v-for="plan in studienplaene" :key="plan.studienplan_id" :value="plan.studienplan_id">{{plan.bezeichnung}}</option>
-							</form-input>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-10 mb-3">
-							<div class="form-check">
+					<fieldset v-if="!personOnly">
+						<div class="row">
+							<div class="col-sm-4 mb-3">
 								<form-input
-									label="Incoming"
-									type="checkbox"
-									id="stv-list-new-incoming"
-									name="incoming"
-									v-model="formData['incoming']"
-									value="1"
+									:label="$p.t('lehre', 'letzeAusbildung')"
+									type="select"
+									id="stv-list-new-letzteausbildung"
+									name="letzteausbildung"
+									v-model="formData['letzteausbildung']"
+									>
+									<option v-for="ausbildung in lists.ausbildungen" :key="ausbildung.ausbildungcode" :value="ausbildung.ausbildungcode">{{ausbildung.ausbildungbez}}</option>
+								</form-input>
+							</div>
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'ausbildungsart')"
+									type="text"
+									id="stv-list-new-ausbildungsart"
+									name="ausbildungsart"
+									v-model="formDataPerson['ausbildungsart']"
 									>
 								</form-input>
 							</div>
 						</div>
-					</div>
+						<div class="row">
+							<div class="col-sm-8 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'anmerkungen')"
+									type="textarea"
+									id="stv-list-new-anmerkungen"
+									name="anmerkungen"
+									v-model="formDataPerson['anmerkungen']"
+									>
+								</form-input>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'studiengang')+'*'"
+									type="select"
+									id="stv-list-new-studiengang_kz"
+									name="studiengang_kz"
+									v-model="formDataStg"
+									>
+									<option v-for="stg in lists.active_stgs" :key="stg.studiengang_kz" :value="stg.studiengang_kz">{{stg.kuerzel}}</option>
+								</form-input>
+							</div>
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'studiensemester')+'*'"
+									type="select"
+									id="stv-list-new-studiensemester_kurzbz"
+									name="studiensemester_kurzbz"
+									v-model="formDataSem"
+									>
+									<option v-for="sem in semester" :key="sem.studiensemester_kurzbz" :value="sem.studiensemester_kurzbz">{{sem.studiensemester_kurzbz}}</option>
+								</form-input>
+							</div>
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'ausbildungssemester')+'*'"
+									type="select"
+									id="stv-list-new-ausbildungssemester"
+									name="ausbildungssemester"
+									v-model="formData['ausbildungssemester']"
+									:disabled="formData['incoming']"
+									@input="loadStudienplaene"
+									>
+									<option v-for="sem in Array.from({length:8}).map((u,i) => i+1)" :key="sem" :value="sem">{{sem}}. Semester</option>
+								</form-input>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'organisationsform')"
+									type="select"
+									id="stv-list-new-orgform_kurzbz"
+									name="orgform_kurzbz"
+									v-model="formData['orgform_kurzbz']"
+									@input="loadStudienplaene"
+									>
+									<option value="">-- keine Auswahl --</option>
+									<option v-for="orgform in lists.orgforms" :key="orgform.orgform_kurzbz" :value="orgform.orgform_kurzbz">{{orgform.bezeichnung}}</option>
+								</form-input>
+							</div>
+							<div class="col-sm-4 mb-3">
+								<form-input
+									:label="$p.t('lehre', 'studienplan')"
+									type="select"
+									id="stv-list-new-studienplan_id"
+									name="studienplan_id"
+									v-model="formData['studienplan_id']"
+									>
+									<option value="">-- keine Auswahl --</option>
+									<option v-for="plan in studienplaene" :key="plan.studienplan_id" :value="plan.studienplan_id">{{plan.bezeichnung}}</option>
+								</form-input>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-10 mb-3">
+								<div class="form-check">
+									<form-input
+										label="Incoming"
+										type="checkbox"
+										id="stv-list-new-incoming"
+										name="incoming"
+										v-model="formData['incoming']"
+										value="1"
+										>
+									</form-input>
+								</div>
+							</div>
+						</div>
+					</fieldset>
 				</template>
 			</template>
 			<template #footer>
-				<button v-if="person !== null" type="button" class="btn btn-secondary" @click="person = null"><i class="fa fa-chevron-left"></i>Zurück</button>
-				<button type="submit" class="btn btn-primary">{{ person === null ? 'Person anlegen' : 'InteressentIn anlegen' }}</button>
+				<button v-if="person !== null" type="button" class="btn btn-secondary" @click="person = null; formData.address.func = 1;"><i class="fa fa-chevron-left"></i>{{ $p.t('ui', 'zurueck') }}</button>
+				<button type="submit" class="btn btn-primary">{{ person === null || personOnly ? $p.t('person', 'personAnlegen') : $p.t('lehre', 'interessentAnlegen') }}</button>
 			</template>
 		</bs-modal>
 	</fhc-form>`
-};
+};

public/js/components/Stv/Studentenverwaltung/Verband.js

@@ -1,10 +1,28 @@
-import ApiStvVerband from '../../../api/factory/stv/verband.js';
+import drop from '../../../directives/drop.js';
+import dragClick from '../../../directives/dragClick.js';
+
+import ApiStvGroups from '../../../api/factory/stv/group.js';
+import ApiStvDetails from '../../../api/factory/stv/details.js';
 
 export default {
 	components: {
 		PvTreetable: primevue.treetable,
 		PvColumn: primevue.column
 	},
+	directives: {
+		drop,
+		dragClick
+	},
+	inject: {
+		$reloadList: {
+			from: '$reloadList',
+			required: true
+		},
+		currentSemester: {
+			from: 'currentSemester',
+			required: true
+		}
+	},
 	emits: [
 		'selectVerband'
 	],
@@ -201,6 +219,51 @@ export default {
 
 			this.selectedKey = {[currentNode.key]: true};
 			this.onSelectTreeNode(currentNode);
+		},
+		async toggleTreeNode(node) {
+			if (this.expandedKeys[node.key]) {
+				delete this.expandedKeys[node.key];
+			} else if (!node.leaf) {
+				await this.onExpandTreeNode(node);
+				this.expandedKeys[node.key] = true;
+			}
+		},
+		getStudentAjaxId(student) {
+			let res = student.id;
+			if (student.vorname && student.nachname)
+				res += ' (' + student.vorname + ' ' + student.nachname + ')';
+			return res;
+		},
+		dropStudents(node, students) {
+			const data = node.data;
+			
+			let endpoint;
+			if (data.gruppe_kurzbz) {
+				endpoint = students.map(student => [
+					this.getStudentAjaxId(student),
+					ApiStvGroups.add(
+						student.id,
+						data.gruppe_kurzbz,
+						this.currentSemester
+					)
+				]);
+			} else {
+				const { semester, verband, gruppe } = data;
+				const params = { semester, verband, gruppe };
+				endpoint = students.map(student => [
+					this.getStudentAjaxId(student),
+					ApiStvDetails.saveStudent(
+						student.id,
+						this.currentSemester,
+						params
+					)
+				]);
+			}
+
+			return this.$api
+				.call(endpoint)
+				.then(this.$reloadList)
+				.catch(this.$fhcAlert.handleSystemError);
 		}
 	},
 	mounted() {
@@ -262,10 +325,21 @@ export default {
 				</template>
 				<template #body="{ node }">
 					<span
+						v-if="['semester', 'verband', 'gruppe', 'gruppe_kurzbz'].some(key => node.data.hasOwnProperty(key))"
 						:data-tree-item-key="node.key"
 						:title="node.data.studiengang_kz"
+						v-drag-click="() => toggleTreeNode(node)"
+						v-drop:link-strict.student-collection="(evt, students) => dropStudents(node, students)"
 					>
-						{{node.data.name}}
+						{{ node.data.name }}
+					</span>
+					<span
+						v-else
+						:data-tree-item-key="node.key"
+						:title="node.data.studiengang_kz"
+						v-drag-click="() => toggleTreeNode(node)"
+					>
+						{{ node.data.name }}
 					</span>
 				</template>
 			</pv-column>

public/js/components/Tabs.js

@@ -158,10 +158,12 @@ export default {
 	template: `
 	<template v-if="useprimevue">
 
-		<tabview 
+		<tabview
+			class="d-flex flex-column"
 			:scrollable="true"
 			:lazy="true"
 			:activeIndex="calcActiveIndex"
+			:pt="{navContainer:{style: 'flex: 0 0 auto;'}, panelContainer:{class: 'overflow-y-scroll', style: 'flex: 1 1 auto;'}}"
 			@tab-click="handleTabClick"
 		>
 			<tabpanel

public/js/directives/dragClick.js

@@ -0,0 +1,53 @@
+import { bindDragEnterLeave } from '../helpers/DragAndDrop.js';
+
+export default {
+	mounted(el, binding) {
+		const delay = parseInt(binding.arg) || 300;
+
+		let timeout = null;
+		function startCountdown() {
+			timeout = window.setTimeout(binding.value, delay);
+		}
+		function stopCountdown() {
+			if (timeout)
+				window.clearTimeout(timeout);
+			timeout = null;
+		}
+
+		let lastTarget;
+		let lastX;
+		let lastY;
+
+		function onDragOver(evt) {
+			if (lastX != evt.offsetX || lastY != evt.offsetY || lastTarget != evt.target) {
+				// moved
+				lastTarget = evt.target;
+				lastX = evt.offsetX;
+				lastY = evt.offsetY;
+
+				stopCountdown();
+				startCountdown();
+			}
+		}
+
+		function onEnter(evt) {
+			lastTarget = evt.target;
+			lastX = evt.offsetX;
+			lastY = evt.offsetY;
+
+			el.addEventListener('dragover', onDragOver);
+
+			startCountdown();
+		}
+		function onLeave() {
+			stopCountdown();
+			el.removeEventListener('dragover', onDragOver);
+		}
+
+		el.fhcDragClickCleanup = bindDragEnterLeave(el, onEnter, onLeave);
+	},
+	beforeUnmount(el) {
+		el.fhcDragClickCleanup();
+		delete el.fhcDragClickCleanup;
+	}
+}

public/js/directives/draggable.js

@@ -0,0 +1,101 @@
+import { setTransferData, convertToValidDragObject } from '../helpers/DragAndDrop.js';
+
+const EFFECTS = [
+	'none',
+	'copy',
+	'copyLink',
+	'copyMove',
+	'link',
+	'linkMove',
+	'move',
+	'all',
+	'uninitialized'
+];
+
+export default {
+	mounted(el, binding) {
+		updateValue(el, binding.value);
+		updateEffectAllowed(el, binding.arg);
+
+		// if modifier capture is set we assume it's on a parent element
+		// i.e: for dragging multiple elements
+		// otherwise set draggable attribute
+		if (!binding.modifiers.capture) {
+			el.draggable = true;
+		}
+
+		const bcc = new BroadcastChannel('fhc-dnd');
+		let blocked = false;
+
+		function onStart(evt) {
+			const value = el.dataset.fhcDraggableValue;
+			if (value) {
+				setTransferData(evt, JSON.parse(value), true);
+				if (el.dataset.fhcEffectAllowed)
+					evt.dataTransfer.effectAllowed = el.dataset.fhcEffectAllowed;
+
+				bcc.onmessage = e => {
+					if (e.data == 'block') {
+						blocked = true;
+					} else if (e.data == 'release') {
+						let evt = null;
+						if (blocked && blocked.evt) {
+							evt = blocked.evt;
+						}
+						blocked = false;
+						if (evt)
+							el.dispatchEvent(evt);
+					}
+				};
+			} else {
+				evt.preventDefault();
+			}
+		}
+
+		function onEnd(evt) {
+			if (blocked) {
+				blocked = {
+					evt,
+					dt: evt.dataTransfer
+				};
+				evt.stopPropagation();
+				el.dispatchEvent(new DragEvent("beforedragend", evt));
+			} else {
+				bcc.onmessage = () => {};
+			}
+		}
+		el.addEventListener('dragstart', onStart, binding.modifiers.capture);
+
+		el.addEventListener('dragend', onEnd, true);
+
+		el.fhcDraggableCleanup = () => {
+			el.removeEventListener('dragstart', onStart, binding.modifiers.capture);
+			el.removeEventListener('dragend', onEnd, true);
+		};
+	},
+	updated(el, binding) {
+		updateValue(el, binding.value);
+		updateEffectAllowed(el, binding.arg);
+	},
+	beforeUnmount(el) {
+		el.fhcDraggableCleanup();
+		delete el.fhcDraggableCleanup;
+	}
+}
+
+// Helper functions
+function updateValue(el, value) {
+	value = convertToValidDragObject(value);
+	if (value) {
+		el.dataset.fhcDraggableValue = JSON.stringify(value);
+	} else if (el.dataset.fhcDraggableValue) {
+		delete el.dataset.fhcDraggableValue;
+	}
+}
+function updateEffectAllowed(el, effectAllowed) {
+	if (effectAllowed && EFFECTS.includes(effectAllowed)) {
+		el.dataset.fhcEffectAllowed = effectAllowed;
+	} else if (el.dataset.fhcEffectAllowed) {
+		delete el.dataset.fhcEffectAllowed;
+	}
+}

public/js/directives/drop.js

@@ -0,0 +1,77 @@
+import { getValidTransferData, eventHasTypes, bindDragEnterLeave } from '../helpers/DragAndDrop.js';
+
+const EFFECTS = [
+	'move',
+	'copy',
+	'link',
+	'none'
+];
+
+export default {
+	mounted(el, binding) {
+		const allowedTypes = Object.keys(binding.modifiers);
+		allowedTypes.forEach(type => {
+			if (type.substr(-11) == '-collection') {
+				const singleType = type.substr(0, type.length-11);
+				if (!allowedTypes.includes(singleType))
+					allowedTypes.push(singleType);
+			}
+		});
+
+		const strict = binding.arg.match(/(strict-|-strict)/);
+		const arg = binding.arg.replace(/(strict-|-strict)/, '');
+		const effect = EFFECTS.includes(arg) ? arg : null;
+
+		const bcc = new BroadcastChannel('fhc-dnd');
+		let allowed = false;
+
+		function onEnter(evt) {
+			allowed = eventHasTypes(evt, allowedTypes, strict);
+			if (allowed) {
+				evt.preventDefault();
+				bcc.postMessage('block');
+			}
+		}
+		function onLeave(evt, wasDropped) {
+			if (allowed && !wasDropped) {
+				bcc.postMessage('release');
+			}
+		}
+		function onOver(evt) {
+			if (allowed) {
+				evt.preventDefault();
+				if (effect)
+					evt.dataTransfer.dropEffect = effect;
+			}
+		}
+		function onDrop(evt) {
+			let result = getValidTransferData(evt, allowedTypes, strict);
+			if (!Array.isArray(result) && !binding.modifiers[result.type] && allowedTypes.includes(result.type + '-collection'))
+				result = [result];
+
+			const res = binding.value(evt, result);
+			
+			if (res instanceof Promise) {
+				res.then(r => {
+					bcc.postMessage('release');
+					return r;
+				});
+			} else {
+				bcc.postMessage('release');
+			}
+		}
+
+		const cleanupEnterLeave = bindDragEnterLeave(el, onEnter, onLeave);
+		el.addEventListener('dragover', onOver);
+		el.addEventListener('drop', onDrop);
+		el.fhcDropCleanup = () => {
+			cleanupEnterLeave();
+			el.removeEventListener('dragover', onOver);
+			el.removeEventListener('drop', onDrop);
+		};
+	},
+	beforeUnmount(el) {
+		el.fhcDropCleanup();
+		delete el.fhcDropCleanup;
+	}
+}

public/js/helpers/DragAndDrop.js

@@ -1,67 +1,368 @@
 /**
  * TODO(chris): This is only a prototype!!!
  */
-const DragAndDrop = {
-	TYPE_LE: "lehreinheit",
-	TYPE_VEVENT: "vevent",
 
-	getValidTransferData(event, allowedTypes) {
-		const json = event.dataTransfer.getData('text');
-		let obj;
-		try {
-			obj = JSON.parse(json);
-			if (!obj.type)
-				return null;
-			if (allowedTypes && !allowedTypes.includes(obj.type))
-				return null;
-		} catch (error) {
-			return null;
-		}
-		return obj;
+const TYPE_DEFINITION = {
+	lehreinheit: {
+		id: "lehreinheit_id",
+		dragIcon: "fa-solid fa-chalkboard-user",
+		extras: [
+			"stundenblockung"
+		]
 	},
-	isValidTransferData(event, allowedTypes) {
-		return this.getValidTransferData(event, allowedTypes) ? true : false;
+	vevent: {
+		id: "uid",
+		dragIcon: "fa-solid fa-calendar",
+		extras: [
+			"dtstart",
+			"dtend",
+			"summary"
+		]
 	},
-	getTransferData(event) {
-		const json = event.dataTransfer.getData('text');
-		return JSON.parse(json);
+	person: {
+		id: "person_id",
+		dragIcon: "fa-solid fa-user"
 	},
-	setTransferData(event, data) {
-		switch (data.type) {
-			case DragAndDrop.TYPE_LE:
-				data = DragAndDrop.fromLe(data);
-				break;
-			default:
-				if (data.dtstart && data.dtend && data.uid && data.summary) {
-					data = DragAndDrop.fromVEvent(data);
-					break;
-				}
-				return false; // No type found => abort
-		}
-		
-		event.dataTransfer.setData('text', JSON.stringify(data));
-		return true;
+	student: {
+		id: "student_uid",
+		dragIcon: "fa-solid fa-user-graduate"
 	},
-	fromLe(data) {
-		const {
-			type = DragAndDrop.TYPE_LE,
-			lehreinheit_id: id,
-			stundenblockung
-		} = data;
-		
-		return { type, id, stundenblockung };
-	},
-	fromVEvent(data) {
-		const {
-			type = DragAndDrop.TYPE_VEVENT,
-			uid: id,
-			dtstart,
-			dtend,
-			summary
-		} = data;
-		
-		return { type, id, dtstart, dtend, summary };
+	prestudent: {
+		id: "prestudent_id",
+		dragIcon: "fa-solid fa-user-graduate text-muted"
 	}
+	// TODO: IMPLEMENT OTHER TYPES
 };
 
-export default DragAndDrop;
+const VALID_TYPES = Object.keys(TYPE_DEFINITION);
+
+const TYPE_CONSTANTS = Object.keys(TYPE_DEFINITION).reduce((res, type) => {
+	res['TYPE_' + type.toUpperCase()] = type;
+	return res;
+}, {});
+
+function isValidDragObject(value) {
+	if (!value)
+		return false;
+	if (Array.isArray(value))
+		return value.every(isValidDragObject);
+	if (!value.type)
+		return false;
+
+	if (value.type.substr(-11) == '-collection') {
+		if (!Object.prototype.hasOwnProperty.call(value, 'values'))
+			return false;
+
+		if (!VALID_TYPES.includes(value.type.substr(0, value.type.length-11)))
+			return false;
+	} else {
+		if (!Object.prototype.hasOwnProperty.call(value, 'id'))
+			return false;
+
+		if (!VALID_TYPES.includes(value.type))
+			return false;
+
+		if (TYPE_DEFINITION[value.type].extras) {
+			if (!TYPE_DEFINITION[value.type].extras.every(extra => Object.prototype.hasOwnProperty.call(value, extra)))
+				return false;
+		}
+	}
+
+	return true;
+}
+
+function getValidTransferData(event, allowedTypes, strict) {
+	let obj = null;
+
+	try {
+		obj = getTransferData(event, strict);
+		if (!obj)
+			return null;
+
+		if (!strict && Array.isArray(obj)) {
+			obj = obj.filter(isValidDragObject);
+			if (!obj.length)
+				return null;
+		} else if (!isValidDragObject(obj))
+			return null;
+
+		if (allowedTypes && allowedTypes.length) {
+			if (Array.isArray(obj)) {
+				if (strict && !obj.every(v => allowedTypes.includes(v.type))) {
+					return null;
+				} else if (!strict) {
+					obj = obj.filter(v => allowedTypes.includes(v.type));
+					if (!obj.length)
+						return null;
+				}
+			} else if (!allowedTypes.includes(obj.type)) {
+				return null;
+			}
+		}
+	} catch(_error) {
+		return null;
+	}
+
+	if (Array.isArray(obj) && obj.length == 1)
+		return obj.find(Boolean);
+
+	return obj;
+}
+
+function isValidTransferData(event, allowedTypes, strict) {
+	return getValidTransferData(event, allowedTypes, strict) ? true : false;
+}
+
+function getTransferData(event, strict) {
+	const result = [];
+
+	for (const type of event.dataTransfer.types) {
+		if (type.substr(0, 16) != 'application/fhc-') {
+			if (strict)
+				return null;
+			continue;
+		}
+		let base_type = type.substr(16);
+		let collection = false;
+		if (base_type.substr(-11) == '-collection') {
+			base_type = base_type.substr(0, base_type.length-11);
+			collection = true;
+		}
+		if (!VALID_TYPES.includes(base_type)) {
+			if (strict)
+				return null;
+			continue;
+		}
+		let data = JSON.parse(event.dataTransfer.getData(type));
+		if (collection)
+			result.push(...data.values);
+		else
+			result.push(data);
+	}
+
+	if (!result.length)
+		return null;
+
+	if (result.length == 1)
+		return result[0];
+
+	return result;
+}
+
+function convertToValidDragObject(data, strict) {
+	if (Array.isArray(data)) {
+		const converted = data.map(convertToValidDragObject).filter(Boolean);
+		if (!converted.length)
+			return undefined;
+		if (strict && converted.length != data.length)
+			return undefined;
+
+		const sorted = converted.reduce((res, item) => {
+			if (!res[item.type])
+				res[item.type] = [];
+			res[item.type].push(item);
+			return res;
+		}, {});
+
+		return Object.entries(sorted).map(([type, values]) => {
+			if (values.length > 1) {
+				return {
+					type: type + '-collection',
+					values
+				};
+			}
+			return values[0];
+		});
+	}
+
+	if (Object.prototype.hasOwnProperty.call(data, 'type') && isValidDragObject(data)) {
+		return data;
+	}
+
+	const found = Object.entries(TYPE_DEFINITION).find(([ , typedef ]) => {
+		if (!Object.prototype.hasOwnProperty.call(data, typedef.id))
+			return false;
+		if (typedef.extras) {
+			if (!typedef.extras.every(extra => Object.prototype.hasOwnProperty.call(data, extra)))
+				return false;
+		}
+		return true;
+	});
+
+	if (!found) {
+		return undefined;
+	}
+
+	const [ type, typedef ] = found;
+
+	const newData = {};
+	newData.type = type;
+	newData.id = data[typedef.id];
+	if (typedef.extras)
+		typedef.extras.forEach(extra => newData[extra] = data[extra]);
+
+	return newData;
+}
+
+function setTransferData(event, validDragObject, setDragImage = false) {
+	if (setDragImage) {
+		const dragItems = Array.isArray(validDragObject) ? validDragObject : [ validDragObject ];
+		const dragElements = dragItems.map(item => {
+			const icon = document.createElement('i');
+			const label = document.createElement('span');
+			const iconContainer = document.createElement('span');
+
+			iconContainer.className = 'btn btn-outline-dark bg-light';
+			label.className = 'small';
+
+			if (TYPE_DEFINITION[item.type]) {
+				icon.className = TYPE_DEFINITION[item.type].dragIcon || 'fa-solid fa-question';
+				label.textContent = item.id;
+			} else if (item.type.substr(-11) == '-collection' && TYPE_DEFINITION[item.type.substr(0, item.type.length-11)]) {
+				iconContainer.style.boxShadow = '3px 3px var(--bs-btn-border-color)';
+				icon.className = TYPE_DEFINITION[item.type.substr(0, item.type.length-11)].dragIcon || 'fa-solid fa-question';
+				label.textContent = 'x' + item.values.length;
+			} else {
+				icon.className = 'fa-solid fa-question';
+				label.textContent = item.id || '';
+			}
+			
+			iconContainer.append(icon);
+
+			const itemContainer = document.createElement('div');
+			itemContainer.className = 'd-flex flex-column align-items-center gap-2 small';
+			itemContainer.append(iconContainer, label);
+			return itemContainer;
+		});
+
+		const container = document.createElement('div');
+		container.className = 'd-flex flex-row gap-2 small';
+		container.append(...dragElements);
+
+		document.body.append(container);
+		event.dataTransfer.setDragImage(container, -25, 0);
+		requestAnimationFrame(() => {
+			document.body.removeChild(container);
+		});
+	}
+	if (Array.isArray(validDragObject)) {
+		return validDragObject.forEach(data => setTransferData(event, data));
+	}
+	
+	event.dataTransfer.setData('application/fhc-' + validDragObject.type, JSON.stringify(validDragObject));
+}
+
+/**
+ * check if the dataTransfer types are in the allowed types array
+ * if strict is disabled at least one type must be the allowed array
+ * otherwise all types have to be in the allowed array
+ *
+ * @param Event		event
+ * @param Array		allowedTypes
+ * @param Boolean	strict
+ */
+function eventHasTypes(event, allowedTypes, strict) {
+	if (!allowedTypes || !allowedTypes.length)
+		allowedTypes = VALID_TYPES;
+	allowedTypes = allowedTypes.map(type => 'application/fhc-' + type);
+
+	const dataTypes = [...event.dataTransfer.types];
+	
+	// NOTE(chris): if dragging across browsers the dataTransfer object is
+	// set to a default one without data. Since we do not support dragging
+	// across browsers (yet) we return false which will disallow dropping.
+	if (!dataTypes.length)
+		return false;
+	
+	if (!strict)
+		return allowedTypes.some(type => [...event.dataTransfer.types].includes(type));
+	
+	return [...event.dataTransfer.types].every(type => allowedTypes.includes(type));
+}
+
+function bindDragEnterLeave(el, onEnter, onLeave) {
+	// NOTE(chris): add save dragenter and dragleave events
+	// that won't fire when hovering over child elements
+
+	let skipLeave = false;
+	let skipLeaveParent = true;
+
+	function init(evt) {
+		skipLeave = false;
+		skipLeaveParent = true;
+		// add global listeners
+		window.addEventListener('dragenter', globalDragenter, true);
+		window.addEventListener('dragleave', globalDragleave, true);
+		window.addEventListener('drop', globalDrop, true);
+		// call enter
+		onEnter(evt);
+		// remove self
+		el.removeEventListener('dragenter', init);
+	}
+
+	function cleanup(evt, wasDropped) {
+		// remove global listeners
+		window.removeEventListener('dragenter', globalDragenter, true);
+		window.removeEventListener('dragleave', globalDragleave, true);
+		window.removeEventListener('drop', globalDrop, true);
+		// call leave
+		onLeave(evt, wasDropped);
+		// add init
+		el.addEventListener('dragenter', init);
+	}
+
+	function globalDragenter(evt) {
+		skipLeaveParent = false;
+		if (el != evt.target && !el.contains(evt.target)) {
+			cleanup(evt);
+		} else {
+			skipLeave = true;
+		}
+	}
+	function globalDragleave(evt) {
+		if (el != evt.target && !el.contains(evt.target)) {
+			if (skipLeaveParent) {
+				skipLeaveParent = false;
+				return;
+			}
+		} else {
+			if (skipLeave) {
+				skipLeave = false;
+				return;
+			}
+		}
+		cleanup(evt);
+	}
+	function globalDrop(evt) {
+		cleanup(evt, true);
+	}
+
+	el.addEventListener('dragenter', init);
+
+	return () => {
+		// cleanup
+		el.removeEventListener('dragenter', init);
+	}
+}
+
+export {
+	isValidDragObject,
+	getValidTransferData,
+	isValidTransferData,
+	getTransferData,
+	convertToValidDragObject,
+	setTransferData,
+	eventHasTypes,
+	bindDragEnterLeave
+};
+export default {
+	...TYPE_CONSTANTS,
+	isValidDragObject,
+	getValidTransferData,
+	isValidTransferData,
+	getTransferData,
+	convertToValidDragObject,
+	setTransferData,
+	eventHasTypes,
+	bindDragEnterLeave
+};

public/js/helpers/StringHelpers.js

@@ -0,0 +1,4 @@
+export function capitalize(string) {
+	if (!string) return '';
+	return string[0].toUpperCase() + string.slice(1);
+}

public/js/plugins/Api.js

@@ -548,6 +548,9 @@ export default {
 				} else {
 					console.error("FhcApi: method not allowed:", method);
 				}
+			},
+			getErrorHandler(config) {
+				return get_error_handler(config);
 			}
 		};