@webiny/app-admin 6.3.0 → 6.4.0-beta.0

package/features/formModel/FocusManager.js

@@ -1,109 +1,83 @@
 import { isObjectField } from "./ObjectField.js";
 import { LayoutBuilderFactory } from "./LayoutBuilderFactory.js";
-export class FocusManager {
-  constructor(_fields) {
-    this._fields = _fields;
-  }
-  buildFocusPath(name, layout) {
-    const segments = name.split(".");
-    return this.walkLayout(layout, segments, this._fields);
-  }
-  walkLayout(layout, segments, fieldScope) {
-    const target = segments[0];
-    for (const node of layout) {
-      switch (node.type) {
-        case "row":
-          {
-            if (!node.fieldIds.includes(target)) {
-              break;
-            }
-            return this.diveIntoField(target, segments, fieldScope);
-          }
-        case "object":
-          {
-            if (node.fieldName !== target) {
-              break;
-            }
-            return this.diveIntoObjectNode(node, segments, fieldScope);
-          }
-        case "tabs":
-          {
-            const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);
-            for (const tab of node.tabs) {
-              const result = this.walkLayout(tab.layout, segments, fieldScope);
-              if (result !== null) {
-                return [{
-                  tabKey,
-                  tabId: tab.id
-                }, ...result];
-              }
-            }
-            break;
-          }
-      }
-    }
-    return null;
-  }
-  diveIntoField(fieldName, segments, fieldScope) {
-    if (segments.length === 1) {
-      return [];
-    }
-    const field = fieldScope.get(fieldName);
-    if (!field || !isObjectField(field)) {
-      return [];
+class FocusManager {
+    constructor(_fields){
+        this._fields = _fields;
     }
-    const childScope = this.resolveChildScope(field, segments);
-    if (!childScope) {
-      return [];
+    buildFocusPath(name, layout) {
+        const segments = name.split(".");
+        return this.walkLayout(layout, segments, this._fields);
     }
-    const inner = field.getInnerLayout();
-    if (!inner) {
-      return [];
-    }
-    return this.walkLayout(inner, childScope.segments, childScope.children);
-  }
-  diveIntoObjectNode(node, segments, fieldScope) {
-    if (segments.length === 1) {
-      return [];
-    }
-    const field = fieldScope.get(node.fieldName);
-    if (!field || !isObjectField(field)) {
-      return [];
+    walkLayout(layout, segments, fieldScope) {
+        const target = segments[0];
+        for (const node of layout)switch(node.type){
+            case "row":
+                if (!node.fieldIds.includes(target)) break;
+                return this.diveIntoField(target, segments, fieldScope);
+            case "object":
+                if (node.fieldName !== target) break;
+                return this.diveIntoObjectNode(node, segments, fieldScope);
+            case "tabs":
+                {
+                    const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);
+                    for (const tab of node.tabs){
+                        const result = this.walkLayout(tab.layout, segments, fieldScope);
+                        if (null !== result) return [
+                            {
+                                tabKey,
+                                tabId: tab.id
+                            },
+                            ...result
+                        ];
+                    }
+                    break;
+                }
+        }
+        return null;
     }
-    const childScope = this.resolveChildScope(field, segments);
-    if (!childScope) {
-      return [];
+    diveIntoField(fieldName, segments, fieldScope) {
+        if (1 === segments.length) return [];
+        const field = fieldScope.get(fieldName);
+        if (!field || !isObjectField(field)) return [];
+        const childScope = this.resolveChildScope(field, segments);
+        if (!childScope) return [];
+        const inner = field.getInnerLayout();
+        if (!inner) return [];
+        return this.walkLayout(inner, childScope.segments, childScope.children);
     }
-    const inner = Array.isArray(node.inner) ? node.inner : field.activeTemplateId ? node.inner[field.activeTemplateId] ?? null : null;
-    if (!inner) {
-      const stored = field.getInnerLayout();
-      if (!stored) {
-        return [];
-      }
-      return this.walkLayout(stored, childScope.segments, childScope.children);
+    diveIntoObjectNode(node, segments, fieldScope) {
+        if (1 === segments.length) return [];
+        const field = fieldScope.get(node.fieldName);
+        if (!field || !isObjectField(field)) return [];
+        const childScope = this.resolveChildScope(field, segments);
+        if (!childScope) return [];
+        const inner = Array.isArray(node.inner) ? node.inner : field.activeTemplateId ? node.inner[field.activeTemplateId] ?? null : null;
+        if (!inner) {
+            const stored = field.getInnerLayout();
+            if (!stored) return [];
+            return this.walkLayout(stored, childScope.segments, childScope.children);
+        }
+        return this.walkLayout(inner, childScope.segments, childScope.children);
     }
-    return this.walkLayout(inner, childScope.segments, childScope.children);
-  }
-  resolveChildScope(field, segments) {
-    const nextSegment = segments[1];
-    if (field.isList) {
-      const index = parseInt(nextSegment, 10);
-      if (!isNaN(index)) {
-        const item = field.items[index];
-        if (!item) {
-          return null;
+    resolveChildScope(field, segments) {
+        const nextSegment = segments[1];
+        if (field.isList) {
+            const index = parseInt(nextSegment, 10);
+            if (!isNaN(index)) {
+                const item = field.items[index];
+                if (!item) return null;
+                return {
+                    segments: segments.slice(2),
+                    children: item.children
+                };
+            }
         }
         return {
-          segments: segments.slice(2),
-          children: item.children
+            segments: segments.slice(1),
+            children: field.children
         };
-      }
     }
-    return {
-      segments: segments.slice(1),
-      children: field.children
-    };
-  }
 }
+export { FocusManager };
 
 //# sourceMappingURL=FocusManager.js.map

package/features/formModel/FocusManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["isObjectField","LayoutBuilderFactory","FocusManager","constructor","_fields","buildFocusPath","name","layout","segments","split","walkLayout","fieldScope","target","node","type","fieldIds","includes","diveIntoField","fieldName","diveIntoObjectNode","tabKey","id","tabsNodeKey","tab","tabs","result","tabId","length","field","get","childScope","resolveChildScope","inner","getInnerLayout","children","Array","isArray","activeTemplateId","stored","nextSegment","isList","index","parseInt","isNaN","item","items","slice"],"sources":["FocusManager.ts"],"sourcesContent":["import { isObjectField } from \"./ObjectField.js\";\nimport { LayoutBuilderFactory } from \"./LayoutBuilderFactory.js\";\nimport type { IField, IObjectField, LayoutNode, IObjectNode } from \"./abstractions.js\";\n\nexport interface TabActivation {\n    tabKey: string;\n    tabId: string;\n}\n\nexport class FocusManager {\n    constructor(private _fields: Map<string, IField>) {}\n\n    buildFocusPath(name: string, layout: LayoutNode[]): TabActivation[] | null {\n        const segments = name.split(\".\");\n        return this.walkLayout(layout, segments, this._fields);\n    }\n\n    private walkLayout(\n        layout: LayoutNode[],\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        const target = segments[0];\n\n        for (const node of layout) {\n            switch (node.type) {\n                case \"row\": {\n                    if (!node.fieldIds.includes(target)) {\n                        break;\n                    }\n                    return this.diveIntoField(target, segments, fieldScope);\n                }\n                case \"object\": {\n                    if (node.fieldName !== target) {\n                        break;\n                    }\n                    return this.diveIntoObjectNode(node, segments, fieldScope);\n                }\n                case \"tabs\": {\n                    const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);\n                    for (const tab of node.tabs) {\n                        const result = this.walkLayout(tab.layout, segments, fieldScope);\n                        if (result !== null) {\n                            return [{ tabKey, tabId: tab.id }, ...result];\n                        }\n                    }\n                    break;\n                }\n            }\n        }\n        return null;\n    }\n\n    private diveIntoField(\n        fieldName: string,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = field.getInnerLayout();\n        if (!inner) {\n            return [];\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private diveIntoObjectNode(\n        node: IObjectNode,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(node.fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = Array.isArray(node.inner)\n            ? node.inner\n            : field.activeTemplateId\n              ? (node.inner[field.activeTemplateId] ?? null)\n              : null;\n        if (!inner) {\n            const stored = field.getInnerLayout();\n            if (!stored) {\n                return [];\n            }\n            return this.walkLayout(stored, childScope.segments, childScope.children);\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private resolveChildScope(\n        field: IObjectField,\n        segments: string[]\n    ): { segments: string[]; children: Map<string, IField> } | null {\n        const nextSegment = segments[1];\n        if (field.isList) {\n            const index = parseInt(nextSegment, 10);\n            if (!isNaN(index)) {\n                const item = field.items[index];\n                if (!item) {\n                    return null;\n                }\n                return { segments: segments.slice(2), children: item.children };\n            }\n        }\n        return { segments: segments.slice(1), children: field.children };\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/FocusManager.js","sources":["../../../src/features/formModel/FocusManager.ts"],"sourcesContent":["import { isObjectField } from \"./ObjectField.js\";\nimport { LayoutBuilderFactory } from \"./LayoutBuilderFactory.js\";\nimport type { IField, IObjectField, LayoutNode, IObjectNode } from \"./abstractions.js\";\n\nexport interface TabActivation {\n    tabKey: string;\n    tabId: string;\n}\n\nexport class FocusManager {\n    constructor(private _fields: Map<string, IField>) {}\n\n    buildFocusPath(name: string, layout: LayoutNode[]): TabActivation[] | null {\n        const segments = name.split(\".\");\n        return this.walkLayout(layout, segments, this._fields);\n    }\n\n    private walkLayout(\n        layout: LayoutNode[],\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        const target = segments[0];\n\n        for (const node of layout) {\n            switch (node.type) {\n                case \"row\": {\n                    if (!node.fieldIds.includes(target)) {\n                        break;\n                    }\n                    return this.diveIntoField(target, segments, fieldScope);\n                }\n                case \"object\": {\n                    if (node.fieldName !== target) {\n                        break;\n                    }\n                    return this.diveIntoObjectNode(node, segments, fieldScope);\n                }\n                case \"tabs\": {\n                    const tabKey = node.id || LayoutBuilderFactory.tabsNodeKey(node);\n                    for (const tab of node.tabs) {\n                        const result = this.walkLayout(tab.layout, segments, fieldScope);\n                        if (result !== null) {\n                            return [{ tabKey, tabId: tab.id }, ...result];\n                        }\n                    }\n                    break;\n                }\n            }\n        }\n        return null;\n    }\n\n    private diveIntoField(\n        fieldName: string,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = field.getInnerLayout();\n        if (!inner) {\n            return [];\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private diveIntoObjectNode(\n        node: IObjectNode,\n        segments: string[],\n        fieldScope: Map<string, IField>\n    ): TabActivation[] | null {\n        if (segments.length === 1) {\n            return [];\n        }\n        const field = fieldScope.get(node.fieldName);\n        if (!field || !isObjectField(field)) {\n            return [];\n        }\n        const childScope = this.resolveChildScope(field, segments);\n        if (!childScope) {\n            return [];\n        }\n        const inner = Array.isArray(node.inner)\n            ? node.inner\n            : field.activeTemplateId\n              ? (node.inner[field.activeTemplateId] ?? null)\n              : null;\n        if (!inner) {\n            const stored = field.getInnerLayout();\n            if (!stored) {\n                return [];\n            }\n            return this.walkLayout(stored, childScope.segments, childScope.children);\n        }\n        return this.walkLayout(inner, childScope.segments, childScope.children);\n    }\n\n    private resolveChildScope(\n        field: IObjectField,\n        segments: string[]\n    ): { segments: string[]; children: Map<string, IField> } | null {\n        const nextSegment = segments[1];\n        if (field.isList) {\n            const index = parseInt(nextSegment, 10);\n            if (!isNaN(index)) {\n                const item = field.items[index];\n                if (!item) {\n                    return null;\n                }\n                return { segments: segments.slice(2), children: item.children };\n            }\n        }\n        return { segments: segments.slice(1), children: field.children };\n    }\n}\n"],"names":["FocusManager","_fields","name","layout","segments","fieldScope","target","node","tabKey","LayoutBuilderFactory","tab","result","fieldName","field","isObjectField","childScope","inner","Array","stored","nextSegment","index","parseInt","isNaN","item"],"mappings":"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"}

package/features/formModel/FormErrors.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IFormVM } from "./abstractions.js";
+interface FormErrorsProps {
+    form: IFormVM;
+}
+export declare const FormErrors: (({ form }: FormErrorsProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/features/formModel/FormErrors.js

@@ -0,0 +1,35 @@
+import react, { useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { Alert, Heading } from "@webiny/admin-ui";
+const FormErrors = observer(({ form })=>{
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (form.submitCount > 0 && form.errors.length > 0 && ref.current) ref.current.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+        });
+    }, [
+        form.submitCount
+    ]);
+    if (0 === form.errors.length) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: ref
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "danger",
+        variant: "subtle"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6
+    }, "Some fields contain errors"), /*#__PURE__*/ react.createElement("ul", {
+        className: "list-disc mt-sm"
+    }, form.errors.map((error, index)=>/*#__PURE__*/ react.createElement("li", {
+            key: index,
+            className: "my-xs"
+        }, error.path ? /*#__PURE__*/ react.createElement("button", {
+            type: "button",
+            className: "underline cursor-pointer",
+            onClick: ()=>form.focusField(error.path)
+        }, error.breadcrumb ? error.breadcrumb.join(" › ") : error.label ?? error.path) : error.label, ": ", error.message)))));
+});
+export { FormErrors };
+
+//# sourceMappingURL=FormErrors.js.map

package/features/formModel/FormErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/formModel/FormErrors.js","sources":["../../../src/features/formModel/FormErrors.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Alert, Heading } from \"@webiny/admin-ui\";\nimport type { IFormVM } from \"./abstractions.js\";\n\ninterface FormErrorsProps {\n    form: IFormVM;\n}\n\nexport const FormErrors = observer(({ form }: FormErrorsProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (form.submitCount > 0 && form.errors.length > 0 && ref.current) {\n            ref.current.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n        }\n    }, [form.submitCount]);\n\n    if (form.errors.length === 0) {\n        return null;\n    }\n\n    return (\n        <div ref={ref}>\n            <Alert type=\"danger\" variant=\"subtle\">\n                <Heading level={6}>Some fields contain errors</Heading>\n                <ul className=\"list-disc mt-sm\">\n                    {form.errors.map((error, index) => (\n                        <li key={index} className={\"my-xs\"}>\n                            {error.path ? (\n                                <button\n                                    type=\"button\"\n                                    className=\"underline cursor-pointer\"\n                                    onClick={() => form.focusField(error.path)}\n                                >\n                                    {error.breadcrumb\n                                        ? error.breadcrumb.join(\" › \")\n                                        : (error.label ?? error.path)}\n                                </button>\n                            ) : (\n                                error.label\n                            )}\n                            : {error.message}\n                        </li>\n                    ))}\n                </ul>\n            </Alert>\n        </div>\n    );\n});\n"],"names":["FormErrors","observer","form","ref","useRef","useEffect","Alert","Heading","error","index"],"mappings":";;;AASO,MAAMA,aAAaC,SAAS,CAAC,EAAEC,IAAI,EAAmB;IACzD,MAAMC,MAAMC,OAAuB;IAEnCC,UAAU;QACN,IAAIH,KAAK,WAAW,GAAG,KAAKA,KAAK,MAAM,CAAC,MAAM,GAAG,KAAKC,IAAI,OAAO,EAC7DA,IAAI,OAAO,CAAC,cAAc,CAAC;YAAE,UAAU;YAAU,OAAO;QAAS;IAEzE,GAAG;QAACD,KAAK,WAAW;KAAC;IAErB,IAAIA,AAAuB,MAAvBA,KAAK,MAAM,CAAC,MAAM,EAClB,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,KAAKC;qBACN,oBAACG,OAAKA;QAAC,MAAK;QAAS,SAAQ;qBACzB,oBAACC,SAAOA;QAAC,OAAO;OAAG,6CACnB,oBAAC;QAAG,WAAU;OACTL,KAAK,MAAM,CAAC,GAAG,CAAC,CAACM,OAAOC,QAAAA,WAAAA,GACrB,oBAAC;YAAG,KAAKA;YAAO,WAAW;WACtBD,MAAM,IAAI,GAAG,WAAH,GACP,oBAAC;YACG,MAAK;YACL,WAAU;YACV,SAAS,IAAMN,KAAK,UAAU,CAACM,MAAM,IAAI;WAExCA,MAAM,UAAU,GACXA,MAAM,UAAU,CAAC,IAAI,CAAC,SACrBA,MAAM,KAAK,IAAIA,MAAM,IAAI,IAGpCA,MAAM,KAAK,EACb,MACCA,MAAM,OAAO;AAO5C"}

package/features/formModel/FormModel.d.ts

@@ -5,6 +5,7 @@ export declare class FormModel implements IFormModel {
     private _layout;
     private _baseline;
     private _submitted;
+    private _submitCount;
     private _validateOnChange;
     private _isValid;
     private _formRuleErrors;
@@ -34,6 +35,7 @@ export declare class FormModel implements IFormModel {
     get isDirty(): boolean;
     get isValid(): boolean | null;
     get submitted(): boolean;
+    get submitCount(): number;
     get errors(): IFormError[];
     addRule(rule: FormRule): void;
     setLayout(factory: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]): void;