@acorex/platform 20.9.6 → 20.9.8

package/fesm2022/acorex-platform-layout-components.mjs

@@ -55,7 +55,7 @@ import { AXDataTableModule } from '@acorex/components/data-table';
 import * as i3$4 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig } from '@acorex/platform/core';
+import { setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, AXPDataSourceQueryService, chordToKbdItemKeys, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig } from '@acorex/platform/core';
 import { AXPopupService } from '@acorex/components/popup';
 import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import * as i2$5 from '@acorex/components/select-box';
@@ -69,6 +69,7 @@ import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, AXP_PLATFORM_CONFIG_TOKEN } from '@acorex/platform/common';
 import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex/platform/layout/entity-contracts';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, filter, BehaviorSubject, timer, takeUntil } from 'rxjs';
 import * as i1$7 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
@@ -2887,6 +2888,7 @@ class AXPQueryFiltersComponent {
         this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
         this.destroyRef = inject(DestroyRef);
         this.elementRef = inject((ElementRef));
+        this.dataSourceQueryService = inject(AXPDataSourceQueryService);
         this.filterFocusShortcutKeys = chordToKbdItemKeys('ctrl+f');
         this.filtersDefinitions = input([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : /* istanbul ignore next */ []));
         this.initialFilters = input([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
@@ -2906,6 +2908,10 @@ class AXPQueryFiltersComponent {
         this.filterContextPath$ = new Subject();
         this.filterContextPathSnapshotReady = false;
         this.previousFilterContextSnapshot = {};
+        /** Committed context entry for the filter being edited; restored when popover closes without Apply. */
+        this.editingContextSnapshot = null;
+        /** Bumped on locale change so filter chip labels re-resolve i18n keys. */
+        this.translationEpoch = signal(0, ...(ngDevMode ? [{ debugName: "translationEpoch" }] : /* istanbul ignore next */ []));
         this.inlineFilters = () => {
             return this.filtersDefinitions().filter((f) => f.filterType.inline &&
                 !this.filterOperatorMiddleware
@@ -2931,9 +2937,22 @@ class AXPQueryFiltersComponent {
                 }
             }
             if (filter.widget?.type === 'select-editor' || filter.widget?.type === 'select-filter') {
-                const dataSource = filter.widget.options?.['dataSource'];
-                const textField = filter.widget.options?.['textField'];
-                const valueField = filter.widget.options?.['valueField'];
+                const rawDataSource = filter.widget.options?.['dataSource'];
+                const textField = filter.widget.options?.['textField'] ?? 'title';
+                const valueField = filter.widget.options?.['valueField'] ?? 'id';
+                if (typeof rawDataSource === 'string') {
+                    const found = await this.dataSourceQueryService.queryByKey(rawDataSource, val, {
+                        valueField,
+                    });
+                    if (Array.isArray(found)) {
+                        return found.map((data) => String(get(data, textField) ?? '')).join(', ');
+                    }
+                    if (found) {
+                        return String(get(found, textField) ?? val);
+                    }
+                    return String(val ?? '');
+                }
+                const dataSource = rawDataSource;
                 if (dataSource?.config?.byKey) {
                     if (Array.isArray(val)) {
                         const results = await Promise.all(val.map((v) => dataSource.config.byKey(v)));
@@ -3076,17 +3095,24 @@ class AXPQueryFiltersComponent {
         this.#updateTagsEffect = effect(() => {
             const filters = this.selectedFilters();
             const context = this.context();
+            const editingField = this.activeFilter()?.field;
+            void this.translationEpoch();
             Promise.all(filters.map(async (filter) => {
-                const contextField = this.resolveFilterContextField(filter);
-                const val = context[contextField]?.value;
-                const displayText = context[contextField]?.displayText;
+                const isEditingThisFilter = editingField === filter.field;
+                const committedEntry = this.getCommittedFilterEntry(filter, context, editingField);
+                const val = committedEntry?.value ?? filter.value;
+                const displayText = isEditingThisFilter ? undefined : committedEntry?.displayText;
                 const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
-                const displayValue = this.formatFilterDisplayValue(rawDisplay);
+                const displayValue = await this.formatFilterDisplayValue(rawDisplay);
+                const operatorType = committedEntry?.operation?.type ?? filter.operator?.type;
+                const operatorKey = ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
+                const title = await this.translateLabel(filter.title);
+                const operator = operatorKey ? await this.translateLabel(operatorKey) : '';
                 return {
                     ...filter,
                     readOnly: filter.readOnly === true ||
                         filter.widget?.options?.['readonly'] === true,
-                    query: `${this.translate.translateSync(filter.title)} ${this.translate.translateSync(this.getActiveOperator(filter)) || ''} '${displayValue}'`,
+                    query: `${title} ${operator} '${displayValue}'`.trim(),
                 };
             })).then((results) => {
                 this.asyncTags.set(results.filter((r) => !r.hidden));
@@ -3217,6 +3243,9 @@ class AXPQueryFiltersComponent {
                 },
             ],
         });
+        this.translate.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.translationEpoch.update((epoch) => epoch + 1);
+        });
     }
     convertQueriesToDefinitions(queries) {
         const definitions = this.filtersDefinitions();
@@ -3262,6 +3291,7 @@ class AXPQueryFiltersComponent {
         if (this.isFilterDisabled(field)) {
             return;
         }
+        this.captureEditingContextSnapshot(field);
         this.activeFilter.set(field);
         this.tagBox()?.inputValue.set('');
     }
@@ -3298,13 +3328,19 @@ class AXPQueryFiltersComponent {
             const contextField = this.resolveFilterContextField(reservedFitler);
             const selectedFiltersFields = this.selectedFilters().map((f) => f.field);
             const context = this.context();
-            const appliedValue = context[contextField]?.value ?? context[contextField];
+            const appliedEntry = context[contextField];
+            const appliedValue = appliedEntry?.value ?? appliedEntry;
+            const appliedOperator = appliedEntry?.operation ?? reservedFitler.operator;
             if (selectedFiltersFields.includes(field)) {
-                this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: appliedValue } : f)));
+                this.selectedFilters.update((prev) => prev.map((f) => f.field === field ? { ...f, value: appliedValue, operator: appliedOperator } : f));
             }
             else {
-                this.selectedFilters.update((prev) => [...prev, { ...reservedFitler, value: appliedValue }]);
+                this.selectedFilters.update((prev) => [
+                    ...prev,
+                    { ...reservedFitler, value: appliedValue, operator: appliedOperator },
+                ]);
             }
+            this.editingContextSnapshot = null;
             this.activeFilter.set(null);
             this.popover()?.close();
         }
@@ -3349,6 +3385,7 @@ class AXPQueryFiltersComponent {
         if (item.field === 'all') {
             return;
         }
+        this.captureEditingContextSnapshot(item);
         this.activeFilter.set(item);
         this.popover()?.open();
     }
@@ -3437,6 +3474,7 @@ class AXPQueryFiltersComponent {
         }
     }
     handlePopoverClosed(e) {
+        this.restoreEditingContextSnapshot();
         this.activeFilter.set(null);
     }
     onPopoverOpened(e) {
@@ -3468,21 +3506,60 @@ class AXPQueryFiltersComponent {
     /**
      * Resolves filter chip labels; translates i18n keys stored in select `displayText` or datasource titles.
      */
-    formatFilterDisplayValue(value) {
+    async formatFilterDisplayValue(value) {
         if (value == null || value === '') {
             return '';
         }
         const parts = Array.isArray(value) ? value : [value];
-        return parts
-            .map((part) => {
+        const labels = await Promise.all(parts.map(async (part) => {
             const text = String(part ?? '').trim();
             if (!text) {
                 return '';
             }
-            return text.startsWith('@') ? this.translate.translateSync(text) || text : text;
-        })
-            .filter(Boolean)
-            .join(', ');
+            return this.translateLabel(text);
+        }));
+        return labels.filter(Boolean).join(', ');
+    }
+    async translateLabel(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return '';
+        }
+        if (trimmed.startsWith('@')) {
+            return (await this.translate.translateAsync(trimmed)) || trimmed;
+        }
+        return trimmed;
+    }
+    captureEditingContextSnapshot(filter) {
+        const contextField = this.resolveFilterContextField(filter);
+        const context = this.context();
+        this.editingContextSnapshot = {
+            contextField,
+            entry: cloneDeep(context[contextField]),
+        };
+    }
+    restoreEditingContextSnapshot() {
+        const snapshot = this.editingContextSnapshot;
+        if (!snapshot) {
+            return;
+        }
+        const { contextField, entry } = snapshot;
+        this.context.update((prev) => ({
+            ...prev,
+            [contextField]: cloneDeep(entry),
+        }));
+        this.editingContextSnapshot = null;
+    }
+    /**
+     * Returns the committed filter context entry (snapshot while editing, live context otherwise).
+     */
+    getCommittedFilterEntry(filter, context, editingField) {
+        const contextField = this.resolveFilterContextField(filter);
+        const snapshot = this.editingContextSnapshot;
+        if (editingField === filter.field && snapshot?.contextField === contextField) {
+            return snapshot.entry;
+        }
+        return context[contextField];
     }
     createExpressionScope(filtersContext) {
         const base = (filtersContext ?? {});