update(Profil Tabulator Columns):preloads phrasen for the tabulator tables, otherwise the column titles are not displayed

This commit is contained in:
SimonGschnell
2025-07-03 15:30:02 +02:00
parent 5ddc4749fa
commit e659e8e12c
3 changed files with 73 additions and 39 deletions
@@ -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"
@@ -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>
@@ -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"