@mmlogic/components 0.5.2 → 0.5.4

package/dist/collection/dev/api.js

@@ -19,7 +19,21 @@ async function apiRequest(method, path, token, body) {
   const text = await resp.text();
   let json;
   try { json = JSON.parse(text); } catch (_) { json = text; }
-  return { status: resp.status, ok: resp.ok, body: json };
+  return { status: resp.status, ok: resp.ok, body: json, location: resp.headers.get('Location') };
+}
+
+/**
+ * Write (POST/PATCH) that returns no body — only a Location header
+ * (create/patch/merge on /data/**, per TASK-0203). Follows the Location
+ * header with a GET to hand callers the current record, mirroring
+ * content-app's ApiClientService create/update methods.
+ */
+async function apiWriteAndFetch(method, path, token, payload) {
+  const write = await apiRequest(method, path, token, payload);
+  if (!write.ok) return write;
+  const href = write.location || path;
+  const { body } = await apiRequest('GET', href, token);
+  return { ...write, body };
 }
 
 /** Resolve a file/image reference href to a signed, directly-usable URL.
@@ -95,7 +109,7 @@ async function apiFetchPage(token, baseHref, pageNumber, sort = '') {
 }
 
 async function apiSubmitForm(token, tenantCode, pluralName, values) {
-  const { status, ok, body } = await apiRequest('POST', `/data/${tenantCode}/${pluralName}`, token, values);
+  const { status, ok, body } = await apiWriteAndFetch('POST', `/data/${tenantCode}/${pluralName}`, token, values);
   return { status, ok, body };
 }
 
@@ -150,11 +164,12 @@ async function apiSearchMergeCandidates(token, tenantCode, mostSignificantClass,
 
 /**
  * Merge two DataObjects of the same basic type. Mirrors DataController.merge():
- * POST {winnerHref}/merge with { loser: loserHref, patch }. Returns the
- * patched winner record on success.
+ * POST {winnerHref}/merge with { loser: loserHref, patch }. Returns no body
+ * (204 + Location, per TASK-0203) — follows Location with a GET for the
+ * patched winner record.
  */
 async function apiMerge(token, winnerHref, loserHref, patch) {
-  const { ok, status, body } = await apiRequest('POST', `${winnerHref}/merge`, token, { loser: loserHref, patch });
+  const { ok, status, body } = await apiWriteAndFetch('POST', `${winnerHref}/merge`, token, { loser: loserHref, patch });
   if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
   return body;
 }

package/dist/collection/dev/app.js

@@ -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));
 }
 
 /* =====================================================================
@@ -620,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);
@@ -873,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 =
@@ -922,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

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 ────────────────────────────────────────────────
@@ -215,7 +223,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'legal form extended', name: 'legalFormExtended', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'rsin', name: 'rsin', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'start date', name: 'startDate', dataType: 'DATE', required: false },
-        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false },
+        // showEmpty demo (TASK-0231): endDate is null on EXAMPLE_COMPANY, so it
+        // stays visible with a placeholder instead of being hidden.
+        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false, showEmpty: true },
         { type: 'FIELD', label: 'primary activity description', name: 'primaryActivityDescription', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'primary activity code', name: 'primaryActivityCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'total employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
@@ -235,6 +245,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'mailing postal code', name: 'mailingPostalCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'mailing city', name: 'mailingCity', dataType: 'TEXT', required: false },
         { type: 'RELATION', label: 'country', name: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+        // showEmpty demo (TASK-0231): no `parentCompany` link on EXAMPLE_COMPANY,
+        // so the relation still renders with a placeholder value.
+        { type: 'RELATION', label: 'parent company', name: 'parentCompany', relatedClass: 'commons.company', mostSignificantClass: 'companies', required: false, showEmpty: true },
       ],
     },
     {
@@ -441,3 +454,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/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('|');
 }