ngx-dynamic-entity 1.4.0 → 1.6.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, ChangeDetectorRef, Optional, Inject, EventEmitter, computed, HostListener, ViewChildren, Output, ElementRef, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormArray, FormGroup } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, parseFieldRef, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue } from '@dynamic-entity/core';
 export { formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, isObservable, firstValueFrom } from 'rxjs';
@@ -4096,12 +4096,20 @@ class DynamicFormComponent {
         this.statusSub?.unsubscribe();
         this.selectionSub?.unsubscribe();
     }
-    setActiveTab(tabId) {
+    /**
+     * `focusPanel: false` is for a caller that is about to focus something more specific.
+     *
+     * Activating a tab moves focus into its panel, which is right for a keyboard user pressing
+     * a tab. A quick-jump also switches tabs, but then focuses the field it was aiming at — and
+     * the panel focus runs on `requestAnimationFrame`, after `afterNextRender`, so it landed
+     * second and took the focus back every time. Saying so is better than out-timing it.
+     */
+    setActiveTab(tabId, options) {
         const changed = this.activeTab() !== tabId;
         if (changed)
             this.activeTabChange.emit(tabId);
         this.activeTab.set(tabId);
-        if (changed)
+        if (changed && options?.focusPanel !== false)
             this.focusActivePanel();
         const parent = findTab(this.tabs, tabId);
         if (parent?.children?.length) {
@@ -4111,10 +4119,10 @@ class DynamicFormComponent {
             this.activeSubTab.set('');
         }
     }
-    setActiveSubTab(subTabId) {
+    setActiveSubTab(subTabId, options) {
         const changed = this.activeSubTab() !== subTabId;
         this.activeSubTab.set(subTabId);
-        if (changed)
+        if (changed && options?.focusPanel !== false)
             this.focusActivePanel();
     }
     getFieldSpan(field) {
@@ -4132,12 +4140,19 @@ class DynamicFormComponent {
      */
     isFieldReadonly(field) {
         return (this.readonly ||
+            // `permissions.edit` gated the Save button and nothing else, so a role without edit
+            // rights received a fully editable form: it could type into every field, and only
+            // discovered the record was not theirs to change when no Save button appeared. The
+            // permission means the record may not be edited, so the fields say so.
+            !this.permissions.canEdit ||
             !!field.readonly ||
             this.readOnlyFields.includes(field.id) ||
             this.isFieldLocked(field));
     }
     toggleFieldLock(field) {
-        if (!field.criticalField || this.readonly)
+        // Unlocking is an edit. Without the permission check a viewer could open the lock on a
+        // critical field, which is the one control that exists to make editing deliberate.
+        if (!field.criticalField || this.readonly || !this.permissions.canEdit)
             return;
         const next = new Set(this.unlockedFields());
         if (next.has(field.id))
@@ -4411,9 +4426,8 @@ class DynamicFormComponent {
      * `flattenFormValues` keys by bare id, so one of the two silently wins and the rule reads
      * whichever landed there.
      *
-     * `validateConfig` catches this for `showWhen` and cascade parents, which live in the
-     * config. Rules do not: they arrive as a separate `@Input`, so the config alone cannot be
-     * checked for them and this is the only place both are in hand.
+     * `validateConfig({ rules })` catches this statically. The check here remains because
+     * consumers that never call the validator still get a signal in development.
      */
     warnAmbiguousRuleReferences() {
         if (!isDevMode() || !this.rules?.length || !this.config)
@@ -4434,14 +4448,18 @@ class DynamicFormComponent {
                     referenced.add(target.id);
             }
         }
-        for (const id of referenced) {
+        for (const raw of referenced) {
+            const parsed = parseFieldRef(raw);
+            if (parsed.kind === 'ref')
+                continue;
+            const id = parsed.value;
             const scopes = ambiguous.get(id);
             if (!scopes || DynamicFormComponent.warnedAmbiguousIds.has(id))
                 continue;
             DynamicFormComponent.warnedAmbiguousIds.add(id);
             console.warn(`[ngx-dynamic-entity] A rule references field "${id}", which is defined in ${scopes.join(' and ')}. ` +
-                `Rules address a field by bare id, so the rule will read whichever one the form finds first. ` +
-                `Give one of them a distinct id.`);
+                `A bare id cannot say which one is meant, so the rule will read whichever the form finds first. ` +
+                `Name it by path instead, as [${scopes[0]}.${id}].`);
         }
     }
     static warnedAmbiguousIds = new Set();
@@ -4643,6 +4661,13 @@ class DynamicFormComponent {
     getControl(fieldId, currentTabId) {
         if (!this.form)
             return null;
+        // A bracketed path names exactly one control, and the form nests by tab exactly as the
+        // path does — so `form.get('work.address')` walks straight to it. Anything that names a
+        // field can therefore use a path: `showWhen` keys, `patchOnTrue` mappings and `autoPatch`
+        // targets, not only rules.
+        const parsed = parseFieldRef(fieldId);
+        if (parsed.kind === 'ref')
+            return this.form.get(parsed.value);
         if (currentTabId) {
             const tabGrp = this.getTabGroup(currentTabId);
             const ctrl = tabGrp?.get(fieldId);
@@ -4836,6 +4861,7 @@ class DynamicRecordFormComponent {
     sectionSave = new EventEmitter();
     dynamicFormComp;
     rulesEvaluation = inject(RulesEvaluationService);
+    rbacService = inject(RbacService);
     host = inject(ElementRef);
     injector = inject(Injector);
     currentData = signal({}, ...(ngDevMode ? [{ debugName: "currentData" }] : /* istanbul ignore next */ []));
@@ -4865,9 +4891,21 @@ class DynamicRecordFormComponent {
     dismissInfoBanner(fieldId) {
         this.dismissed.set(new Set(this.dismissed()).add(fieldId));
     }
+    /**
+     * Whether the current roles may edit this record.
+     *
+     * `userRoles` was declared as an input here and then read by nothing at all — this
+     * component computed no permissions of any kind, so the record view was fully editable
+     * for every role while the plain form at least hid its Save button. Cached on the same
+     * terms as the sibling component: it depends only on `config` and `userRoles`.
+     */
+    permissionsCache = null;
+    get permissions() {
+        return (this.permissionsCache ??= this.rbacService.getPermissions(this.config, this.userRoles));
+    }
     /** True when nothing in the record may be edited. */
     get recordReadOnly() {
-        return this.readonly || this.isReadOnly;
+        return this.readonly || this.isReadOnly || !this.permissions.canEdit;
     }
     // ─── Inline array-row editing ───────────────────────────────────────────────
     /**
@@ -5079,6 +5117,11 @@ class DynamicRecordFormComponent {
      * after the first keystroke.
      */
     ngOnChanges(changes) {
+        // Permissions depend on these two and nothing else; a stale cache would keep a record
+        // editable after a role switch.
+        if (changes['config'] || changes['userRoles']) {
+            this.permissionsCache = null;
+        }
         if (changes['initialData'] || changes['config']) {
             this.originalBaseline.set({ ...(this.initialData ?? {}) });
             this.currentData.set({ ...(this.initialData ?? {}) });
@@ -5259,12 +5302,14 @@ class DynamicRecordFormComponent {
         const location = this.locateField(fieldId);
         if (!location)
             return;
-        this.dynamicFormComp?.setActiveTab(location.tabId);
+        // The panel must not take the focus back: this jump is going to focus the field itself.
+        this.dynamicFormComp?.setActiveTab(location.tabId, { focusPanel: false });
         // `setActiveTab` resets to a tab's first child, so the sub-tab has to be selected after
         // it, not before. Without this the walk found sub-tab fields and then rendered the wrong
         // panel, so the element the callback below looks for never existed.
-        if (location.subTabId)
-            this.dynamicFormComp?.setActiveSubTab(location.subTabId);
+        if (location.subTabId) {
+            this.dynamicFormComp?.setActiveSubTab(location.subTabId, { focusPanel: false });
+        }
         afterNextRender(() => {
             // The field id comes from config, so it never goes into a selector string: no
             // escaping to get wrong, and no need for `CSS.escape`, which jsdom and older