@loadbare/app 0.19.0 → 0.20.0

package/dist/hub/lb-apply.js

@@ -38,7 +38,7 @@
  * landing reaches in there as it reaches everywhere else, so a branch that
  * returns is already current. Nothing but landing reaches in.
  */
-import { AGGREGATES, ATTR_COLUMN, ATTR_FILTER, ATTR_ORDER, CHOICES_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ROW_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_SHOW, ATTR_SUM, KIND_ROW, LIVE_GROUP, LIVE_ROW, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
+import { AGGREGATES, ATTR_COLUMN, ATTR_FILTER, ATTR_ORDER, CHOICES_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_ROW_COUNT, ATTR_QUERY_UNSORTED_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_ROW_UNSORTED, ATTR_SHOW, ATTR_SUM, ATTR_URL_PARM, KIND_ROW, LIVE_GROUP, LIVE_ROW, ORDER_DESCENDING, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
 import { compareRows, compareValues, isPatch, parseFilter, parseOrder, passes, readAs, } from "../core/lb-types.js";
 import { attachPlaced, detachRemoved, LEAVING, PARKED, placed, upgradeAbsent, } from "./lb-lifecycle.js";
 /** A DocumentFragment's nodeType. Tier 3 has no `Node` global to read it from. */
@@ -325,6 +325,8 @@ function note(places, el) {
     const column = el.getAttribute(ATTR_COLUMN);
     if (column !== null)
         addPlace(places.columns, column, el);
+    if (el.hasAttribute(ATTR_URL_PARM))
+        places.links.push(el);
     const show = el.getAttribute(ATTR_SHOW);
     if (show === null)
         return;
@@ -337,7 +339,20 @@ function note(places, el) {
     addPlace(places.shows, show, el);
 }
 function noPlaces() {
-    return { columns: new Map(), shows: new Map() };
+    return { columns: new Map(), shows: new Map(), links: [] };
+}
+/** An element a row lands on, in any way. */
+const PLACE = `[${ATTR_COLUMN}], [${ATTR_SHOW}], [${ATTR_URL_PARM}]`;
+/**
+ * Note a row's root among its places: its own `lb-column` and `lb-url-parm`
+ * count, as the row is its own. Its own `lb-show` never does.
+ */
+function noteRoot(places, root) {
+    if (root.hasAttribute(ATTR_COLUMN)) {
+        addPlace(places.columns, root.getAttribute(ATTR_COLUMN), root);
+    }
+    if (root.hasAttribute(ATTR_URL_PARM))
+        places.links.push(root);
 }
 /**
  * The places in root's query, found by searching: root's own `lb-column`
@@ -346,12 +361,10 @@ function noPlaces() {
  */
 function search(root, self, stop) {
     const places = noPlaces();
-    if (self && root.hasAttribute(ATTR_COLUMN)) {
-        addPlace(places.columns, root.getAttribute(ATTR_COLUMN), root);
-    }
-    for (const el of below(root, `[${ATTR_COLUMN}], [${ATTR_SHOW}]`, stop)) {
+    if (self)
+        noteRoot(places, root);
+    for (const el of below(root, PLACE, stop))
         note(places, el);
-    }
     return places;
 }
 function kids(el) {
@@ -372,9 +385,8 @@ function compile(row) {
         for (let i = 0; i < children.length; i++) {
             const child = children[i];
             const at = [...path, i];
-            if (child.hasAttribute(ATTR_COLUMN) || child.hasAttribute(ATTR_SHOW)) {
+            if (child.matches(PLACE))
                 paths.push(at);
-            }
             if (child.hasAttribute(ATTR_QUERY))
                 continue;
             if (child.localName === "template" && !child.hasAttribute(ATTR_SHOW)) {
@@ -393,9 +405,7 @@ function compile(row) {
  */
 function placesBy(row, paths) {
     const places = noPlaces();
-    if (row.hasAttribute(ATTR_COLUMN)) {
-        addPlace(places.columns, row.getAttribute(ATTR_COLUMN), row);
-    }
+    noteRoot(places, row);
     for (const path of paths) {
         let el = row;
         for (const i of path)
@@ -446,7 +456,71 @@ function fill(places, row) {
  * `stop` passes over everything matching it and inside it.
  */
 export function applyRow(root, row, self = false, stop) {
-    fill(search(root, self, stop), row);
+    const places = search(root, self, stop);
+    fill(places, row);
+    link(places, row);
+}
+/** The `href` each link was written with, which every landing starts from. */
+const bases = new WeakMap();
+/** Columns already reported as missing from a row, or as no parm's value. */
+const unlinked = new Set();
+/** The columns an element's `lb-url-parm` names. */
+function parmsOf(el) {
+    return (el.getAttribute(ATTR_URL_PARM) ?? "")
+        .split(",")
+        .map((column) => column.trim())
+        .filter((column) => column !== "");
+}
+/**
+ * Write each link's `href` from the whole row: the `href` as written, with
+ * each column its `lb-url-parm` names as the parm of the same name. A null,
+ * empty or missing column leaves its parm off, as an empty value takes a
+ * parm out of the URL.
+ */
+function link(places, row) {
+    if (places.links.length === 0)
+        return;
+    // A row with no values is a blank, not a row missing its columns.
+    const real = Object.values(row).some((v) => v !== null && v !== undefined);
+    for (const el of places.links) {
+        let base = bases.get(el);
+        if (base === undefined) {
+            base = el.getAttribute("href") ?? "";
+            bases.set(el, base);
+        }
+        const hashAt = base.indexOf("#");
+        const hash = hashAt < 0 ? "" : base.slice(hashAt);
+        const rest = hashAt < 0 ? base : base.slice(0, hashAt);
+        const queryAt = rest.indexOf("?");
+        const path = queryAt < 0 ? rest : rest.slice(0, queryAt);
+        const parms = new URLSearchParams(queryAt < 0 ? "" : rest.slice(queryAt));
+        for (const column of parmsOf(el)) {
+            const value = row[column];
+            if (value === undefined && real && !unlinked.has(column)) {
+                unlinked.add(column);
+                console.warn(`lb-hub: <a ${ATTR_URL_PARM}> names '${column}', which the row ` +
+                    `around it does not have`);
+            }
+            const atomic = typeof value === "string" ||
+                typeof value === "number" ||
+                typeof value === "boolean";
+            if (!atomic && value !== null && value !== undefined) {
+                if (!unlinked.has(column)) {
+                    unlinked.add(column);
+                    console.warn(`lb-hub: '${column}' is no value a query parm can hold, and is ` +
+                        `left off the link`);
+                }
+            }
+            if (!atomic || value === "")
+                parms.delete(column);
+            else
+                parms.set(column, String(value));
+        }
+        const query = parms.toString();
+        const href = `${path}${query ? `?${query}` : ""}${hash}`;
+        if (el.getAttribute("href") !== href)
+            el.setAttribute("href", href);
+    }
 }
 /**
  * A row naming every column root's query shows, each null: what landing it
@@ -582,7 +656,9 @@ function listFor(el, template) {
                 el: row,
                 places: search(row, true),
                 data: {},
+                placed: {},
                 hidden: false,
+                unsorted: false,
             };
             list.byKey.set(key, entry);
             list.root.rows.push(entry);
@@ -620,7 +696,9 @@ function create(list, doc, key) {
         el,
         places: placesBy(el, list.paths),
         data: {},
+        placed: {},
         hidden: false,
+        unsorted: false,
     };
     list.byKey.set(key, entry);
     return entry;
@@ -722,7 +800,7 @@ function arrange(list, doc, order, terms) {
         const term = terms[level];
         const runs = [];
         for (const entry of entries) {
-            const value = term ? entry.data[term.column] : null;
+            const value = term ? entry.placed[term.column] : null;
             const id = groupId(term?.column ?? "", value);
             const last = runs.at(-1);
             if (last?.id === id)
@@ -936,14 +1014,15 @@ function hide(el, hidden) {
 }
 /**
  * Finish a group and everything under it, from the rows it shows: each
- * heading filled from the first, each aggregate set from all of them, and a
- * group hidden when a filter hides every row in it. The rows it shows are
- * returned.
+ * heading filled from the first, as it was when last placed by the order,
+ * each aggregate set from all of them, and a group hidden when a filter hides
+ * every row in it. The rows it shows are returned.
  */
 function finish(group, types) {
-    const rows = group.children.length > 0
+    const shown = group.children.length > 0
         ? group.children.flatMap((child) => finish(child, types))
-        : group.rows.filter((entry) => !entry.hidden).map((entry) => entry.data);
+        : group.rows.filter((entry) => !entry.hidden);
+    const rows = shown.map((entry) => entry.data);
     const hidden = rows.length === 0 && rowsUnder(group).length > 0;
     if (hidden !== group.hidden) {
         group.hidden = hidden;
@@ -953,11 +1032,11 @@ function finish(group, types) {
             }
         }
     }
-    if (rows[0])
+    if (shown[0])
         for (const head of group.heads)
-            fill(head, rows[0]);
+            fill(head, shown[0].placed);
     aggregate(group.aggregates, rows, types);
-    return rows;
+    return shown;
 }
 /** The order to place rows by, or none when it cannot be read. */
 function termsOf(el, order) {
@@ -969,6 +1048,12 @@ function termsOf(el, order) {
         return [];
     }
 }
+/** An order's terms written back as its text. */
+function orderText(terms) {
+    return terms
+        .map((term) => (term.descending ? ORDER_DESCENDING : "") + term.column)
+        .join(",");
+}
 /** The user's choice in a column of `lb-choices`, when one is made. */
 function choiceIn(choices, column) {
     const value = choices?.[column];
@@ -1044,6 +1129,11 @@ function differs(before, after) {
  * rows go last. A row that stands where it stood is not touched, so landing
  * the same rows again moves nothing. A row a filter the user chose does not
  * pass is `hidden`.
+ *
+ * A landing `held` for the user working in the list moves nothing already
+ * showing, whole or a patch. A row it changed or created that the order
+ * would put elsewhere, or that the filter would hide, stays and is stamped
+ * unsorted until the rows are next placed by the order.
  */
 export function applyRows(el, template, keyColumn, result, options = {}) {
     const list = listFor(el, template);
@@ -1100,6 +1190,10 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         if (fresh || options.refill || changed.has(entry))
             fill(entry.places, data);
         entry.data = { ...entry.data, ...data };
+        // A link reads the whole row, which a patch may send only part of.
+        if (fresh || options.refill || changed.has(entry)) {
+            link(entry.places, entry.data);
+        }
     }
     for (const entry of gone) {
         list.byKey.delete(entry.key);
@@ -1109,9 +1203,6 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     // already showing with what is new after it. A sort keeps rows that
     // compare equal in this order.
     const stayed = shown.filter((entry) => list.byKey.get(entry.key) === entry);
-    let order = whole
-        ? [...arriving.keys()].map((key) => list.byKey.get(key))
-        : [...stayed, ...created];
     const terms = termsOf(el, orderFor(el, options));
     if (list.levels.length > terms.length && !warned.has(el)) {
         warned.add(el);
@@ -1119,16 +1210,48 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
             `template(s) and an order of ${terms.length} term(s); a level with ` +
             `no term shows its rows as one group`);
     }
-    if (terms.length > 0) {
-        order = order
+    const sort = (entries) => terms.length === 0
+        ? entries
+        : entries
             .map((entry, i) => ({ entry, i }))
             .sort((a, b) => compareRows(a.entry.data, b.entry.data, terms, options.types) ||
             a.i - b.i)
             .map(({ entry }) => entry);
-    }
     const passing = filterFor(el, options.choices, options.types ?? {});
-    for (const entry of order)
-        filterRow(entry, !passing(entry.data));
+    let order;
+    if (options.held) {
+        // The user is working in this list: what already shows stays where it
+        // stands, and what is new goes last in the group it belongs to.
+        for (const entry of created)
+            entry.placed = entry.data;
+        order = heldOrder(stayed, created, groupTerms(list, terms));
+        const touched = new Set([...changed, ...created]);
+        for (const entry of order)
+            if (entry.unsorted)
+                touched.add(entry);
+        const out = movedRows(order, sort(order), touched);
+        for (const entry of order) {
+            const fails = !passing(entry.data);
+            // A row the user just changed does not vanish from under them.
+            const kept = touched.has(entry) && !entry.hidden;
+            filterRow(entry, fails && !kept);
+            // A row stands in the group it was placed in until it is placed again.
+            const moves = regrouped(entry, list, terms);
+            if (!moves)
+                entry.placed = entry.data;
+            entry.unsorted = out.has(entry) || (kept && fails) || moves;
+        }
+    }
+    else {
+        order = sort(whole
+            ? [...arriving.keys()].map((key) => list.byKey.get(key))
+            : [...stayed, ...created]);
+        for (const entry of order) {
+            entry.placed = entry.data;
+            entry.unsorted = false;
+            filterRow(entry, !passing(entry.data));
+        }
+    }
     const moved = movedRows(stayed, order, changed);
     const retired = arrange(list, doc, order, terms);
     refocus(list, focused);
@@ -1152,9 +1275,22 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         }
     }
     stamps.done(doc);
+    let unsorted = 0;
+    for (const entry of order) {
+        if (entry.el.hasAttribute(ATTR_ROW_UNSORTED) !== entry.unsorted) {
+            entry.el.toggleAttribute(ATTR_ROW_UNSORTED, entry.unsorted);
+        }
+        if (entry.unsorted)
+            unsorted++;
+    }
     const rows = finish(list.root, options.types ?? {});
     // Counted from what the hub holds, which is what the rows show.
     setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length));
+    setStamp(el, ATTR_QUERY_UNSORTED_COUNT, String(unsorted));
+    if (terms.length === 0)
+        el.removeAttribute(ATTR_QUERY_ORDER);
+    else
+        setStamp(el, ATTR_QUERY_ORDER, orderText(terms));
     const departing = gone.map((entry) => entry.el);
     for (const group of retired)
         leaveGroup(group, departing);
@@ -1162,6 +1298,39 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         depart(departing);
     host.lbRowsLanded?.();
 }
+/** The order's terms a list's groups break on, outermost first. */
+function groupTerms(list, terms) {
+    return terms.slice(0, list.levels.length);
+}
+/** The group a row's columns put it in, as one string. */
+function groupOf(row, terms) {
+    return terms.map((term) => groupId(term.column, row[term.column])).join("\u0001");
+}
+/** Whether a row's columns now put it in another group than it stands in. */
+function regrouped(entry, list, terms) {
+    const by = groupTerms(list, terms);
+    return groupOf(entry.data, by) !== groupOf(entry.placed, by);
+}
+/**
+ * The rows of a list the user is working in: those showing where they
+ * stand, and each new one after the last row of its group, or last of all
+ * when its group shows no row.
+ */
+function heldOrder(stayed, created, by) {
+    const order = [...stayed];
+    for (const entry of created) {
+        const group = groupOf(entry.placed, by);
+        let at = order.length;
+        if (by.length > 0) {
+            while (at > 0 && groupOf(order[at - 1].placed, by) !== group)
+                at--;
+            if (at === 0)
+                at = order.length;
+        }
+        order.splice(at, 0, entry);
+    }
+    return order;
+}
 function focusedRow(list, doc) {
     const active = doc.activeElement;
     const row = active?.closest(LIVE_ROW);
@@ -1352,6 +1521,13 @@ function fillArrivals(root, state) {
         }
     }
 }
+/**
+ * Whether a request from `origin` was sent from inside `el`'s list: `el` is
+ * the nearest element carrying `lb-query` around it.
+ */
+function sentFrom(el, origin) {
+    return origin?.parentElement?.closest(`[${ATTR_QUERY}]`) === el;
+}
 /**
  * Land response items. Every answer arrives through here, and is kept for
  * `root`, so that what arrives after it is filled from it — see forget().
@@ -1375,6 +1551,7 @@ export function applyResponse(root, items, options = {}) {
             landItem(el, item, {
                 ...rowsOptions(state, item),
                 requested: options.requested,
+                held: sentFrom(el, options.origin),
             });
         }
         if (choices.size > 0)
@@ -1383,4 +1560,18 @@ export function applyResponse(root, items, options = {}) {
     fillArrivals(root, state);
     attachPlaced();
 }
+/**
+ * Place an element's rows by the order again, from the answer kept for its
+ * query, with no round trip: what the user asks for once an edit has left
+ * rows out of order. False when the element shows no rows the hub holds.
+ */
+export function resort(root, el) {
+    const state = kept.get(root);
+    const item = state?.answers.get(el.getAttribute(ATTR_QUERY) ?? "");
+    if (!state || !item || item.kind === KIND_ROW || !state.landed.has(el)) {
+        return false;
+    }
+    landItem(el, item, rowsOptions(state, item));
+    return true;
+}
 //# sourceMappingURL=lb-apply.js.map