Merge branch 'feature-34543/UX_Template' of https://github.com/FH-Complete/FHC-Core into feature-34543/UX_Template

public/css/Fhc.css

@@ -14,13 +14,6 @@
   font-size: .65em;
   padding-inline-start: 1em;
 }
-.fhc-header:after {
-  background-color: var(--bs-gray-300);
-  content: "";
-  display: block;
-  height: 1px;
-  width: 100%;
-}
 
 .fhc-alert.p-toast-center {
   width: 35rem;

public/css/components/FilterComponent.css

@@ -64,3 +64,12 @@
 	margin-top: 20px;
 }
 
+.tabulator {
+	font-size: 1rem;
+}
+.tabulator-cell .btn {
+	padding: 0 .375rem;
+	font-size: .875rem;
+	border-radius: .2rem;
+}
+

public/css/components/NavigationComponent.css

@@ -82,6 +82,7 @@
 /*
  * To be moved outside
  */
+.navbar.navbar-left-side ~ *,
 #content {
 	position: inherit;
 	margin: 0 0 0 250px;

public/js/components/Tabs.js

@@ -18,7 +18,8 @@ export default {
 		},
 		default: String,
 		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
-		vertical: Boolean
+		vertical: Boolean,
+		border: Boolean
 	},
 	data() {
 		return {
@@ -62,7 +63,6 @@ export default {
 					.then(this.initConfig)
 					.catch(this.$fhcAlert.handleSystemError);
 
-			console.log(config);
 			const tabs = {};
 
 			if (Array.isArray(config)) {
@@ -104,7 +104,7 @@ export default {
 		this.initConfig(this.config);
 	},
 	template: `
-	<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch' : 'flex-column'" v-if="Object.keys(tabs).length">
+	<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
 				v-for="tab in tabs"
@@ -118,7 +118,7 @@ export default {
 				{{tab.title}}
 			</div>
 		</div>
-		<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto p-3" :class="vertical ? '' : 'border-bottom border-start border-end'">
+		<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto" :class="vertical || !border ? '' : 'p-3 border-bottom border-start border-end'">
 			<keep-alive>
 				<component ref="current" :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
 			</keep-alive>

public/js/components/filter/Filter.js

@@ -185,13 +185,23 @@ export const CoreFilterCmpt = {
 			else
 				this.getFilter();
 		},
-		initTabulator() {
+		async initTabulator() {
+			let placeholder = '< Phrasen Plugin not loaded! >';
+			if (this.$p) {
+				await this.$p.loadCategory('ui');
+				placeholder = this.$p.t('ui/keineDatenVorhanden');
+			}
 			// Define a default tabulator options in case it was not provided
 			let tabulatorOptions = {...{
 				height: 500,
-				layout: "fitColumns",
+				layout: "fitDataStretch",
 				movableColumns: true,
-				reactiveData: true
+				columnDefaults:{
+					tooltip: true,
+				},
+				placeholder,
+				reactiveData: true,
+				persistence: true
 			}, ...(this.tabulatorOptions || {})};
 
 			if (!this.tableOnly) {
@@ -436,7 +446,7 @@ export const CoreFilterCmpt = {
 		 *
 		 */
 		handlerRemoveCustomFilter: function(event) {
-			filterId = event.currentTarget.getAttribute("href").substring(1);
+			let filterId = event.currentTarget.getAttribute("href").substring(1);
 			if (filterId === this.selectedFilter)
 				this.selectedFilter = null;
 			//