show count of notes in tab title

application/controllers/api/frontend/v1/stv/Config.php

@@ -63,13 +63,12 @@ class Config extends FHCAPI_Controller
 			'config' => $config['details']
 		];
 
-		$showSuffix = $config['notes']['showCountNotes'] ?? false;
 		$result['notes'] = [
 			'title' => $this->p->t('stv', 'tab_notes'),
 			'component' => './Stv/Studentenverwaltung/Details/Notizen.js',
 			'config'	=> $config['notes'],
-			'showSuffix' => $showSuffix && ($config['notes']['showCountNotes'] ?? false),
-			'suffixhelper' => APP_ROOT . 'public/js/components/Stv/Studentenverwaltung/Details/Notizen/NotizenSuffixHelper.js'
+			'showSuffix' => ($config['notes']['showCountNotes'] ?? false),
+			'suffixhelper' => APP_ROOT . 'public/js/helpers/Stv/Studentenverwaltung/Details/Notizen/NotizenSuffixHelper.js'
 		];
 
 		$result['contact'] = [

public/js/components/Notiz/Notiz.js

@@ -295,8 +295,7 @@ export default {
 				showType_id: false,
 				showId: false,
 				showLastupdate: false
-			},
-			newCount: null
+			}
 		}
 	},
 	methods: {
@@ -368,7 +367,6 @@ export default {
 				.catch(this.$fhcAlert.handleSystemError)
 				.finally(() => {
 					window.scrollTo(0, 0);
-					this.getCountNotes();
 				});
 		},
 		deleteNotiz(notiz_id) {
@@ -383,7 +381,6 @@ export default {
 				.catch(this.$fhcAlert.handleSystemError)
 				.finally(() => {
 					window.scrollTo(0, 0);
-					this.getCountNotes();
 				});
 		},
 		loadNotiz(notiz_id) {
@@ -427,7 +424,6 @@ export default {
 				.catch(this.$fhcAlert.handleSystemError)
 				.finally(() => {
 					window.scrollTo(0, 0);
-					this.getCountNotes();
 				});
 		},
 		reload() {
@@ -505,21 +501,6 @@ export default {
 				const columnToShow = "show" + column.charAt(0).toUpperCase() + column.slice(1);
 				this.showVariables[columnToShow] = true;
 			});
-		},
-		getCountNotes(){
-			return this.$api
-				.call(this.endpoint.getCountNotes(this.id))
-				.then(
-					result => {
-						this.newCount = result.data;
-						this.$nextTick(() => {
-							this.$emit('updateCount', this.newCount);
-						});
-					})
-				.catch(this.$fhcAlert.handleSystemError);
-		},
-		getSuffix() {
-			return '(bhtest)';
 		}
 	},
 	created() {
@@ -530,9 +511,6 @@ export default {
 		if (this.showTinyMce) {
 			await this.initTinyMCE();
 		}
-		this.$nextTick(() => {
-			this.getCountNotes();
-		});
 	},
 	watch: {
 		//watcher für Tinymce-Textfeld

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

@@ -16,12 +16,6 @@ export default {
 			countNotiz: ''
 		};
 	},
-	methods: {
-		updateCountNotes(countNew){
-			this.headerSuffix = "(" +  countNew + ")";
-			this.$emit('update:suffix', this.headerSuffix);
-		}
-	},
 	template: `
 	<div class="stv-details-notizen h-100 pb-3">
 	
@@ -37,7 +31,7 @@ export default {
 		show-document
 		show-tiny-mce
 		:visibleColumns="['titel','text','verfasser','bearbeiter','dokumente']"
-		@updateCount="updateCountNotes"
+		@reload="$emit('update:suffix')"
 		>
 </core-notiz>
 

public/js/components/Tabs.js

@@ -14,7 +14,7 @@ export default {
 	emits: [
 		'update:modelValue',
 		'change',
-		'changed',
+		'changed'
 	],
 	props: {
 		config: {
@@ -109,23 +109,8 @@ export default {
 					config: item.config,
 					key,
 					value,
-					suffixhelper: null
+					suffixhelper: item.suffixhelper ?? null
 				};
-
-				const fetchhelper = async function (tab, item) {
-					if (!item.showSuffix)
-						return null;
-
-					const mod = await import(item.suffixhelper);
-					tab.suffixhelper = mod.getSuffix;
-					// TODO call suffixhelper with modelValue - but modelValue not defined in this scope
-					/*
-					tab.suffixhelper(modelValue).then((response) => {
-						tab.value.suffix = response.data;
-					});
-					 */
-				};
-				fetchhelper(tabs[key], item);
 			}
 
 			if (Array.isArray(config))
@@ -141,15 +126,35 @@ export default {
 			}
 			this.tabs = tabs;
 		},
-		updateSuffix(event) {
-			if (this.currentTab?.value) {
-				this.currentTab.value.suffix = event;
+		updateSuffix() {
+			this.getTabSuffix(this.currentTab);
+		},
+		async getTabSuffix(tab) {
+			if (!tab.value.showSuffix) {
+				return;
 			}
+
+			if (tab.suffixhelper !== null) {
+				const suffixhelper = await import(tab.suffixhelper);
+				const suffix = await suffixhelper.getSuffix(this.$api, this.modelValue);
+				tab.value.suffix = suffix;
+			} else {
+				tab.value.suffix = '';
+			}
+		},
+		getTabSuffixes() {
+			Object.entries(this.tabs).forEach(([key, item]) => this.getTabSuffix(item));
 		}
 	},
 	created() {
 		this.initConfig(this.config);
 	},
+	mounted() {
+		this.getTabSuffixes();
+	},
+	updated() {
+		this.getTabSuffixes();
+	},
 	template: `
 	<template v-if="useprimevue">
 
@@ -162,7 +167,7 @@ export default {
 			<tabpanel
 				v-for="tab in tabs"
 				:key="tab.key"
-				:header="tab.title + (tab.value.showSuffix && tab.value.suffix ? tab.value.suffix : '')"
+				:header="tab.title + ((tab.value.showSuffix && tab.value.suffix !== '') ? ' ' + tab.value.suffix : '')"
 			>
 				<keep-alive>
 					<component

public/js/helpers/Stv/Studentenverwaltung/Details/Notizen/NotizenSuffixHelper.js

@@ -1,8 +1,8 @@
 import ApiNotizPerson from '../../../../../api/factory/notiz/person.js';
 
-export async function getSuffix(modelValue) {
-	const response = await this.$api
+export async function getSuffix(api, modelValue) {
+	const response = await api
 		.call(ApiNotizPerson.getCountNotes(modelValue.person_id));
-	const suffix = ' (' + response.data + ')';
+	const suffix = '(' + response.data + ')';
 	return suffix;
 }