fixed profile tables headings localization

public/js/components/Cis/Profil/MitarbeiterProfil.js

@@ -34,7 +34,7 @@ export default {
 		return {
 			showModal: false,
 			editDataFilter: null,
-			preloadedPhrasen:{},
+			arePhrasesPreloaded: false,
 			// tabulator options
 			funktionen_table_options: {
 				persistenceID: "filterTableMaProfilFunktionen",
@@ -46,6 +46,7 @@ export default {
 				responsiveLayout: "collapse",
 				responsiveLayoutCollapseUseFormatters: false,
 				responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
+				responsiveLayoutCollapseStartOpen: false,
 				columns: [
 					{
 						title:
@@ -56,24 +57,27 @@ export default {
 						formatter: "responsiveCollapse",
 						maxWidth: 40,
 						headerClick: this.collapseFunction,
-						visible: true
+						visible: true,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.bezeichnungPhrase),
+						title: Vue.computed(() => this.$p.t('ui/bezeichnung')),
 						field: "Bezeichnung",
 						headerFilter: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.organisationseinheitPhrase),
+						title: Vue.computed(() => this.$p.t('lehre/organisationseinheit')),
 						field: "Organisationseinheit",
 						headerFilter: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 1,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.gueltigVonPhrase),
+						title: Vue.computed(() => this.$p.t('global/gueltigVon')),
 						field: "Gültig_von",
 						headerFilterFunc: 'dates',
 						headerFilter: dateFilter,
@@ -81,10 +85,11 @@ export default {
 						minWidth: 200,
 						visible: true,
 						formatter:"datetime",
-						formatterParams: this.datetimeFormatterParams()
+						formatterParams: this.datetimeFormatterParams(),
+						responsive: 4,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.gueltigBisPhrase),
+						title: Vue.computed(() => this.$p.t('global/gueltigBis')),
 						field: "Gültig_bis",
 						headerFilterFunc: 'dates',
 						headerFilter: dateFilter,
@@ -92,14 +97,16 @@ export default {
 						minWidth: 200,
 						visible: true,
 						formatter:"datetime",
-						formatterParams: this.datetimeFormatterParams()
+						formatterParams: this.datetimeFormatterParams(),
+						responsive: 3,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.wochenstundenPhrase),
+						title: Vue.computed(() => this.$p.t('profil/wochenstunden')),
 						field: "Wochenstunden",
 						headerFilter: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 2,
 					},
 				],
 			},
@@ -115,6 +122,7 @@ export default {
 				responsiveLayoutCollapseUseFormatters: false,
 				responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
 				data: [{betriebsmittel: "", Nummer: "", Ausgegeben_am: ""}],
+				responsiveLayoutCollapseStartOpen: false,
 				columns: [
 					{
 						title:
@@ -125,32 +133,36 @@ export default {
 						formatter: "responsiveCollapse",
 						maxWidth: 40,
 						headerClick: this.collapseFunction,
-						visible: true
+						visible: true,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.entlehnteBetriebsmittelPhrase),
+						title: Vue.computed(() => this.$p.t('profil/entlehnteBetriebsmittel')),
 						field: "betriebsmittel",
 						headerFilter: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.inventarnummerPhrase),
+						title: Vue.computed(() => this.$p.t('profil/inventarnummer')),
 						field: "Nummer",
 						headerFilter: true,
 						resizable: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 2,
 					},
 					{
-						title: Vue.computed(() => this.preloadedPhrasen.ausgabedatumPhrase),
+						title: Vue.computed(() => this.$p.t('profil/ausgabedatum')),
 						field: "Ausgegeben_am",
 						headerFilterFunc: 'dates',
 						headerFilter: dateFilter,
 						minWidth: 200,
 						visible: true,
 						formatter:"datetime",
-						formatterParams: this.datetimeFormatterParams()
+						formatterParams: this.datetimeFormatterParams(),
+						responsive: 1,
 					},
 				],
 			}
@@ -164,11 +176,9 @@ export default {
 	
 	methods: {
 		betriebsmittelTableBuilt: function () {
-			this.$refs.betriebsmittelTable.tabulator.setColumns(this.betriebsmittel_table_options.columns)
 			this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
 		},
 		funktionenTableBuilt: function () {
-			this.$refs.funktionenTable.tabulator.setColumns(this.funktionen_table_options.columns)
 			this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
 		},
 		hideEditProfilModal: function () {
@@ -219,8 +229,8 @@ export default {
 				});
 		},
 		setTableColumnTitles() { // reevaluates computed phrasen
-			if(this.$refs.betriebsmittelTable) this.$refs.betriebsmittelTable.tabulator.setColumns(this.betriebsmittel_table_options.columns)
-			if(this.$refs.funktionenTable) this.$refs.funktionenTable.tabulator.setColumns(this.funktionen_table_options.columns)
+			if(this.$refs.betriebsmittelTable) this.$refs.betriebsmittelTable.tabulator.setColumns(this.betriebsmittel_table_options.columns);
+			if(this.$refs.funktionenTable) this.$refs.funktionenTable.tabulator.setColumns(this.funktionen_table_options.columns);
 		},
 		datetimeFormatterParams: function() {
 			const params = {
@@ -301,15 +311,7 @@ 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;
+			this.arePhrasesPreloaded = true;
 		});
 		//? sorts the profil Updates: pending -> accepted -> rejected
 		this.data.profilUpdates?.sort(this.sortProfilUpdates);
@@ -440,7 +442,7 @@ export default {
                 <div class="col-12 mb-4" >
                     <!-- FUNKTIONEN TABELLE -->
                     <core-filter-cmpt
-						v-if="preloadedPhrasen.loaded"
+						v-if="arePhrasesPreloaded"
                     	@tableBuilt="funktionenTableBuilt"
 						:title="$p.t('person','funktionen')"
 						ref="funktionenTable"
@@ -452,7 +454,7 @@ export default {
                 <div class="col-12 mb-4" >
                     <!-- BETRIEBSMITTEL TABELLE -->
                     <core-filter-cmpt
-						v-if="preloadedPhrasen.loaded"
+						v-if="arePhrasesPreloaded"
                     	@tableBuilt="betriebsmittelTableBuilt"
 						:title="$p.t('profil','entlehnteBetriebsmittel')"
 						ref="betriebsmittelTable"

public/js/components/Cis/Profil/MitarbeiterViewProfil.js

@@ -20,7 +20,7 @@ export default {
 	data() {
 		return {
 			collapseIconFunktionen: true,
-			preloadedPhrasen:{},
+			arePhrasesPreloaded: false,
 			funktionen_table_options: {
 				persistenceID: "filterTableMaViewProfilFunktionen",
 				persistence: {
@@ -182,12 +182,7 @@ 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;
+			this.arePhrasesPreloaded = true;
 		});
 	},
 
@@ -247,7 +242,7 @@ export default {
             <div class="row">
                 <!-- FIRST TABLE -->
                 <div class="col-12 mb-4" >
-                    <core-filter-cmpt v-if="preloadedPhrasen.loaded" @tableBuilt="funktionenTableBuilt" :title="$p.t('person','funktionen')"  ref="funktionenTable" :tabulator-options="funktionen_table_options"  tableOnly :sideMenu="false" />
+                    <core-filter-cmpt v-if="arePhrasesPreloaded" @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>

public/js/components/Cis/Profil/StudentProfil.js

@@ -33,7 +33,7 @@ export default {
 			showModal: false,
 			collapseIconBetriebsmittel: true,
 			editDataFilter: null,
-			preloadedPhrasen:{},
+			arePhrasesPreloaded: false,
 			// tabulator options
 			zutrittsgruppen_table_options: {
 				persistenceID: "filterTableStudentProfilZutrittsgruppen",
@@ -42,10 +42,12 @@ export default {
 				},
 				minHeight: 200,
 				layout: "fitColumns",
-				columns: [{
-					title: Vue.computed(() => this.preloadedPhrasen.zutrittsGruppenPhrase),
+				columns: [
+					{
+					title: Vue.computed(() => this.$p.t('profil/zutrittsGruppen')),
 					field: "bezeichnung"
-				}],
+					}
+				],
 			},
 			betriebsmittel_table_options: {
 				persistenceID: "filterTableStudentProfilBetriebsmittel",
@@ -57,6 +59,7 @@ export default {
 				responsiveLayout: "collapse",
 				responsiveLayoutCollapseUseFormatters: false,
 				responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
+				responsiveLayoutCollapseStartOpen: false,
 				columns: [
 					{
 						title:
@@ -67,31 +70,35 @@ export default {
 						formatter: "responsiveCollapse",
 						maxWidth: 40,
 						headerClick: this.collapseFunction,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(()=>this.preloadedPhrasen.entlehnteBetriebsmittelPhrase),
+						title: Vue.computed(()=>this.$p.t('profil/entlehnteBetriebsmittel')),
 						field: "betriebsmittel",
 						headerFilter: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 0,
 					},
 					{
-						title: Vue.computed(() =>this.preloadedPhrasen.inventarnummerPhrase) ,
+						title: Vue.computed(() => this.$p.t('profil/inventarnummer')) ,
 						field: "Nummer",
 						headerFilter: true,
 						resizable: true,
 						minWidth: 200,
-						visible: true
+						visible: true,
+						responsive: 2,
 					},
 					{
-						title: Vue.computed(() =>this.preloadedPhrasen.ausgabedatum) ,
+						title: Vue.computed(() => this.$p.t('profil/ausgabedatum')) ,
 						field: "Ausgegeben_am",
 						headerFilterFunc: 'dates',
 						headerFilter: dateFilter,
 						minWidth: 200,
 						visible: true,
 						formatter:"datetime",
-						formatterParams: this.datetimeFormatterParams()
+						formatterParams: this.datetimeFormatterParams(),
+						responsive: 1,
 					},
 				],
 			},
@@ -110,11 +117,9 @@ export default {
 	methods: {
 
 		betriebsmittelTableBuilt: function () {
-			this.$refs.betriebsmittelTable.tabulator.setColumns(this.betriebsmittel_table_options.columns)
 			this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
 		},
 		zutrittsgruppenTableBuilt: function () {
-			this.$refs.zutrittsgruppenTable.tabulator.setColumns(this.zutrittsgruppen_table_options.columns)
 			this.$refs.zutrittsgruppenTable.tabulator.setData(
 				this.data.zuttritsgruppen
 			);
@@ -244,11 +249,7 @@ 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;
+			this.arePhrasesPreloaded = true;
 		});
 		//? sorts the profil Updates: pending -> accepted -> rejected
 		this.data.profilUpdates?.sort(this.sortProfilUpdates);
@@ -379,7 +380,7 @@ export default {
 			<div class="row">
 				<div class="col-12 mb-4" >
 					<core-filter-cmpt
-					v-if="preloadedPhrasen.loaded"
+					v-if="arePhrasesPreloaded"
 					@tableBuilt="betriebsmittelTableBuilt"
 					:title="$p.t('profil','entlehnteBetriebsmittel')"
 					ref="betriebsmittelTable"
@@ -389,7 +390,7 @@ export default {
 				</div>
 				<div class="col-12 mb-4" >
 					<core-filter-cmpt
-					v-if="preloadedPhrasen.loaded"
+					v-if="arePhrasesPreloaded"
 					@tableBuilt="zutrittsgruppenTableBuilt" 
 					:title="$p.t('profil','zutrittsGruppen')" 
 					ref="zutrittsgruppenTable"