From e659e8e12cf7cd7f2311e37b72cde155f0ede50b Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 3 Jul 2025 15:30:02 +0200
Subject: [PATCH] update(Profil Tabulator Columns):preloads phrasen for the
 tabulator tables, otherwise the column titles are not displayed

---
 .../Cis/Profil/MitarbeiterProfil.js           | 52 ++++++++++++-------
 .../Cis/Profil/MitarbeiterViewProfil.js       | 18 +++++--
 .../js/components/Cis/Profil/StudentProfil.js | 42 +++++++++------
 3 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js
index 0bb628e19..840cdefc1 100644
--- a/public/js/components/Cis/Profil/MitarbeiterProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js
@@ -33,7 +33,7 @@ export default {
 		return {
 			showModal: false,
 			editDataFilter: null,
-
+			preloadedPhrasen:{},
 			// tabulator options
 			funktionen_table_options: {
 				persistenceID: "filterTableMaProfilFunktionen",
@@ -58,21 +58,21 @@ export default {
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('ui/bezeichnung')),
+						title: Vue.computed(() => this.preloadedPhrasen.bezeichnungPhrase),
 						field: "Bezeichnung",
 						headerFilter: true,
 						minWidth: 200,
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('lehre/organisationseinheit')),
+						title: Vue.computed(() => this.preloadedPhrasen.organisationseinheitPhrase),
 						field: "Organisationseinheit",
 						headerFilter: true,
 						minWidth: 200,
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('global/gueltigVon')),
+						title: Vue.computed(() => this.preloadedPhrasen.gueltigVonPhrase),
 						field: "Gültig_von",
 						headerFilter: true,
 						resizable: true,
@@ -80,7 +80,7 @@ export default {
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('global/gueltigBis')),
+						title: Vue.computed(() => this.preloadedPhrasen.gueltigBisPhrase),
 						field: "Gültig_bis",
 						headerFilter: true,
 						resizable: true,
@@ -88,7 +88,7 @@ export default {
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('profil/wochenstunden')),
+						title: Vue.computed(() => this.preloadedPhrasen.wochenstundenPhrase),
 						field: "Wochenstunden",
 						headerFilter: true,
 						minWidth: 200,
@@ -121,14 +121,14 @@ export default {
 						visible: true
 					},
 					{
-						title:  Vue.computed(() => this.$p.t('profil/entlehnteBetriebsmittel')),
+						title: Vue.computed(() => this.preloadedPhrasen.entlehnteBetriebsmittelPhrase),
 						field: "betriebsmittel",
 						headerFilter: true,
 						minWidth: 200,
 						visible: true
 					},
 					{
-						title:  Vue.computed(() => this.$p.t('profil/inventarnummer')),
+						title: Vue.computed(() => this.preloadedPhrasen.inventarnummerPhrase),
 						field: "Nummer",
 						headerFilter: true,
 						resizable: true,
@@ -136,7 +136,7 @@ export default {
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('profil/ausgabedatum')),
+						title: Vue.computed(() => this.preloadedPhrasen.ausgabedatumPhrase),
 						field: "Ausgegeben_am",
 						headerFilter: true,
 						minWidth: 200,
@@ -283,6 +283,18 @@ export default {
 	},
 
 	created() {
+		// preload phrasen
+		this.$p.loadCategory(["ui","lehre","global","profil"]).then(() => {
+			this.preloadedPhrasen.bezeichnungPhrase = this.$p.t('ui/bezeichnung');
+			this.preloadedPhrasen.organisationseinheitPhrase = this.$p.t('lehre/organisationseinheit');
+			this.preloadedPhrasen.gueltigVonPhrase = this.$p.t('global/gueltigVon');
+			this.preloadedPhrasen.gueltigBisPhrase = this.$p.t('global/gueltigBis');
+			this.preloadedPhrasen.wochenstundenPhrase = this.$p.t('profil/wochenstunden');
+			this.preloadedPhrasen.entlehnteBetriebsmittelPhrase = this.$p.t('profil/entlehnteBetriebsmittel');
+			this.preloadedPhrasen.inventarnummerPhrase = this.$p.t('profil/inventarnummer');
+			this.preloadedPhrasen.ausgabedatumPhrase = this.$p.t('profil/ausgabedatum');
+			this.preloadedPhrasen.loaded=true;
+		});
 		//? sorts the profil Updates: pending -> accepted -> rejected
 		this.data.profilUpdates?.sort(this.sortProfilUpdates);
 
@@ -298,7 +310,7 @@ export default {
 			this.setTableColumnTitles()
 		}
 	},
-	template: /*html*/ ` 
+	template: /*html*/ `
 <div class="container-fluid text-break fhc-form"  >
     <edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" :title="$p.t('profil','profilBearbeiten')"></edit-profil>
     <div class="row">
@@ -306,7 +318,7 @@ export default {
             <!--TODO: uncomment when implemented
                 <div class="row mb-3">
                            <div class="col">
-                           <quick-links :title="$p.t('profil','quickLinks')" :mobile="true"></quick-links>    
+                           <quick-links :title="$p.t('profil','quickLinks')" :mobile="true"></quick-links>
                            </div>
                          </div>-->
             <!-- Bearbeiten Button -->
@@ -324,7 +336,7 @@ export default {
             </div>
             <div v-if="data.profilUpdates" class="row mb-3">
                 <div class="col">
-                    <!-- MOBILE PROFIL UPDATES -->  
+                    <!-- MOBILE PROFIL UPDATES -->
                     <fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates"  :data="data.profilUpdates" ></fetch-profil-updates>
                 </div>
             </div>
@@ -334,7 +346,7 @@ export default {
         <div class="col-sm-12 col-md-8 col-xxl-9 ">
             <!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
             <!-- INFORMATION CONTENT START -->
-            <!-- ROW WITH THE PROFIL INFORMATION --> 
+            <!-- ROW WITH THE PROFIL INFORMATION -->
             <div class="row mb-4">
                 <div  class="col-lg-12 col-xl-6 ">
                     <div class="row mb-4">
@@ -411,18 +423,20 @@ export default {
             <div class="row">
                 <div class="col-12 mb-4" >
                     <!-- FUNKTIONEN TABELLE -->
-                    <core-filter-cmpt 
+                    <core-filter-cmpt
+						v-if="preloadedPhrasen.loaded"
                     	@tableBuilt="funktionenTableBuilt"
-						:title="$p.t('person','funktionen')"  
-						ref="funktionenTable" 
-						:tabulator-options="funktionen_table_options"  
-						tableOnly 
+						:title="$p.t('person','funktionen')"
+						ref="funktionenTable"
+						:tabulator-options="funktionen_table_options"
+						tableOnly
 						:sideMenu="false"
                      />
                 </div>
                 <div class="col-12 mb-4" >
                     <!-- BETRIEBSMITTEL TABELLE -->
-                    <core-filter-cmpt 
+                    <core-filter-cmpt
+						v-if="preloadedPhrasen.loaded"
                     	@tableBuilt="betriebsmittelTableBuilt"
 						:title="$p.t('profil','entlehnteBetriebsmittel')"
 						ref="betriebsmittelTable"
diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
index 23a86b5f9..56c7ab84b 100644
--- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
@@ -18,7 +18,7 @@ export default {
 	data() {
 		return {
 			collapseIconFunktionen: true,
-
+			preloadedPhrasen:{},
 			funktionen_table_options: {
 				persistenceID: "filterTableMaViewProfilFunktionen",
 				persistence: {
@@ -166,6 +166,16 @@ export default {
 			};
 		},
 	},
+	created(){
+		this.$p.loadCategory(["ui", "lehre", "global", "profil"]).then(() => {
+			this.preloadedPhrasen.bezeichnungPhrase = this.$p.t('ui/bezeichnung');
+			this.preloadedPhrasen.organisationseinheitPhrase = this.$p.t('lehre/organisationseinheit');
+			this.preloadedPhrasen.gueltigVonPhrase = this.$p.t('global/gueltigVon');
+			this.preloadedPhrasen.gueltigBisPhrase = this.$p.t('global/gueltigBis');
+			this.preloadedPhrasen.wochenstundenPhrase = this.$p.t('profil/wochenstunden');
+			this.preloadedPhrasen.loaded = true;
+		});
+	},
 
 	template: /*html*/ `
 
@@ -175,9 +185,9 @@ export default {
         <!-- HIDDEN QUICK LINKS -->
         <!-- TODO: uncomment when implemented
             <div  class="d-md-none col-12 ">
-            
+
             <quick-links :title="$p.t('profil','quickLinks')" :mobile="true" ></quick-links>
-            
+
             </div>
             -->
         <!-- END OF HIDDEN QUCK LINKS -->
@@ -223,7 +233,7 @@ export default {
             <div class="row">
                 <!-- FIRST TABLE -->
                 <div class="col-12 mb-4" >
-                    <core-filter-cmpt @tableBuilt="funktionenTableBuilt" :title="$p.t('person','funktionen')"  ref="funktionenTable" :tabulator-options="funktionen_table_options"  tableOnly :sideMenu="false" />
+                    <core-filter-cmpt v-if="preloadedPhrasen.loaded" @tableBuilt="funktionenTableBuilt" :title="$p.t('person','funktionen')"  ref="funktionenTable" :tabulator-options="funktionen_table_options"  tableOnly :sideMenu="false" />
                 </div>
                 <!-- END OF THE ROW WITH THE TABLES UNDER THE PROFIL INFORMATION -->
             </div>
diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js
index 2c0d5ba2b..5d9b441e0 100644
--- a/public/js/components/Cis/Profil/StudentProfil.js
+++ b/public/js/components/Cis/Profil/StudentProfil.js
@@ -32,7 +32,7 @@ export default {
 			showModal: false,
 			collapseIconBetriebsmittel: true,
 			editDataFilter: null,
-
+			preloadedPhrasen:{},
 			// tabulator options
 			zutrittsgruppen_table_options: {
 				persistenceID: "filterTableStudentProfilZutrittsgruppen",
@@ -42,7 +42,7 @@ export default {
 				height: 200,
 				layout: "fitColumns",
 				columns: [{
-					title: Vue.computed(() => this.$p.t('profil/zutrittsGruppen')),
+					title: Vue.computed(() => this.preloadedPhrasen.zutrittsGruppenPhrase),
 					field: "bezeichnung"
 				}],
 			},
@@ -68,14 +68,14 @@ export default {
 						headerClick: this.collapseFunction,
 					},
 					{
-						title:  Vue.computed(() => this.$p.t('profil/entlehnteBetriebsmittel')),
+						title: Vue.computed(()=>this.preloadedPhrasen.entlehnteBetriebsmittelPhrase),
 						field: "betriebsmittel",
 						headerFilter: true,
 						minWidth: 200,
 						visible: true
 					},
 					{
-						title:  Vue.computed(() => this.$p.t('profil/inventarnummer')),
+						title: Vue.computed(() =>this.preloadedPhrasen.inventarnummerPhrase) ,
 						field: "Nummer",
 						headerFilter: true,
 						resizable: true,
@@ -83,7 +83,7 @@ export default {
 						visible: true
 					},
 					{
-						title: Vue.computed(() => this.$p.t('profil/ausgabedatum')),
+						title: Vue.computed(() =>this.preloadedPhrasen.ausgabedatum) ,
 						field: "Ausgegeben_am",
 						headerFilter: true,
 						minWidth: 200,
@@ -231,6 +231,14 @@ export default {
 		},
 	},
 	created() {
+		// preload phrasen
+		this.$p.loadCategory('profil').then(() => {
+			this.preloadedPhrasen.zutrittsGruppenPhrase = this.$p.t('profil/zutrittsGruppen');
+			this.preloadedPhrasen.entlehnteBetriebsmittelPhrase = this.$p.t('profil/entlehnteBetriebsmittel');
+			this.preloadedPhrasen.inventarnummerPhrase = this.$p.t('profil/inventarnummer');
+			this.preloadedPhrasen.ausgabedatum = this.$p.t('profil/ausgabedatum');
+			this.preloadedPhrasen.loaded = true;
+		});
 		//? sorts the profil Updates: pending -> accepted -> rejected
 		this.data.profilUpdates?.sort(this.sortProfilUpdates);
 	},
@@ -294,7 +302,7 @@ export default {
 							<div  class=" col-lg-12">
 								<!-- STUDENT INFO -->
 								<role-information :title="$p.t('profil','studentInformation')" :data="roleInformation"></role-information>
-							</div> 
+							</div>
 						</div>
 					<!-- START OF SECOND PROFIL  INFORMATION COLUMN -->
 					</div>
@@ -329,7 +337,7 @@ export default {
 							</div>
 						</div>
 					</div>
-			
+
 					<div class="row mb-4">
 						<div class="col">
 							<!-- PRIVATE ADRESSEN-->
@@ -347,7 +355,7 @@ export default {
 								<div class="card-body">
 									<div class="gy-3 row ">
 										<div v-for="element in data.adressen" class="col-12">
-											<Adresse :data="element"></Adresse> 
+											<Adresse :data="element"></Adresse>
 										</div>
 									</div>
 								</div>
@@ -359,16 +367,18 @@ export default {
 			<!-- SECOND ROW UNDER THE PROFIL IMAGE AND INFORMATION WITH THE TABLES -->
 			<div class="row">
 				<div class="col-12 mb-4" >
-					<core-filter-cmpt 
-					@tableBuilt="betriebsmittelTableBuilt" 
-					:title="$p.t('profil','entlehnteBetriebsmittel')"  
-					ref="betriebsmittelTable" 
-					:tabulator-options="betriebsmittel_table_options" 
-					tableOnly 
+					<core-filter-cmpt
+					v-if="preloadedPhrasen.loaded"
+					@tableBuilt="betriebsmittelTableBuilt"
+					:title="$p.t('profil','entlehnteBetriebsmittel')"
+					ref="betriebsmittelTable"
+					:tabulator-options="betriebsmittel_table_options"
+					tableOnly
 					:sideMenu="false" />
-				</div> 
+				</div>
 				<div class="col-12 mb-4" >
-					<core-filter-cmpt 
+					<core-filter-cmpt
+					v-if="preloadedPhrasen.loaded"
 					@tableBuilt="zutrittsgruppenTableBuilt" 
 					:title="$p.t('profil','zutrittsGruppen')" 
 					ref="zutrittsgruppenTable"