blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-11 20:12:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

reworked localization of collapsed column headings by modifying internal tabulator logic with custom module

Browse Source
This commit is contained in:
adisposkofh
2026-05-26 14:25:22 +02:00
parent 3483146c1a
commit aeebc2a81a
8 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Profil/MitarbeiterProfil.js
+8
View File
@@ -59,6 +59,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "ui/bezeichnung",
field: "Bezeichnung",
headerFilter: true,
@@ -66,6 +67,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "lehre/organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
@@ -73,6 +75,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "global/gueltigVon",
field: "Gültig_von",
headerFilterFunc: 'dates',
@@ -84,6 +87,7 @@ export default {
formatterParams: this.datetimeFormatterParams()
},
{
title: "placeholder",
titlePhrase: "global/gueltigBis",
field: "Gültig_bis",
headerFilterFunc: 'dates',
@@ -95,6 +99,7 @@ export default {
formatterParams: this.datetimeFormatterParams()
},
{
title: "placeholder",
titlePhrase: "profil/wochenstunden",
field: "Wochenstunden",
headerFilter: true,
@@ -129,6 +134,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "profil/entlehnteBetriebsmittel",
field: "betriebsmittel",
headerFilter: true,
@@ -136,6 +142,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "profil/inventarnummer",
field: "Nummer",
headerFilter: true,
@@ -144,6 +151,7 @@ export default {
visible: true
},
{
title: "placeholder",
titlePhrase: "profil/ausgabedatum",
field: "Ausgegeben_am",
headerFilterFunc: 'dates',
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+10 -5
View File
@@ -46,21 +46,24 @@ export default {
visible: true
},
{
title: "ui/bezeichnung",
title: "placeholder",
titlePhrase: "ui/bezeichnung",
field: "Bezeichnung",
headerFilter: true,
minWidth: 200,
visible: true
},
{
title: "lehre/organisationseinheit",
title: "placeholder",
titlePhrase: "lehre/organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
minWidth: 200,
visible: true
},
{
title: "global/gueltigVon",
title: "placeholder",
titlePhrase: "global/gueltigVon",
field: "Gültig_von",
headerFilterFunc: 'dates',
headerFilter: dateFilter,
@@ -71,7 +74,8 @@ export default {
formatterParams: this.datetimeFormatterParams()
},
{
title: "global/gueltigBis",
title: "placeholder",
titlePhrase: "global/gueltigBis",
field: "Gültig_bis",
headerFilterFunc: 'dates',
headerFilter: dateFilter,
@@ -82,7 +86,8 @@ export default {
formatterParams: this.datetimeFormatterParams()
},
{
title: "profil/wochenstunden",
title: "placeholder",
titlePhrase: "profil/wochenstunden",
field: "Wochenstunden",
headerFilter: true,
minWidth: 200,
public/js/components/Cis/Profil/Profil.js
+1 -1
View File
@@ -24,7 +24,7 @@ Vue.$collapseFormatter = function (data) {
let item2 = document.createElement("div");
item2.classList.add("col-6");
item.innerHTML = "<strong class=\"collapsedColumnHeading\" tabulator-column-field=\"" + col.field + "\">...</strong>";
item.innerHTML = "<strong>" + col.title + "</strong>";
item2.innerHTML = col.value ? col.value : "-";
list.appendChild(item);
public/js/components/Cis/Profil/StudentProfil.js
+8 -4
View File
@@ -42,7 +42,8 @@ export default {
minHeight: 200,
layout: "fitColumns",
columns: [{
title: "profil/zutrittsGruppen",
title: "placeholder",
titlePhrase: "profil/zutrittsGruppen",
field: "bezeichnung"
}],
},
@@ -69,14 +70,16 @@ export default {
headerClick: this.collapseFunction,
},
{
title: "profil/entlehnteBetriebsmittel",
title: "placeholder",
titlePhrase: "profil/entlehnteBetriebsmittel",
field: "betriebsmittel",
headerFilter: true,
minWidth: 200,
visible: true
},
{
title: "profil/inventarnummer",
title: "placeholder",
titlePhrase: "profil/inventarnummer",
field: "Nummer",
headerFilter: true,
resizable: true,
@@ -84,7 +87,8 @@ export default {
visible: true
},
{
title: "profil/ausgabedatum",
title: "placeholder",
titlePhrase: "profil/ausgabedatum",
field: "Ausgegeben_am",
headerFilterFunc: 'dates',
headerFilter: dateFilter,
public/js/components/filter/Filter.js
+10 -35
View File
@@ -24,6 +24,7 @@ import collapseAutoClose from '../../directives/collapseAutoClose.js';
import moduleLayoutFitDataStretchFrozen from '../../tabulator/layouts/fitDataStretchFrozen.js';
import InternalToExternalEventBroadcastModule from "../../tabulator/customModules/InternalToExternalEventBroadcastModule.js"
import MenuExtensionModule from "../../tabulator/customModules/MenuExtensionModule.js"
import ResponsiveLayoutExtensionModule from "../../tabulator/customModules/ResponsiveLayoutExtensionModule.js"
import { debounce } from "../../helpers/DebounceHelper.js";
@@ -128,26 +129,6 @@ export const CoreFilterCmpt = {
page: false,
},
collapsedHeadingLocalizationTimer: null,
localizeCollapsedColumnHeadings:
debounce(
() => {
const columnHeadings = this.tabulator?.getLang()?.columns;
if (!columnHeadings?.length) return;
this.$refs.table
.querySelectorAll(".collapsedColumnHeading")
.forEach((collapsedColumnHeadingElement) => {
const field =
collapsedColumnHeadingElement.getAttribute(
"tabulator-column-field",
);
if (!field?.length) return;
collapsedColumnHeadingElement.innerHTML =
columnHeadings[field];
});
}, 200)
,
};
},
computed: {
@@ -258,10 +239,6 @@ export const CoreFilterCmpt = {
if (!this.$props.tabulatorOptions.locale) return;
this.tabulator.setLocale(newSelectedLanguage);
if (this.$props.tabulatorOptions.responsiveLayoutCollapseFormatter) {
this.localizeCollapsedColumnHeadings();
}
},
},
},
@@ -349,7 +326,8 @@ export const CoreFilterCmpt = {
// Start the tabulator with the build options
this.tabulator = new Tabulator(this.$refs.table, {
...tabulatorOptions,
debugInvalidOptions: false,
// todo: remove comment
// debugInvalidOptions: false,
});
// If event handlers have been provided
if (Array.isArray(this.tabulatorEvents) && this.tabulatorEvents.length > 0)
@@ -407,16 +385,8 @@ export const CoreFilterCmpt = {
this.filterActive = filters.length > 0;
this.$emit("headerFilterOn", this.filterActive);
});
this.tabulator.on("renderComplete", () => {
if (tabulatorOptions.locale && tabulatorOptions.responsiveLayoutCollapseFormatter && this.tableBuilt) {
this.localizeCollapsedColumnHeadings();
}
});
this.tabulator.on("layoutRefreshed", () => {
if (tabulatorOptions.locale && tabulatorOptions.responsiveLayoutCollapseFormatter) {
this.localizeCollapsedColumnHeadings();
}
this.tabulator.on("localized", () => {
this.tabulator.modules.responsiveLayout.generateCollapsedContent();
});
},
async configureTabulatorLocalizations(tabulatorOptions) {
@@ -491,6 +461,10 @@ export const CoreFilterCmpt = {
}
});
if (!Object.keys(phrasesGroupedByCategoryRequestParam).length) {
return tabulatorOptions;
}
const phrasesResponse = await this.$api.call(
ApiPhrases.getPhrases(phrasesGroupedByCategoryRequestParam),
);
@@ -857,6 +831,7 @@ export const CoreFilterCmpt = {
Tabulator.registerModule(InternalToExternalEventBroadcastModule);
Tabulator.registerModule(MenuExtensionModule);
Tabulator.registerModule(ResponsiveLayoutExtensionModule);
},
mounted() {
this.initTabulator().then(() => {
public/js/tabulator/customModules/InternalToExternalEventBroadcastModule.js
+5 -4
View File
@@ -13,10 +13,11 @@ export default class InternalToExternalEventBroadcastModule extends Module {
super(table);
this.eventsToBroadcast = [
{
internal: "layout-refreshed",
external: null,
},
// example event
// {
// internal: "layout-refreshed",
// external: null,
// },
];
}
public/js/tabulator/customModules/MenuExtensionModule.js
+1 -1
View File
@@ -9,7 +9,7 @@ export default class MenuExtensionModule extends Menu {
}
loadMenu(e, component, menu, parentEl, parentPopup){
const isLocalizationEnabled = !!component.table.options.locale;
const isLocalizationEnabled = component.table.options.locale && component.table.options.locale !== "default";
const menuItemTranslations = component.table.getLang().menuItems;
if (isLocalizationEnabled && menuItemTranslations) {
menu = menu.map((menuItem) => {
public/js/tabulator/customModules/ResponsiveLayoutExtensionModule.js
+27
View File
@@ -0,0 +1,27 @@
import ResponsiveLayout from "../../../../vendor/olifolkerd/tabulator5/src/js/modules/ResponsiveLayout/ResponsiveLayout.js";
export default class ResponsiveLayoutExtensionModule extends ResponsiveLayout {
static moduleName = "responsiveLayout";
static moduleInitNumber = 1;
constructor(table) {
super(table);
}
generateCollapsedRowData(row) {
let result = super.generateCollapsedRowData(row)
const isLocalizationEnabled = this.table.options.locale && this.table.options.locale !== "default";
const columnHeadingTranslations = this.table?.getLang()?.columns;
if (isLocalizationEnabled && columnHeadingTranslations) {
result = result.map((column) => {
if (columnHeadingTranslations[column.field]) {
column.title = columnHeadingTranslations[column.field];
}
return column;
});
}
return result;
}
}