@yuneta/gobj-ui 7.23.51 → 7.23.53

package/src/c_yui_treedb_topic_with_form.js

@@ -86,6 +86,7 @@ import {
 } from "./yui_table_select.js";
 
 import {yui_table_filter_clear} from "./yui_table_filter_clear.js";
+import {yui_icon_is_defined} from "./lib_icons.js";
 import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
@@ -188,8 +189,8 @@ SDATA(data_type_t.DTP_BOOLEAN,  "with_columns_button",       0,  true,   "Button
 SDATA(data_type_t.DTP_BOOLEAN,  "with_export_button",        0,  true,   "Button toolbar EXPORT (download as CSV what the table holds)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_header_filters",       0,  true,   "Per-column filter box in the table header, on the columns a text/number match means something (not hooks, fkeys or json)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_inline_edit",          0,  true,   "Edit a writable scalar cell in place while in edition mode (the record form keeps the rest)"),
-SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",        0,  false,  "Pull the topic a PAGE at a time from the backend (`nodes` from/limit) instead of loading it whole. Needs a backend that pages"),
-SDATA(data_type_t.DTP_INTEGER,  "page_size",                 0,  200,    "Rows per page when with_remote_paging. Generous on purpose: a treedb that fits in one page behaves exactly as it did, paginator hidden and every filter seeing every row"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",        0,  false,  "Pull the topic a PAGE at a time from the backend (`nodes` from/limit) instead of loading it whole. Needs a backend that pages. ⚠️ DO NOT TURN THIS ON: it breaks LINKS -- see the note above the tabulator settings. It is off in every consumer until linking works with a partial topic"),
+SDATA(data_type_t.DTP_INTEGER,  "page_size",                 0,  0,      "Rows per page. 0 leaves the `tabulator_settings` value alone. With with_remote_paging it is also the size of each fetch (200 when unset)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_in_row_edit_icons",    0,  true,   "Add a last column with internal EDIT/DELETE icon"),
 
 SDATA(data_type_t.DTP_BOOLEAN,  "editable",             0,  false,  "Edit state"),
@@ -1284,6 +1285,14 @@ function create_tabulator(gobj)
                 hozAlign = "center";
                 colFormatter = "color";
                 break;
+            case "icon":
+                /*  The NAME of an icon of the app's set, not a file --
+                 *  which is why `image` cannot stand in for it: it built
+                 *  an `<img src="yi-bolt">` and drew a broken image.  */
+                hozAlign = "center";
+                vertAlign = "middle";
+                colFormatter = icon_formatter;
+                break;
             case "object":
             case "dict":
             case "template":
@@ -1393,16 +1402,29 @@ function create_tabulator(gobj)
     let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 
     /*  Remote paging: the TABLE pulls, instead of the host pushing the whole
-     *  topic down. The page size is generous on purpose — a treedb that fits
-     *  in one page behaves exactly as it did before, with the paginator
-     *  hidden and every filter seeing every row. Only a topic that does NOT
-     *  fit pays for paging, and for that one loading it whole was never an
-     *  option anyway.
+     *  topic down. Only a topic that does NOT fit pays for it, and for that
+     *  one loading it whole was never an option anyway.
      *
      *  `filterMode: "local"` says the plain truth: the header filters and the
      *  search box work on the page that is loaded. Same as the tranger
      *  browser's Rows card, and for the same reason — the alternative is
      *  pushing every filter to the backend and changing what "search" means.
+     *
+     *  ⚠️ AND IT IS OFF IN EVERY CONSUMER, because it BREAKS LINKING.
+     *  `build_fkey_options()` asks the PARENT topic's table for the rows it
+     *  holds (`get_topic_data` -> `tabulator.getData()`), and with paging
+     *  that is one page. So the link picker offers 200 of the 5891 possible
+     *  parents -- the right one is usually not among them -- and a record
+     *  whose parent is not on the loaded page opens with an fkey the form
+     *  cannot match, which saving then drops. Local pagination has none of
+     *  this: `getData()` answers the WHOLE dataset whatever page is on
+     *  screen, so paginating the DISPLAY is safe and only paginating the
+     *  FETCH is not.
+     *
+     *  A treedb is a memory database -- the backend holds the topic in RAM
+     *  either way -- so paging buys little and costs the links. It stays
+     *  here, working and tested, for the day linking learns to ask the
+     *  BACKEND for a parent instead of the sibling table.
      */
     if(gobj_read_bool_attr(gobj, "with_remote_paging")) {
         let page_size = gobj_read_integer_attr(gobj, "page_size") || 200;
@@ -1428,6 +1450,20 @@ function create_tabulator(gobj)
         });
     }
 
+    /*  Rows per page for the LOCAL paginator too, when the host asks for
+     *  one: with the fetch no longer paged, `page_size` is the only thing
+     *  left that says how many rows a reader wants in front of them, and a
+     *  host that had 200 should not drop to 25 for having stopped paging the
+     *  fetch. The sizes offered go up with it -- a selector that cannot name
+     *  the size in use is a selector Tabulator has to patch itself.  */
+    if(!gobj_read_bool_attr(gobj, "with_remote_paging")) {
+        let page_size = gobj_read_integer_attr(gobj, "page_size");
+        if(page_size > 0 && tabulator_settings.pagination) {
+            tabulator_settings.paginationSize = page_size;
+            tabulator_settings.paginationSizeSelector = [50, 100, 200, 500, true];
+        }
+    }
+
     /*  The size the reader picked last time, which outranks both defaults
      *  above. Applied here, once the two paths have set theirs, so it is
      *  written in ONE place -- and applied to `paginationSize` only: the
@@ -1667,6 +1703,48 @@ function table__destroy(gobj)
     }
 }
 
+/************************************************************
+ *  Cell of a col flagged `icon`: the value is the NAME of an
+ *  icon of the app's set ("yi-bolt"), so it is DRAWN.
+ *
+ *  Built as a DOM node and not as an HTML string: the value is
+ *  raw record data and must never be parsed as markup -- and
+ *  here it also becomes a CSS class, so it is filtered to the
+ *  shape of a class name before it gets near one.
+ *
+ *  A name the set does not carry falls back to the TEXT of it.
+ *  The catch-all rule `[class^="yi-"]::before` paints a
+ *  currentColor box for any name, so drawing it anyway would
+ *  render a solid square -- a glyph nobody recognises rather
+ *  than a mistake somebody can fix.
+ ************************************************************/
+function icon_formatter(cell)
+{
+    let name = cell.getValue();
+    if(!is_string(name) || empty_string(name)) {
+        return "";
+    }
+    name = name.trim();
+
+    if(!/^[a-z0-9-]+$/.test(name) || !yui_icon_is_defined(name)) {
+        /*  The NAME, in plain grey, and no invented label around it: it
+         *  is a developer's problem (a schema naming a glyph the set
+         *  does not carry) and the name IS the whole diagnosis -- while
+         *  a sentence here would be one more i18n key for every app
+         *  that mounts this table.  */
+        return createElement2([
+            "span",
+            {class: "ICON_CELL_UNKNOWN is-size-7 has-text-grey", title: name},
+            name
+        ]);
+    }
+
+    return createElement2([
+        "span",
+        {class: `ICON_CELL ${name}`, title: name, "aria-label": name}
+    ]);
+}
+
 /************************************************************
  *  Cell of a col holding a JSON document (dict/list/blob/
  *  template/coordinates/…): a one-line truncated preview,
@@ -1825,6 +1903,10 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
             // Handled by Tabulator's built-in "color" formatter (see colDef above)
             break;
 
+        case "icon":
+            // Handled by icon_formatter() (see colDef above)
+            break;
+
         case "image":
             // Handled by Tabulator's built-in "image" formatter (see colDef above)
             break;

package/src/c_yui_treedb_topics.js

@@ -32,6 +32,7 @@ import {
     gobj_short_name,
     gobj_read_str_attr,
     gobj_read_bool_attr,
+    gobj_read_integer_attr,
     gobj_start,
     gobj_stop,
     gobj_is_running,
@@ -75,7 +76,8 @@ SDATA(data_type_t.DTP_POINTER,  "subscriber",       0,  null,   "Subscriber of o
 SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote yuno for data fetching"),
 SDATA(data_type_t.DTP_STRING,   "treedb_name",      0,  null,   "Remote TreeDB service name"),
 SDATA(data_type_t.DTP_JSON,     "descs",            0,  null,   "Description of topics"),
-SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",   0,  false,  "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",   0,  false,  "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. ⚠️ DO NOT TURN THIS ON: a partial topic BREAKS LINKING -- the link picker of a record is built from the rows the PARENT topic's table holds, which with paging is one page, so the right parent is usually not offered and an existing link the form cannot match is dropped on save. Off in every consumer until linking asks the backend instead of the sibling table"),
+SDATA(data_type_t.DTP_INTEGER,  "page_size",            0,  0,      "Rows per page of each topic table (the DISPLAY; the fetch is whole). 0 leaves the table's own default"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_selection_bar",   0,  false,  "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 SDATA(data_type_t.DTP_BOOLEAN,  "system",           0,  false,  "Manage system topics (true) or user topics (false)"),
 SDATA(data_type_t.DTP_STRING,   "tabs_style",       0,  "is-toggle is-fullwidth", "Bulma tab styling"),
@@ -1041,6 +1043,7 @@ function process_treedb_descs(gobj)
             topic_name: key,
             desc: desc,
             with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging"),
+            page_size: gobj_read_integer_attr(gobj, "page_size"),
             with_selection_bar: gobj_read_bool_attr(gobj, "with_selection_bar")
         };
 

package/src/lib_icons.js

@@ -168,3 +168,54 @@ export function inject_svg_icons()
     div.innerHTML = ICONS;
     document.body.appendChild(div);
 }
+
+/*
+ *  Is `yi-<name>` a real glyph of the loaded set?
+ *
+ *  It has to be ASKED, not looked up in a list: the set is a CSS file
+ *  (`yui_icons.css`) that an app may extend or replace, and a list here
+ *  would be a second copy of it, wrong the first time somebody adds a
+ *  mask rule. And the question matters because the catch-all rule
+ *  `[class^="yi-"]::before` paints a `currentColor` box for ANY name --
+ *  so an undefined icon does not fail, it renders as a solid black
+ *  square, which reads as a glyph nobody recognises rather than as a
+ *  mistake.
+ *
+ *  The probe is the real stylesheet: a detached element gets no styles,
+ *  so it is attached, hidden, measured and removed. Cached by name --
+ *  a table draws one icon per row and the answer cannot change without
+ *  a reload.
+ */
+const __icon_defined__ = {};
+
+export function yui_icon_is_defined(name)
+{
+    if(!name || typeof name !== "string") {
+        return false;
+    }
+    if(__icon_defined__[name] !== undefined) {
+        return __icon_defined__[name];
+    }
+
+    let defined = false;
+    try {
+        const el = document.createElement("i");
+        el.className = name;
+        el.style.position = "absolute";
+        el.style.visibility = "hidden";
+        el.style.pointerEvents = "none";
+        document.body.appendChild(el);
+        const st = window.getComputedStyle(el, "::before");
+        const mask = st.maskImage || st.webkitMaskImage || "";
+        defined = !!mask && mask !== "none";
+        document.body.removeChild(el);
+    } catch(e) {
+        /*  No DOM to ask (jsdom without the stylesheet, a test): answer
+         *  "not defined" so the caller falls back to showing the name,
+         *  which is the honest half of the pair.  */
+        defined = false;
+    }
+
+    __icon_defined__[name] = defined;
+    return defined;
+}