@mmlogic/components 0.5.1 → 0.5.3

package/dist/collection/dev/app.js

@@ -10,7 +10,7 @@ let _locale            = navigator.language || 'nl-NL';
 let _dashboardData     = null; // full dashboard response
 let _dashboardRecord   = null; // data-object voor object/form dashboards
 let _activeLayoutIndex = 0;
-let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'object' | 'form'
+let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'object' | 'form' | 'merge'
 let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
 let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
 let _meUser            = null;    // { id: href, label: name } — resolved once after login via /accounts/me
@@ -266,6 +266,41 @@ function initFilePreviewTab() {
     section.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
     section.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
   });
+
+  // Invoice View demo (commons.invoice archetype, TASK-0199) — the `lines`
+  // RELATED_VIEW is rendered inside mrd-invoice-view via slot="lines", but the
+  // page/sort data-loading stays owned by mrd-layout-section, exactly like any
+  // other RELATED_VIEW: answer mrdLoadViewPage the same way the Detail View tab
+  // does for appointments/share classes.
+  const invoiceSection = document.getElementById('invoice-view');
+  const invoicePreviewEl = document.getElementById('invoice-view-preview');
+  invoiceSection.items = window.EXAMPLE_INVOICE_ITEMS;
+  invoiceSection.data = window.EXAMPLE_INVOICE_DATA;
+  invoiceSection.archetypes = [window.EXAMPLE_INVOICE_ARCHETYPE];
+  invoiceSection.addEventListener('mrdLoadViewPage', async (e) => {
+    const { name, page } = e.detail;
+    logEvent('mrdLoadViewPage', e.detail);
+    await invoiceSection.setViewPage(name, page, window.EXAMPLE_INVOICE_LINES, window.EXAMPLE_INVOICE_LINES.length);
+  });
+  invoiceSection.addEventListener('mrdAttachments', (e) => {
+    logEvent('mrdAttachments', e.detail);
+    renderAttachmentPreview(invoicePreviewEl, e.detail.attachments);
+  });
+  invoiceSection.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
+  invoiceSection.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
+
+  // Email View demo (commons.email archetype, TASK-0199) — fully read-only, no
+  // RELATED_VIEW/table involved.
+  const emailSection = document.getElementById('email-view');
+  const emailPreviewEl = document.getElementById('email-view-preview');
+  emailSection.data = window.EXAMPLE_EMAIL_DATA;
+  emailSection.archetypes = [window.EXAMPLE_EMAIL_ARCHETYPE];
+  emailSection.addEventListener('mrdAttachments', (e) => {
+    logEvent('mrdAttachments', e.detail);
+    renderAttachmentPreview(emailPreviewEl, e.detail.attachments);
+  });
+  emailSection.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
+  emailSection.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
 }
 
 /* =====================================================================
@@ -337,7 +372,7 @@ async function loadCompactTypes(tenantCode) {
 function onDashboardTypeChange(type) {
   _dashboardType = type;
   const needsClass  = type === 'class' || type === 'create';
-  const needsObject = type === 'object' || type === 'form';
+  const needsObject = type === 'object' || type === 'form' || type === 'merge';
   document.getElementById('controls-class-group').classList.toggle('hidden', !needsClass);
   document.getElementById('controls-object-group').classList.toggle('hidden', !needsObject);
   if (needsClass && _selectedTenant) loadCompactTypes(_selectedTenant);
@@ -384,14 +419,17 @@ async function loadDashboard() {
       dashboard = await apiFetchNavigationPane(token, _selectedTenant, name);
 
     } else {
-      // 'object' of 'form': fetch record → gebruik _links.metadata.href of _links.form.href
+      // 'object', 'form' of 'merge': fetch record → gebruik _links.metadata.href of _links.form.href
       const objectHref = document.getElementById('object-href-input').value.trim();
       if (!objectHref) throw new Error('Vul een Object URL in');
       const recResp = await apiRequest('GET', objectHref, token);
       if (!recResp.ok) throw new Error(`${recResp.status}: kon object niet ophalen`);
       recordData = recResp.body;
 
-      const linkKey  = _dashboardType === 'form' ? 'form' : 'metadata';
+      // 'merge' reuses the form layout too: it lists real editable fields
+      // (firstName, lastName, ...) and already excludes hard formula fields
+      // like `name` — see LayoutHelper.buildDefaultObjectFormDashboard().
+      const linkKey  = (_dashboardType === 'form' || _dashboardType === 'merge') ? 'form' : 'metadata';
       const dashHref = recordData._links?.[linkKey]?.href;
       if (!dashHref) throw new Error(`Geen _links.${linkKey} gevonden in object`);
 
@@ -447,6 +485,11 @@ async function renderSection(index) {
     return;
   }
 
+  if (_dashboardType === 'merge') {
+    await renderMergeView(layout, _dashboardRecord, container);
+    return;
+  }
+
   const section = document.createElement('mrd-layout-section');
   section.items  = layout.items;
   section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
@@ -612,7 +655,7 @@ async function renderSection(index) {
     try {
       const result = await apiRequest('POST', `${_baseHref}${path}`, authGetToken(), values);
       if (result.ok) {
-        const href = result.body?._links?.self?.href;
+        const href = result.location;
         if (href) await section.setViewCreatedObject(name, href);
       } else {
         console.error('[mrdCreateObject] mislukt', result.status, result.body);
@@ -865,17 +908,20 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
   if (_meUser) form.me = _meUser;
   form.values = record ? initialValues : {};
 
-  // Upload files immediately on selection; write binary URI back via setFieldValue
-    form.addEventListener('mrdChange', async (e) => {
-      const { name, value } = e.detail;
-      if (!(value instanceof File)) return;
-      try {
-        const uri = await apiUploadFile(authGetToken(), _selectedTenant, value);
-        await form.setFieldValue(name, uri);
-      } catch (err) {
-        console.error(`[upload] mislukt voor veld "${name}":`, err);
-      }
-    });
+  // Upload each selected file immediately (fires once per file for `multiple` fields);
+  // pass `file` back into setFieldValue so mrd-form can resolve the right array entry.
+  // The resolved value is { href, fileName } — same shape mrd-table/mrd-layout-section
+  // already expect when reading FILE/IMAGE data back — so the filename displays correctly
+  // instead of falling back to the upload URI's UUID.
+  form.addEventListener('mrdUpload', async (e) => {
+    const { name, file } = e.detail;
+    try {
+      const uri = await apiUploadFile(authGetToken(), _selectedTenant, file);
+      await form.setFieldValue(name, { href: uri, fileName: file.name }, file);
+    } catch (err) {
+      console.error(`[upload] mislukt voor veld "${name}":`, err);
+    }
+  });
 
     form.addEventListener('mrdSubmit', async (e) => {
       document.getElementById('panel-response').innerHTML =
@@ -914,7 +960,7 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
           renderResponse(200, 'Geen wijzigingen.');
           return;
         }
-        const result = await apiRequest('PATCH', selfHref, authGetToken(), patch);
+        const result = await apiWriteAndFetch('PATCH', selfHref, authGetToken(), patch);
         renderResponse(result.status, result.body);
       } else {
         // POST mode: new record
@@ -973,6 +1019,78 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
     });
 }
 
+/* =====================================================================
+   MERGE — LOAD & RENDER (TASK-0177)
+   ===================================================================== */
+
+/** Flatten SECTION/GROUP → FIELD/RELATION, same tree shape mrd-form flattens internally. */
+function flattenLayoutItems(items) {
+  const result = [];
+  (items ?? []).forEach(item => {
+    if (item.type === 'SECTION' || item.type === 'GROUP') {
+      result.push(...flattenLayoutItems(item.items));
+    } else if (item.type === 'FIELD' || item.type === 'RELATION') {
+      result.push(item);
+    }
+  });
+  return result;
+}
+
+/**
+ * Mount mrd-merge-view for the record loaded via the 'merge' dashboard type.
+ * The record itself is object A (winner); the user searches for B inside
+ * the component. mrd-merge-view never does network I/O itself — this wires
+ * mrdSearch/mrdMerge to the real merge endpoint. Has no exit affordance of
+ * its own — a host embedding this in an overlay page provides its own close
+ * button, same as elsewhere in this dev preview.
+ */
+async function renderMergeView(layout, record, containerEl) {
+  const fields = flattenLayoutItems(layout.items);
+  const selfHref = record?._links?.self?.href ?? '';
+  // /data/{tenant}/{mostSignificantClass}/{id} → segment right before the id.
+  const segments = selfHref.split('/').filter(Boolean);
+  const mostSignificantClass = segments.length >= 2 ? segments[segments.length - 2] : '';
+
+  containerEl.innerHTML = `<mrd-merge-view id="live-merge" locale="${escHtml(_locale)}"></mrd-merge-view>`;
+  const mergeEl = containerEl.querySelector('#live-merge');
+  if (typeof mergeEl.componentOnReady === 'function') {
+    await mergeEl.componentOnReady();
+  } else {
+    await customElements.whenDefined('mrd-merge-view');
+  }
+
+  mergeEl.fields               = fields;
+  mergeEl.currentHref          = selfHref;
+  mergeEl.currentRecord        = record ?? {};
+  mergeEl.currentLabel         = record?.name ?? '';
+  mergeEl.basicType            = mostSignificantClass;
+  mergeEl.mostSignificantClass = mostSignificantClass;
+
+  mergeEl.addEventListener('mrdSearch', async (e) => {
+    logEvent('mrdSearch (merge)', e.detail);
+    const { query } = e.detail;
+    try {
+      const results = await apiSearchMergeCandidates(authGetToken(), _selectedTenant, mostSignificantClass, query);
+      await mergeEl.setSearchResults(results);
+    } catch (err) {
+      console.error('[mrdSearch/merge] mislukt:', err);
+      await mergeEl.setSearchResults([]);
+    }
+  });
+
+  mergeEl.addEventListener('mrdMerge', async (e) => {
+    logEvent('mrdMerge', e.detail);
+    const { winnerHref, loserHref, patch } = e.detail;
+    try {
+      const result = await apiMerge(authGetToken(), winnerHref, loserHref, patch);
+      renderResponse(200, result);
+      _dashboardRecord = result; // reflect the patched winner if the same layout is reloaded
+    } catch (err) {
+      renderResponse(500, err.message);
+    }
+  });
+}
+
 /* =====================================================================
    RESPONSE RENDERING
    ===================================================================== */

package/dist/collection/dev/example-data.js

@@ -69,7 +69,7 @@ window.EXAMPLE_LAYOUT = {
       label: "Assets",
       items: [
         { type: "FIELD", name: "projectLogo",  label: "Project Logo",  dataType: "IMAGE", required: false, accept: "image/*",                   maxSize: 5242880  },
-        { type: "FIELD", name: "attachments",  label: "Attachments",   dataType: "FILE",  required: false, accept: ".pdf,.doc,.docx,.zip",      maxSize: 10485760 }
+        { type: "FIELD", name: "attachments",  label: "Attachments",   dataType: "FILE",  required: false, accept: ".pdf,.doc,.docx,.zip",      maxSize: 10485760, multiple: true }
       ]
     },
     { type: "RELATION", name: "projectManager",  label: "Project Manager", relatedClass: "Employee", displayType: "SEARCH",   required: true,  multiple: false },
@@ -91,7 +91,15 @@ window.EXAMPLE_VALUES = {
   budget:       { amount: 150000, currency: "EUR" },
   isPublic:     true,
   startDate:    "2026-01-15",
-  contactEmail: "team@mosterd.nl"
+  contactEmail: "team@mosterd.nl",
+  // FILE/IMAGE values from the API are { href, fileName } — same shape as everywhere
+  // else in this library (mrd-table, mrd-document-view) — so the field shows the real
+  // filename instead of the href's UUID.
+  projectLogo:  { href: "/uploads/proj-9f2c/logo.png", fileName: "mosterd-logo.png" },
+  attachments: [
+    { href: "/uploads/proj-9f2c/9f2c-contract.pdf", fileName: "contract-2026.pdf" },
+    { href: "/uploads/proj-9f2c/1a3b-invoice.pdf",   fileName: "invoice-042.pdf" },
+  ],
 };
 
 // ─── Companies detail view demo ────────────────────────────────────────────────
@@ -441,3 +449,119 @@ window.EXAMPLE_DOCUMENT_DATA = {
     dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
   },
 };
+
+// ─── Invoice View demo (commons.invoice archetype, TASK-0199) ────────────────
+// Exercises mrd-invoice-view via mrd-layout-section's archetype path. `lines`
+// is a real RELATED_VIEW item bound to the commons.invoiceLine archetype — it
+// is rendered *inside* mrd-invoice-view via slot="lines" (mrd-layout-section
+// still owns the table's own page/sort wiring, see renderInvoiceObject()).
+
+window.EXAMPLE_INVOICE_ARCHETYPE = {
+  archetype: 'commons.invoice',
+  slots: {
+    invoiceNumber: 'invoiceNumber', invoiceDate: 'invoiceDate', dueDate: 'dueDate',
+    netAmount: 'netAmount', taxAmount: 'taxAmount', amount: 'amount', status: 'status',
+    customer: 'customer', supplier: 'supplier', lines: 'lines', attachments: 'attachments', container: 'dossier',
+  },
+};
+
+window.EXAMPLE_INVOICE_ITEMS = [
+  {
+    type: 'FIELD', name: 'status', label: 'Status', dataType: 'LIST', required: false,
+    listItems: [
+      { key: 'draft', label: 'Concept', color: '#6b7280', backgroundColor: '#f3f4f6' },
+      { key: 'sent', label: 'Verzonden', color: '#1d4ed8', backgroundColor: '#dbeafe' },
+      { key: 'paid', label: 'Betaald', color: '#15803d', backgroundColor: '#dcfce7' },
+    ],
+  },
+  {
+    type: 'RELATED_VIEW', label: 'Factuurregels', name: 'lines',
+    relatedClass: 'demo.invoiceLine', fromClass: 'demo.invoice', showTitle: true,
+    archetypes: [{ archetype: 'commons.invoiceLine', slots: { description: 'description', quantity: 'quantity', unitPrice: 'unitPrice', amount: 'amount' } }],
+    view: {
+      name: null,
+      defaultView: true,
+      values: [
+        { type: 'FIELD', label: 'Omschrijving', name: 'description', dataType: 'TEXT', required: true },
+        { type: 'FIELD', label: 'Aantal', name: 'quantity', dataType: 'DECIMAL', required: true },
+        { type: 'FIELD', label: 'Prijs', name: 'unitPrice', dataType: 'CURRENCY', required: true },
+        { type: 'FIELD', label: 'Bedrag', name: 'amount', dataType: 'CURRENCY', required: true, aggregate: 'sum' },
+      ],
+      type: 'demo.invoiceLine',
+      singularLabel: 'Factuurregel',
+      pluralLabel: 'Factuurregels',
+    },
+  },
+];
+
+window.EXAMPLE_INVOICE_DATA = {
+  invoiceNumber: 'INV-2026-0142',
+  invoiceDate: '2026-06-01',
+  dueDate: '2026-06-30',
+  status: 'sent',
+  netAmount: { amount: 1000, currency: 'EUR' },
+  taxAmount: { amount: 210, currency: 'EUR' },
+  amount: { amount: 1210, currency: 'EUR' },
+  attachments: [
+    { href: '/data/demo/invoices/142/attachments/0', fileName: 'invoice-142.pdf', mimeType: 'application/pdf' },
+  ],
+  _links: {
+    self: { href: '/data/demo/invoices/142' },
+    customer: { href: '/data/demo/entities/acme', name: 'Acme Corp.' },
+    supplier: { href: '/data/demo/entities/mosterd', name: 'Mosterd B.V.' },
+    dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
+  },
+};
+
+window.EXAMPLE_INVOICE_LINES = [
+  {
+    description: 'Consultancy — juni 2026',
+    quantity: 10,
+    unitPrice: { amount: 80, currency: 'EUR' },
+    amount: { amount: 800, currency: 'EUR' },
+    _links: { self: { href: '/data/demo/invoiceLines/1' } },
+  },
+  {
+    description: 'Projectmanagement',
+    quantity: 4,
+    unitPrice: { amount: 50, currency: 'EUR' },
+    amount: { amount: 200, currency: 'EUR' },
+    _links: { self: { href: '/data/demo/invoiceLines/2' } },
+  },
+];
+
+// ─── Email View demo (commons.email archetype, TASK-0199) ────────────────────
+// Exercises mrd-email-view via mrd-layout-section's archetype path. Fully
+// read-only — no RELATED_VIEW/table involved.
+
+window.EXAMPLE_EMAIL_ARCHETYPE = {
+  archetype: 'commons.email',
+  slots: {
+    subject: 'subject', date: 'date', from: 'from', to: 'to', cc: 'cc',
+    bodyHtml: 'bodyHtml', bodyText: 'bodyText', headers: 'headers',
+    attachments: 'attachments', container: 'dossier',
+  },
+};
+
+window.EXAMPLE_EMAIL_DATA = {
+  subject: 'RE: Contract 2026 — laatste versie bijgevoegd',
+  date: '2026-06-02T14:32:00',
+  bodyHtml: '<p>Beste Jan,</p><p>Bijgaand de laatste versie van het contract, inclusief de besproken wijzigingen in artikel 4.</p><p>Met vriendelijke groet,<br>Anne</p>',
+  headers: 'Message-ID: <abc123@mail.example.com>\nReceived: from mail.example.com by mx.mosterd.com',
+  attachments: [
+    { href: '/data/demo/emails/9/attachments/0', fileName: 'contract-2026-v3.pdf', mimeType: 'application/pdf' },
+    { href: '/data/demo/emails/9/attachments/1', fileName: 'wijzigingen.docx' },
+  ],
+  _links: {
+    from: { href: '/data/demo/entities/anne', name: 'Anne de Vries <anne@mosterd.com>' },
+    to: {
+      href: '/data/demo/entities/jan', name: 'Jan Bakker <jan@acme.com>',
+      values: [{ href: '/data/demo/entities/jan', name: 'Jan Bakker <jan@acme.com>' }],
+    },
+    cc: {
+      href: '/data/demo/entities/pietcc', name: 'Piet Claassen <piet@acme.com>',
+      values: [{ href: '/data/demo/entities/pietcc', name: 'Piet Claassen <piet@acme.com>' }],
+    },
+    dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
+  },
+};

package/dist/collection/types/client-layout.js

@@ -72,6 +72,12 @@ export var ClientLayoutNavigateBehaviour;
 })(ClientLayoutNavigateBehaviour || (ClientLayoutNavigateBehaviour = {}));
 /** Well-known archetype ids the client renders specially. */
 export const ARCHETYPE_DOCUMENT = 'commons.document';
+export const ARCHETYPE_INVOICE = 'commons.invoice';
+export const ARCHETYPE_EMAIL = 'commons.email';
+/** Bound by a `commons.invoice`'s `lines` relation target class. Used to find the
+ *  RELATED_VIEW item for the line items generically, by archetype id rather than
+ *  by name/class string. */
+export const ARCHETYPE_INVOICE_LINE = 'commons.invoiceLine';
 /**
  * Find a binding for `archetypeId` in a published `archetypes` list.
  * Returns `undefined` when the archetype is absent — callers fall back to the

package/dist/collection/utils/cell-renderer.js

@@ -17,7 +17,12 @@ export class CellRenderer {
         const name = (_d = column.name) !== null && _d !== void 0 ? _d : '';
         const dataType = column.dataType;
         const listItems = column.listItems;
-        const raw = row === null || row === void 0 ? void 0 : row[name];
+        let raw = row === null || row === void 0 ? void 0 : row[name];
+        // History-enabled fields are stored as { current, history: [...] } — render
+        // the current value, same as mrd-layout-section's field rendering.
+        if (column.historyEnabled && raw != null && typeof raw === 'object' && !Array.isArray(raw) && 'current' in raw) {
+            raw = raw.current;
+        }
         if (raw == null || raw === '')
             return '';
         const values = Array.isArray(raw) ? raw : [raw];

package/dist/collection/utils/document-attachments.js

@@ -1,20 +1,33 @@
 /**
- * Extract the `commons.document` archetype's file slot from a data record as a
- * `DocumentAttachment[]` — empty when the slot is unmapped or has no value.
- * Shared by mrd-document-view (on load/data-change) and mrd-document-container
- * (row-click prefetch on mrdNavigate), so both report the exact same shape.
+ * Extract an archetype's file slot from a data record as a `DocumentAttachment[]` —
+ * empty when the slot is unmapped or has no value. `slot` defaults to `'file'` (the
+ * commons.document single-file slot); pass `'attachments'` for the multi-file slots
+ * on commons.email / commons.invoice. A single-object slot value yields a one-entry
+ * array, an array-valued slot yields one entry per item.
+ * Shared by mrd-document-view / mrd-invoice-view / mrd-email-view (on load/data-change)
+ * and mrd-document-container (row-click prefetch on mrdNavigate), so all report the
+ * exact same shape.
  */
-export function attachmentsFromRecord(archetype, record) {
-    var _a, _b, _c, _d;
-    const field = (_a = archetype === null || archetype === void 0 ? void 0 : archetype.slots) === null || _a === void 0 ? void 0 : _a['file'];
+export function attachmentsFromRecord(archetype, record, slot = 'file') {
+    var _a;
+    const field = (_a = archetype === null || archetype === void 0 ? void 0 : archetype.slots) === null || _a === void 0 ? void 0 : _a[slot];
     if (!field)
         return [];
-    const fileRaw = record === null || record === void 0 ? void 0 : record[field];
-    if (!fileRaw)
+    const raw = record === null || record === void 0 ? void 0 : record[field];
+    if (!raw)
         return [];
-    return [{
-            href: fileRaw.href,
-            fileName: (_b = fileRaw.fileName) !== null && _b !== void 0 ? _b : String(fileRaw),
-            mimeType: (_d = (_c = fileRaw.mimeType) !== null && _c !== void 0 ? _c : fileRaw.contentType) !== null && _d !== void 0 ? _d : undefined,
-        }];
+    const items = Array.isArray(raw) ? raw : [raw];
+    return items.filter(Boolean).map(item => {
+        var _a, _b, _c;
+        return ({
+            href: item.href,
+            fileName: (_a = item.fileName) !== null && _a !== void 0 ? _a : String(item),
+            mimeType: (_c = (_b = item.mimeType) !== null && _b !== void 0 ? _b : item.contentType) !== null && _c !== void 0 ? _c : undefined,
+        });
+    });
+}
+/** Dedup key for the componentDidLoad/@Watch('data') "emit mrdAttachments only on
+ *  change" guard shared by mrd-document-view / mrd-invoice-view / mrd-email-view. */
+export function attachmentsKey(attachments) {
+    return attachments.map(a => a.href).join('|');
 }