diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js index 2df32d041..919132229 100644 --- a/public/js/components/filter/Filter.js +++ b/public/js/components/filter/Filter.js @@ -215,23 +215,9 @@ export const CoreFilterCmpt = { fieldIdsForVisibilty() { if (!this.tableBuilt) return []; - const localizedColumnTitles = this.tabulator.getLang().columns; - const isTabulatorLocalized = !!this.$props.tabulatorOptions.locale; - return this.tabulator - .getColumns() - .filter((col) => { - let def = col.getDefinition(); - let title = - isTabulatorLocalized && localizedColumnTitles[def.field] - ? localizedColumnTitles[def.field] - : def.title; - return ( - !def.frozen && - title && - def.formatter != "responsiveCollapse" - ); - }) - .map((col) => col.getField()); + return this.$props.tabulatorOptions?.columns + ?.filter((column) => column.formatter !== "responsiveCollapse") + .map((column) => column.field) ?? []; }, idExtra() { if (!this.uuid) return ""; diff --git a/public/js/components/filter/Filter/TablePresets.js b/public/js/components/filter/Filter/TablePresets.js index 79f1b3e91..a8a0c8e4c 100644 --- a/public/js/components/filter/Filter/TablePresets.js +++ b/public/js/components/filter/Filter/TablePresets.js @@ -34,6 +34,7 @@ export default { presetInfo: null, newPreset: null, newPresetName: "", + presetIndexBeingApplied: null, }; }, computed: { @@ -161,6 +162,9 @@ export default { }, }, methods: { + getPresetIndex() { + return this.presetIndexBeingApplied; + }, async showPresetInfo(preset) { let shouldUpdatePresetInfo; if (!this.presetInfo) { @@ -393,14 +397,22 @@ export default { this.fetchCustomUserTabulatorPresets(); } }, - async applyPreset(preset) { - preset = this.syncPresetWithConfig(preset); - window.localStorage["tabulatorPreset-" + this.$props.presetsId] = - preset.id ? "custom:" + preset.id : "general:" + preset.name; + async applyPreset(preset, index) { + this.presetIndexBeingApplied = index; - this.$props.tabulator.modules.tablePresets.applyPreset(preset); - - this.$emit("tablePresetApplied", { preset }); + // workaround for updating DOM and displaying preset-loading spinner + // conventional use of $nextTick ineffective + setTimeout(() => { + preset = this.syncPresetWithConfig(preset); + window.localStorage["tabulatorPreset-" + this.$props.presetsId] = + preset.id ? "custom:" + preset.id : "general:" + preset.name; + + this.$props.tabulator.modules.tablePresets.applyPreset(preset); + + this.$emit("tablePresetApplied", { preset }); + + this.presetIndexBeingApplied = null; + }, 50); }, async fetchCustomUserTabulatorPresets() { let tabulatorPresetsResponse = await this.$api.call( @@ -453,7 +465,7 @@ export default { if (!preset) return; - this.applyPreset(preset); + this.applyPreset(preset, null); }, }, async created() { @@ -467,8 +479,19 @@ export default {
{{ $p.t("tabulator_presets/table_presets") }}
-
-
{{ preset.name }}
+
+
+ {{ preset.name }} +
+
+ Loading... +
+
+
diff --git a/public/js/tabulator/customModules/TablePresetsModule.js b/public/js/tabulator/customModules/TablePresetsModule.js index cb67e91fd..644514dc5 100644 --- a/public/js/tabulator/customModules/TablePresetsModule.js +++ b/public/js/tabulator/customModules/TablePresetsModule.js @@ -34,10 +34,21 @@ export default class TablePresetsModule extends Module { if (preset.headerFilters) { Object.entries(preset.headerFilters).forEach( ([columnField, filterValue]) => { - this.table.setHeaderFilterValue( - columnField, - filterValue, - ); + this.table.setHeaderFilterValue(columnField, filterValue); + + // double checking if filter inputs are filled in due to issues with custom header filters + const headerFilterInputElement = + this.table.columnManager.columns + .find((column) => column.field === columnField) + ?.element.querySelector( + ".tabulator-header-filter input", + ); + if ( + headerFilterInputElement && + headerFilterInputElement.value !== filterValue + ) { + headerFilterInputElement.value = filterValue; + } }, ); }