@mmlogic/components 0.1.7 → 0.1.9

package/dist/collection/components/mrd-form/mrd-form.js

@@ -1,25 +1,72 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType } from "../../types";
+import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../types";
 import { t } from "../../utils/i18n";
 import { validateRequired } from "../../utils/validation";
 export class MrdForm {
     constructor() {
         this.locale = navigator.language;
         this.values = {};
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load
+         * — without the host app needing to know anything about the form layout.
+         */
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load.
+         */
+        this.referenceHref = '';
+        /**
+         * The `mostSignificantClass` of the parent/reference object
+         * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
+         */
+        this.referenceClass = '';
+        /** When true, a cancel button is shown next to the submit button. */
+        this.showCancel = false;
         this.formValues = {};
         this.errors = {};
         this.submitted = false;
         this.handleFieldChange = (e) => {
             const { name, value } = e.detail;
+            const prevHref = this.getHref(this.formValues[name]);
             this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
             if (this.errors[name]) {
                 this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
             }
+            // When a field changes, check if it is the commonRelation dependency for any
+            // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
+            // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
+            // with the same value, which would otherwise trigger a duplicate fetch).
+            const newHref = this.getHref(value);
+            if (newHref === prevHref)
+                return;
+            for (const rel of this.collectDependentDropdowns()) {
+                if (rel.commonRelation !== name)
+                    continue;
+                // Clear the dependent field's current selection (options have changed)
+                this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
+                this.mrdFetchAll.emit({
+                    name: rel.name,
+                    relatedClass: rel.relatedClass,
+                    mostSignificantClass: rel.mostSignificantClass,
+                    commonRelation: rel.commonRelation,
+                    filter: rel.commonRelation,
+                    filterValue: newHref, // empty string when dependency was cleared → host should clear the list
+                });
+            }
         };
         this.handleSearch = (e) => {
             e.stopPropagation();
             this.mrdSearch.emit(e.detail);
         };
+        this.handleFetchAll = (e) => {
+            e.stopPropagation();
+            this.mrdFetchAll.emit(e.detail);
+        };
         this.handleSubmit = (e) => {
             e.preventDefault();
             this.submitted = true;
@@ -32,12 +79,71 @@ export class MrdForm {
         var _a;
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
+    componentDidLoad() {
+        // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
+        // Deferred so Angular/host prop bindings are settled before we read them.
+        setTimeout(() => {
+            this.applyReferenceValue();
+            this.emitDependentFetchAll();
+        }, 0);
+    }
     /** Sync formValues when the values prop is set from outside after mount
      *  (e.g. when pre-filling an existing record in edit mode). */
     valuesChanged(newValues) {
         this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
+        this.applyReferenceValue();
         this.errors = {};
         this.submitted = false;
+        // Re-check DROPDOWN dependencies now that formValues are updated
+        setTimeout(() => this.emitDependentFetchAll(), 0);
+    }
+    /**
+     * When referenceHref + referenceClass are set, find the matching layout field
+     * and inject its value into formValues. This allows dependent DROPDOWN fields
+     * (those with commonRelation pointing to that field) to be fetched on load
+     * without the host app doing any form-domain logic.
+     *
+     * Two lookup strategies:
+     * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
+     * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
+     *    layout (API omitted it because it is implied by the reference context).
+     */
+    applyReferenceValue() {
+        if (!this.referenceHref || !this.referenceClass)
+            return;
+        const fieldName = this.resolveReferenceFieldName();
+        if (!fieldName)
+            return;
+        // Only set when not already present (don't overwrite an explicit value)
+        if (!this.formValues[fieldName]) {
+            this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
+        }
+    }
+    resolveReferenceFieldName() {
+        var _a, _b;
+        const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+        // Strategy 1: direct match on mostSignificantClass
+        const direct = allItems.find(item => {
+            var _a;
+            return item.type === ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.mostSignificantClass) === this.referenceClass;
+        });
+        if (direct === null || direct === void 0 ? void 0 : direct.relation)
+            return direct.relation.name;
+        // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
+        const layoutRelationNames = new Set(allItems
+            .filter(item => item.type === ClientLayoutItemType.RELATION)
+            .map(item => item.relation.name));
+        for (const item of allItems) {
+            const rel = item.relation;
+            if (item.type === ClientLayoutItemType.RELATION &&
+                (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
+                rel.commonRelation &&
+                !layoutRelationNames.has(rel.commonRelation)) {
+                return rel.commonRelation;
+            }
+        }
+        return null;
     }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
@@ -45,6 +151,45 @@ export class MrdForm {
             this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
         }
     }
+    /** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
+    collectDependentDropdowns() {
+        var _a, _b;
+        return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
+            .filter(item => {
+            var _a;
+            return item.type === ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
+                !!item.relation.commonRelation;
+        })
+            .map(item => item.relation);
+    }
+    /** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
+    emitDependentFetchAll() {
+        for (const rel of this.collectDependentDropdowns()) {
+            const filterValue = this.getHref(this.formValues[rel.commonRelation]);
+            if (filterValue) {
+                this.mrdFetchAll.emit({
+                    name: rel.name,
+                    relatedClass: rel.relatedClass,
+                    mostSignificantClass: rel.mostSignificantClass,
+                    commonRelation: rel.commonRelation,
+                    filter: rel.commonRelation,
+                    filterValue,
+                });
+            }
+        }
+    }
+    /** Extract a plain href string from a form value, which can be a string or
+     *  a RelationSearchResult-like object with an `id` field. */
+    getHref(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'object' && 'id' in value)
+            return value.id;
+        return '';
+    }
     collectFields(items) {
         const fields = [];
         for (const item of items) {
@@ -114,7 +259,7 @@ export class MrdForm {
             }
             const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
             const fieldValue = this.formValues[fieldName];
-            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
         });
     }
     render() {
@@ -122,7 +267,7 @@ export class MrdForm {
             return h(Host, null);
         }
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
-        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
+        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
     }
     static get is() { return "mrd-form"; }
     static get encapsulation() { return "scoped"; }
@@ -204,6 +349,66 @@ export class MrdForm {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "referenceHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Absolute href of the parent/reference object (e.g. the clientAgreement href\nwhen creating an invoice from within a client agreement).\nCombined with `referenceClass`, mrd-form will automatically pre-fill the\nmatching relation field so dependent DROPDOWN fields can be fetched on load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-href",
+                "defaultValue": "''"
+            },
+            "referenceClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `mostSignificantClass` of the parent/reference object\n(e.g. `'clientAgreements'`). Used to locate the matching RELATION field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-class",
+                "defaultValue": "''"
+            },
+            "showCancel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, a cancel button is shown next to the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-cancel",
+                "defaultValue": "false"
             }
         };
     }
@@ -235,6 +440,21 @@ export class MrdForm {
                         }
                     }
                 }
+            }, {
+                "method": "mrdCancel",
+                "name": "mrdCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "mrdSearch",
                 "name": "mrdSearch",
@@ -250,6 +470,21 @@ export class MrdForm {
                     "resolved": "{ query: string; relatedClass: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdFetchAll",
+                "name": "mrdFetchAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
+                    "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/mrd-form/mrd-form.scss

@@ -83,6 +83,7 @@
   border-top: var(--mrd-border-width) solid var(--mrd-border-color);
   display: flex;
   justify-content: flex-end;
+  gap: var(--mrd-space-3);
 }
 
 .mrd-form__submit {
@@ -114,3 +115,34 @@
 .mrd-form__submit:active {
   background-color: var(--mrd-color-primary-dark);
 }
+
+.mrd-form__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: transparent;
+  color: var(--mrd-color-neutral-600);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+
+.mrd-form__cancel:hover {
+  background-color: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-form__cancel:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-form__cancel:active {
+  background-color: var(--mrd-color-neutral-200);
+}

package/dist/collection/components/mrd-relation-field/mrd-relation-field.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { t } from "../../utils/i18n";
 import { validateRequired } from "../../utils/validation";
-import { ClientLayoutItemRelationDisplayType } from "../../types";
+import { ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from "../../types";
 export class MrdRelationField {
     constructor() {
         this.name = '';
@@ -19,6 +19,7 @@ export class MrdRelationField {
         this.value = null;
         this.searchQuery = '';
         this.searchResults = [];
+        this.allRecords = [];
         this.isLoading = false;
         this.selectedItems = [];
         this.showResults = false;
@@ -127,6 +128,9 @@ export class MrdRelationField {
             this.mrdBlur.emit({ name: this.name, value: val });
         };
     }
+    async setAllRecords(records) {
+        this.allRecords = records;
+    }
     async setSearchResults(results) {
         this.searchResults = results;
         this.isLoading = false;
@@ -140,24 +144,41 @@ export class MrdRelationField {
         var _a;
         // Pre-fill selectedItems when value is passed as { id, label } objects
         // (e.g. when editing an existing record fetched from the API).
-        if (!this.value)
-            return;
-        if (Array.isArray(this.value)) {
-            if (this.value.length > 0 && typeof this.value[0] === 'object') {
-                this.selectedItems = this.value;
-                this.searchQuery = '';
+        if (this.value) {
+            if (Array.isArray(this.value)) {
+                if (this.value.length > 0 && typeof this.value[0] === 'object') {
+                    this.selectedItems = this.value;
+                    this.searchQuery = '';
+                }
+            }
+            else if (typeof this.value === 'object') {
+                this.selectedItems = [this.value];
+                this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
             }
         }
-        else if (typeof this.value === 'object') {
-            this.selectedItems = [this.value];
-            this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
+    }
+    componentDidLoad() {
+        // Only emit when there is no commonRelation dependency — the form orchestrates those.
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
+            // Defer to next tick so parent event listeners are registered after DOM patching
+            setTimeout(() => {
+                this.mrdFetchAll.emit({
+                    name: this.name,
+                    relatedClass: this.relatedClass,
+                    mostSignificantClass: this.mostSignificantClass || undefined,
+                });
+            }, 0);
         }
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const hasError = !!this.error;
-        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
             const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+            const currentValue = Array.isArray(this.value) ? ((_c = this.value[0]) !== null && _c !== void 0 ? _c : '') : ((_d = this.value) !== null && _d !== void 0 ? _d : '');
             return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         // SEARCH mode
@@ -349,6 +370,51 @@ export class MrdRelationField {
                 "attribute": "display-type",
                 "defaultValue": "ClientLayoutItemRelationDisplayType.SEARCH"
             },
+            "editBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItemRelationEditBehavior | null",
+                    "resolved": "ClientLayoutItemRelationEditBehavior.CHECKBOX | ClientLayoutItemRelationEditBehavior.DROPDOWN | ClientLayoutItemRelationEditBehavior.SEARCH | null | undefined",
+                    "references": {
+                        "ClientLayoutItemRelationEditBehavior": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayoutItemRelationEditBehavior",
+                            "referenceLocation": "ClientLayoutItemRelationEditBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edit-behavior"
+            },
+            "commonRelation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "common-relation"
+            },
             "multiple": {
                 "type": "boolean",
                 "mutable": false,
@@ -427,6 +493,7 @@ export class MrdRelationField {
         return {
             "searchQuery": {},
             "searchResults": {},
+            "allRecords": {},
             "isLoading": {},
             "selectedItems": {},
             "showResults": {},
@@ -480,10 +547,52 @@ export class MrdRelationField {
                     "resolved": "{ query: string; relatedClass: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdFetchAll",
+                "name": "mrdFetchAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
+                    "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
+            "setAllRecords": {
+                "complexType": {
+                    "signature": "(records: RelationSearchResult[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "records",
+                            "type": "RelationSearchResult[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setSearchResults": {
                 "complexType": {
                     "signature": "(results: RelationSearchResult[]) => Promise<void>",