Views modal, new tab, new page, app and controller for newMessage to open in tab or window

application/controllers/NeueNachricht.php

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

application/controllers/api/frontend/v1/messages/Messages.php

@@ -129,7 +129,7 @@ class Messages extends FHCAPI_Controller
 
 	public function getMsgVarsPrestudent($uid)
 	{
-
+		//$this->terminateWithError($uid, self::ERROR_TYPE_GENERAL);
 		$prestudent_id = $this-> _getPrestudentIdFromUid($uid);
 
 	//	$this->terminateWithError("prestudent_id " . $prestudent_id, self::ERROR_TYPE_GENERAL);

application/views/Nachrichten.php

@@ -0,0 +1,48 @@
+<?php
+$includesArray = array(
+	'title' => 'Nachrichten',
+	'axios027' => true,
+	'bootstrap5' => true,
+	'fontawesome6' => true,
+	'vue3' => true,
+	'primevue3' => true,
+	#'filtercomponent' => true,
+	'tabulator5' => true,
+	'tinymce5' => true,
+	'phrases' => array(
+		'global',
+		'ui',
+	),
+	'customCSSs' => [
+		'public/css/components/vue-datepicker.css',
+		'public/css/components/primevue.css',
+	],
+	'customJSs' => [
+		#'vendor/npm-asset/primevue/tree/tree.min.js',
+		#'vendor/npm-asset/primevue/toast/toast.min.js'
+	],
+	'customJSModules' => [
+		'public/js/apps/Nachrichten.js'
+	]
+);
+
+$this->load->view('templates/FHC-Header', $includesArray);
+?>
+
+<?php
+$configArray = [
+	'domain' => !defined('DOMAIN') ? 'notDefined' : DOMAIN,
+];
+?>
+
+<div id="main">
+	<router-view
+		cis-root="<?= CIS_ROOT; ?>"
+		:permissions="<?= htmlspecialchars(json_encode($permissions)); ?>"
+		:config="<?=  htmlspecialchars(json_encode($configArray)); ?>"
+	>
+	</router-view>
+</div>
+
+<?php $this->load->view('templates/FHC-Footer', $includesArray); ?>
+

public/js/apps/Messages/NewMessage.js

@@ -0,0 +1,27 @@
+//TODO Manu
+//use this instead of Nachrichten.js
+import NewMessage from "../../components/Messages/Details/NewMessage/NewDiv.js";
+import Phrasen from "../../plugin/Phrasen.js";
+
+const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+
+const router = VueRouter.createRouter({
+	history: VueRouter.createWebHistory(),
+	routes: [
+		{ path: `/${ciPath}/NeueNachricht`, component: NewMessage },
+		{ path: `/${ciPath}/NeueNachricht/:id`, component: NewMessage },
+		{ path: `/${ciPath}/NeueNachricht/:id/:typeId`, component: NewMessage },
+	]
+});
+
+const app = Vue.createApp();
+
+app
+	.use(router)
+	.use(primevue.config.default, {
+		zIndex: {
+			overlay: 1100
+		}
+	})
+	.use(Phrasen)
+	.mount('#main');

public/js/apps/Nachrichten.js

@@ -0,0 +1,25 @@
+import NewMessage from "../components/Messages/Details/NewMessage/NewDiv.js";
+
+import Phrasen from "../plugin/Phrasen.js";
+
+const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+
+const router = VueRouter.createRouter({
+	history: VueRouter.createWebHistory(),
+	routes: [
+		{ path: `/${ciPath}/NeueNachricht/:id/:typeId`, component: NewMessage },
+	]
+});
+
+
+const app = Vue.createApp();
+
+app
+	.use(router)
+	.use(primevue.config.default, {
+		zIndex: {
+			overlay: 1100
+		}
+	})
+	.use(Phrasen)
+	.mount('#main');

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

@@ -2,13 +2,15 @@ import FormForm from '../../Form/Form.js';
 import FormInput from '../../Form/Input.js';
 import ListBox from "../../../../../index.ci.php/public/js/components/primevue/listbox/listbox.esm.min.js";
 import DropdownComponent from '../../VorlagenDropdown/VorlagenDropdown.js';
+import MessageModal from "../Details/NewMessage/Modal.js";
 
 export default {
 	components: {
 		FormForm,
 		FormInput,
 		ListBox,
-		DropdownComponent
+		DropdownComponent,
+		MessageModal,
 	},
 	props: {
 		endpoint: {
@@ -35,7 +37,7 @@ export default {
 			vorlagen: [],
 			defaultRecipient: null,
 			editor: null,
-			isVisible: true,
+			isVisible: false,
 			fieldsUser: [],
 			fieldsPerson: [],
 			fieldsPrestudent: [],
@@ -45,12 +47,6 @@ export default {
 			itemsPrestudent: [],
 			itemsPerson: [],
 			itemsUser: [],
-/*			selectedFieldStudent: null,
-			itemsStudent: [
-				{ label: "Variable 1", value: "var1" },
-				{ label: "Variable 2", value: "var2" },
-				{ label: "Variable 3", value: "var3" }
-			]*/
 			previewText: null,
 			previewBody: ""
 		}
@@ -170,62 +166,6 @@ export default {
 				console.error("Editor instance is not available.");
 			}
 		},
-		//TODO(Manu) refactor
-/*		insertVariablePrestudent() {
-				if (this.editor) {
-					//const lastVariable = this.selectedFieldsPrestudent[this.selectedFieldsPrestudent.length - 1].value;
-					const lastVariable = this.selectedFieldPrestudent.value;
-
-				//Use insertContent method
-				this.editor.insertContent(lastVariable + " ");
-				} else {
-				console.error("Editor instance is not available.");
-			}
-		},*/
-/*		insertVariablePrestudentByClick(selectedItem) {
-
-			if (selectedItem) {
-				this.editor.insertContent(selectedItem.value + " ");
-				console.log("Eingefügte Variable:", selectedItem);
-			} else {
-				console.warn("Keine Variable ausgewählt!");
-			}
-		},
-
-		insertVariablePerson() {
-				if (this.editor) {
-					//const lastVariable = this.selectedFieldsPrestudent[this.selectedFieldsPrestudent.length - 1].value;
-					const lastVariable = this.selectedFieldPerson.value;
-
-				//Use insertContent method
-				this.editor.insertContent(lastVariable + " ");
-				} else {
-				console.error("Editor instance is not available.");
-			}
-		},
-		insertVariableUser() {
-			if (this.editor) {
-				console.log(this.selectedFieldUser.value);
-				const lastVariable = this.selectedFieldUser.value;
-
-				//Multiple
-				//const lastVariable = this.selectedFieldsPrestudent[this.selectedFieldsPrestudent.length - 1].value;
-
-				//Use insertContent method
-				this.editor.insertContent(lastVariable + " ");
-				this.selectedFieldUser = null;
-			} else {
-				console.error("Editor instance is not available.");
-			}
-		},
-		insertVariableStudent(selectedItem) {
-			if (selectedItem) {
-				console.log("Eingefügte Variable:", selectedItem);
-				this.editor.insertContent(selectedItem.value + " ");
-			} else {
-				console.warn("Keine Variable ausgewählt!");
-			}
-		},*/
 		replyMessage(message_id){
 			console.log("auf message " + message_id + " antworten");
 		},
@@ -241,9 +181,9 @@ export default {
 			this.$refs.dropdownComp.setValue(null);
 
 		},
-		toggleDivNewMessage(){
+/*		toggleDivNewMessage(){
 			this.isVisible = !this.isVisible;
-		},
+		},*/
 		handleSelectedVorlage(vorlage_kurzbz) {
 			if (typeof vorlage_kurzbz === "string") {
 				this.getVorlagentext(vorlage_kurzbz);
@@ -254,15 +194,17 @@ export default {
 			if (this.openMode == "showDiv")
 				this.isVisible = false;
 		},
-		showTemplate(){
+		showTemplate(id, typeId){
 			if (this.openMode == "showDiv")
 				this.isVisible = true;
+			//just for testing:
+			this.isVisible = true;
 		},
 		showPreview(){
 			this.getPreviewText().then(() => {
 				this.previewBody = this.previewText;
 			});
-		}
+		},
 	},
 	watch: {
 		'formData.body': {
@@ -343,9 +285,19 @@ export default {
 	},
 	template: `
 	<div class="messages-detail-newmessage">
-			<hr>
+
+			<message-modal
+				ref="modalMsg"
+				:type-id="typeId"
+				:id="id"
+				:endpoint="endpoint"
+				:openMode="openMode"
+				@reloadTable="reloadTable"
+				>
+			</message-modal>
+<!--			<hr>
 		<button type="button" class="btn btn-warning" @click="toggleDivNewMessage()">Toggle NewMessage</button>
-		<hr>
+		<hr>-->
 
 		<div v-show="isVisible">
 			<div class="overflow-auto" style="max-height: 500px; border: 1px solid #ccc;">

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

@@ -0,0 +1,468 @@
+import BsModal from "../../../Bootstrap/Modal.js";
+import FormForm from "../../../Form/Form.js";
+import FormInput from '../../../Form/Input.js';
+import ListBox from "../../../../../../index.ci.php/public/js/components/primevue/listbox/listbox.esm.min.js";
+import DropdownComponent from "../../../VorlagenDropdown/VorlagenDropdown.js";
+
+export default {
+	components: {
+		BsModal,
+		FormForm,
+		DropdownComponent,
+		FormInput,
+		ListBox
+	},
+	props: {
+		endpoint: {
+			type: String,
+			required: true
+		},
+		typeId: String,
+		id: {
+			type: [Number, String],
+			required: true
+		},
+		openMode: String,
+	},
+	data(){
+		return {
+			formData: {
+				recipient: this.id,
+				subject: null,
+				body: null,
+				vorlage_kurzbz: null,
+				selectedValue: '',
+			},
+			statusNew: true,
+			vorlagen: [],
+			defaultRecipient: null,
+			editor: null,
+			fieldsUser: [],
+			fieldsPerson: [],
+			fieldsPrestudent: [],
+			selectedFieldPrestudent: null,
+			selectedFieldUser: null,
+			selectedFieldPerson: null,
+			itemsPrestudent: [],
+			itemsPerson: [],
+			itemsUser: [],
+			previewText: null,
+			previewBody: ""
+		}
+	},
+	methods: {
+		initTinyMCE() {
+			const vm = this;
+			tinymce.init({
+				target: this.$refs.editor.$refs.input, //Important: not selector: to enable multiple import of component
+				//height: 800,
+				//plugins: ['lists'],
+				toolbar: 'styleselect | bold italic underline | alignleft aligncenter alignright alignjustify',
+				style_formats: [
+					{title: 'Blocks', block: 'div'},
+					{title: 'Paragraph', block: 'p'},
+					{title: 'Heading 1', block: 'h1'},
+					{title: 'Heading 2', block: 'h2'},
+					{title: 'Heading 3', block: 'h3'},
+					{title: 'Heading 4', block: 'h4'},
+					{title: 'Heading 5', block: 'h5'},
+					{title: 'Heading 6', block: 'h6'},
+				],
+				autoresize_bottom_margin: 16,
+
+				setup: (editor) => {
+					vm.editor = editor;
+
+					editor.on('input', () => {
+						const newContent = editor.getContent();
+						vm.formData.body = newContent;
+					});
+				},
+			});
+		},
+		updateText(value) {
+			this.formData.body = value;
+		},
+		sendMessage() {
+			//TODO(Manu) check default recipient(s)
+			const data = new FormData();
+			const params = {
+				id: this.id,
+				type_id: this.typeId
+			};
+			const merged = {
+				...this.formData,
+				...params
+			};
+			data.append('data', JSON.stringify(merged));
+
+			return this.$fhcApi.factory.messages.person.sendMessage(
+				this.$refs.formMessage,
+				this.id,
+				data)
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
+					//this.hideModal('messageModal');
+					this.hideTemplate();
+					this.resetForm();
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+						//this.resetForm();
+						//closeModal
+						//closewindwo
+						this.$emit('reloadTable');
+					}
+				);
+		},
+		getVorlagentext(vorlage_kurzbz){
+			//console.log(typeof vorlage_kurzbz);
+			return this.$fhcApi.factory.messages.person.getVorlagentext(vorlage_kurzbz)
+				.then(response => {
+					//this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
+					//this.hideModal('messageModal');
+					//this.resetForm();
+					//TODO(Manu) CHECK
+					this.formData.body = response.data;
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					//this.resetForm();
+					//closeModal
+					//closewindwo
+				});
+		},
+		getPreviewText(){
+			const data = new FormData();
+
+			data.append('data', JSON.stringify(this.formData.body));
+			return this.$fhcApi.factory.messages.person.getPreviewText({
+				id: this.id,
+				type_id: this.typeId}, data)
+				.then(response => {
+					this.previewText = response.data;
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					//this.resetForm();
+					//closeModal
+					//closewindwo
+				});
+		},
+		insertVariable(selectedItem){
+			if (this.editor) {
+				this.editor.insertContent(selectedItem.value + " ");
+				//TODO(Manu) check: nicht mal mit Punkt adden gehts ohne eintrag nach vars
+				/*				this.editor.focus();
+								this.editor.setDirty(true);*/
+
+				//this.editor.fire('change'); //forces
+
+				//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);
+
+			} else {
+				console.error("Editor instance is not available.");
+			}
+		},
+		replyMessage(message_id){
+			console.log("auf message " + message_id + " antworten");
+		},
+		resetForm(){
+			this.formData = {
+				vorlage_kurzbz: null,
+				body: null,
+				subject: null,
+			};
+			if (this.editor) {
+				this.editor.setContent("");
+			}
+			this.$refs.dropdownComp.setValue(null);
+
+		},
+		handleSelectedVorlage(vorlage_kurzbz) {
+			if (typeof vorlage_kurzbz === "string") {
+				this.getVorlagentext(vorlage_kurzbz);
+				this.formData.subject = vorlage_kurzbz;
+			}
+		},
+		hideTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = false;
+		},
+		showTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = true;
+		},
+		showPreview(){
+			this.getPreviewText().then(() => {
+				this.previewBody = this.previewText;
+			});
+		},
+		show(){
+			this.$refs.modalNewMessage.show();
+		}
+	},
+	watch: {
+		'formData.body': {
+			handler(newVal) {
+				const tinymcsVal = this.editor.getContent();
+
+				if (newVal && tinymcsVal != newVal) {
+					//Inhalt des Editors aktualisieren
+					this.editor.setContent(newVal);
+				}
+			}
+		},
+		'formData.vorlage_kurzbz': {
+			handler(newVal){
+				//	console.log("Vorlage: " + newVal);
+
+				if (newVal && newVal != null) {
+					this.formData.subject = newVal;
+					return this.getVorlagentext(newVal);
+				}
+			}
+		}
+	},
+	created(){
+		if(this.typeId == 'person_id'){
+			this.$fhcApi.factory.messages.person.getMessageVarsPerson()
+				.then(result => {
+					this.fieldsPerson = result.data;
+					this.itemsPerson = Object.entries(this.fieldsPerson).map(([key, value]) => ({
+						label: value,
+						value: '{' + value + '}'
+					}));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+		if(this.typeId == 'uid') {
+			this.$fhcApi.factory.messages.person.getMsgVarsPrestudent(this.id)
+				.then(result => {
+					this.fieldsPrestudent = result.data;
+					const prestudent = this.fieldsPrestudent[0];
+					//Just for testing with inserting values
+					/*					this.itemsPrestudent = Object.entries(prestudent).map(([key, value]) => ({
+											label: key,
+											value: value
+										}));*/
+					this.itemsPrestudent = Object.entries(prestudent).map(([key, value]) => ({
+						label: key.toLowerCase(),
+						value: '{' + key.toLowerCase() + '}'
+					}));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+
+		this.$fhcApi.factory.messages.person.getMsgVarsLoggedInUser()
+			.then(result => {
+				this.fieldsUser = result.data;
+				const user = this.fieldsUser;
+				this.itemsUser = Object.entries(user).map(([key, value]) => ({
+					label: value,
+					value: '{' + value + '}'
+				}));
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+
+		this.$fhcApi.factory.messages.person.getNameOfDefaultRecipient({
+			id: this.id,
+			type_id: this.typeId})
+			.then(result => {
+				this.defaultRecipient = result.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+	},
+	async mounted() {
+		this.initTinyMCE();
+	},
+	beforeDestroy() {
+		this.editor.destroy();
+	},
+	template: `
+		<bs-modal class="messages-detail-newmessage-modal" ref="modalNewMessage" dialog-class="modal-xl">
+
+			<template #title>
+				New Message
+			</template>
+
+			<form-form ref="formNewMassage">
+
+				<div class="overflow-auto" style="max-height: 500px; border: 1px solid #ccc;">
+
+
+				<div class="row">
+					<div class="col-sm-8">
+						<form-form class="row g-3 mt-2" ref="formMessage">
+
+						<!--TODO(Manu) ist eigentlich ein Array, hier werden alle Einträge angegeben als String-->
+							<div class="row mb-3">
+
+								<form-input
+									type="text"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+									disabled
+								>
+								</form-input>
+							</div>
+
+							<div class="row mb-3">
+								<form-input
+									type="text"
+									name="subject"
+									:label="$p.t('global/betreff') + ' *'"
+									v-model="formData.subject"
+								>
+								</form-input>
+							</div>
+
+							<!--Tiny MCE-->
+							<div class="row mb-3">
+								<form-input
+									ref="editor"
+									:label="$p.t('global','nachricht')  + ' *'"
+									type="textarea"
+									v-model="formData.body"
+									name="text"
+									rows="15"
+									cols="75"
+									>
+								</form-input>
+							</div>
+
+							<div class="row">
+								<DropdownComponent
+									ref="dropdownComp"
+									:label="$p.t('global/vorlage')"
+									@change="handleSelectedVorlage"
+									useLoggedInUserOe
+								>
+								</DropdownComponent>
+							</div>
+
+						</form-form>
+					</div>
+
+					<div class="col-sm-4">
+						<div v-if="this.fieldsPrestudent.length > 0">
+							<strong>Felder Prestudent</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldPrestudent"
+									:options="itemsPrestudent"
+									optionLabel="label"
+								>
+								  <template #option="slotProps">
+									<div @dblclick="insertVariable(slotProps.option)">
+									  {{ slotProps.option.label }}
+									</div>
+								  </template>
+								</list-box>
+
+							</div>
+
+							<button class="m-3" @click="insertVariablePrestudent">Insert Variable</button>
+							<p>{{selectedFieldPrestudent}}</p>
+
+						</div>
+
+						<div v-if="this.fieldsPerson.length > 0">
+							<strong>Felder Person</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldPerson"
+									:options="itemsPerson"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+							<button class="m-3" @click="insertVariablePerson">Insert Variable</button>
+							<p>{{selectedFieldPerson}}</p>
+						</div>
+
+						<div>
+							<strong>Meine Felder</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldUser"
+									:options="itemsUser"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+							<button class="m-3" @click="insertVariableUser">Insert Variable</button>
+						</div>
+
+					</div>
+
+				</div>
+
+				<div class="row mt-4">
+
+					<h4>Vorschau:</h4>
+					<div>
+						<form-form class="row g-3 mt-2" ref="formPreview">
+
+							<div class="col-sm-2 mb-3">
+								<form-input
+									type="select"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+								>
+								</form-input>
+							</div>
+
+							<div class="col-md-2 mt-4">
+								<br>
+								<button type="button" class="btn bt		n-secondary" @click="showPreview()">Aktualisieren</button>
+							</div>
+						</form-form>
+
+						<div class="col-sm-12 overflow-scroll">
+								<div ref="preview">
+									<div v-html="previewBody" class="p-3 border rounded overflow-scroll twoColumns"></div>
+								</div>
+						</div>
+
+					</div>
+
+				</div>
+
+			</div>
+
+			</form-form>
+
+			<template #footer>
+				<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+
+					<button class="btn btn-secondary" @click="resetForm">Reset All</button>
+
+					<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
+					<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
+				</div>
+			</template>
+
+		</bs-modal>
+
+	</div>
+	`,
+}

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

@@ -0,0 +1,488 @@
+import FormForm from '../../../Form/Form.js';
+import FormInput from '../../../Form/Input.js';
+import ListBox from "../../../../../../index.ci.php/public/js/components/primevue/listbox/listbox.esm.min.js";
+import DropdownComponent from '../../../VorlagenDropdown/VorlagenDropdown.js';
+
+export default {
+	components: {
+		FormForm,
+		FormInput,
+		ListBox,
+		DropdownComponent,
+	},
+	props: {
+		endpoint: {
+			type: String,
+			required: true
+		},
+		//for open in div and modal
+/*		typeId: String,
+		id: {
+			type: [Number, String],
+			required: true
+		},*/
+		openMode: String,
+	},
+	computed: {
+		//params with routes for new tab and new window AND props
+/*		id(){
+			return this.$route.params.id || this.id;
+		},
+		typeId(){
+			return this.$route.params.typeId || this.typeId;
+		},*/
+		id(){
+			return this.$route.params.id || this.$props.id;
+		},
+		typeId(){
+			return this.$route.params.typeId || this.$props.id;
+		}
+	},
+	data(){
+		return {
+			formData: {
+				recipient: this.id,
+				subject: null,
+				body: null,
+				vorlage_kurzbz: null,
+				selectedValue: '',
+			},
+			statusNew: true,
+			vorlagen: [],
+			defaultRecipient: null,
+			editor: null,
+			isVisible: false,
+			fieldsUser: [],
+			fieldsPerson: [],
+			fieldsPrestudent: [],
+			selectedFieldPrestudent: null,
+			selectedFieldUser: null,
+			selectedFieldPerson: null,
+			itemsPrestudent: [],
+			itemsPerson: [],
+			itemsUser: [],
+			previewText: null,
+			previewBody: ""
+		}
+	},
+	methods: {
+		initTinyMCE() {
+			const vm = this;
+			tinymce.init({
+				target: this.$refs.editor.$refs.input, //Important: not selector: to enable multiple import of component
+				//height: 800,
+				//plugins: ['lists'],
+				toolbar: 'styleselect | bold italic underline | alignleft aligncenter alignright alignjustify',
+				style_formats: [
+					{title: 'Blocks', block: 'div'},
+					{title: 'Paragraph', block: 'p'},
+					{title: 'Heading 1', block: 'h1'},
+					{title: 'Heading 2', block: 'h2'},
+					{title: 'Heading 3', block: 'h3'},
+					{title: 'Heading 4', block: 'h4'},
+					{title: 'Heading 5', block: 'h5'},
+					{title: 'Heading 6', block: 'h6'},
+				],
+				autoresize_bottom_margin: 16,
+
+				setup: (editor) => {
+					vm.editor = editor;
+
+					editor.on('input', () => {
+						const newContent = editor.getContent();
+						vm.formData.body = newContent;
+					});
+				},
+			});
+		},
+		updateText(value) {
+			this.formData.body = value;
+		},
+		sendMessage() {
+			//TODO(Manu) check default recipient(s)
+			const data = new FormData();
+			const params = {
+				id: this.id,
+				type_id: this.typeId
+			};
+			const merged = {
+				...this.formData,
+				...params
+			};
+			data.append('data', JSON.stringify(merged));
+
+			return this.$fhcApi.factory.messages.person.sendMessage(
+				this.$refs.formMessage,
+				this.id,
+				data)
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
+					//this.hideModal('messageModal');
+					this.hideTemplate();
+					this.resetForm();
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+						//this.resetForm();
+						//closeModal
+						//closewindwo
+						this.$emit('reloadTable');
+					}
+				);
+		},
+		getVorlagentext(vorlage_kurzbz){
+			return this.$fhcApi.factory.messages.person.getVorlagentext(vorlage_kurzbz)
+				.then(response => {
+					//this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
+					//this.hideModal('messageModal');
+					//this.resetForm();
+					//TODO(Manu) CHECK
+					this.formData.body = response.data;
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					//this.resetForm();
+					//closeModal
+					//closewindwo
+				});
+		},
+		getPreviewText(){
+			const data = new FormData();
+
+			data.append('data', JSON.stringify(this.formData.body));
+			return this.$fhcApi.factory.messages.person.getPreviewText({
+				id: this.id,
+				type_id: this.typeId}, data)
+				.then(response => {
+					this.previewText = response.data;
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					//this.resetForm();
+					//closeModal
+					//closewindwo
+				});
+		},
+		insertVariable(selectedItem){
+			if (this.editor) {
+				this.editor.insertContent(selectedItem.value + " ");
+				//TODO(Manu) check: nicht mal mit Punkt adden gehts ohne eintrag nach vars
+				/*				this.editor.focus();
+								this.editor.setDirty(true);*/
+
+				//this.editor.fire('change'); //forces
+
+				//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);
+
+			} else {
+				console.error("Editor instance is not available.");
+			}
+		},
+		replyMessage(message_id){
+			console.log("auf message " + message_id + " antworten");
+		},
+		resetForm(){
+			this.formData = {
+				vorlage_kurzbz: null,
+				body: null,
+				subject: null,
+			};
+			if (this.editor) {
+				this.editor.setContent("");
+			}
+			this.$refs.dropdownComp.setValue(null);
+
+			this.previewBody = null;
+
+		},
+		toggleDivNewMessage(){
+			this.isVisible = !this.isVisible;
+		},
+		handleSelectedVorlage(vorlage_kurzbz) {
+			if (typeof vorlage_kurzbz === "string") {
+				this.getVorlagentext(vorlage_kurzbz);
+				this.formData.subject = vorlage_kurzbz;
+			}
+		},
+		hideTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = false;
+		},
+		showTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = true;
+			//just for testing:
+			this.isVisible = true;
+		},
+		showPreview(){
+			this.getPreviewText().then(() => {
+				this.previewBody = this.previewText;
+			});
+		},
+	},
+	watch: {
+		'formData.body': {
+			handler(newVal) {
+				const tinymcsVal = this.editor.getContent();
+
+				if (newVal && tinymcsVal != newVal) {
+					//Inhalt des Editors aktualisieren
+					this.editor.setContent(newVal);
+				}
+			}
+		},
+		'formData.vorlage_kurzbz': {
+			handler(newVal){
+				//	console.log("Vorlage: " + newVal);
+
+				if (newVal && newVal != null) {
+					this.formData.subject = newVal;
+					return this.getVorlagentext(newVal);
+				}
+			}
+		},
+	},
+	created(){
+		if(this.typeId == 'person_id'){
+			this.$fhcApi.factory.messages.person.getMessageVarsPerson()
+				.then(result => {
+					this.fieldsPerson = result.data;
+					this.itemsPerson = Object.entries(this.fieldsPerson).map(([key, value]) => ({
+						label: value,
+						value: '{' + value + '}'
+					}));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+		if(this.typeId == 'uid') {
+			this.$fhcApi.factory.messages.person.getMsgVarsPrestudent(this.id)
+				.then(result => {
+					this.fieldsPrestudent = result.data;
+					const prestudent = this.fieldsPrestudent[0];
+					//Just for testing with inserting values
+					/*					this.itemsPrestudent = Object.entries(prestudent).map(([key, value]) => ({
+											label: key,
+											value: value
+										}));*/
+					this.itemsPrestudent = Object.entries(prestudent).map(([key, value]) => ({
+						label: key.toLowerCase(),
+						value: '{' + key.toLowerCase() + '}'
+					}));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+
+		this.$fhcApi.factory.messages.person.getMsgVarsLoggedInUser()
+			.then(result => {
+				this.fieldsUser = result.data;
+				const user = this.fieldsUser;
+				this.itemsUser = Object.entries(user).map(([key, value]) => ({
+					label: value,
+					value: '{' + value + '}'
+				}));
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+
+		this.$fhcApi.factory.messages.person.getNameOfDefaultRecipient({
+			id: this.id,
+			type_id: this.typeId
+		})
+			.then(result => {
+				this.defaultRecipient = result.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+
+	},
+	async mounted() {
+		this.initTinyMCE();
+	},
+	beforeDestroy() {
+		this.editor.destroy();
+	},
+	template: `
+
+	<div class="messages-detail-newmessage">
+
+			<!--passt für showdiv-->
+<!--			<div class="overflow-auto" style="max-height: 500px; border: 1px solid #ccc;">-->
+
+			<!--new page-->
+			<div class="overflow-auto m-3">
+
+			{{id}} || {{typeId}}
+
+				<h4>New Message</h4>
+	<!--			{{formData.body}}
+				||
+				{{previewText}}-->
+
+				<div class="row">
+					<div class="col-sm-8">
+						<form-form class="row g-3 mt-2" ref="formMessage">
+
+						<!--TODO(Manu) ist eigentlich ein Array, hier werden alle Einträge angegeben als String-->
+							<div class="row mb-3">
+
+								<form-input
+									type="text"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+									disabled
+								>
+								</form-input>
+							</div>
+
+							<div class="row mb-3">
+								<form-input
+									type="text"
+									name="subject"
+									:label="$p.t('global/betreff') + ' *'"
+									v-model="formData.subject"
+								>
+								</form-input>
+							</div>
+
+							<!--Tiny MCE-->
+							<div class="row mb-3">
+								<form-input
+									ref="editor"
+									:label="$p.t('global','nachricht')  + ' *'"
+									type="textarea"
+									v-model="formData.body"
+									name="text"
+									rows="15"
+									cols="75"
+									>
+								</form-input>
+							</div>
+
+							<div class="row">
+								<DropdownComponent
+									ref="dropdownComp"
+									:label="$p.t('global/vorlage')"
+									@change="handleSelectedVorlage"
+									useLoggedInUserOe
+								>
+								</DropdownComponent>
+							</div>
+
+						</form-form>
+					</div>
+
+					<div class="col-sm-4">
+						<div v-if="this.fieldsPrestudent.length > 0"  class="mt-3">
+							<strong>Felder Prestudent</strong>
+							<div class="border p-3 overflow-auto" style="height: 250px;">
+
+								<list-box
+									v-model="selectedFieldPrestudent"
+									:options="itemsPrestudent"
+									optionLabel="label"
+								>
+								  <template #option="slotProps">
+									<div @dblclick="insertVariable(slotProps.option)">
+									  {{ slotProps.option.label }}
+									</div>
+								  </template>
+								</list-box>
+
+							</div>
+
+						</div>
+
+						<br>
+
+						<div v-if="this.fieldsPerson.length > 0" class="mt-3">
+							<strong>Felder Person</strong>
+							<div class="border p-3 overflow-auto" style="height: 250px;">
+
+								<list-box
+									v-model="selectedFieldPerson"
+									:options="itemsPerson"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+
+						</div>
+
+						<div>
+							<strong>Meine Felder</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldUser"
+									:options="itemsUser"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+
+						</div>
+
+						<br>
+
+						<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+
+							<button class="btn btn-secondary" @click="resetForm">Reset All</button>
+
+							<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
+							<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
+						</div>
+
+					</div>
+
+				</div>
+
+				<div class="row mt-4">
+
+					<h4>Vorschau:</h4>
+					<div>
+						<form-form class="row g-3 mt-2" ref="formPreview">
+
+							<div class="col-sm-2 mb-3">
+								<form-input
+									type="select"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+								>
+								</form-input>
+							</div>
+
+							<div class="col-md-2 mt-4">
+								<br>
+								<button type="button" class="btn bt		n-secondary" @click="showPreview()">Aktualisieren</button>
+							</div>
+						</form-form>
+
+						<div class="col-sm-12 overflow-scroll">
+								<div ref="preview">
+									<div v-html="previewBody" class="p-3 border rounded overflow-scroll" style="height: 300px;"></div>
+								</div>
+						</div>
+
+					</div>
+
+				</div>
+
+		</div>
+
+	</div>
+	`
+
+}

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

@@ -1,10 +1,12 @@
 import {CoreFilterCmpt} from "../../filter/Filter.js";
 import FormForm from '../../Form/Form.js';
+import NewMessage from "../Details/NewMessage.js";
 
 export default {
 	components: {
 		CoreFilterCmpt,
 		FormForm,
+		NewMessage,
 	},
 	inject: {
 		cisRoot: {
@@ -205,7 +207,8 @@ export default {
 				},
 			],
 			tabulatorData: [],
-			previewBody: ""
+			previewBody: "",
+			open: false
 		}
 	},
 	methods: {
@@ -233,20 +236,9 @@ export default {
 				});
 		},
 		actionNewMessage(){
+			this.$emit('newMessage', this.id, this.typeId);
 			//console.log("action new message");
-			if (this.openMode == "window") {
-				console.log("openInNewWindow")
-				const linkWindowNewMessage = this.cisRoot + '/public/js/components/Messages/Details/NewMessage.js';
-				window.open(linkWindowNewMessage, '_blank');
-			}
-			else if (this.openMode == "modal"){
-				console.log("open with bootstrap Modal");
-			}
-			else if (this.openMode == "showDiv"){
-				this.$emit('showNewMessageTemplate');
-			}
-			else
-				console.log("no valid openMode");
+
 		},
 		reload() {
 			this.$refs.table.reloadTable();
@@ -274,19 +266,10 @@ export default {
 	},
 	template: `
 	<div class="messages-detail-table">
-<!--		<p>endpoint: {{endpoint}}</p>-->
-<!--				{{cisRoot}}-->
-<!--		<p>{{messageLayout}}</p>-->
-
-		<!-- {{statusText[0] }}
-		<hr>
-		{{$p.t('messages', 'unread')}} -->
-		<!-- {{statusText.0}} -->
-		<!-- <p v-for="(bezeichnung, key) in statusText" :key="key" :value="key">{{bezeichnung}}</p> -->
 
 		<!--View Studierendenverwaltung-->
 		<div v-if="messageLayout=='twoColumnsTableLeft'">
-		
+
 			<div class="row">
 				<!--table-->
 				<div class="col-sm-6 pt-6">
@@ -307,7 +290,6 @@ export default {
 				<!--preview wysiwyg-window-->
 				<div class="col-sm-6 pt-6">
 				<br><br><br><br>
-
 					<div ref="preview">
 						<div v-html="previewBody" class="p-3 border rounded overflow-scroll twoColumns"></div>
 					</div>

public/js/components/Messages/Messages.js

@@ -1,10 +1,20 @@
 import TableMessages from "./Details/TableMessages.js";
 import NewMessage from "./Details/NewMessage.js";
-
+import FormOnly from "./Details/NewMessage/NewDiv.js";
+import FhcApi from "../../../../public/js/plugin/FhcApi.js";
+import Phrasen from "../../../../public/js/plugin/Phrasen.js";
 export default {
 	components: {
 		TableMessages,
-		NewMessage
+		NewMessage,
+		FormOnly,
+		FhcApi,
+		Phrasen
+	},
+	inject: {
+		cisRoot: {
+			from: 'cisRoot'
+		}
 	},
 	props: {
 		endpoint: {
@@ -34,6 +44,7 @@ export default {
 			validator(value) {
 				return [
 					'window',
+					'newTab',
 					'modal',
 					'showDiv'
 				].includes(value)
@@ -41,18 +52,85 @@ export default {
 		}
 	},
 	data() {
-		return {}
+		return {
+			showDiv: false
+		}
 	},
 	methods: {
-		showNewMessageTemplate(){
-			this.$refs.templateNewMessage.showTemplate();
-		},
 		reloadTable(){
 			this.$refs.templateTableMessage.reload();
-		}
+		},
+		newMessage(id, typeId){
+			if (this.openMode == "window") {
+				this.openInNewWindow(id, typeId);
+			}
+			else if (this.openMode == "newTab"){
+				this.openInNewTab(id, typeId);
+			}
+			else if (this.openMode == "modal"){
+				this.openInModal(id, typeId);
+			}
+			else if (this.openMode == "showDiv"){
+				this.$refs.templateNewMessage.showTemplate(id, typeId);
+			}
+			else
+				console.log("no valid openMode");
+		},
+		openInDiv(id, typeId){
+			this.$refs.templateNewMessage.showTemplate(id, typeId);
+			//this.showDiv = true; //local variante
+			//this.$refs.templateNewMessage.showTemplate();
+		},
+		openInModal(id, typeId){
+			//TODO(manu) define bs-modal in this component
+			this.$refs.templateNewMessage.$refs.modalMsg.show();
+		},
+		openInNewTab(id, typeId){
+			//TODO(MANU) check if array of ids...
+/*			let path = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+			path += "/NeueNachricht/" + this.id + "/" + this.typeId;*/
+
+			//als param
+			let path = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+			path += "/NeueNachricht/" + id + "/" + typeId;
+
+			const newTab = window.open(path, "_blank");
+		},
+		openInNewWindow(id, typeId){
+			//TODO(MANU) check if array of ids...
+			let path = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+			path += "/NeueNachricht/" + id + "/" + typeId;
+
+			const newTab = window.open(path, "_blank");
+
+			const width = Math.round(window.innerWidth * 0.75);
+			const height = Math.round(window.innerHeight * 0.75);
+			const left = Math.round((window.innerWidth - width) / 2);
+			const top = Math.round((window.innerHeight - height) / 2);
+
+			const newWindow = window.open(path, "_blank", `width=${width},height=${height},left=${left},top=${top}`);
+		},
+
 	},
 	template: `
 	<div class="core-messages h-100 pb-3">
+
+		<message-modal
+			ref="modalMsg"
+			:type-id="typeId"
+			:id="id"
+			:endpoint="endpoint"
+			:openMode="openMode"
+			@reloadTable="reloadTable"
+			>
+		</message-modal>
+
+<!--		<div>
+			<button class="btn btn-secondary m-1" @click="openInDiv(id,typeId)">Open in Div</button>
+			<button class="btn btn-secondary" @click="openInModal(id,typeId)">Open in Modal</button>
+			<button class="btn btn-secondary m-1" @click="openInNewTab(id,typeId)">Open in Tab</button>
+			<button class="btn btn-secondary" @click="openInNewWindow(id,typeId)">Open in Page</button>
+		</div>-->
 <!--	<p>endpoint Messages.js: {{endpoint}}</p>-->
 		<div v-if="showNew">
 			<new-message
@@ -74,10 +152,24 @@ export default {
 				:endpoint="endpoint"
 				:messageLayout="messageLayout"
 				:openMode="openMode"
-				@showNewMessageTemplate="showNewMessageTemplate"
+				@newMessage="newMessage"
 			>
 			
 			</table-messages>
+
+			<!--working also with form_only-->
+			<div v-if="showDiv">
+				<form-only
+					ref="templateNewForm"
+					:type-id="typeId"
+					:id="id"
+					:endpoint="endpoint"
+					:openMode="openMode"
+					@reloadTable="reloadTable"
+				>
+				</form-only>
+			</div>
+
 		</div>
 		
 	</div>

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

@@ -18,7 +18,7 @@ export default {
 			messageLayout="twoColumnsTableLeft"
 			show-table
 			show-new
-			open-mode="showDiv"
+			open-mode="newTab"
 			>
 		</core-messages>
 

public/js/components/VorlagenDropdown/VorlagenDropdown.js

@@ -57,7 +57,7 @@ export default {
 		if(this.useLoggedInUserOe){
 			this.$fhcApi.factory.vorlagen.getVorlagenByLoggedInUser()
 				.then(result => {
-					console.log(this.vorlagenOe);
+					//console.log(this.vorlagenOe);
 					this.vorlagenOe = result.data;
 				})
 				.catch(this.$fhcAlert.handleSystemError);