@fieldia/viewer 0.6.0 → 0.8.0

package/src/lib/viewer.mjs

@@ -1,102 +1,8 @@
-import { createForm, validatePage, wideColumns, MESSAGES, } from '@fieldia/core';
+import { createForm, checkPage, translatePage, wideColumns, MESSAGES, } from '@fieldia/core';
 import { browserPreferences, createWidget, drawIcon, installStyles, WIDGET_LABELS } from '@fieldia/widgets';
-import { openFormDialog, openSearchDialog } from './dialog.mjs';
-export const VIEWER_LABELS = {
-    en: {
-        save: 'Save',
-        discard: 'Discard',
-        saving: 'Saving…',
-        saved: 'Saved',
-        submit: 'Submit',
-        next: 'Next',
-        back: 'Back',
-        skip: 'Skip',
-        steps: 'Steps',
-        stepOf: 'Step {n} of {total}',
-        submitted: 'Thank you. Your answers were sent.',
-        submitAnother: 'Submit another response',
-        draftFound: 'You have unsaved answers from {time}.',
-        restore: 'Restore',
-        discardDraft: 'Discard',
-        ok: 'OK',
-        cancel: 'Cancel',
-        loading: 'Loading…',
-        saveClose: 'Save & Close',
-        close: 'Close',
-        dismiss: 'Dismiss',
-    },
-    ar: {
-        save: 'حفظ',
-        discard: 'تجاهل',
-        saving: 'جارٍ الحفظ…',
-        saved: 'تم الحفظ',
-        submit: 'إرسال',
-        next: 'التالي',
-        back: 'رجوع',
-        skip: 'تخطٍّ',
-        steps: 'الخطوات',
-        stepOf: 'الخطوة {n} من {total}',
-        submitted: 'شكرًا لك. تم إرسال إجاباتك.',
-        submitAnother: 'إرسال إجابة أخرى',
-        draftFound: 'لديك إجابات غير محفوظة من {time}.',
-        restore: 'استعادة',
-        discardDraft: 'تجاهل',
-        ok: 'موافق',
-        cancel: 'إلغاء',
-        loading: 'جارٍ التحميل…',
-        saveClose: 'حفظ وإغلاق',
-        close: 'إغلاق',
-        dismiss: 'إخفاء',
-    },
-    de: {
-        save: 'Speichern',
-        discard: 'Verwerfen',
-        saving: 'Wird gespeichert…',
-        saved: 'Gespeichert',
-        submit: 'Absenden',
-        next: 'Weiter',
-        back: 'Zurück',
-        skip: 'Überspringen',
-        steps: 'Schritte',
-        stepOf: 'Schritt {n} von {total}',
-        submitted: 'Vielen Dank. Ihre Antworten wurden gesendet.',
-        submitAnother: 'Weitere Antwort senden',
-        draftFound: 'Sie haben ungespeicherte Antworten vom {time}.',
-        restore: 'Wiederherstellen',
-        discardDraft: 'Verwerfen',
-        ok: 'OK',
-        cancel: 'Abbrechen',
-        loading: 'Wird geladen…',
-        saveClose: 'Speichern und schließen',
-        close: 'Schließen',
-        dismiss: 'Ausblenden',
-    },
-    fr: {
-        save: 'Enregistrer',
-        discard: 'Annuler les modifications',
-        saving: 'Enregistrement…',
-        saved: 'Enregistré',
-        submit: 'Envoyer',
-        next: 'Suivant',
-        back: 'Retour',
-        skip: 'Passer',
-        steps: 'Étapes',
-        stepOf: 'Étape {n} sur {total}',
-        submitted: 'Merci. Vos réponses ont été envoyées.',
-        submitAnother: 'Envoyer une autre réponse',
-        draftFound: 'Vous avez des réponses non enregistrées du {time}.',
-        restore: 'Restaurer',
-        discardDraft: 'Ignorer',
-        ok: 'OK',
-        cancel: 'Annuler',
-        loading: 'Chargement…',
-        saveClose: 'Enregistrer et fermer',
-        close: 'Fermer',
-        dismiss: 'Masquer',
-    },
-};
-/** English, kept under its old name. */
-export const DEFAULT_LABELS = VIEWER_LABELS.en;
+import { pageDialogs } from './related.mjs';
+import { VIEWER_LABELS } from './labels.mjs';
+export { VIEWER_LABELS, DEFAULT_LABELS } from './labels.mjs';
 let mounts = 0;
 /**
  * Render a page into `host` and keep it in step with its form. Plain DOM: the
@@ -105,11 +11,12 @@ let mounts = 0;
  */
 export function mountViewer(host, options) {
     const doc = host.ownerDocument;
-    const checked = validatePage(options.page);
+    // The quick check of names and conditions: the full one, with its validation library, belongs where pages are made.
+    const checked = checkPage(options.page);
     if (!checked.ok) {
         throw new Error(`This page cannot be shown:\n${checked.issues.map((i) => `  ${i.path}: ${i.message}`).join('\n')}`);
     }
-    const page = checked.page;
+    const page = options.translate ? translatePage(checked.page, options.translate) : checked.page;
     const locale = options.locale ?? 'en';
     const preferences = options.preferences ?? browserPreferences();
     const dialogs = pageDialogs(options);
@@ -147,6 +54,12 @@ export function mountViewer(host, options) {
         if (node.colspan)
             wrapper.style.setProperty('--fd-span', String(node.colspan));
         const label = el('label', { class: 'fd-label', id: `${id}-label`, for: id }, node.label ?? def.label);
+        // The ✓ of a field filled in right; never on a yes/no box, a table or a file, where it would say nothing.
+        const mark = options.showValid && !NO_VALID_MARK.has(def.type) ? drawIcon(doc, 'check') : null;
+        if (mark) {
+            mark.classList.add('fd-valid-mark');
+            label.append(mark);
+        }
         const widget = createWidget({ form, name: node.field, field: def, node, id, document: doc, labels: widgetLabels, preferences, locale, dialogs }, options.widgets);
         if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(widget.element.tagName)) {
             // `for` stays: a custom field that puts the id on its own input is
@@ -158,7 +71,8 @@ export function mountViewer(host, options) {
         }
         const helpText = node.help ?? def.help;
         const help = helpText ? el('div', { class: 'fd-help', id: `${id}-help` }, helpText) : null;
-        const error = el('div', { class: 'fd-error', id: `${id}-error`, role: 'alert', hidden: '' });
+        // Not an alert of its own: a refused save is announced once, naming every field to look at.
+        const error = el('div', { class: 'fd-error', id: `${id}-error`, hidden: '' });
         // A warning from the data source's onchange, beside the field whose change brought it.
         const warning = el('div', { class: 'fd-warning', role: 'status', hidden: '' });
         wrapper.append(label, widget.element, ...(help ? [help] : []), error, warning);
@@ -174,10 +88,17 @@ export function mountViewer(host, options) {
             const warned = state.warning && state.warningField === node.field ? state.warning : '';
             warning.hidden = !warned;
             warning.textContent = warned;
+            if (mark) {
+                const value = state.values[node.field];
+                const filled = value !== null && value !== undefined && value !== '' && !(Array.isArray(value) && !value.length);
+                const valid = !shown.readonly && !message && filled && state.dirty.includes(node.field) && form.problem(node.field) === null;
+                wrapper.classList.toggle('fd-valid', valid);
+                mark.toggleAttribute('hidden', !valid);
+            }
             widget.update({
                 value: state.values[node.field],
                 values: state.values,
-                readonly: shown.readonly,
+                readonly: shown.readonly || locked,
                 required: shown.required,
                 invalid: !!message,
                 describedBy: [help?.id, message ? error.id : undefined].filter(Boolean).join(' ') || undefined,
@@ -330,12 +251,101 @@ export function mountViewer(host, options) {
         }
     }
     // ---- shared chrome ----------------------------------------------------------
-    const status = el('div', { class: 'fd-status', role: 'status', 'aria-live': 'polite' });
+    /** The whole form locked: every field read-only, no Save; buttons still run. */
+    let locked = options.readonly === true;
+    // Edit unlocks; Done saves what changed first, and locks only once that is saved.
+    const editSwitch = options.editSwitch ? el('button', { type: 'button', class: 'fd-button fd-edit-switch' }) : null;
+    editSwitch?.addEventListener('click', async () => {
+        if (!locked) {
+            if (form.getState().dirty.length) {
+                const saved = await form.save();
+                if (!saved) {
+                    if (!form.getState().saveProblem)
+                        announce(checkText(form.getState()));
+                    focusFirstProblem();
+                    return;
+                }
+            }
+            locked = true;
+        }
+        else
+            locked = false;
+        root.toggleAttribute('data-readonly', locked);
+        render(form.getState());
+    });
+    root.toggleAttribute('data-readonly', locked);
+    updaters.push(() => {
+        if (!editSwitch)
+            return;
+        editSwitch.textContent = locked ? labels.edit : labels.done;
+        editSwitch.classList.toggle('fd-button-primary', locked);
+    });
+    // The status says its words alone, so a screen reader hears them; Retry sits beside it.
+    const statusText = el('div', { class: 'fd-status', role: 'status', 'aria-live': 'polite' });
+    const retry = el('button', { type: 'button', class: 'fd-button fd-button-link fd-retry', hidden: '' }, labels.retry);
+    retry.addEventListener('click', () => void submitOrSave());
+    const status = el('div', { class: 'fd-status-box' }, statusText, retry);
+    const notDone = () => (page.data.kind === 'responses' ? labels.notSent : labels.notSaved);
+    /** "Not saved. Check: Email, Phone": the fields with a problem, in the order they show. */
+    function checkText(state) {
+        const names = [];
+        for (const key of Object.keys(state.errors)) {
+            const field = key.split('.')[0];
+            const shown = root.querySelector(`.fd-field[data-field="${field}"]:not([hidden]) > .fd-label`);
+            const name = shown?.firstChild?.textContent ?? page.fields[field]?.label ?? field;
+            if (!names.includes(name))
+                names.push(name);
+        }
+        const inOrder = [...root.querySelectorAll('.fd-field[data-field] > .fd-label')].map((label) => label.firstChild?.textContent ?? '');
+        names.sort((a, b) => (inOrder.indexOf(a) + 1 || Infinity) - (inOrder.indexOf(b) + 1 || Infinity));
+        return names.length ? fill(labels.checkFields, { what: notDone(), fields: names.join(', ') }) : notDone();
+    }
+    let quietTimer;
+    updaters.push((state) => {
+        const problem = state.saveProblem;
+        const text = state.status === 'saving' ? labels.saving
+            : state.status === 'saved' ? labels.saved
+                : state.status === 'loading' ? labels.loading
+                    : state.status === 'error' && problem ? (problem.kind === 'fields' ? checkText(state) : problem.kind === 'other' ? problem.message : notDone())
+                        : state.status === 'error' ? state.error ?? ''
+                            : '';
+        statusText.textContent = text;
+        retry.hidden = !(state.status === 'error' && problem?.kind === 'other');
+        statusText.classList.toggle('fd-status-error', state.status === 'error');
+        statusText.classList.toggle('fd-status-saved', state.status === 'saved');
+        // A toast shows while there is something to say, and lets "Saved" go after a moment.
+        if (options.saveStatus === 'toast') {
+            clearTimeout(quietTimer);
+            status.hidden = !text;
+            if (state.status === 'saved')
+                quietTimer = setTimeout(() => (status.hidden = true), 2500);
+        }
+    });
+    // A save the network failed: a banner over the page, with Retry.
+    const bannerRetry = el('button', { type: 'button', class: 'fd-button fd-retry' }, labels.retry);
+    bannerRetry.addEventListener('click', () => void submitOrSave());
+    const banner = el('div', { class: 'fd-banner fd-tone-warning', role: 'alert', hidden: '' }, el('span', { class: 'fd-banner-text' }, labels.offline), bannerRetry);
+    /** Said at once to a screen reader: why a save or send did not go through. */
+    const announcer = el('div', { class: 'fd-announce', role: 'alert', 'aria-live': 'assertive' });
+    function announce(text) {
+        announcer.textContent = '';
+        setTimeout(() => (announcer.textContent = text), 0);
+    }
+    // Each new reason a save was refused, from Save or from autosave, is shown where it belongs.
+    let seenProblem = null;
     updaters.push((state) => {
-        const text = state.status === 'saving' ? labels.saving : state.status === 'saved' ? labels.saved : state.status === 'loading' ? labels.loading : state.status === 'error' ? state.error ?? '' : '';
-        status.textContent = text;
-        status.classList.toggle('fd-status-error', state.status === 'error');
-        status.classList.toggle('fd-status-saved', state.status === 'saved');
+        if (state.saveProblem === seenProblem)
+            return;
+        seenProblem = state.saveProblem;
+        banner.hidden = seenProblem?.kind !== 'network';
+        if (!seenProblem)
+            return;
+        if (seenProblem.kind === 'rule')
+            void dialogConfirm(seenProblem.message, false);
+        else if (seenProblem.kind === 'fields')
+            announce(checkText(state));
+        else if (seenProblem.kind === 'other')
+            announce(seenProblem.message);
     });
     const draft = el('div', { class: 'fd-draft', hidden: '' });
     const draftText = el('span');
@@ -369,6 +379,9 @@ export function mountViewer(host, options) {
     async function submitOrSave() {
         const saved = await form.save();
         if (!saved) {
+            // Stopped by the page's own checks: say which fields; a refused save says so above.
+            if (!form.getState().saveProblem)
+                announce(checkText(form.getState()));
             focusFirstProblem();
             return;
         }
@@ -403,11 +416,15 @@ export function mountViewer(host, options) {
             discard.addEventListener('click', () => form.reset());
             actions.insertBefore(discard, action);
             updaters.push((state) => {
-                const dirty = state.dirty.length > 0 && state.status !== 'saving';
+                const dirty = state.dirty.length > 0 && state.status !== 'saving' && !locked;
                 action.hidden = !dirty;
                 discard.hidden = !dirty;
             });
         }
+        else
+            updaters.push(() => (action.hidden = locked));
+        if (editSwitch)
+            actions.prepend(editSwitch);
         if (options.showActions === false)
             return el('div', {}, box);
         if (page.actionsPosition === 'top') {
@@ -516,8 +533,11 @@ export function mountViewer(host, options) {
         }
         else
             actions.append(save, discard, ...(node.buttons ?? []).map(buttonItem), status);
+        // The Edit switch leads the header bar, before Save and the record's own buttons.
+        if (editSwitch && options.showActions !== false)
+            actions.prepend(editSwitch);
         updaters.push((state) => {
-            const dirty = state.dirty.length > 0 && state.status !== 'saving';
+            const dirty = state.dirty.length > 0 && state.status !== 'saving' && !locked;
             save.hidden = !dirty;
             discard.hidden = !dirty;
         });
@@ -603,7 +623,7 @@ export function mountViewer(host, options) {
         if (atFoot && options.showActions !== false) {
             card.append(foot);
             updaters.push((state) => {
-                foot.hidden = state.dirty.length === 0 && !status.textContent;
+                foot.hidden = state.dirty.length === 0 && !statusText.textContent;
             });
         }
         const layout = el('div', { class: 'fd-sheet-layout' }, card);
@@ -622,7 +642,7 @@ export function mountViewer(host, options) {
             barOptions['visibleStates'] = config.visibleStates;
         const node = { type: 'field', id: '#statusbar', field: config.field, widget: 'statusbar', options: barOptions };
         const widget = createWidget({ form, name: config.field, field: def, node, id: uid('statusbar'), document: doc, labels: widgetLabels, preferences, locale, dialogs }, options.widgets);
-        updaters.push((state) => widget.update({ value: state.values[config.field], values: state.values, readonly: form.node('#statusbar').readonly, required: false, invalid: false }));
+        updaters.push((state) => widget.update({ value: state.values[config.field], values: state.values, readonly: form.node('#statusbar').readonly || locked, required: false, invalid: false }));
         return widget.element;
     }
     let wizardForward = null;
@@ -637,8 +657,17 @@ export function mountViewer(host, options) {
     else
         body = sectionsLayout(layout);
     const head = layout.type === 'sheet' ? null : pageHead();
-    content.append(...(head ? [head] : []), draft, body);
-    root.append(content, done);
+    content.append(...(head ? [head] : []), banner, draft, body);
+    root.append(content, done, announcer);
+    // The status leaves its place beside Save when the page wants it in a corner or across the top.
+    if (options.saveStatus === 'toast') {
+        status.classList.add('fd-toast');
+        root.append(status);
+    }
+    else if (options.saveStatus === 'bar') {
+        status.classList.add('fd-status-bar');
+        content.prepend(status);
+    }
     root.addEventListener('submit', (event) => {
         event.preventDefault();
         if (wizardForward)
@@ -646,13 +675,68 @@ export function mountViewer(host, options) {
         else
             void submitOrSave();
     });
+    // ---- keys -------------------------------------------------------------------
+    /** Text typed and not yet taken, such as a tag without its Enter, is taken now. */
+    function commitTyping() {
+        const active = doc.activeElement;
+        if (active && root.contains(active) && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+            active.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    /** The fields Enter can move between: on this page, shown, with a box to type or choose in, outside tables of lines. */
+    function nextField(from) {
+        const fields = [...root.querySelectorAll('.fd-field')].filter((field) => !field.closest('[hidden], [data-type="one2many"] .fd-field, .fd-form-dialog') && !field.parentElement?.closest('[data-type="one2many"]'));
+        const here = from.closest('.fd-field');
+        const after = fields.slice(fields.indexOf(here) + 1);
+        for (const field of after) {
+            const control = field.querySelector('input:not([type="hidden"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]), [contenteditable="true"]');
+            if (control)
+                return control;
+        }
+        return null;
+    }
+    root.addEventListener('keydown', (event) => {
+        if (event.isComposing || event.key !== 'Enter')
+            return;
+        // An app's own content in a slot, such as a chatter's composer, keeps its keys.
+        if (event.target.closest('.fd-slot'))
+            return;
+        const keys = options.keys ?? {};
+        if (event.ctrlKey || event.metaKey) {
+            // Saves even after a field used the Enter (a tag box adding its tag); the grid keeps its own keys.
+            if (keys.saveWithCtrlEnter === false || options.showActions === false)
+                return;
+            if (event.target.closest('.ag-root-wrapper'))
+                return;
+            event.preventDefault();
+            commitTyping();
+            if (wizardForward)
+                void wizardForward();
+            else
+                void submitOrSave();
+            return;
+        }
+        // A plain Enter a field used itself, such as picking from an open list, is the field's.
+        if (event.defaultPrevented || !keys.enterMovesToNext || event.shiftKey || event.altKey)
+            return;
+        const from = event.target;
+        if (from.tagName !== 'INPUT' && from.tagName !== 'SELECT')
+            return;
+        if (from.closest('[data-type="one2many"]'))
+            return;
+        if (['button', 'submit', 'reset', 'file'].includes(from.type))
+            return;
+        event.preventDefault();
+        nextField(from)?.focus();
+    });
     // ---- confirmation dialog -----------------------------------------------------
-    function dialogConfirm(message) {
+    /** A question with Cancel and OK, or with `withCancel` false a notice with OK alone. */
+    function dialogConfirm(message, withCancel = true) {
         return new Promise((resolve) => {
             const text = el('p', { id: `${prefix}-confirm` }, message);
             const cancel = el('button', { type: 'button', class: 'fd-button' }, labels.cancel);
             const ok = el('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.ok);
-            const dialog = el('div', { class: 'fd-dialog', role: 'alertdialog', 'aria-modal': 'true', 'aria-labelledby': text.id }, text, el('div', { class: 'fd-actions fd-actions-end' }, cancel, ok));
+            const dialog = el('div', { class: 'fd-dialog', role: 'alertdialog', 'aria-modal': 'true', 'aria-labelledby': text.id }, text, el('div', { class: 'fd-actions fd-actions-end' }, ...(withCancel ? [cancel, ok] : [ok])));
             const backdrop = el('div', { class: 'fd-dialog-backdrop' }, dialog);
             const close = (answer) => {
                 backdrop.remove();
@@ -696,6 +780,12 @@ export function mountViewer(host, options) {
                 focusFirstProblem();
             return valid;
         },
+        setReadonly(readonly) {
+            locked = readonly;
+            root.toggleAttribute('data-readonly', locked);
+            render(form.getState());
+        },
+        isReadonly: () => locked,
         destroy() {
             unsubscribe();
             for (const cleanup of cleanups)
@@ -706,85 +796,6 @@ export function mountViewer(host, options) {
         },
     };
 }
-/** The field a page's records are named by: its title, or "name", or its first line of text. */
-function nameFieldOf(page) {
-    if (page.layout.type === 'sheet' && page.layout.title?.field)
-        return page.layout.title.field;
-    if (page.fields['name'])
-        return 'name';
-    return Object.entries(page.fields).find(([, def]) => def.type === 'char')?.[0] ?? null;
-}
-/** A form made of fields, for values edited in a dialog (a line, for one). */
-function valuesPage(fields, title, readonly) {
-    const shown = Object.fromEntries(Object.entries(fields).map(([name, def]) => [name, readonly ? { ...def, readonly: true } : def]));
-    return {
-        fieldia: '0.1',
-        id: 'values',
-        title,
-        data: { kind: 'record', model: 'values' },
-        fields: shown,
-        layout: {
-            type: 'sections',
-            id: 'values',
-            children: [{ type: 'section', id: 'values-section', columns: 2, children: Object.keys(shown).map((name) => ({ type: 'field', id: `values-${name}`, field: name })) }],
-        },
-    };
-}
-/** Only finding and making linked records: values edited in a dialog are no record of the source's to load, save or recalculate. */
-function lookupsOf(source) {
-    if (!source)
-        return undefined;
-    return {
-        ...(source.search ? { search: (request) => source.search(request) } : {}),
-        ...(source.create ? { create: (request) => source.create(request) } : {}),
-    };
-}
-/** The dialogs a page's widgets may open, made from the viewer's own options. */
-function pageDialogs(options) {
-    const pageFor = (model) => (typeof options.relatedPages === 'function' ? options.relatedPages(model) : options.relatedPages?.[model]) ?? null;
-    // A dialog's page looks and reads like the page that opened it, and can open dialogs of its own.
-    const shared = {
-        locale: options.locale,
-        skin: options.skin,
-        dir: options.dir,
-        widgets: options.widgets,
-        preferences: options.preferences,
-        relatedPages: options.relatedPages,
-    };
-    return {
-        canOpen: (model) => pageFor(model) !== null,
-        async openRecord(model, request) {
-            const related = pageFor(model);
-            if (!related)
-                return null;
-            const nameField = nameFieldOf(related);
-            const result = await openFormDialog({
-                ...shared,
-                page: related,
-                dataSource: options.dataSource,
-                recordId: request.recordId ?? null,
-                values: request.name && nameField ? { [nameField]: request.name } : undefined,
-                title: request.title,
-                size: 'large',
-            });
-            if (!result.saved || result.recordId === null)
-                return null;
-            const name = nameField ? result.values[nameField] : null;
-            return { id: result.recordId, label: typeof name === 'string' && name ? name : request.name ?? request.title };
-        },
-        searchMore: (request) => openSearchDialog({ title: request.title, search: request.search, locale: options.locale, skin: options.skin, dir: options.dir }),
-        async editValues(request) {
-            const result = await openFormDialog({
-                ...shared,
-                page: valuesPage(request.fields, request.title, request.readonly === true),
-                dataSource: lookupsOf(options.dataSource),
-                values: request.values,
-                title: request.title,
-                mode: 'values',
-                ...(request.recompute ? { recompute: request.recompute } : {}),
-            });
-            return result.saved ? result.values : null;
-        },
-    };
-}
+/** Fields whose ✓ would say nothing: a yes/no box is never wrong, a table or a file has its own look. */
+const NO_VALID_MARK = new Set(['boolean', 'one2many', 'binary', 'image', 'html', 'json', 'properties']);
 //# sourceMappingURL=viewer.mjs.map