diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index 55a52b5c3..ed63850c7 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -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', diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js index 78dc53ffc..8670a2808 100644 --- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js @@ -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, diff --git a/public/js/components/Cis/Profil/Profil.js b/public/js/components/Cis/Profil/Profil.js index 5e656da77..da205816d 100644 --- a/public/js/components/Cis/Profil/Profil.js +++ b/public/js/components/Cis/Profil/Profil.js @@ -24,7 +24,7 @@ Vue.$collapseFormatter = function (data) { let item2 = document.createElement("div"); item2.classList.add("col-6"); - item.innerHTML = "..."; + item.innerHTML = "" + col.title + ""; item2.innerHTML = col.value ? col.value : "-"; list.appendChild(item); diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index ee7654b86..f448d01b1 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -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, diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js index 1b15666a9..77ad648bd 100644 --- a/public/js/components/filter/Filter.js +++ b/public/js/components/filter/Filter.js @@ -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(() => { diff --git a/public/js/tabulator/customModules/InternalToExternalEventBroadcastModule.js b/public/js/tabulator/customModules/InternalToExternalEventBroadcastModule.js index 6bbb58d13..e4d0b2811 100644 --- a/public/js/tabulator/customModules/InternalToExternalEventBroadcastModule.js +++ b/public/js/tabulator/customModules/InternalToExternalEventBroadcastModule.js @@ -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, + // }, ]; } diff --git a/public/js/tabulator/customModules/MenuExtensionModule.js b/public/js/tabulator/customModules/MenuExtensionModule.js index 18df92e3d..883e82aeb 100644 --- a/public/js/tabulator/customModules/MenuExtensionModule.js +++ b/public/js/tabulator/customModules/MenuExtensionModule.js @@ -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) => { diff --git a/public/js/tabulator/customModules/ResponsiveLayoutExtensionModule.js b/public/js/tabulator/customModules/ResponsiveLayoutExtensionModule.js new file mode 100644 index 000000000..c0e66cff0 --- /dev/null +++ b/public/js/tabulator/customModules/ResponsiveLayoutExtensionModule.js @@ -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; + } +}