adapt Notes: Tinymce, textarea, delete bsModal

public/js/components/Notiz/Notiz.js

@@ -217,6 +217,9 @@ export default {
 							visible: this.showVariables.showId,
 							title: this.$p.t('ui', 'extension_id')
 						});
+						cm.getColumnByField('actions').component.updateDefinition({
+							title: this.$p.t('global', 'aktionen')
+						});
 					}
 				}
 			],
@@ -260,9 +263,15 @@ export default {
 	},
 	methods: {
 		actionDeleteNotiz(notiz_id) {
-			this.loadNotiz(notiz_id).then(() => {
-				this.$refs.deleteNotizModal.show();
-			});
+			this.loadNotiz(notiz_id);
+
+			this.$fhcAlert
+				.confirmDelete()
+				.then(result => result
+					? notiz_id
+					: Promise.reject({handled: true}))
+				.then(this.deleteNotiz)
+				.catch(this.$fhcAlert.handleSystemError);
 		},
 		actionEditNotiz(notiz_id) {
 			this.loadNotiz(notiz_id).then(() => {
@@ -305,7 +314,8 @@ export default {
 			formData.append('data', JSON.stringify(this.notizData));
 			Object.entries(this.notizData.anhang).forEach(([k, v]) => formData.append(k, v));
 
-			//TODO(Manu) formvalidation: inform not working with tinymce textarea
+			this.$refs.formNotiz.clearValidation();
+
 			return this.endpoint.addNewNotiz(this.$refs.formNotiz, this.id, formData)
 				.then(response => {
 					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
@@ -322,10 +332,8 @@ export default {
 		},
 		deleteNotiz(notiz_id) {
 			return this.endpoint.deleteNotiz(notiz_id, this.typeId, this.id)
-				//return this.eost(this.endpoint + 'deleteNotiz/', this.param)
 				.then(result => {
 					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete'));
-					this.$refs.deleteNotizModal.hide();
 					this.reload();
 					this.resetFormData();
 				})
@@ -358,7 +366,7 @@ export default {
 			formData.append('data', JSON.stringify(this.notizData));
 			Object.entries(this.notizData.anhang).forEach(([k, v]) => formData.append(k, v));
 
-			//TODO(Manu) formvalidation: inform not working with tinymce textarea
+			this.$refs.formNotiz.clearValidation();
 			return this.endpoint.updateNotiz(this.$refs.formNotiz, notiz_id, formData)
 				.then(response => {
 					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
@@ -412,7 +420,7 @@ export default {
 
 			const vm = this;
 			tinymce.init({
-				target: this.$refs.editor, //Important: not selector: to enable multiple import of component
+				target: this.$refs.editor.$refs.input, //Important: not selector: to enable multiple import of component
 				//height: 800,
 				//plugins: ['lists'],
 				//toolbar: " blocks | bold italic underline | alignleft aligncenter alignright alignjustify",
@@ -500,19 +508,9 @@ export default {
 	},
 	template: `
 	<div class="core-notiz">
+	
 		<div v-if="notizLayout=='classicFas'">
-			<!--Modal: deleteNotizModal-->
-			<BsModal ref="deleteNotizModal">
-				<template #title>Notiz löschen</template>
-				<template #default>
-					<p>Notiz wirklich löschen?</p>
-				</template>
-				<template #footer>
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFormData">Abbrechen</button>
-					<button ref="Close" type="button" class="btn btn-primary" @click="deleteNotiz(notizData.notiz_id)">OK</button>
-				</template>
-			</BsModal>
-			
+		
 			<core-filter-cmpt
 				ref="table"
 				:tabulator-options="tabulatorOptions"
@@ -521,7 +519,7 @@ export default {
 				:side-menu="false"
 				reload
 				new-btn-show
-				new-btn-label="Notiz"
+				:new-btn-label="this.$p.t('global', 'notiz')"
 				@click:new="actionNewNotiz"
 				>
 			</core-filter-cmpt>
@@ -545,28 +543,41 @@ export default {
 					</div>
 		
 					<div class="row mb-3">
-						<label for="titel" class="form-label col-sm-2">{{$p.t('global','titel')}} *</label>
-						<div class="col-sm-7">
-							<input type="text" v-model="notizData.titel" class="form-control">
-						</div>
+							<form-input
+								container-class="col-12"
+								:label="$p.t('global','titel')  + ' *'"
+								type="text"
+								v-model="notizData.titel"
+								name="titel"
+								>
+							</form-input>
 					</div>
 								
-					<div class="row mb-3">
-						<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-							
+					<div class="row mb-3">	
 						<!-- TinyMce 5 -->
-						<div v-if="showTinyMce" class="col-sm-7">
-							<textarea
+						<div v-if="showTinyMce" class="col-sm-12">
+								<form-input
+									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
+							</div>
+						<div v-else class="col-sm-12">
+							<form-input
 								ref="editor"
+								:label="$p.t('global','text')  + ' *'"
+								type="textarea"
+								v-model="notizData.text"
+								name="text"
 								rows="5"
 								cols="75"
-								class="form-control"
-								:value="notizData.text"
-		     					@input="updateText">
-		     				</textarea>
-						</div>
-						<div v-else class="col-sm-7">
-							<textarea rows="5" cols="75" v-model="notizData.text" class="form-control"></textarea>
+								>
+							</form-input>
 						</div>
 					</div>
 				</div>
@@ -656,18 +667,6 @@ export default {
 		</div>
 
 		<div v-else-if="notizLayout=='twoColumnsFormRight'" class="notiz-notiz">
-
-			<!--Modal: deleteNotizModal-->
-			<BsModal ref="deleteNotizModal">
-				<template #title>Notiz löschen</template>
-				<template #default>
-					<p>Notiz wirklich löschen?</p>
-				</template>
-				<template #footer>
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFormData">Abbrechen</button>
-					<button ref="Close" type="button" class="btn btn-primary" @click="deleteNotiz(notizData.notiz_id)">OK</button>
-				</template>
-			</BsModal>
 			
 			<div class="row">
 				<div class="col-sm-6 pt-6">
@@ -680,18 +679,13 @@ export default {
 						:side-menu="false"
 						reload
 						new-btn-show
-						new-btn-label="Notiz"
+						:new-btn-label="this.$p.t('global', 'notiz')"
 						@click:new="actionNewNotiz"
 						>
 					</core-filter-cmpt>	
 				</div>
 			
 				<div class="col-sm-6">
-					<!--
-					<p v-if="notizData.statusNew" class="fw-bold">{{$p.t('notiz','notiz_new')}} <span> [{{notizData.typeId}}]</span></p>
-					<p v-else class="fw-bold">{{$p.t('notiz','notiz_edit')}} <span> [{{notizData.typeId}}]</span></p>
-					-->
-
 					<form-form ref="formNotiz" @submit.prevent class="row pt-3">
 						<div class="col pt-3">
 							<p v-if="notizData.statusNew" class="fw-bold">{{$p.t('notiz','notiz_new')}} <span> [{{notizData.typeId}}]</span></p>
@@ -717,20 +711,29 @@ export default {
 						<div class="row mb-3">
 							<!-- TinyMce 5 -->
 							<div v-if="showTinyMce" class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea
+								<form-input
 									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
 									rows="5"
 									cols="75"
-									class="form-control"
-									:value="notizData.text"
-									@input="updateText">
-								</textarea>
+									>
+								</form-input>
 							</div>
 							
 							<div v-else class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea rows="5" cols="75" v-model="notizData.text" class="form-control"></textarea>
+								<form-input
+									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
 							</div>
 						</div>
 				
@@ -835,12 +838,6 @@ export default {
 										>
 									</form-input>
 								</div>
-								<!--
-								<label for="bis" class="form-label col-sm-2">{{$p.t('notiz','erledigt')}}</label>
-								<div class="col-sm-1">
-									<input type="checkbox" v-model="notizData.erledigt">
-								</div>
-								-->
 							</div>
 						</div>
 						
@@ -856,17 +853,6 @@ export default {
 		</div>
 		
 		<div v-else-if="notizLayout=='twoColumnsFormLeft'" class="notiz-notiz">
-			<!--Modal: deleteNotizModal-->
-			<BsModal ref="deleteNotizModal">
-				<template #title>Notiz löschen</template>
-				<template #default>
-					<p>Notiz wirklich löschen?</p>
-				</template>
-				<template #footer>
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFormData">Abbrechen</button>
-					<button ref="Close" type="button" class="btn btn-primary" @click="deleteNotiz(notizData.notiz_id)">OK</button>
-				</template>
-			</BsModal>
 			
 			<div class="row">
 				<div class="col-sm-6">
@@ -890,19 +876,29 @@ export default {
 						<div class="row mb-3">
 							<!-- TinyMce 5 -->
 							<div v-if="showTinyMce" class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea
-								ref="editor"
-								rows="5"
-								cols="75"
-								class="form-control"
-								:value="notizData.text"
-								@input="updateText"></textarea>
+								<form-input
+									ref="editor"
+									:label="$p.t('global', 'text') + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
 							</div>
 							
 							<div v-else class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea rows="5" cols="75" v-model="notizData.text" class="form-control"></textarea>
+								<form-input
+									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
 							</div>
 						</div>
 				
@@ -1008,12 +1004,6 @@ export default {
 										>
 									</form-input>
 								</div>
-								<!--
-								<label for="bis" class="form-label col-sm-2">{{$p.t('notiz','erledigt')}}</label>
-								<div class="col-sm-1">
-									<input type="checkbox" v-model="notizData.erledigt">
-								</div>
-								-->
 							</div>
 						</div>
 						
@@ -1041,7 +1031,7 @@ export default {
 						:side-menu="false"
 						reload
 						new-btn-show
-						new-btn-label="Notiz"
+						:new-btn-label="this.$p.t('global', 'notiz')"
 						@click:new="actionNewNotiz"
 						>
 					</core-filter-cmpt>	
@@ -1050,17 +1040,6 @@ export default {
 		</div>
 		
 		<div v-else-if="notizLayout=='popupModal'" class="notiz-notiz">
-			<!--Modal: deleteNotizModal-->
-			<BsModal ref="deleteNotizModal">
-				<template #title>Notiz löschen</template>
-				<template #default>
-					<p>Notiz wirklich löschen?</p>
-				</template>
-				<template #footer>
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFormData">Abbrechen</button>
-					<button ref="Close" type="button" class="btn btn-primary" @click="deleteNotiz(notizData.notiz_id)">OK</button>
-				</template>
-			</BsModal>
 			
 			<BsModal ref="NotizModal">
 				<template #title>
@@ -1084,19 +1063,29 @@ export default {
 						<div class="row mb-3">
 							<!-- TinyMce 5 -->
 							<div v-if="showTinyMce" class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea
-								ref="editor"
-								rows="5"
-								cols="75"
-								class="form-control"
-								:value="notizData.text"
-								@input="updateText"></textarea>
+								<form-input
+									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
 							</div>
 							
 							<div v-else class="col-sm-12">
-								<label for="text" class="form-label col-sm-2">{{$p.t('global','text')}} *</label>
-								<textarea rows="5" cols="75" v-model="notizData.text" class="form-control"></textarea>
+								<form-input
+									ref="editor"
+									:label="$p.t('global','text')  + ' *'"
+									type="textarea"
+									v-model="notizData.text"
+									name="text"
+									rows="5"
+									cols="75"
+									>
+								</form-input>
 							</div>
 						</div>
 				
@@ -1230,7 +1219,7 @@ export default {
 					:side-menu="false"
 					reload
 					new-btn-show
-					new-btn-label="Notiz"
+					:new-btn-label="this.$p.t('global', 'notiz')"
 					@click:new="actionNewNotiz"
 					>
 				</core-filter-cmpt>