@mmlogic/components 0.3.6 → 0.3.8

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

@@ -0,0 +1,206 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdTimeField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleChange = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: 'c507996709437d8982f9175b286e25598997002d' }, h("div", { key: 'd5f1b7f14d26cae8298cd40491898b39044158f8', class: "mrd-time-field" }, this.label && (h("label", { key: '10976e18df09240e00b045314c4ddd3845d4bfdc', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'bc557333f107a371a7005f9b56dd0395190e63d7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'b5a09c2aa063fa9e2fc3aba411e86b57d879c408', class: "mrd-time-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-time-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-time-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-time-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/mrd-time-field/mrd-time-field.scss

@@ -0,0 +1,66 @@
+:host {
+  display: block;
+}
+
+.mrd-time-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-time-field__label {
+  display: block;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-label-font-size);
+  font-weight: var(--mrd-label-font-weight);
+  color: var(--mrd-label-color);
+}
+
+.mrd-time-field__label--required::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-time-field__input {
+  display: block;
+  width: 100%;
+  height: var(--mrd-input-height);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-input-color);
+  background-color: var(--mrd-input-bg);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
+  outline: none;
+  appearance: none;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.mrd-time-field__input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-time-field__input:disabled {
+  background-color: var(--mrd-input-bg-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.mrd-time-field__input--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-time-field__input--error:focus {
+  box-shadow: var(--mrd-shadow-focus-error);
+}
+
+.mrd-time-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}

package/dist/collection/dev/api.js

@@ -0,0 +1,145 @@
+/* =====================================================================
+   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`, 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 apiFetchClassDashboard(token, tenantCode, pluralName, name) {
+  const qs = new URLSearchParams({ language: navigator.language });
+  if (name) qs.set('name', name);
+  const { ok, status, body } = await apiRequest('GET', `/metadata/${tenantCode}/dashboard/${pluralName}?${qs}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body;
+}
+
+async function apiFetchGeneralDashboard(token, tenantCode, name) {
+  const qs = new URLSearchParams({ language: navigator.language });
+  if (name) qs.set('name', name);
+  const { ok, status, body } = await apiRequest('GET', `/metadata/${tenantCode}/dashboard?${qs}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body;
+}
+
+async function apiFetchNavigationPane(token, tenantCode, name) {
+  const qs = new URLSearchParams({ language: navigator.language });
+  if (name) qs.set('name', name);
+  const { ok, status, body } = await apiRequest('GET', `/metadata/${tenantCode}/navigationPane?${qs}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body;
+}
+
+
+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 apiFetchMe(token, tenantCode) {
+  const { ok, body } = await apiRequest('GET', `/accounts/${tenantCode}/me`, token);
+  if (!ok) return null;
+  const href  = body?.links?.person?.href;
+  const label = body?.links?.person?.name ?? body?.email ?? '';
+  if (!href || !label) return null;
+  return { id: href, label };
+}
+
+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
+   mrd-form and mrd-field now accept the flat API format directly.
+   No transformation needed — pass the raw layout through as-is.
+   ===================================================================== */
+
+/**
+ * Extract a ClientLayout from the raw API form response.
+ * The API sends flat items (name, dataType, relatedClass at root level)
+ * which mrd-form/mrd-field read directly.
+ */
+function mapApiLayoutToMrdForm(raw) {
+  if (!raw) return raw;
+  // Unwrap OBJECT_FORM_DASHBOARD: keep items at top level, drop type wrapper
+  if (Array.isArray(raw.items)) return raw;
+  return raw;
+}