@fieldia/core 0.20.0 → 0.21.0

package/src/lib/record/form.mjs

@@ -1,6 +1,6 @@
 import { compileModifier } from '../expression/modifier.mjs';
 import { localDay } from '../expression/functions.mjs';
-import { checkValue } from './check.mjs';
+import { checkProperties, checkValue } from './check.mjs';
 import { checkInput } from './inputs.mjs';
 import { compileComputed } from './compute.mjs';
 import { compileSetWhen } from './set-when.mjs';
@@ -10,7 +10,7 @@ import { firstValues, readLooseMap, readValueMap } from './value-map.mjs';
 import { resolveFilter } from './filter.mjs';
 import { rolesAllow } from './roles.mjs';
 import { compileFieldTone, compileTable } from './cells.mjs';
-import { MESSAGES } from './messages.mjs';
+import { fill, MESSAGES } from './messages.mjs';
 import { saveProblemOf } from './data-source.mjs';
 import { hostScheduler } from './scheduler.mjs';
 import { createMoments, createRunner } from './run.mjs';
@@ -23,6 +23,8 @@ import { emptyValue, initialValues, isEmpty, lineKind, structuredCopy, } from '.
 export function createForm(options) {
     return innerForm(options, []).form;
 }
+/** A line's cell whose line is no longer there. */
+const gone = Symbol('gone');
 const isRecord = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
 /** A saved form's answers, as the one value they are in the form round it. */
 const asValue = (values) => values;
@@ -108,6 +110,38 @@ function innerForm(options, within) {
             parts.set(node.id, node.source);
     /** Those given their page, with the inner form that holds their answers. */
     const attached = new Map();
+    /** How each box with text typed and not yet read reads it now (`settling`). */
+    const readers = new Set();
+    /** Whether each box that says so is still being typed in (`settling`'s `typing`): autosave waits for them. */
+    const typings = new Set();
+    /** A box of this form, or of a saved form placed on it, still being typed in. */
+    const typingNow = () => [...typings].some((typing) => typing()) || [...attached.values()].some((part) => part.inner.typing());
+    /** Readings of typed text still waiting, as readTyped started them. */
+    let readingNow = 0;
+    /**
+     * Every box's text read now, this form's and its saved forms' placed on the page, before it is checked or saved:
+     * what a reading that waits (a name looked up) is waiting for, or null when none does. Such a box keeps its text
+     * unread meanwhile, so a check made now refuses it; a save waits.
+     */
+    function readTyped() {
+        const waits = [];
+        for (const read of [...readers]) {
+            const wait = read();
+            if (wait && typeof wait.then === 'function')
+                waits.push(wait.catch(() => undefined));
+        }
+        for (const part of attached.values()) {
+            const inner = part.inner.form;
+            const wait = inner.settle();
+            if (inner.reading())
+                waits.push(wait);
+        }
+        if (!waits.length)
+            return null;
+        // Waiting on its own readings, or a saved form's: `reading` says so until they end.
+        readingNow++;
+        return Promise.all(waits).then(() => void readingNow--);
+    }
     /** The page's fields, and each saved form's answers as a JSON value: what is loaded, told as changed and saved. */
     const fields = { ...page.fields };
     for (const part of parts.values())
@@ -201,6 +235,7 @@ function innerForm(options, within) {
         saveProblem: null,
         choices: {},
         definitions: {},
+        unread: {},
     };
     started = true;
     /** Field errors a refused save brought, each kept until its field changes from the value it was refused with. */
@@ -313,8 +348,24 @@ function innerForm(options, within) {
     function checked(name) {
         const def = page.fields[name];
         const loaded = state.choices[name]?.options;
+        if (def.type === 'properties' && def.definitionsFrom) {
+            // The definitions the linked record keeps, once loaded: each property checked as one of its kind.
+            const definitions = state.definitions[name]?.definitions;
+            return definitions ? { ...def, definitions } : def;
+        }
         return def.type === 'selection' && def.optionsFrom && loaded ? { ...def, options: loaded, optionsFrom: undefined } : def;
     }
+    /** A properties field's problems, each at its property's path (`field.property`), as its row shows them. */
+    function propertyProblems(name) {
+        const def = checked(name);
+        if (def.type !== 'properties')
+            return {};
+        return Object.fromEntries(Object.entries(checkProperties(def.definitions, state.values[name], messages, today())).map(([property, message]) => [`${name}.${property}`, message]));
+    }
+    /** A field's own problem, less what its properties' rows say of themselves. */
+    function besidesRows(name, message) {
+        return message !== undefined && page.fields[name]?.type === 'properties' && Object.values(propertyProblems(name)).includes(message) ? undefined : message;
+    }
     function track(promise) {
         pending.add(promise);
         const done = () => pending.delete(promise);
@@ -363,8 +414,8 @@ function innerForm(options, within) {
             ...(node.pressed ? { pressed: node.pressed.evaluate(ctx, env) } : {}),
         };
     }
-    /** Field nodes — or saved forms placed on the page — inside `root` (or the whole page), visible right now. */
-    function visibleFieldNodes(root, kind = 'field') {
+    /** Field nodes — or saved forms placed on the page — inside `root` (or the whole page), visible right now; `field`'s alone, when named. */
+    function visibleFieldNodes(root, kind = 'field', field) {
         const inside = (node) => {
             if (!root)
                 return true;
@@ -382,7 +433,7 @@ function innerForm(options, within) {
                     return true;
             return false;
         };
-        return [...index.values()].filter((node) => node.kind === kind && inside(node) && !skipped(node) && !nodeState(node.id).invisible);
+        return [...index.values()].filter((node) => node.kind === kind && (field === undefined || node.field === field) && inside(node) && !skipped(node) && !nodeState(node.id).invisible);
     }
     /** What a field node's answer rules say of its value now: the first error and the first warning. */
     function ruleCheck(node) {
@@ -429,16 +480,52 @@ function innerForm(options, within) {
             state = previous;
         }
     }
+    /** A range's last day (`options.endField` of a `daterange`), the field it writes besides its own; null for any other node. */
+    function rangeEnd(node) {
+        const source = node.source;
+        const end = source.widget === 'daterange' ? source.options?.['endField'] : undefined;
+        return typeof end === 'string' && page.fields[end] && end !== node.field ? end : null;
+    }
+    /**
+     * A range's end, a field of its own though no node shows it alone: its required, min, max and days, and that it
+     * is not before its start ("Ends can’t be before Starts"). Required when its field is, or the range is.
+     */
+    function rangeEndError(node, end, required = nodeState(node.id).required) {
+        const def = page.fields[end];
+        const value = state.values[end];
+        const own = checkValue(checked(end), value, required || def.required === true, messages, today());
+        if (own)
+            return own;
+        const start = state.values[node.field];
+        if (typeof start !== 'string' || typeof value !== 'string' || !start || !value)
+            return undefined;
+        const at = (v) => (def.type === 'datetime' ? Date.parse(v) : Date.parse(v.slice(0, 10)));
+        if (at(value) < at(start))
+            return fill(messages.endBeforeStart, { end: def.label, start: page.fields[node.field].label });
+        return undefined;
+    }
     /** Errors for the visible fields under `root`, without publishing them. */
     function collectErrors(root) {
         const errors = {};
+        const seen = new Set();
         for (const node of visibleFieldNodes(root)) {
             const name = node.field;
+            seen.add(name);
+            const end = rangeEnd(node);
+            if (end) {
+                seen.add(end);
+                const problem = errors[end] ? undefined : rangeEndError(node, end);
+                if (problem)
+                    errors[end] = problem;
+            }
             if (errors[name])
                 continue;
             const def = page.fields[name];
             const message = nodeError(node);
-            if (message)
+            // A property says its own problem on its row; the field, only what is its own (that it is required).
+            if (def.type === 'properties')
+                Object.assign(errors, propertyProblems(name));
+            if (besidesRows(name, message))
                 errors[name] = message;
             if (def.type === 'one2many') {
                 for (const line of state.values[name] ?? []) {
@@ -459,6 +546,10 @@ function innerForm(options, within) {
                 }
             }
         }
+        // Text left in a box that does not read answers for its field, in the words it was left with.
+        for (const [path, unread] of Object.entries(state.unread))
+            if (seen.has(path.split('.')[0]))
+                errors[path] = unread.message;
         // A saved form placed here answers for its fields by its own page's rules.
         for (const node of visibleFieldNodes(root, 'form')) {
             const part = attached.get(node.id);
@@ -468,6 +559,63 @@ function innerForm(options, within) {
         }
         return errors;
     }
+    /** The value at a path: a field's, or a line's cell (`field.lineKey.subfield`); `gone` when the line is not there. */
+    function valueAt(values, path) {
+        const parts = path.split('.');
+        // A property of a properties field (`field.property`).
+        if (parts.length === 2 && page.fields[parts[0]]?.type === 'properties') {
+            const held = values[parts[0]];
+            return held && typeof held === 'object' && !Array.isArray(held) ? held[parts[1]] : undefined;
+        }
+        if (parts.length < 3)
+            return values[path];
+        const [field, sub] = [parts[0], parts[parts.length - 1]];
+        const key = parts.slice(1, -1).join('.');
+        const line = (values[field] ?? []).find((l) => l.key === key);
+        return line ? line.values[sub] : gone;
+    }
+    /** Unread text whose field has since been written another way — a value typed that reads, the app's — is let go. */
+    function unreadKept(values) {
+        let kept = null;
+        for (const path of Object.keys(state.unread)) {
+            const now = valueAt(values, path);
+            if (now !== gone && now === valueAt(state.values, path))
+                continue;
+            kept ??= { ...state.unread };
+            delete kept[path];
+        }
+        return kept ?? state.unread;
+    }
+    /** A field's own problem as its box is left, never that it is required: undefined when it has none, or is not shown. */
+    function leftProblem(path) {
+        const parts = path.split('.');
+        const field = parts[0];
+        const shown = visibleFieldNodes(undefined, 'field', field);
+        // A range's end is left from its own box in the range: its problems, that it is before its start too.
+        const range = shown.length ? undefined : visibleFieldNodes().find((node) => rangeEnd(node) === field);
+        if (!shown.length && !range)
+            return undefined;
+        if (state.unread[path])
+            return state.unread[path].message;
+        if (range)
+            return isEmpty(fieldDef(field), state.values[field]) ? undefined : rangeEndError(range, field, false);
+        if (parts.length === 1) {
+            const value = state.values[field];
+            if (isEmpty(fieldDef(field), value))
+                return undefined;
+            return (shown.map((node) => checkInput(page.fields[field], node.source, value, messages)).find(Boolean) ??
+                besidesRows(field, checkValue(checked(field), value, false, messages, today())) ??
+                shown.map((node) => ruleCheck(node).error).find(Boolean));
+        }
+        if (parts.length === 2 && page.fields[field]?.type === 'properties')
+            return propertyProblems(field)[path];
+        const def = lineField(field);
+        const sub = def.fields[parts[parts.length - 1]];
+        const value = valueAt(state.values, path);
+        if (!sub || value === gone || isEmpty(sub, value))
+            return undefined;
+        return checkValue(sub, value, false, messages, today());
+    }
     /**
      * Answers changed from outside a saved form — loaded, put back, set — handed
      * to it, and what it holds after taken back: its defaults and worked-out
@@ -514,26 +662,32 @@ function innerForm(options, within) {
     /** Write values someone or something changed. `fresh` values are a starting point instead (a restored draft). */
     function writeValues(written, extra = {}, fresh = false) {
         const values = syncParts(fresh ? startFrom(written) : settle(written), fresh ? 'fresh' : 'edit');
-        let errors = Object.keys(state.errors).length ? revalidateShown(values) : state.errors;
-        // Words typed where a number goes are said at once, as Flectra marks a box it cannot read; what is missing waits for sending.
-        const unread = {};
+        // Text left unread in a box goes once its field is written another way, and its words with it.
+        const unread = unreadKept(values);
+        const before = state;
+        state = { ...state, unread };
+        let errors = Object.keys(before.errors).length ? revalidateShown(values) : before.errors;
+        state = before;
+        // Words where a number goes — from a server or an old draft: a box never sets them — are said at once; what is
+        // missing waits for sending.
+        const words = {};
         for (const name of Object.keys(written)) {
             const def = page.fields[name];
             if (written[name] === state.values[name] || !def)
                 continue;
             if (notANumber(def, written[name]))
-                unread[name] = checkValue(def, written[name], false, messages);
+                words[name] = checkValue(def, written[name], false, messages);
             if (def.type !== 'one2many')
                 continue;
             for (const line of written[name] ?? []) {
                 for (const [sub, v] of Object.entries(line.values))
                     if (notANumber(def.fields[sub], v))
-                        unread[`${name}.${line.key}.${sub}`] = checkValue(def.fields[sub], v, false, messages);
+                        words[`${name}.${line.key}.${sub}`] = checkValue(def.fields[sub], v, false, messages);
             }
         }
-        if (Object.keys(unread).length)
-            errors = { ...errors, ...unread };
-        set({ values, dirty: dirtyFields(values), errors, warnings: withValues(values, collectWarnings), ...extra });
+        if (Object.keys(words).length)
+            errors = { ...errors, ...words };
+        set({ values, dirty: dirtyFields(values), errors, warnings: withValues(values, collectWarnings), unread, ...extra });
     }
     /** Once errors are on screen, keep them current as the person fixes things. */
     function revalidateShown(values) {
@@ -595,6 +749,10 @@ function innerForm(options, within) {
             scheduler.clearTimeout(autosaveTimer);
         autosaveTimer = scheduler.setTimeout(() => {
             autosaveTimer = null;
+            // Nobody pressed anything: a box still typed in is never read under the person's keys. The save waits until it is
+            // left (or Enter is pressed in it), and reads it then, as any save does.
+            if (typingNow())
+                return scheduleAutosave();
             if (state.dirty.length && Object.keys(collectErrors()).length === 0)
                 void track(save());
         }, autosave.delayMs);
@@ -665,6 +823,11 @@ function innerForm(options, within) {
      * and a stop keeps it unsaved; `afterSave` runs once it is saved.
      */
     async function saving(chain) {
+        // What is still typed in a box is read first: it is what is saved, or why nothing is. A name still being looked
+        // up is waited for, so the record it names is what is saved — or, named by none, why nothing is.
+        const waiting = readTyped();
+        if (waiting)
+            await waiting;
         if (page.on?.beforeSave) {
             const before = await moment('on.beforeSave', page.on.beforeSave, chain, false);
             if (!before.done) {
@@ -709,7 +872,7 @@ function innerForm(options, within) {
             // Lines the save brings back load again, in their tables' orders, as Flectra's reload after a save.
             const values = syncParts(startFrom(result.values ? ordered({ ...state.values, ...result.values }, Object.keys(result.values)) : state.values), 'start');
             baseline = structuredCopy(values);
-            set({ status: 'saved', recordId: result.id, values, dirty: [], warnings: withValues(values, collectWarnings) });
+            set({ status: 'saved', recordId: result.id, values, dirty: [], warnings: withValues(values, collectWarnings), unread: {} });
             emit('save', { recordId: state.recordId, values: state.values });
             void track(moment('on.afterSave', page.on?.afterSave, chain, false));
             return null;
@@ -783,9 +946,15 @@ function innerForm(options, within) {
         changed(field, by);
         return key;
     }
-    /** Check the form, or only these fields, showing what is found as sending does. */
-    function check(names) {
+    /**
+     * Check the form, or only these fields, showing what is found as sending does: a step's check, which waits for a
+     * name still being looked up in a box, as a save does.
+     */
+    async function check(names) {
         names?.forEach(fieldDef);
+        const waiting = readTyped();
+        if (waiting)
+            await waiting;
         const all = collectErrors();
         const found = names ? Object.fromEntries(Object.entries(all).filter(([key]) => names.some((name) => key === name || key.startsWith(`${name}.`)))) : all;
         set({ errors: found });
@@ -793,11 +962,15 @@ function innerForm(options, within) {
         return first === undefined ? null : { reason: 'check', message: first };
     }
     /** Go to a wizard's step for a run; undefined when the target is no step of it, but a tab. */
-    function goToStep(target, chain) {
+    async function goToStep(target, chain) {
         if (!steps.includes(target))
             return undefined;
         if (!form.steps().includes(target))
             return { reason: 'cannot', message: `The step "${target}" does not apply now` };
+        // A name still being looked up in a box on the way is waited for, as a save waits for it.
+        const waiting = readTyped();
+        if (waiting)
+            await waiting;
         let went = false;
         inRun(chain, () => (went = form.goTo(target)));
         return went ? null : { reason: 'check', message: Object.values(state.errors)[0] };
@@ -869,7 +1042,7 @@ function innerForm(options, within) {
                 return;
             // Lines load in their tables' orders; where a person moves them after, they stay.
             baseline = syncParts(startFrom(ordered({ ...initialValues(fields, today()), ...loaded })), 'start');
-            set({ status: 'ready', values: structuredCopy(baseline), dirty: [], errors: {}, warnings: withValues(baseline, collectWarnings) });
+            set({ status: 'ready', values: structuredCopy(baseline), dirty: [], errors: {}, warnings: withValues(baseline, collectWarnings), unread: {} });
             if (again)
                 return;
             offerDraft();
@@ -891,7 +1064,7 @@ function innerForm(options, within) {
         serverErrors = {};
         told = null;
         showing = false;
-        const fresh = { dirty: [], errors: {}, warning: null, warningField: null, error: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null };
+        const fresh = { dirty: [], errors: {}, warning: null, warningField: null, error: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null, unread: {} };
         if (id != null) {
             set({ ...fresh, recordId: id, status: 'idle' });
             return load();
@@ -1022,12 +1195,65 @@ function innerForm(options, within) {
             const shown = visibleFieldNodes().filter((node) => node.field === name);
             if (!shown.length)
                 return null;
+            if (state.unread[name])
+                return state.unread[name].message;
+            // A property's text left unread answers for its field.
+            if (page.fields[name].type === 'properties') {
+                const row = Object.keys(state.unread).find((path) => path.startsWith(`${name}.`));
+                if (row)
+                    return state.unread[row].message;
+            }
             const own = shown.map(unticked).find(Boolean) ??
                 shown.map((node) => checkInput(page.fields[name], node.source, state.values[name], messages)).find(Boolean) ??
                 checkValue(checked(name), state.values[name], shown.some((node) => nodeState(node.id).required), messages, today());
             return own ?? shown.map((node) => ruleCheck(node).error).find((error) => error !== undefined) ?? null;
         },
+        setUnread(path, unread) {
+            const field = path.split('.')[0];
+            // A line's cell (`field.lineKey.subfield`), or a property (`field.property`).
+            const def = fieldDef(field);
+            if (path.includes('.') && def.type !== 'properties')
+                lineField(field);
+            const had = state.unread[path];
+            if (!unread && !had)
+                return;
+            // A line taken away takes its cells' text with it: a box of it still reading (a name looked up) keeps none.
+            if (unread && !had && path.split('.').length >= 3 && def.type !== 'properties' && valueAt(state.values, path) === gone)
+                return;
+            if (unread && had && had.text === unread.text && had.message === unread.message)
+                return;
+            const next = { ...state.unread };
+            if (unread)
+                next[path] = { text: unread.text, message: unread.message };
+            else
+                delete next[path];
+            // Problems on screen stay current: an unread text put right takes its words with it.
+            const before = state;
+            state = { ...state, unread: next };
+            const errors = Object.keys(before.errors).length ? revalidateShown(state.values) : before.errors;
+            state = before;
+            set({ unread: next, errors });
+        },
+        leave(path) {
+            const problem = leftProblem(path);
+            if (!problem || state.errors[path] === problem)
+                return;
+            set({ errors: { ...state.errors, [path]: problem } });
+        },
+        settling(read, typing) {
+            readers.add(read);
+            if (typing)
+                typings.add(typing);
+            return () => {
+                readers.delete(read);
+                if (typing)
+                    typings.delete(typing);
+            };
+        },
+        settle: () => readTyped() ?? Promise.resolve(),
+        reading: () => readingNow > 0 || [...attached.values()].some((part) => part.inner.form.reading()),
         validate() {
+            readTyped();
             const errors = collectErrors();
             set({ errors });
             return Object.keys(errors).length === 0;
@@ -1038,7 +1264,7 @@ function innerForm(options, within) {
             serverErrors = {};
             holding = setWhen.holding(baseline);
             const values = syncParts(structuredCopy(baseline), 'start');
-            set({ values, dirty: [], errors: {}, warnings: withValues(values, collectWarnings), warning: null, warningField: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null });
+            set({ values, dirty: [], errors: {}, warnings: withValues(values, collectWarnings), warning: null, warningField: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null, unread: {} });
         },
         changes,
         addLine: (field, values = {}) => addLine(field, values, 'person'),
@@ -1133,6 +1359,7 @@ function innerForm(options, within) {
         next() {
             if (!state.step)
                 return false;
+            readTyped();
             // A step skipped before and gone back to is answered now, and checked like any other.
             if (state.skipped.includes(state.step))
                 set({ skipped: state.skipped.filter((id) => id !== state.step) });
@@ -1179,6 +1406,7 @@ function innerForm(options, within) {
                 set({ step: target, errors: {} });
                 return true;
             }
+            readTyped();
             const skipped = [...state.skipped];
             for (const id of visible.slice(at, to)) {
                 if (skipped.includes(id))
@@ -1381,9 +1609,10 @@ function innerForm(options, within) {
                 return writeValues({ ...initialValues(page.fields, today()), ...values }, {}, how === 'fresh');
             baseline = startFrom({ ...initialValues(page.fields, today()), ...structuredCopy(values) });
             const start = syncParts(structuredCopy(baseline), 'start');
-            set({ values: start, dirty: [], errors: {}, warnings: withValues(start, collectWarnings), warning: null, warningField: null });
+            set({ values: start, dirty: [], errors: {}, warnings: withValues(start, collectWarnings), warning: null, warningField: null, unread: {} });
         },
         errorsNow: () => collectErrors(),
+        typing: typingNow,
         show(errors) {
             if (JSON.stringify(errors) !== JSON.stringify(state.errors))
                 set({ errors });