@fuentis/phoenix-ui 0.0.9-alpha.636 → 0.0.9-alpha.638

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -2009,6 +2009,8 @@ class TableCaptionComponent {
     /** Local storage keys */
     FILTER_KEY = '';
     COLUMN_KEY = '';
+    /** Live subscription to the current filter form; torn down on each rebuild. */
+    filtersValueSub;
     /**
      * When table detects that selected filter values no longer exist in data,
      * it passes the remaining valid values here so table-caption can prune its form.
@@ -2023,7 +2025,8 @@ class TableCaptionComponent {
      */
     lastSignature = '';
     ngOnChanges(changes) {
-        if (changes['filterValidValues'] && !changes['filterValidValues'].firstChange) {
+        if (changes['filterValidValues'] &&
+            !changes['filterValidValues'].firstChange) {
             const validMap = changes['filterValidValues'].currentValue;
             if (validMap)
                 this.applyValidValuesPatch(validMap);
@@ -2031,8 +2034,17 @@ class TableCaptionComponent {
         }
         if (!this.tableConfiguration)
             return;
-        this.FILTER_KEY = `filters_${this.tableConfiguration.key ?? 'table'}`;
-        this.COLUMN_KEY = `columns_${this.tableConfiguration.key ?? 'table'}`;
+        // Storage key: prefer an explicit `stateKey` (unique per table view; avoids
+        // the collisions where `key` doubles as the row-id field, e.g. two tables
+        // sharing `filters_controls`), fall back to `key`. `stateKeyPrefix` (e.g. the
+        // current user id) scopes state per user so a shared machine does not leak
+        // one user's filters/columns to another.
+        const stateBase = this.tableConfiguration.stateKey ?? this.tableConfiguration.key ?? 'table';
+        const statePrefix = this.tableConfiguration.stateKeyPrefix
+            ? `${this.tableConfiguration.stateKeyPrefix}.`
+            : '';
+        this.FILTER_KEY = `filters_${statePrefix}${stateBase}`;
+        this.COLUMN_KEY = `columns_${statePrefix}${stateBase}`;
         // Default visible columns: all non-hidden columns
         this._selectedColumns = (this.columns ?? []).filter((c) => !c?.hidden);
         // Restore columns once when config/columns arrive
@@ -2075,25 +2087,40 @@ class TableCaptionComponent {
                         ? !!f.selected
                         : t === 'range'
                             ? this.normalizeRangeInitial(f.selected, f)
-                            : f.selected ?? '';
+                            : (f.selected ?? '');
             fg.addControl(f.key, this.fb.control(initialValue));
         }
         this.filtersForm = fg;
         // 1) Restore persisted values (but only valid keys)
         this.restoreFilterState(filtersCfg);
-        // 2) Subscribe once with debounce and emit normalized payload
-        this.filtersForm.valueChanges
+        // An empty `filtersCfg` means the filter options are not built yet (they are
+        // derived from the loaded table data), NOT that the user cleared their
+        // filters. Persisting here would write an empty payload and, via
+        // persistState(), DELETE the saved state before the real config arrives on
+        // the next build — the init-order wipe. Only persist once a real filter
+        // config exists; a genuine "user cleared" is an empty value with a non-empty
+        // config and still persists (and removes) correctly.
+        const hasFilterConfig = filtersCfg.length > 0;
+        // 2) Subscribe with debounce and emit normalized payload.
+        // buildFiltersForm() runs again whenever the filter signature changes (e.g.
+        // range bounds move on a data reload), so tear down the previous form's
+        // subscription first — otherwise they accumulate for the component's whole
+        // lifetime and emit/persist in multiples.
+        this.filtersValueSub?.unsubscribe();
+        this.filtersValueSub = this.filtersForm.valueChanges
             .pipe(takeUntilDestroyed(this.dr), debounceTime(120), map((raw) => this.normalizeOutgoingPayload(raw, filtersCfg)))
             .subscribe((payload) => {
             this.applyFiltersEvent.emit(payload);
-            this.persistState(payload, this.FILTER_KEY);
+            if (hasFilterConfig)
+                this.persistState(payload, this.FILTER_KEY);
         });
         // 3) Emit initial state (normalized) once
         queueMicrotask(() => {
             const raw = this.filtersForm.getRawValue();
             const payload = this.normalizeOutgoingPayload(raw, filtersCfg);
             this.applyFiltersEvent.emit(payload);
-            this.persistState(payload, this.FILTER_KEY);
+            if (hasFilterConfig)
+                this.persistState(payload, this.FILTER_KEY);
         });
     }
     /**
@@ -2263,7 +2290,9 @@ class TableCaptionComponent {
                 continue;
             }
             if (t === 'multiselect') {
-                const arr = Array.isArray(v) ? v.filter((x) => x != null && x !== '') : [];
+                const arr = Array.isArray(v)
+                    ? v.filter((x) => x != null && x !== '')
+                    : [];
                 if (arr.length)
                     out[key] = arr;
                 continue;
@@ -2293,6 +2322,11 @@ class TableCaptionComponent {
      * NOTE:
      * - boolean-multiselect is restored into OPTION OBJECTS (for UI),
      *   even though persisted payload is boolean[].
+     * - Since `options` are rebuilt from the currently loaded table data (see
+     *   createDynamicFilters), a value selected in one context (e.g. a different
+     *   Entity in "Add link") may no longer exist in the current options. We
+     *   revalidate multiselect/dropdown selections against the current options
+     *   on every restore, so stale values don't render as broken/empty entries.
      */
     restoreFilterState(cfg) {
         const stored = localStorage.getItem(this.FILTER_KEY);
@@ -2308,25 +2342,39 @@ class TableCaptionComponent {
                 if (known.has(k))
                     patch[k] = parsed[k];
             }
+            let changed = false;
             for (const f of cfg) {
                 const t = f.type ?? 'text';
+                const options = Array.isArray(f.options) ? f.options : [];
+                const ov = f.optionValue ?? 'key';
                 if (t === 'boolean-multiselect') {
-                    // parsed payload is boolean[]; map -> option objects
+                    // parsed payload is boolean[]; map -> option objects (already validated against options)
                     patch[f.key] = this.normalizeBooleanMultiSelection(patch[f.key], f);
                     continue;
                 }
                 if (t === 'multiselect') {
                     const val = patch[f.key];
-                    if (val == null)
-                        patch[f.key] = [];
-                    else if (!Array.isArray(val))
-                        patch[f.key] = [val];
+                    const arr = val == null ? [] : Array.isArray(val) ? val : [val];
+                    const validValues = new Set(options.map((o) => o?.[ov]));
+                    const filtered = arr.filter((x) => validValues.has(x));
+                    if (filtered.length !== arr.length)
+                        changed = true;
+                    patch[f.key] = filtered;
                     continue;
                 }
                 if (t === 'checkbox') {
                     patch[f.key] = !!patch[f.key];
                     continue;
                 }
+                if (t === 'dropdown' || t === 'person-dropdown') {
+                    const val = patch[f.key];
+                    const isEmpty = val == null || val === '';
+                    const isValid = isEmpty || options.some((o) => o?.[ov] === val);
+                    if (!isValid) {
+                        patch[f.key] = '';
+                        changed = true;
+                    }
+                }
                 if (t === 'range') {
                     // persisted payload is { type:'range', min, max }; map -> [from, to]
                     const stored = patch[f.key];
@@ -2340,6 +2388,11 @@ class TableCaptionComponent {
                 }
             }
             this.filtersForm.patchValue(patch, { emitEvent: false });
+            // Persist the pruned state so stale (non-existent) values don't linger in storage.
+            if (changed) {
+                const payload = this.normalizeOutgoingPayload(this.filtersForm.getRawValue(), cfg);
+                this.persistState(payload, this.FILTER_KEY);
+            }
         }
         catch {
             // ignore invalid state
@@ -2433,7 +2486,9 @@ class TableCaptionComponent {
     /** Reset a range filter back to its full [min, max] bounds. */
     resetRangeFilter(control) {
         const [min, max] = this.rangeBounds(control);
-        this.filtersForm.get(control.key)?.setValue([min, max], { emitEvent: true });
+        this.filtersForm
+            .get(control.key)
+            ?.setValue([min, max], { emitEvent: true });
     }
     resetFilters() {
         this.filtersForm.reset({}, { emitEvent: true });
@@ -2443,7 +2498,9 @@ class TableCaptionComponent {
     persistState(state, key) {
         const isEmpty = state == null ||
             (Array.isArray(state) && state.length === 0) ||
-            (typeof state === 'object' && !Array.isArray(state) && Object.keys(state).length === 0);
+            (typeof state === 'object' &&
+                !Array.isArray(state) &&
+                Object.keys(state).length === 0);
         if (isEmpty)
             localStorage.removeItem(key);
         else
@@ -2456,7 +2513,7 @@ class TableCaptionComponent {
         const arr = Array.isArray(value) ? value : [];
         const labelField = this.getOptionLabelField(control);
         return arr
-            .map((x) => (x && typeof x === 'object' ? x[labelField] : String(x ?? '')))
+            .map((x) => x && typeof x === 'object' ? x[labelField] : String(x ?? ''))
             .filter((s) => !!s)
             .join(', ');
     }
@@ -3245,7 +3302,14 @@ class TableComponent {
                 }
             }
         }
-        this.allData = [...this.originalData];
+        // Re-apply any active filters to the refreshed dataset. Previously this
+        // reset to the full (unfiltered) originalData, so every SSE / reload dropped
+        // the user's active filters until the caption happened to re-emit — the
+        // "filters lost on reload" bug that consumers worked around app-side.
+        this.allData =
+            Object.keys(this.currentFilters).length > 0
+                ? this.getFilteredData()
+                : [...this.originalData];
         this.lastSortKey = '';
         // allow re-applying initial sort for new dataset
         this.initialSortApplied = false;
@@ -3270,8 +3334,16 @@ class TableComponent {
         if (changes['filters']) {
             this.enrichRangeFilters();
         }
-        if (this.tableConfiguration?.key) {
-            this.SORT_KEY = `sort_${this.tableConfiguration.key}`;
+        // Keep the sort key on the same scheme as filters/columns (see
+        // table-caption): honour `stateKey` (fallback `key`) and `stateKeyPrefix`
+        // so sort state neither collides across tables sharing `key` nor leaks
+        // between users on a shared machine.
+        const sortBase = this.tableConfiguration?.stateKey ?? this.tableConfiguration?.key;
+        if (sortBase) {
+            const sortPrefix = this.tableConfiguration?.stateKeyPrefix
+                ? `${this.tableConfiguration.stateKeyPrefix}.`
+                : '';
+            this.SORT_KEY = `sort_${sortPrefix}${sortBase}`;
         }
         // Build columnTypeMap for sorting normalization
         if (this.columns?.length > 0) {
@@ -8449,6 +8521,49 @@ var SimpleButtonType;
     SimpleButtonType["SPLIT"] = "split";
 })(SimpleButtonType || (SimpleButtonType = {}));
 
+/**
+ * localStorage key prefixes the data-table persists its per-view UI state under.
+ * Kept in sync with the key scheme in table-caption (filters/columns) and
+ * table.component (sort): `${prefix}${stateKeyPrefix}.${stateKey ?? key}`.
+ */
+const TABLE_STATE_PREFIXES = ['filters_', 'columns_', 'sort_'];
+/**
+ * Remove the data-table's persisted UI state (filters, selected columns, sort)
+ * from localStorage. Call this on logout so a user's saved table views do not
+ * carry over into the next login on a shared machine.
+ *
+ * @param userPrefix When the app persists state user-scoped
+ *   (`tableConfiguration.stateKeyPrefix`, e.g. the user id), pass the SAME value
+ *   to clear only that user's state — other users' saved views on this browser
+ *   stay intact. Omit to clear all persisted table state on this browser.
+ */
+function clearPersistedTableState(userPrefix) {
+    let store;
+    try {
+        store = localStorage;
+    }
+    catch {
+        return; // storage disabled / unavailable — nothing to clear
+    }
+    // Scoped keys look like `filters_<userPrefix>.<base>`; the trailing dot makes
+    // the match exact so prefix "1" never also clears user "12"'s state.
+    const scoped = userPrefix ? `${userPrefix}.` : '';
+    const doomed = [];
+    for (let i = 0; i < store.length; i++) {
+        const key = store.key(i);
+        if (!key)
+            continue;
+        for (const p of TABLE_STATE_PREFIXES) {
+            if (key.startsWith(p + scoped)) {
+                doomed.push(key);
+                break;
+            }
+        }
+    }
+    for (const key of doomed)
+        store.removeItem(key);
+}
+
 class StripHtmlSafePipe {
     transform(value) {
         if (value === null || value === undefined)
@@ -11253,5 +11368,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTypes, ActionsComponent, CardComponent, ContexObjectComponent, ControlType, GroupsFormComponent, InnerHeaderComponent, META_FORM_ASYNC_EXECUTOR, MetaFormButtonsComponent, MetaFormButtonsV2Component, MetaFormComponent, MetaFormFieldV2Component, MetaFormGroupV2Component, MetaFormService, MetaFormV2Component, MetaSubmitValidatorService, ObjectItemDialogComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusBarComponent, StatusColType, StatusHeaderComponent, StatusTooltipType, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
+export { ActionTypes, ActionsComponent, CardComponent, ContexObjectComponent, ControlType, GroupsFormComponent, InnerHeaderComponent, META_FORM_ASYNC_EXECUTOR, MetaFormButtonsComponent, MetaFormButtonsV2Component, MetaFormComponent, MetaFormFieldV2Component, MetaFormGroupV2Component, MetaFormService, MetaFormV2Component, MetaSubmitValidatorService, ObjectItemDialogComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusBarComponent, StatusColType, StatusHeaderComponent, StatusTooltipType, TableComponent, TopbarComponent, UserComponent, clearPersistedTableState, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
 //# sourceMappingURL=fuentis-phoenix-ui.mjs.map