@mmlogic/components 0.1.4 → 0.1.8

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 = '';
@@ -10,6 +10,8 @@ export class MrdRelationField {
         this.disabled = false;
         this.locale = navigator.language;
         this.relatedClass = '';
+        /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
+        this.mostSignificantClass = '';
         this.displayType = ClientLayoutItemRelationDisplayType.SEARCH;
         this.multiple = false;
         this.dropdownValues = [];
@@ -17,6 +19,7 @@ export class MrdRelationField {
         this.value = null;
         this.searchQuery = '';
         this.searchResults = [];
+        this.allRecords = [];
         this.isLoading = false;
         this.selectedItems = [];
         this.showResults = false;
@@ -67,7 +70,7 @@ export class MrdRelationField {
                 this.isLoading = true;
                 this.showResults = true;
                 this.searchDebounce = setTimeout(() => {
-                    this.mrdSearch.emit({ query, relatedClass: this.relatedClass });
+                    this.mrdSearch.emit({ query, relatedClass: this.mostSignificantClass });
                 }, 300);
             }
             else {
@@ -125,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;
@@ -138,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
@@ -300,6 +323,26 @@ export class MrdRelationField {
                 "attribute": "related-class",
                 "defaultValue": "''"
             },
+            "mostSignificantClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, used instead of relatedClass for search queries (mostSignificantClass from API)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "most-significant-class",
+                "defaultValue": "''"
+            },
             "displayType": {
                 "type": "string",
                 "mutable": false,
@@ -327,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,
@@ -405,6 +493,7 @@ export class MrdRelationField {
         return {
             "searchQuery": {},
             "searchResults": {},
+            "allRecords": {},
             "isLoading": {},
             "selectedItems": {},
             "showResults": {},
@@ -458,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>",

package/dist/collection/dev/api.js

@@ -0,0 +1,198 @@
+/* =====================================================================
+   API HELPERS
+   ===================================================================== */
+
+const API_BASE = 'http://localhost:8080';
+
+/**
+ * Generic fetch wrapper. Accepts both absolute URLs (from _links.self.href)
+ * and relative paths (prefixed with API_BASE).
+ */
+async function apiRequest(method, path, token, body) {
+  const opts = {
+    method,
+    headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+  };
+  if (body !== undefined) opts.body = JSON.stringify(body);
+  const url  = path.startsWith('http') ? path : API_BASE + path;
+  const resp = await fetch(url, opts);
+  const text = await resp.text();
+  let json;
+  try { json = JSON.parse(text); } catch (_) { json = text; }
+  return { status: resp.status, ok: resp.ok, body: json };
+}
+
+async function apiFetchTenants(token) {
+  const { ok, status, body } = await apiRequest('GET', '/tenants', token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body; // array of { tenantCode, name, description, logo }
+}
+
+async function apiFetchTypes(token, tenantCode) {
+  const { ok, status, body } = await apiRequest('GET', `/metadata/${tenantCode}/types?type=BASIC`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body; // array of { name, pluralName, type, ... }
+}
+
+async function apiFetchForm(token, tenantCode, pluralName, formHref = null) {
+  const path = formHref || `/metadata/${tenantCode}/form?types=${pluralName}`;
+  const { ok, status, body } = await apiRequest('GET', path, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  const raw = (body && body.layouts && body.layouts.length > 0) ? body.layouts[0]
+            : (Array.isArray(body) && body.length > 0)          ? body[0]
+            : body;
+  return mapApiLayoutToMrdForm(raw);
+}
+
+async function apiFetchDashboard(token, tenantCode, pluralName) {
+  const language = navigator.language;
+  const { ok, status, body } = await apiRequest('GET', `/metadata/${tenantCode}/dashboard/${pluralName}?language=${language}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body; // { layouts, views, _links }
+}
+
+async function apiFetchPage(token, baseHref, pageNumber, sort = '') {
+  const sep = baseHref.includes('?') ? '&' : '?';
+  let url = `${baseHref}${sep}page=${pageNumber}`;
+  if (sort) url += `&sort=${encodeURIComponent(sort)}`;
+  const { ok, status, body } = await apiRequest('GET', url, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body; // { _embedded, _links, page }
+}
+
+async function apiSubmitForm(token, tenantCode, pluralName, values) {
+  const { status, ok, body } = await apiRequest('POST', `/data/${tenantCode}/${pluralName}`, token, values);
+  return { status, ok, body };
+}
+
+async function apiUploadFile(token, tenantCode, file) {
+  // Step 1: obtain a one-time upload URL
+  const { ok, status, body } = await apiRequest('GET', `/data/${tenantCode}/upload`, token);
+  if (!ok) throw new Error(`Upload-URL ophalen mislukt (${status})`);
+  const uploadUrl = typeof body === 'string' ? body : String(body);
+
+  // Step 2: upload the file as multipart (no auth required)
+  const formData = new FormData();
+  formData.append('file', file);
+  const resp = await fetch(uploadUrl, { method: 'POST', body: formData });
+  if (!resp.ok) throw new Error(`Bestand uploaden mislukt (${resp.status})`);
+  const uris = await resp.json();
+  if (!Array.isArray(uris) || uris.length === 0) throw new Error('Geen binary URI ontvangen na upload');
+  return uris[0];
+}
+
+async function apiSearchRelation(token, tenantCode, mostSignificantClass, query) {
+  const q = encodeURIComponent(query);
+  const { ok, status, body } = await apiRequest('GET', `/data/${tenantCode}/${mostSignificantClass}?q=${q}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  const items = (body._embedded && body._embedded[mostSignificantClass]) || [];
+  return items.map(item => ({
+    id:    item._links.self.href,
+    label: item.name || item.label || '?',
+  }));
+}
+
+/* =====================================================================
+   LAYOUT MAPPERS
+   Translate flat API layout responses to nested ClientLayoutItem format
+   expected by mrd-form.
+   ===================================================================== */
+
+/**
+ * Map a single flat API item to the nested ClientLayoutItem structure.
+ * Used by both mapApiLayoutToMrdForm (form) and mapApiColumns (table).
+ */
+function mapApiItem(item) {
+  if (item.type === 'FIELD') {
+    if (item.field) return item; // already nested — pass through
+    return {
+      type: 'FIELD',
+      field: {
+        name:         item.name,
+        label:        item.label,
+        dataType:     item.dataType,
+        required:     !!item.required,
+        multiple:     !!item.multiple,
+        header:       !!item.header,
+        defaultValue: item.defaultValue ?? null,
+        listItems:    item.listItems ?? null,
+      },
+    };
+  }
+  if (item.type === 'RELATION') {
+    if (item.relation) return item; // already nested — pass through
+    return {
+      type: 'RELATION',
+      relation: {
+        name:                 item.name,
+        label:                item.label,
+        relatedClass:         item.relatedClass,
+        mostSignificantClass: item.mostSignificantClass ?? null,
+        displayType:          item.editBehavior ?? 'SEARCH',
+        editBehavior:         item.editBehavior ?? null,
+        commonRelation:       item.commonRelation ?? null,
+        required:             !!item.required,
+        multiple:             !!item.multiple,
+        defaultValue:         item.defaultValue ?? null,
+      },
+    };
+  }
+  if (Array.isArray(item.items)) {
+    return { ...item, items: item.items.map(mapApiItem) };
+  }
+  return item;
+}
+
+/**
+ * Map API layout (OBJECT_FORM_DASHBOARD shape) → ClientLayout for mrd-form.
+ *
+ * IMPORTANT: always map editBehavior and commonRelation from the API response —
+ * omitting them causes relation fields to fall back to SEARCH mode.
+ * _relationMeta must be keyed by BOTH relatedClass AND mostSignificantClass
+ * because mrdSearch sends mostSignificantClass as the lookup key.
+ */
+function mapApiLayoutToMrdForm(raw) {
+  if (!raw || !Array.isArray(raw.items)) return raw;
+
+  function mapItem(item) {
+    if (item.type === 'FIELD') {
+      return {
+        type: 'FIELD',
+        field: {
+          name:         item.name,
+          label:        item.label,
+          dataType:     item.dataType,
+          required:     !!item.required,
+          multiple:     !!item.multiple,
+          header:       !!item.header,
+          defaultValue: item.defaultValue ?? null,
+          listItems:    item.listItems ?? null,
+        },
+      };
+    }
+    if (item.type === 'RELATION') {
+      return {
+        type: 'RELATION',
+        relation: {
+          name:                 item.name,
+          label:                item.label,
+          relatedClass:         item.relatedClass,
+          mostSignificantClass: item.mostSignificantClass ?? null,
+          displayType:          item.editBehavior ?? 'SEARCH',
+          editBehavior:         item.editBehavior ?? null,
+          commonRelation:       item.commonRelation ?? null,
+          required:             !!item.required,
+          multiple:             !!item.multiple,
+          defaultValue:         item.defaultValue ?? null,
+        },
+      };
+    }
+    // SECTION / GROUP — recurse into children
+    if (Array.isArray(item.items)) {
+      return { ...item, items: item.items.map(mapItem) };
+    }
+    return item;
+  }
+
+  return { items: raw.items.map(mapItem) };
+}