@yuneta/gobj-ui 5.11.1 → 5.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "5.11.1",
+  "version": "5.13.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -30,7 +30,7 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@vitest/coverage-v8": "^4.1.10",
     "@yuneta/gobj-js": "^7.8.7",
-    "vite": "^8.1.5",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {

package/src/c_yui_json.js

@@ -37,6 +37,7 @@ import {
     data_type_t,
     event_flag_t,
     gclass_create,
+    gclass_find_by_name,
     log_error,
     gobj_read_pointer_attr,
     gobj_parent,
@@ -936,6 +937,13 @@ function create_gclass(gclass_name)
  ***************************************************************/
 function register_c_yui_json()
 {
+    /*  Idempotent: C_YUI_TREEDB_TOPIC_WITH_FORM auto-registers this
+     *  gclass for its schema dialog, so an app that also registers it
+     *  explicitly (order-independent) must not trip
+     *  "GClass ALREADY created".  */
+    if(gclass_find_by_name(GCLASS_NAME, false)) {
+        return 0;
+    }
     return create_gclass(GCLASS_NAME);
 }
 

package/src/c_yui_treedb_topic_with_form.css

@@ -82,6 +82,24 @@
     }
 }
 
+/*  Cell of a col holding a JSON document: a truncated preview that opens
+ *  the whole value in a viewer. Bulma already paints an <a> as a link
+ *  (colour + pointer cursor, href or not — the click is an FSM event,
+ *  not a navigation), so the only thing to state here is that a preview
+ *  of a JSON fragment must stay on ONE line: wrapped, it would make the
+ *  row of every structured record three lines tall.  */
+.JSON_CELL {
+    white-space: nowrap;
+}
+.JSON_CELL .JSON_CELL_ICON {
+    margin-right: 0.25rem;
+    vertical-align: middle;
+}
+.JSON_CELL .JSON_CELL_PREVIEW {
+    text-decoration: underline;
+    vertical-align: middle;
+}
+
 .without-border {
     border: none !important;
     box-shadow: none !important;

package/src/c_yui_treedb_topic_with_form.js

@@ -69,6 +69,7 @@ import {
 } from "./c_yui_shell.js";
 
 import {register_c_yui_form} from "./c_yui_form.js";
+import {register_c_yui_json} from "./c_yui_json.js";
 import {attach_clear} from "./yui_inputs.js";
 
 import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n.js";
@@ -103,6 +104,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "with_copy_button",     0,  true,   "Button tool
 SDATA(data_type_t.DTP_BOOLEAN,  "with_paste_button",         0,  true,   "Button toolbar PASTE"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_refresh_button",       0,  true,   "Button toolbar REFRESH"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_search_button",        0,  true,   "Button toolbar SEARCH"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_schema_button",        0,  true,   "Button toolbar SCHEMA (show the topic's desc)"),
 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"),
@@ -143,6 +145,10 @@ let PRIVATE_DATA = {
     tabulator:          null,
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
     form_modal:         null,   // { close } handle of the adaptive dialog
+    schema_gobj:        null,   // hosted C_YUI_JSON child (while schema open)
+    schema_modal:       null,   // { close } handle of the schema dialog
+    cell_json_gobj:     null,   // hosted C_YUI_JSON child (while a cell is open)
+    cell_json_modal:    null,   // { close } handle of the cell dialog
 };
 
 let __gclass__ = null;
@@ -221,6 +227,8 @@ function mt_stop(gobj)
         gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
     }
     close_form_dialog(gobj);
+    close_schema_dialog(gobj);
+    close_cell_json_dialog(gobj);
     table__destroy(gobj);
 }
 
@@ -234,6 +242,8 @@ function mt_destroy(gobj)
      *  it unhooks the Escape handler (shell chain or document
      *  listener) and removes the dialog DOM. */
     close_form_dialog(gobj);
+    close_schema_dialog(gobj);
+    close_cell_json_dialog(gobj);
     destroy_ui(gobj);
 }
 
@@ -477,6 +487,7 @@ function build_ui(gobj)
 
     let with_refresh_button     = gobj_read_bool_attr(gobj, "with_refresh_button");
     let with_search_button      = gobj_read_bool_attr(gobj, "with_search_button");
+    let with_schema_button      = gobj_read_bool_attr(gobj, "with_schema_button");
 
     if(with_search_button) {
         let search_id = `${toolbar_id}_search`;
@@ -543,6 +554,27 @@ function build_ui(gobj)
         $view_toolbar.appendChild($refresh);
     }
 
+    if(with_schema_button) {
+        /*  What the columns of this topic ARE: types, flags, fkeys. The
+         *  table shows the data; this shows the contract the data answers
+         *  to, which is what you need when a value is refused or a link
+         *  does not appear. */
+        let $schema = createElement2(
+            ['button', {class: 'TREEDB_TABLE_SCHEMA button mr-1',
+                        title: t('schema'), 'data-i18n-title': 'schema',
+                        'aria-label': t('schema'), 'data-i18n-aria-label': 'schema'}, [
+                ['i', {class: 'yi-hexagon-nodes'}],
+                ['span', {class: 'is-hidden-mobile', i18n: 'schema', style: 'padding-left:5px;'}, 'schema']
+            ], {
+                'click': (event) => {
+                    event.stopPropagation();
+                    gobj_send_event(gobj, "EV_SHOW_SCHEMA", {}, gobj);
+                }
+            }]
+        );
+        $view_toolbar.appendChild($schema);
+    }
+
     /*----------------------------------------------*
      *  Layout Schema
      *----------------------------------------------*/
@@ -703,6 +735,36 @@ function create_tabulator(gobj)
         return "???";
     }
 
+    /*
+     *  Click on a JSON-document cell (dict/list/blob/template/…): the cell
+     *  can only ever show a truncated preview, so open the whole value in
+     *  the viewer. The kw carries the IDENTITY of the cell (row id + col
+     *  id), never the value itself — the machine trace dumps the kw.
+     */
+    function json_cell_click(e, cell)
+    {
+        if(!cell.getElement().querySelector('.JSON_CELL')) {
+            return;     // empty document: nothing to open
+        }
+        e.stopPropagation();
+
+        let pkey = desc.pkey || "id";
+        let row_id = cell.getData()[pkey];
+        if(row_id === undefined || row_id === null) {
+            log_error(
+                `${gobj_short_name(gobj)}: row without pkey '${pkey}',` +
+                ` cannot open the json of '${cell.getField()}'`
+            );
+            return;
+        }
+        gobj_send_event(
+            gobj,
+            "EV_SHOW_CELL_JSON",
+            {row_id: row_id, col_id: cell.getField()},
+            gobj
+        );
+    }
+
     for (let i = 0; i < desc.cols.length; i++) {
         let col = desc.cols[i];
         if(!col.id || col.id[0]==='_') {
@@ -766,6 +828,8 @@ function create_tabulator(gobj)
             case "list":
             case "coordinates":
             case "blob":
+            case "gbuffer":
+                cellClick = json_cell_click;
                 break;
             case "boolean":
                 hozAlign = "center";
@@ -956,6 +1020,41 @@ function table__destroy(gobj)
     }
 }
 
+/************************************************************
+ *  Cell of a col holding a JSON document (dict/list/blob/
+ *  template/coordinates/…): a one-line truncated preview,
+ *  marked as a link because the click opens the whole value
+ *  in a viewer (json_cell_click -> EV_SHOW_CELL_JSON).
+ *
+ *  An empty document gets no link — there is nothing to open,
+ *  and json_cell_click uses its absence to ignore the click.
+ *
+ *  Built as a DOM node and not as an HTML string: the preview
+ *  is raw record data, so it must never be parsed as markup.
+ ************************************************************/
+function build_json_cell_preview(value)
+{
+    if(value === null || value === undefined || json_size(value) === 0) {
+        return "";
+    }
+
+    let text = JSON.stringify(value);
+    if(text && text.length > 20) {
+        text = text.substring(0, 20) + "…";
+    }
+
+    return createElement2(
+        ['a', {
+            class: 'JSON_CELL',
+            title: t('show json'),
+            'data-i18n-title': 'show json'
+        }, [
+            ['span', {class: 'JSON_CELL_ICON icon yi-eye'}],
+            ['span', {class: 'JSON_CELL_PREVIEW'}, text]
+        ]]
+    );
+}
+
 /************************************************************
  *  Convert a record column value from backend to frontend
  ************************************************************/
@@ -985,10 +1084,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
         case "coordinates":
         case "blob":
         case "gbuffer":
-            value = JSON.stringify(value);
-            if(value && value.length > 20) {
-                value = value.substring(0, 20) + "…";
-            }
+            value = build_json_cell_preview(value);
             break;
 
         case "enum":
@@ -1328,6 +1424,230 @@ function close_form_dialog(gobj)
     teardown_form_child(gobj);
 }
 
+/************************************************************
+ *  Show the topic's SCHEMA: its `desc` — pkey, cols, types,
+ *  flags and fkey targets — in the standardized adaptive
+ *  dialog, rendered by a C_YUI_JSON child. A viewer and not a
+ *  <pre> dump because a forty-column topic is only readable
+ *  collapsed and searchable.
+ *
+ *  Read-only and offline: the desc is already in this gobj,
+ *  so no command is issued and nothing can be edited here.
+ ************************************************************/
+function open_schema_dialog(gobj)
+{
+    close_schema_dialog(gobj);      // only one at a time
+
+    let priv = gobj.priv;
+
+    let desc = gobj_read_attr(gobj, "desc");
+    if(!desc) {
+        log_error(`${gobj_short_name(gobj)}: no desc, no schema to show`);
+        return;
+    }
+
+    let shell = yui_shell_of(gobj);
+    if(!shell) {
+        log_error(`${gobj_short_name(gobj)}: no shell, cannot open the schema view`);
+        return;
+    }
+
+    let json_view = gobj_create_pure_child(
+        "schema_" + clean_name(gobj_name(gobj)),
+        "C_YUI_JSON",
+        {
+            /*  No `title`: the dialog header already titles it. The
+             *  viewer's own would land inside the dialog, doubling it. */
+        },
+        gobj
+    );
+    if(!json_view) {
+        log_error(`${gobj_short_name(gobj)}: cannot create the schema viewer`);
+        return;
+    }
+    priv.schema_gobj = json_view;
+    gobj_start(json_view);
+
+    let $box = gobj_read_attr(json_view, "$container");
+    if(!$box) {
+        log_error(`${gobj_short_name(gobj)}: the schema viewer built no $container`);
+        teardown_schema_child(gobj);
+        return;
+    }
+
+    /*  Title split in two halves: the topic name is DATA (never
+     *  translated) and "schema" is the kind (carries its i18n key), so
+     *  the header re-translates on a language switch. */
+    priv.schema_modal = yui_shell_show_modal(shell, $box, {
+        dialog:        true,
+        logical_class: "TREEDB_SCHEMA_SHEET",
+        title_prefix:  gobj_read_str_attr(gobj, "topic_name"),
+        title:         "schema",
+        t:             t,
+        on_close:      function() {
+            teardown_schema_child(gobj);
+        }
+    });
+
+    /*  EV_SET_JSON and not the `json_data` attr: the attr renders the
+     *  tree but leaves the viewer in ST_IDLE, where a click to expand a
+     *  node is an event nobody handles. */
+    gobj_send_event(json_view, "EV_SET_JSON", {json: desc}, gobj);
+}
+
+/************************************************************
+ *  Destroy the hosted C_YUI_JSON child. Called from the
+ *  schema modal's on_close — the shell has already removed
+ *  the dialog DOM and retired its Escape / history entries.
+ ************************************************************/
+function teardown_schema_child(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.schema_gobj) {
+        if(gobj_is_running(priv.schema_gobj)) {
+            gobj_stop(priv.schema_gobj);
+        }
+        gobj_destroy(priv.schema_gobj);
+        priv.schema_gobj = null;
+    }
+    priv.schema_modal = null;
+}
+
+/************************************************************
+ *  Close the schema dialog (teardown, or a second open).
+ *  Closing the modal runs its on_close, which tears the
+ *  viewer child down.
+ ************************************************************/
+function close_schema_dialog(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.schema_modal) {
+        let modal = priv.schema_modal;
+        priv.schema_modal = null;
+        modal.close();          // -> on_close -> teardown_schema_child
+        return;
+    }
+    teardown_schema_child(gobj);
+}
+
+/************************************************************
+ *  Show the JSON document held by ONE CELL — the value of a
+ *  dict/list/object/array/blob/template/coordinates col — in
+ *  the standardized adaptive dialog, rendered by a C_YUI_JSON
+ *  child. The cell can only show a 20-char preview; this is
+ *  where the value is actually readable (collapsed, searchable).
+ *
+ *  Read-only and offline: the record is already in the table,
+ *  so no command is issued and nothing can be edited here (the
+ *  edit form remains the way to change the value).
+ ************************************************************/
+function open_cell_json_dialog(gobj, row_id, col_id)
+{
+    close_cell_json_dialog(gobj);   // only one at a time
+
+    let priv = gobj.priv;
+
+    let tabulator = gobj_read_attr(gobj, "tabulator");
+    if(!tabulator) {
+        log_error(`${gobj_short_name(gobj)}: no table, no cell to show`);
+        return;
+    }
+    let row = tabulator.getRow(row_id);
+    if(!row) {
+        log_error(`${gobj_short_name(gobj)}: row '${row_id}' not found in the table`);
+        return;
+    }
+    let value = row.getData()[col_id];
+    if(value === undefined) {
+        log_error(`${gobj_short_name(gobj)}: row '${row_id}' has no col '${col_id}'`);
+        return;
+    }
+
+    let shell = yui_shell_of(gobj);
+    if(!shell) {
+        log_error(`${gobj_short_name(gobj)}: no shell, cannot open the cell json`);
+        return;
+    }
+
+    let json_view = gobj_create_pure_child(
+        "cell_" + clean_name(gobj_name(gobj)),
+        "C_YUI_JSON",
+        {
+            /*  No `title`: the dialog header already titles it. */
+        },
+        gobj
+    );
+    if(!json_view) {
+        log_error(`${gobj_short_name(gobj)}: cannot create the cell json viewer`);
+        return;
+    }
+    priv.cell_json_gobj = json_view;
+    gobj_start(json_view);
+
+    let $box = gobj_read_attr(json_view, "$container");
+    if(!$box) {
+        log_error(`${gobj_short_name(gobj)}: the cell json viewer built no $container`);
+        teardown_cell_json_child(gobj);
+        return;
+    }
+
+    /*  Title split in two halves, same contract as the schema dialog: the
+     *  record id is DATA (never translated) and the column carries its own
+     *  i18n key — the shared `col.id` one, so the header re-translates on a
+     *  language switch and reads as the raw id where the app defines no key
+     *  (exactly what an untranslated column header already shows). */
+    priv.cell_json_modal = yui_shell_show_modal(shell, $box, {
+        dialog:        true,
+        logical_class: "TREEDB_CELL_JSON_SHEET",
+        title_prefix:  String(row_id),
+        title:         col_id,
+        t:             t,
+        on_close:      function() {
+            teardown_cell_json_child(gobj);
+        }
+    });
+
+    /*  EV_SET_JSON and not the `json_data` attr: the attr renders the
+     *  tree but leaves the viewer in ST_IDLE, where a click to expand a
+     *  node is an event nobody handles. */
+    gobj_send_event(json_view, "EV_SET_JSON", {json: value}, gobj);
+}
+
+/************************************************************
+ *  Destroy the hosted C_YUI_JSON child. Called from the cell
+ *  modal's on_close — the shell has already removed the dialog
+ *  DOM and retired its Escape / history entries.
+ ************************************************************/
+function teardown_cell_json_child(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.cell_json_gobj) {
+        if(gobj_is_running(priv.cell_json_gobj)) {
+            gobj_stop(priv.cell_json_gobj);
+        }
+        gobj_destroy(priv.cell_json_gobj);
+        priv.cell_json_gobj = null;
+    }
+    priv.cell_json_modal = null;
+}
+
+/************************************************************
+ *  Close the cell json dialog (teardown, or a second open).
+ *  Closing the modal runs its on_close, which tears the
+ *  viewer child down.
+ ************************************************************/
+function close_cell_json_dialog(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.cell_json_modal) {
+        let modal = priv.cell_json_modal;
+        priv.cell_json_modal = null;
+        modal.close();          // -> on_close -> teardown_cell_json_child
+        return;
+    }
+    teardown_cell_json_child(gobj);
+}
+
 /************************************************************
  *  True if the topic's pkey col carries the "rowid" flag.
  ************************************************************/
@@ -2284,6 +2604,30 @@ function ac_refresh(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Show the JSON document of one cell
+ *  {
+ *      row_id:
+ *      col_id:
+ *  }
+ ************************************************************/
+function ac_show_cell_json(gobj, event, kw, src)
+{
+    open_cell_json_dialog(gobj, kw.row_id, kw.col_id);
+
+    return 0;
+}
+
+/************************************************************
+ *  Show the schema (desc) of this topic
+ ************************************************************/
+function ac_show_schema(gobj, event, kw, src)
+{
+    open_schema_dialog(gobj);
+
+    return 0;
+}
+
 /************************************************************
  *  {
  *      href: href
@@ -2356,8 +2700,10 @@ function create_gclass(gclass_name)
             ["EV_COPY_ROWS",            ac_copy_rows,          null],
             ["EV_PASTE_ROWS",           ac_paste_rows,         null],
             ["EV_SHOW_HOOK_DATA",       ac_show_hook_data,     null],
+            ["EV_SHOW_CELL_JSON",       ac_show_cell_json,     null],
             ["EV_CHANGE_LOCALE",        ac_change_locale,      null],
             ["EV_REFRESH",              ac_refresh,            null],
+            ["EV_SHOW_SCHEMA",          ac_show_schema,        null],
             ["EV_SHOW",                 ac_show,               null],
             ["EV_HIDE",                 ac_hide,               null]
         ]]
@@ -2382,8 +2728,10 @@ function create_gclass(gclass_name)
         ["EV_SELECT_ROWS",          event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_UNSELECT_ROWS",        event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_SHOW_HOOK_DATA",       event_flag_t.EVF_OUTPUT_EVENT],
+        ["EV_SHOW_CELL_JSON",       0],
         ["EV_CHANGE_LOCALE",        0],
         ["EV_REFRESH",              0],
+        ["EV_SHOW_SCHEMA",          0],
 
         ["EV_CREATE_RECORD",        event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_UPDATE_RECORD",        event_flag_t.EVF_OUTPUT_EVENT],
@@ -2425,6 +2773,10 @@ function register_c_yui_treedb_topic_with_form()
     if(!gclass_find_by_name("C_YUI_FORM", false)) {
         register_c_yui_form();
     }
+    /*  same for the schema dialog's C_YUI_JSON viewer  */
+    if(!gclass_find_by_name("C_YUI_JSON", false)) {
+        register_c_yui_json();
+    }
     return create_gclass(GCLASS_NAME);
 }