@webiny/app-admin 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/features/formModel/ObjectField.js

@@ -0,0 +1,563 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+import { Field } from "./Field.js";
+import { createTemplateBuilder } from "./fieldTypes/ObjectFieldType.js";
+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, parentPath);
+        children.set(name, field);
+    }
+    return children;
+}
+function createFieldFromConfig(config, form, parentPath) {
+    if (config.childBuilders) {
+        const objField = new ObjectField(config);
+        if (form) objField.setForm(form, parentPath);
+        return objField;
+    }
+    const field = new Field(config);
+    if (form) field.setForm(form, parentPath);
+    return field;
+}
+function hydrateChildren(children, data, options) {
+    if (!data) return;
+    for (const [name, field] of children)if (name in data) if (options?.clone && field.config.cloneValue) field.setValueSilent(field.config.cloneValue(data[name]));
+    else field.setValueSilent(data[name]);
+}
+function getChildrenData(children) {
+    const data = {};
+    for (const [name, field] of children)if (isObjectField(field)) data[name] = toJS(field.getData());
+    else data[name] = toJS(field.getValue());
+    return data;
+}
+async function validateChildren(children, options) {
+    let allValid = true;
+    for (const [, field] of children){
+        const valid = await field.validate(options);
+        if (!valid) allValid = false;
+    }
+    return allValid;
+}
+function isObjectField(field) {
+    return "object" === field.type;
+}
+let itemKeyCounter = 0;
+class ObjectField {
+    constructor(config){
+        this._form = null;
+        this._items = [];
+        this._templates = [];
+        this._activeTemplateId = null;
+        this._ownLayout = null;
+        this._templateLayouts = {};
+        this._validating = false;
+        this.config = config;
+        this._base = new Field({
+            ...config,
+            type: "object",
+            renderer: config.renderer ?? (config.isList ? "objectAccordionMultiple" : "objectAccordionSingle")
+        });
+        this._templates = config.templates ?? [];
+        this._isTemplated = this._templates.length > 0;
+        if (this._isTemplated) 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);
+    }
+    get name() {
+        return this._base.name;
+    }
+    get type() {
+        return "object";
+    }
+    get visible() {
+        return this._base.visible;
+    }
+    get disabled() {
+        return this._base.disabled;
+    }
+    setDisabled(value) {
+        this._base.setDisabled(value);
+    }
+    setVisible(value) {
+        this._base.setVisible(value);
+    }
+    setAncestorRules(rules) {
+        this._base.setAncestorRules(rules);
+    }
+    setForm(form, parentPath) {
+        this._form = form;
+        this._base.setForm(form, parentPath);
+        const myPath = this._base.qualifiedName;
+        for (const [, field] of this._children)field.setForm(form, myPath);
+        for (const item of this._items)for (const [, field] of item.children)field.setForm(form, myPath);
+    }
+    setValidation(validation) {
+        this._base.setValidation(validation);
+    }
+    addBeforeChange(cb) {
+        this._base.addBeforeChange(cb);
+    }
+    addAfterChange(cb) {
+        this._base.addAfterChange(cb);
+    }
+    addAfterSetValue(cb) {
+        this._base.addAfterSetValue(cb);
+    }
+    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;
+    }
+    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 (-1 === index) 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 = {};
+            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;
+        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);
+    }
+    _applyNestedObjectLayouts(layout, children) {
+        for (const node of layout)if ("object" === node.type) {
+            const child = children.get(node.fieldName);
+            if (child && isObjectField(child)) child.setInnerLayout(node.inner);
+        } else if ("tabs" === node.type) for (const tab of node.tabs)this._applyNestedObjectLayouts(tab.layout, children);
+    }
+    _innerLayoutFor(templateId) {
+        if (this.isTemplated) {
+            if (void 0 === templateId) return;
+            return this._templateLayouts[templateId];
+        }
+        return this._ownLayout ?? void 0;
+    }
+    _resolveLayoutForChildren(children, templateId) {
+        const layoutNodes = this.isTemplated ? null !== templateId ? this._templateLayouts[templateId] : void 0 : this._ownLayout ?? void 0;
+        if (layoutNodes && this._form?.resolveChildLayout) return this._form.resolveChildLayout(layoutNodes, children);
+        const fallback = [];
+        for (const [, field] of children)if (field.visible) fallback.push({
+            type: "row",
+            fields: [
+                field.vm
+            ]
+        });
+        return fallback;
+    }
+    get children() {
+        return this._children;
+    }
+    get items() {
+        return this._items.map((item)=>({
+                key: item.key,
+                children: item.children,
+                templateId: item.templateId,
+                getData: ()=>this._getItemData(item)
+            }));
+    }
+    _getItemData(item) {
+        const data = getChildrenData(item.children);
+        if (void 0 !== item.templateId) 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 (void 0 === builder) {
+                this._children.delete(name);
+                this.config.childBuilders[name] = void 0;
+                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);
+            }
+        }
+        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)=>this._getItemData(item));
+        if (this.isTemplated) {
+            if (null === this._activeTemplateId) return null;
+            return {
+                [TEMPLATE_DISCRIMINATOR]: this._activeTemplateId,
+                ...getChildrenData(this._children)
+            };
+        }
+        return getChildrenData(this._children);
+    }
+    getValue() {
+        return this.getData();
+    }
+    setValue(value) {
+        this.setValueSilent(value);
+    }
+    setValueSilent(value) {
+        if (this.config.isList) {
+            this._items = [];
+            if (Array.isArray(value)) for (const itemData of value)if (this.isTemplated) {
+                if (!itemData || "object" != typeof itemData) continue;
+                const data = itemData;
+                const templateId = data[TEMPLATE_DISCRIMINATOR];
+                if ("string" != typeof templateId) continue;
+                if (!this._findTemplate(templateId)) continue;
+                const { [TEMPLATE_DISCRIMINATOR]: _discarded, ...rest } = data;
+                this._addItemInternal(rest, templateId);
+            } else this._addItemInternal(itemData);
+            return;
+        }
+        if (this.isTemplated) {
+            if (null == value) {
+                this._activeTemplateId = null;
+                this._children = new Map();
+                return;
+            }
+            const data = value;
+            const templateId = data[TEMPLATE_DISCRIMINATOR];
+            if ("string" != typeof templateId) 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(templateIdOrData, data) {
+        if (this.isTemplated) {
+            if ("string" != typeof templateIdOrData) 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 ("string" == typeof templateIdOrData) 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);
+    }
+    moveItem(fromIndex, toIndex) {
+        if (fromIndex < 0 || fromIndex >= this._items.length || toIndex < 0 || toIndex >= this._items.length || fromIndex === toIndex) return;
+        const [item] = this._items.splice(fromIndex, 1);
+        this._items.splice(toIndex, 0, item);
+    }
+    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 (void 0 === templateId) 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,
+            templateId
+        });
+        const inner = this._innerLayoutFor(templateId);
+        if (inner) this._applyNestedObjectLayouts(inner, children);
+    }
+    resetValidation() {
+        this._base.resetValidation();
+        for (const [, field] of this._children)field.resetValidation();
+        for (const item of this._items)for (const [, field] of item.children)field.resetValidation();
+    }
+    as(type) {
+        if ("object" !== type) throw new Error(`Field "${this.config.name}" is type "object", not "${type}".`);
+        return this;
+    }
+    get vm() {
+        const baseVm = this._base.vm;
+        return {
+            name: baseVm.name,
+            type: "object",
+            label: baseVm.label,
+            help: baseVm.help,
+            description: baseVm.description,
+            note: baseVm.note,
+            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: ()=>{
+                if (this._form?.submitted) 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),
+                    duplicate: ()=>this.duplicateItem(index)
+                })) : [],
+            addItem: (value)=>void 0 !== value ? this.addItem(value) : this.addItem(),
+            removeItem: (index)=>this.removeItem(index),
+            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() {
+        const checkChildren = (children)=>{
+            for (const [, field] of children){
+                if (false === field.vm.validation.isValid) return true;
+                if (isObjectField(field) && field.hasErrors) return true;
+            }
+            return false;
+        };
+        if (this.config.isList) {
+            for (const item of this._items)if (checkChildren(item.children)) return true;
+        } else if (checkChildren(this._children)) return true;
+        return false;
+    }
+    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 && 0 === this._items.length) {
+                    this.setValidation({
+                        isValid: false,
+                        message
+                    });
+                    return false;
+                }
+                if (!this.config.isList) if (this.isTemplated) {
+                    if (null === this._activeTemplateId) {
+                        this.setValidation({
+                            isValid: false,
+                            message
+                        });
+                        return false;
+                    }
+                } else {
+                    const data = this.getData();
+                    const hasAnyValue = Object.values(data).some((v)=>null != v && "" !== 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."
+                        });
+                    });
+                    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."
+                        });
+                    });
+                    return 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);
+            runInAction(()=>{
+                this.setValidation({
+                    isValid: allValid
+                });
+            });
+            return allValid;
+        } finally{
+            runInAction(()=>{
+                this._validating = false;
+            });
+        }
+    }
+}
+export { ObjectField, TEMPLATE_DISCRIMINATOR, isObjectField };
+
+//# sourceMappingURL=ObjectField.js.map