messages add translation for tabulator pagination buttons, Tabs component add alternative rendering with primevue tabs and use it in stv details component

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

@@ -145,7 +145,27 @@ export default {
 				dataTreeCollapseElement:"<i class='fas fa-minus-square'></i>",
 				dataTreeChildIndent: 15,
 				dataTreeStartExpanded: false,
-				persistenceID: 'core-message'
+				persistenceID: 'core-message',
+				locale: 'de',
+				"langs": {
+					"de":{ //German language definition
+						"data":{
+							"loading":"Lädt", //data loader text
+							"error":"Fehler", //data error text
+						},
+						"pagination":{
+							"first":"Erste",
+							"first_title":"Erste Seite",
+							"last":"Letzte",
+							"last_title":"Letzte Seite",
+							"prev":"Vorige",
+							"prev_title":"Vorige Seite",
+							"next":"Nächste",
+							"next_title":"Nächste Seite",
+							"all":"Alle"
+						},
+					},
+				}
 			},
 			tabulatorEvents: [
 				{

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

@@ -67,8 +67,8 @@ export default {
 					<h2 class="h4">{{students[0].titlepre}} {{students[0].vorname}} {{students[0].nachname}} {{students[0].titlepost}}</h2>
 				</div>
 			</div>
-			<fhc-tabs v-if="students.length == 1" ref="tabs" :modelValue="students[0]" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
-			<fhc-tabs v-else ref="tabs" :modelValue="students" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
+			<fhc-tabs v-if="students.length == 1" ref="tabs" :useprimevue="true" :modelValue="students[0]" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
+			<fhc-tabs v-else ref="tabs" :useprimevue="true" :modelValue="students" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
 		</div>
 		<div v-else>
 			Loading...

public/js/components/Tabs.js

@@ -1,6 +1,13 @@
 import accessibility from "../directives/accessibility.js";
 
+import TabView from '../../../index.ci.php/public/js/components/primevue/tabview/tabview.esm.min.js';
+import TabPanel from '../../../index.ci.php/public/js/components/primevue/tabpanel/tabpanel.esm.min.js';
+
 export default {
+	components: {
+		tabview: TabView,
+		tabpanel: TabPanel
+	},
 	directives: {
 		accessibility
 	},
@@ -17,7 +24,11 @@ export default {
 		default: String,
 		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
 		vertical: Boolean,
-		border: Boolean
+		border: Boolean,
+		useprimevue: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data() {
 		return {
@@ -47,6 +58,10 @@ export default {
 		}
 	},
 	methods: {
+		handleTabClick: function(index) {
+			let keys = Object.keys(this.tabs);
+			this.change(key[index]);
+		},
 		change(key) {
 			this.$emit("change", key)
 			this.current = key;
@@ -77,7 +92,8 @@ export default {
 					component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
 					title: Vue.computed(() => item.title || key),
 					config: item.config,
-					key
+					key,
+					value: {}
 				}
 			}
 
@@ -99,6 +115,27 @@ export default {
 		this.initConfig(this.config);
 	},
 	template: `
+	<template v-if="useprimevue">
+
+	<tabview 
+		:scrollable="true" 
+		:lazy="true"
+		@tab-click="handleTabClick"
+	>
+		<tabpanel 
+			v-for="tab in tabs" 
+			:key="tab.key" 
+			:header="tab.title"
+		>
+			<keep-alive>
+				<component :is="tab.component" v-model="value" :config="tab.config"></component>
+			</keep-alive>
+		</tabpanel>
+	</tabview>
+
+	</template>
+	<template v-else="">
+
 	<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch gap-3' : (border ? 'flex-column' : 'flex-column gap-3')" v-if="Object.keys(tabs).length">
 		<div class="nav" :class="vertical ? 'nav-pills flex-column' : 'nav-tabs'">
 			<div
@@ -118,5 +155,7 @@ export default {
 				<component ref="current" :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
 			</keep-alive>
 		</div>
-	</div>`
+	</div>
+
+	</template>`
 };