@webiny/app-admin 6.3.0-beta.2 → 6.3.0-beta.3

package/features/formModel/ObjectField.js

@@ -1,35 +1,42 @@
 import { makeAutoObservable, runInAction, toJS } from "mobx";
 import { Field } from "./Field.js";
-function createChildFields(childBuilders, form) {
+import { createTemplateBuilder } from "./fieldTypes/ObjectFieldType.js";
+/** Reserved key used as the template discriminator in templated object data. */
+export const TEMPLATE_DISCRIMINATOR = "_templateId";
+function createChildFields(childBuilders, form, parentPath) {
   const children = new Map();
   for (const [name, builder] of Object.entries(childBuilders)) {
     const config = builder.build(name);
-    const field = createFieldFromConfig(config, form);
+    const field = createFieldFromConfig(config, form, parentPath);
     children.set(name, field);
   }
   return children;
 }
-function createFieldFromConfig(config, form) {
+function createFieldFromConfig(config, form, parentPath) {
   if (config.childBuilders) {
     const objField = new ObjectField(config);
     if (form) {
-      objField.setForm(form);
+      objField.setForm(form, parentPath);
     }
     return objField;
   }
   const field = new Field(config);
   if (form) {
-    field.setForm(form);
+    field.setForm(form, parentPath);
   }
   return field;
 }
-function hydrateChildren(children, data) {
+function hydrateChildren(children, data, options) {
   if (!data) {
     return;
   }
   for (const [name, field] of children) {
     if (name in data) {
-      field.setValueSilent(data[name]);
+      if (options?.clone && field.config.cloneValue) {
+        field.setValueSilent(field.config.cloneValue(data[name]));
+      } else {
+        field.setValueSilent(data[name]);
+      }
     }
   }
 }
@@ -44,10 +51,10 @@ function getChildrenData(children) {
   }
   return data;
 }
-async function validateChildren(children) {
+async function validateChildren(children, options) {
   let allValid = true;
   for (const [, field] of children) {
-    const valid = await field.validate();
+    const valid = await field.validate(options);
     if (!valid) {
       allValid = false;
     }
@@ -66,18 +73,48 @@ let itemKeyCounter = 0;
 export class ObjectField {
   _form = null;
   _items = [];
+  _templates = [];
+  _activeTemplateId = null;
+  /** Inner layout for non-templated objects (single layout, applied per item too). */
+  _ownLayout = null;
+  /** Per-template inner layouts for templated objects. */
+  _templateLayouts = {};
+  _validating = false;
   constructor(config) {
     this.config = config;
     this._base = new Field({
       ...config,
       type: "object",
-      renderer: config.renderer ?? "object"
+      renderer: config.renderer ?? (config.isList ? "objectAccordionMultiple" : "objectAccordionSingle")
     });
-    this._children = createChildFields(config.childBuilders, null);
+    this._templates = config.templates ?? [];
+    this._isTemplated = this._templates.length > 0;
+    if (this._isTemplated) {
+      // Templated mode: children populated per-item (list) or when a template is picked (single).
+      this._children = new Map();
+    } else {
+      this._children = createChildFields(config.childBuilders, null);
+    }
     makeAutoObservable(this, {
       config: false
     });
   }
+  _findTemplate(id) {
+    return this._templates.find(t => t.id === id);
+  }
+  _rebuildChildrenForTemplate(templateId) {
+    const template = this._findTemplate(templateId);
+    if (!template) {
+      throw new Error(`Template "${templateId}" not found on field "${this.config.name}". ` + `Available: ${this._templates.map(t => t.id).join(", ") || "(none)"}.`);
+    }
+    const children = createChildFields(template.childBuilders, this._form, this.qualifiedName);
+    this._children = children;
+    this._activeTemplateId = templateId;
+    const inner = this._innerLayoutFor(templateId);
+    if (inner) {
+      this._applyNestedObjectLayouts(inner, children);
+    }
+  }
 
   // --- Forwarded from _base ---
 
@@ -90,21 +127,28 @@ export class ObjectField {
   get visible() {
     return this._base.visible;
   }
+  get disabled() {
+    return this._base.disabled;
+  }
   setDisabled(value) {
     this._base.setDisabled(value);
   }
   setVisible(value) {
     this._base.setVisible(value);
   }
-  setForm(form) {
+  setAncestorRules(rules) {
+    this._base.setAncestorRules(rules);
+  }
+  setForm(form, parentPath) {
     this._form = form;
-    this._base.setForm(form);
+    this._base.setForm(form, parentPath);
+    const myPath = this._base.qualifiedName;
     for (const [, field] of this._children) {
-      field.setForm(form);
+      field.setForm(form, myPath);
     }
     for (const item of this._items) {
       for (const [, field] of item.children) {
-        field.setForm(form);
+        field.setForm(form, myPath);
       }
     }
   }
@@ -123,18 +167,196 @@ export class ObjectField {
   addOnBlur(cb) {
     this._base.addOnBlur(cb);
   }
+  addRequiredWhen(fn, message) {
+    this._base.addRequiredWhen(fn, message);
+  }
+  setComputed(fn) {
+    this._base.setComputed(fn);
+  }
+  setComputedUntilDirty(fn) {
+    this._base.setComputedUntilDirty(fn);
+  }
   blur() {
     this._base.blur();
   }
   remove() {
     this._base.remove();
   }
+  get qualifiedName() {
+    return this._base.qualifiedName;
+  }
+  focus() {
+    this._base.focus();
+  }
+  requestFocus() {
+    this._base.requestFocus();
+  }
+  clearFocusRequest() {
+    this._base.clearFocusRequest();
+  }
+  getInnerLayout() {
+    if (this.isTemplated) {
+      return this._activeTemplateId ? this._templateLayouts[this._activeTemplateId] ?? null : null;
+    }
+    return this._ownLayout;
+  }
 
   // --- Object-specific ---
 
   get isList() {
     return this.config.isList;
   }
+  get isTemplated() {
+    return this._isTemplated;
+  }
+  get activeTemplateId() {
+    return this._activeTemplateId;
+  }
+  get availableTemplates() {
+    const result = [];
+    for (const template of this._templates) {
+      if (template.visible && this._form) {
+        if (!template.visible(this._form)) {
+          continue;
+        }
+      }
+      result.push({
+        id: template.id,
+        label: template.label,
+        icon: template.icon
+      });
+    }
+    return result;
+  }
+  setTemplate(templateId) {
+    if (this._activeTemplateId === templateId) {
+      return;
+    }
+    this._rebuildChildrenForTemplate(templateId);
+  }
+  get templates() {
+    return {
+      add: (id, configure) => this._addTemplate(id, configure),
+      remove: templateId => this._removeTemplate(templateId)
+    };
+  }
+  _addTemplate(id, configure) {
+    if (!this.isTemplated) {
+      throw new Error(`Object field "${this.config.name}" is not templated; templates.add() requires the field to be defined with .template().`);
+    }
+    if (id === TEMPLATE_DISCRIMINATOR) {
+      throw new Error(`Template id "${TEMPLATE_DISCRIMINATOR}" is reserved. Choose a different id.`);
+    }
+    if (this._findTemplate(id)) {
+      throw new Error(`Duplicate template id "${id}".`);
+    }
+    const tb = createTemplateBuilder();
+    configure(tb);
+    this._templates.push(tb._build(id, this._form.registry));
+  }
+  _removeTemplate(templateId) {
+    if (!this.isTemplated) {
+      throw new Error(`Object field "${this.config.name}" is not templated; templates.remove() requires the field to be defined with .template().`);
+    }
+    const index = this._templates.findIndex(t => t.id === templateId);
+    if (index === -1) {
+      return;
+    }
+    this._templates.splice(index, 1);
+    if (this.config.isList) {
+      this._items = this._items.filter(item => item.templateId !== templateId);
+      return;
+    }
+    if (this._activeTemplateId === templateId) {
+      this._activeTemplateId = null;
+      this._children = new Map();
+    }
+  }
+  setInnerLayout(layout) {
+    if (Array.isArray(layout)) {
+      if (this.isTemplated) {
+        throw new Error(`Object field "${this.config.name}" is templated; layout.object() must pass a per-template map (Record<templateId, LayoutNode[]>), not a single LayoutNode[].`);
+      }
+      this._ownLayout = layout;
+      this._templateLayouts = {};
+      // Apply nested object layouts to children that already exist
+      // (non-templated single + non-templated list items).
+      this._applyNestedObjectLayouts(layout, this._children);
+      for (const item of this._items) {
+        this._applyNestedObjectLayouts(layout, item.children);
+      }
+      return;
+    }
+    if (!this.isTemplated) {
+      throw new Error(`Object field "${this.config.name}" is not templated; layout.object() must pass a single LayoutNode[], not a per-template map.`);
+    }
+    this._templateLayouts = layout;
+    this._ownLayout = null;
+    // Apply nested object layouts to currently-active templated children
+    // (templated single with active template + templated list items).
+    if (this._activeTemplateId && layout[this._activeTemplateId]) {
+      this._applyNestedObjectLayouts(layout[this._activeTemplateId], this._children);
+    }
+    for (const item of this._items) {
+      if (item.templateId && layout[item.templateId]) {
+        this._applyNestedObjectLayouts(layout[item.templateId], item.children);
+      }
+    }
+  }
+
+  /**
+   * Walk an inner layout for nested `object` nodes and forward each one to
+   * the matching child field. The recursion bottoms out naturally: each
+   * matched child is itself an ObjectField and will run `_applyNestedObjectLayouts`
+   * against its own children whenever they materialise.
+   */
+  _applyNestedObjectLayouts(layout, children) {
+    for (const node of layout) {
+      if (node.type === "object") {
+        const child = children.get(node.fieldName);
+        if (child && isObjectField(child)) {
+          child.setInnerLayout(node.inner);
+        }
+      } else if (node.type === "tabs") {
+        for (const tab of node.tabs) {
+          this._applyNestedObjectLayouts(tab.layout, children);
+        }
+      }
+    }
+  }
+
+  /**
+   * Returns the inner layout that should apply to a freshly-built children
+   * Map for the given templateId (templated objects/lists) or for the
+   * non-templated case. Used to seed nested object layouts on newly-created
+   * children before they go live.
+   */
+  _innerLayoutFor(templateId) {
+    if (this.isTemplated) {
+      if (templateId === undefined) {
+        return undefined;
+      }
+      return this._templateLayouts[templateId];
+    }
+    return this._ownLayout ?? undefined;
+  }
+  _resolveLayoutForChildren(children, templateId) {
+    const layoutNodes = this.isTemplated ? templateId !== null ? this._templateLayouts[templateId] : undefined : this._ownLayout ?? undefined;
+    if (layoutNodes && this._form?.resolveChildLayout) {
+      return this._form.resolveChildLayout(layoutNodes, children);
+    }
+    // Default: one row per visible child, in insertion order.
+    const fallback = [];
+    for (const [, field] of children) {
+      if (field.visible) {
+        fallback.push({
+          type: "row",
+          fields: [field.vm]
+        });
+      }
+    }
+    return fallback;
+  }
   get children() {
     return this._children;
   }
@@ -142,19 +364,77 @@ export class ObjectField {
     return this._items.map(item => ({
       key: item.key,
       children: item.children,
-      getData: () => getChildrenData(item.children)
+      templateId: item.templateId,
+      getData: () => this._getItemData(item)
     }));
   }
+  _getItemData(item) {
+    const data = getChildrenData(item.children);
+    if (item.templateId !== undefined) {
+      return {
+        [TEMPLATE_DISCRIMINATOR]: item.templateId,
+        ...data
+      };
+    }
+    return data;
+  }
   getChild(name) {
     return this._children.get(name);
   }
+  fields(factory) {
+    if (this.isTemplated) {
+      throw new Error(`Object field "${this.config.name}" is templated; use templates.add()/remove() to manage children. Each template owns its own fields.`);
+    }
+    const builders = factory(this._form.registry);
+    for (const [name, builder] of Object.entries(builders)) {
+      if (builder === undefined) {
+        this._children.delete(name);
+        this.config.childBuilders[name] = undefined;
+        delete this.config.childBuilders[name];
+        if (this.config.isList) {
+          for (const item of this._items) {
+            item.children.delete(name);
+          }
+        }
+        continue;
+      }
+      this.config.childBuilders[name] = builder;
+      const built = builder.build(name);
+      const newField = createFieldFromConfig(built, this._form, this.qualifiedName);
+      this._children.set(name, newField);
+      if (this.config.isList) {
+        for (const item of this._items) {
+          const itemField = createFieldFromConfig(built, this._form, this.qualifiedName);
+          item.children.set(name, itemField);
+        }
+      }
+    }
+
+    // Re-apply nested object layouts so newly-added children pick up any
+    // layout.object() entries already registered on this field.
+    if (this._ownLayout) {
+      this._applyNestedObjectLayouts(this._ownLayout, this._children);
+      for (const item of this._items) {
+        this._applyNestedObjectLayouts(this._ownLayout, item.children);
+      }
+    }
+  }
   getListItemChild(index, name) {
     const item = this._items[index];
     return item?.children.get(name);
   }
   getData() {
     if (this.config.isList) {
-      return this._items.map(item => getChildrenData(item.children));
+      return this._items.map(item => this._getItemData(item));
+    }
+    if (this.isTemplated) {
+      if (this._activeTemplateId === null) {
+        return null;
+      }
+      return {
+        [TEMPLATE_DISCRIMINATOR]: this._activeTemplateId,
+        ...getChildrenData(this._children)
+      };
     }
     return getChildrenData(this._children);
   }
@@ -169,15 +449,69 @@ export class ObjectField {
       this._items = [];
       if (Array.isArray(value)) {
         for (const itemData of value) {
-          this._addItemInternal(itemData);
+          if (this.isTemplated) {
+            if (!itemData || typeof itemData !== "object") {
+              continue;
+            }
+            const data = itemData;
+            const templateId = data[TEMPLATE_DISCRIMINATOR];
+            if (typeof templateId !== "string") {
+              continue;
+            }
+            if (!this._findTemplate(templateId)) {
+              continue;
+            }
+            const {
+              [TEMPLATE_DISCRIMINATOR]: _discarded,
+              ...rest
+            } = data;
+            this._addItemInternal(rest, templateId);
+          } else {
+            this._addItemInternal(itemData);
+          }
         }
       }
-    } else {
-      hydrateChildren(this._children, value);
+      return;
+    }
+    if (this.isTemplated) {
+      if (value === null || value === undefined) {
+        this._activeTemplateId = null;
+        this._children = new Map();
+        return;
+      }
+      const data = value;
+      const templateId = data[TEMPLATE_DISCRIMINATOR];
+      if (typeof templateId !== "string") {
+        return;
+      }
+      if (!this._findTemplate(templateId)) {
+        return;
+      }
+      this._rebuildChildrenForTemplate(templateId);
+      const {
+        [TEMPLATE_DISCRIMINATOR]: _discarded,
+        ...rest
+      } = data;
+      hydrateChildren(this._children, rest);
+      return;
     }
+    hydrateChildren(this._children, value);
   }
-  addItem(data) {
-    this._addItemInternal(data);
+  addItem(templateIdOrData, data) {
+    if (this.isTemplated) {
+      if (typeof templateIdOrData !== "string") {
+        throw new Error(`Object field "${this.config.name}": templated list items require a template id. ` + `Call addItem(templateId) with one of: ${this._templates.map(t => t.id).join(", ")}.`);
+      }
+      if (!this._findTemplate(templateIdOrData)) {
+        throw new Error(`Template "${templateIdOrData}" not found on field "${this.config.name}". ` + `Available: ${this._templates.map(t => t.id).join(", ") || "(none)"}.`);
+      }
+      this._addItemInternal(data, templateIdOrData);
+      return;
+    }
+    if (typeof templateIdOrData === "string") {
+      throw new Error(`Object field "${this.config.name}" is not templated; addItem() does not accept a template id.`);
+    }
+    this._addItemInternal(templateIdOrData);
   }
   removeItem(index) {
     this._items.splice(index, 1);
@@ -189,16 +523,52 @@ export class ObjectField {
     const [item] = this._items.splice(fromIndex, 1);
     this._items.splice(toIndex, 0, item);
   }
-  _addItemInternal(data) {
-    const children = createChildFields(this.config.childBuilders, this._form);
+  duplicateItem(index) {
+    const source = this._items[index];
+    if (!source) {
+      return;
+    }
+    const data = getChildrenData(source.children);
+    const children = createChildFields(this._templateChildBuilders(source.templateId), this._form, this.qualifiedName);
+    hydrateChildren(children, data, {
+      clone: true
+    });
+    const key = `item_${++itemKeyCounter}`;
+    this._items.splice(index + 1, 0, {
+      key,
+      children,
+      templateId: source.templateId
+    });
+    const inner = this._innerLayoutFor(source.templateId);
+    if (inner) {
+      this._applyNestedObjectLayouts(inner, children);
+    }
+  }
+  _templateChildBuilders(templateId) {
+    if (templateId === undefined) {
+      return this.config.childBuilders;
+    }
+    const template = this._findTemplate(templateId);
+    if (!template) {
+      throw new Error(`Template "${templateId}" not found on field "${this.config.name}".`);
+    }
+    return template.childBuilders;
+  }
+  _addItemInternal(data, templateId) {
+    const children = createChildFields(this._templateChildBuilders(templateId), this._form, this.qualifiedName);
     if (data) {
       hydrateChildren(children, data);
     }
     const key = `item_${++itemKeyCounter}`;
     this._items.push({
       key,
-      children
+      children,
+      templateId
     });
+    const inner = this._innerLayoutFor(templateId);
+    if (inner) {
+      this._applyNestedObjectLayouts(inner, children);
+    }
   }
   resetValidation() {
     this._base.resetValidation();
@@ -229,24 +599,44 @@ export class ObjectField {
       placeholder: baseVm.placeholder,
       value: this.getValue(),
       validation: baseVm.validation,
+      validating: this._validating,
       required: baseVm.required,
+      visible: baseVm.visible,
       disabled: baseVm.disabled,
       renderer: baseVm.renderer,
       rendererSettings: baseVm.rendererSettings,
       onChange: value => this.setValue(value),
-      onBlur: () => this.blur(),
+      onBlur: () => {
+        if (this._form?.submitted) {
+          void this.validate();
+        }
+        this.blur();
+      },
+      focusRequested: baseVm.focusRequested,
+      clearFocusRequest: baseVm.clearFocusRequest,
       isList: this.config.isList,
       fields: this.config.isList ? [] : Array.from(this._children.values()).filter(f => f.visible).map(f => f.vm),
+      layout: this.config.isList ? [] : this._resolveLayoutForChildren(this._children, this._activeTemplateId),
       items: this.config.isList ? this._items.map((item, index) => ({
         key: item.key,
         fields: Array.from(item.children.values()).filter(f => f.visible).map(f => f.vm),
+        layout: this._resolveLayoutForChildren(item.children, item.templateId ?? null),
+        templateId: item.templateId,
         remove: () => this.removeItem(index),
         moveUp: () => this.moveItem(index, index - 1),
-        moveDown: () => this.moveItem(index, index + 1)
+        moveDown: () => this.moveItem(index, index + 1),
+        duplicate: () => this.duplicateItem(index)
       })) : [],
-      addItem: () => this.addItem(),
+      addItem: value => {
+        return value !== undefined ? this.addItem(value) : this.addItem();
+      },
       removeItem: index => this.removeItem(index),
-      moveItem: (from, to) => this.moveItem(from, to)
+      moveItem: (from, to) => this.moveItem(from, to),
+      duplicateItem: index => this.duplicateItem(index),
+      isTemplated: this.isTemplated,
+      availableTemplates: this.availableTemplates,
+      activeTemplateId: this._activeTemplateId,
+      setTemplate: templateId => this.setTemplate(templateId)
     };
   }
   get hasErrors() {
@@ -274,72 +664,99 @@ export class ObjectField {
     }
     return false;
   }
-  async validate() {
-    if (this.config.required) {
-      if (this.config.isList && this._items.length === 0) {
-        this.setValidation({
-          isValid: false,
-          message: this.config.requiredMessage || "This field is required."
-        });
-        return false;
-      }
-      if (!this.config.isList) {
-        const data = this.getData();
-        const hasAnyValue = Object.values(data).some(v => v !== null && v !== undefined && v !== "");
-        if (!hasAnyValue) {
+  async validate(options) {
+    if (!this.visible) {
+      this.setValidation({
+        isValid: null
+      });
+      return true;
+    }
+    runInAction(() => {
+      this._validating = true;
+    });
+    try {
+      const requiredState = this._base.resolveRequired();
+      if (requiredState.required) {
+        const message = requiredState.message || "This field is required.";
+        if (this.config.isList && this._items.length === 0) {
           this.setValidation({
             isValid: false,
-            message: this.config.requiredMessage || "This field is required."
+            message
           });
           return false;
         }
+        if (!this.config.isList) {
+          if (this.isTemplated) {
+            if (this._activeTemplateId === null) {
+              this.setValidation({
+                isValid: false,
+                message
+              });
+              return false;
+            }
+          } else {
+            const data = this.getData();
+            const hasAnyValue = Object.values(data).some(v => v !== null && v !== undefined && v !== "");
+            if (!hasAnyValue) {
+              this.setValidation({
+                isValid: false,
+                message
+              });
+              return false;
+            }
+          }
+        }
       }
-    }
-    if (this.config.isList && this.config.listSchema) {
-      const listData = this.getData();
-      const result = await this.config.listSchema.safeParseAsync(listData);
-      if (!result.success) {
-        const firstIssue = result.error.issues[0];
-        runInAction(() => {
-          this.setValidation({
-            isValid: false,
-            message: firstIssue?.message || "Invalid value."
+      if (this.config.isList && this.config.listSchema) {
+        const listData = this.getData();
+        const result = await this.config.listSchema.safeParseAsync(listData);
+        if (!result.success) {
+          const firstIssue = result.error.issues[0];
+          runInAction(() => {
+            this.setValidation({
+              isValid: false,
+              message: firstIssue?.message || "Invalid value."
+            });
           });
-        });
-        return false;
+          return false;
+        }
       }
-    }
-    if (this.config.schema) {
-      const data = this.getData();
-      const result = await this.config.schema.safeParseAsync(data);
-      if (!result.success) {
-        const firstIssue = result.error.issues[0];
-        runInAction(() => {
-          this.setValidation({
-            isValid: false,
-            message: firstIssue?.message || "Invalid value."
+      if (this.config.schema) {
+        const data = this.getData();
+        const result = await this.config.schema.safeParseAsync(data);
+        if (!result.success) {
+          const firstIssue = result.error.issues[0];
+          runInAction(() => {
+            this.setValidation({
+              isValid: false,
+              message: firstIssue?.message || "Invalid value."
+            });
           });
-        });
-        return false;
+          return false;
+        }
       }
-    }
-    let allValid = true;
-    if (this.config.isList) {
-      for (const item of this._items) {
-        const valid = await validateChildren(item.children);
-        if (!valid) {
-          allValid = false;
+      let allValid = true;
+      if (this.config.isList) {
+        for (const item of this._items) {
+          const valid = await validateChildren(item.children, options);
+          if (!valid) {
+            allValid = false;
+          }
         }
+      } else {
+        allValid = await validateChildren(this._children, options);
       }
-    } else {
-      allValid = await validateChildren(this._children);
-    }
-    runInAction(() => {
-      this.setValidation({
-        isValid: allValid
+      runInAction(() => {
+        this.setValidation({
+          isValid: allValid
+        });
       });
-    });
-    return allValid;
+      return allValid;
+    } finally {
+      runInAction(() => {
+        this._validating = false;
+      });
+    }
   }
 }