@yuneta/gobj-ui 2.6.0 → 4.0.0

package/src/c_yui_treedb_topic_with_form.js

@@ -16,6 +16,7 @@ import {
     log_error,
     gobj_read_pointer_attr,
     gobj_subscribe_event,
+    gobj_unsubscribe_event,
     gobj_parent,
     sprintf,
     gobj_read_attr,
@@ -60,19 +61,22 @@ import {
     yui_shell_confirm_yesnocancel,
     yui_shell_confirm_ok,
     yui_shell_popup_layer,
+    yui_shell_show_modal,
 } from "./shell_modals.js";
 
 import {
     yui_shell_of,
-    yui_shell_push_escape,
-    yui_shell_pop_escape,
 } from "./c_yui_shell.js";
 
 import {register_c_yui_form} from "./c_yui_form.js";
+import {attach_clear} from "./yui_inputs.js";
+
+import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n.js";
 
 import {t} from "i18next";
 
 import "./c_yui_treedb_topic_with_form.css";
+import "./tabulator.css";
 
 import { TabulatorFull as Tabulator } from "tabulator-tables";
 
@@ -118,7 +122,7 @@ SDATA(data_type_t.DTP_JSON,     "tabulator_settings",   0,  {
     pagination: true,
     paginationSize: 25,
     paginationSizeSelector: [25, 50, 100, true],
-    placeholder: "No data available",
+    placeholder: "No data available",   /*  overridden per-language at create  */
     maxHeight: "100%"
 }, "Default settings for Tabulator"),
 
@@ -138,10 +142,7 @@ let PRIVATE_DATA = {
     topic_name:         "",
     tabulator:          null,
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
-    $popup:             null,   // dialog DOM element
-    on_keydown:         null,   // document Escape handler (no-shell fallback)
-    escape_shell:       null,   // shell whose Escape chain holds escape_handler
-    escape_handler:     null,   // close handler pushed on the shell chain
+    form_modal:         null,   // { close } handle of the adaptive dialog
 };
 
 let __gclass__ = null;
@@ -199,6 +200,14 @@ function mt_create(gobj)
  ***************************************************************/
 function mt_start(gobj)
 {
+    /*  The shell publishes the language switch (yui_shell_language_changed):
+     *  the column headers re-translate themselves (they carry data-i18n — see
+     *  col_label), but Tabulator's OWN chrome is drawn once and needs to be
+     *  told.  */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
     create_tabulator(gobj);
 }
 
@@ -207,6 +216,10 @@ function mt_start(gobj)
  ***************************************************************/
 function mt_stop(gobj)
 {
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
     close_form_dialog(gobj);
     table__destroy(gobj);
 }
@@ -458,7 +471,7 @@ function build_ui(gobj)
     if(with_search_button) {
         let search_id = `${toolbar_id}_search`;
         let $search_box = createElement2(
-            ['div', {class: 'control has-icons-left has-icons-right mr-1'}, [
+            ['div', {class: 'control has-icons-left mr-1'}, [
                 ['input', {
                     id: search_id,
                     class: 'input',
@@ -468,19 +481,13 @@ function build_ui(gobj)
                 }],
                 ['span', {class: 'icon is-left'}, [
                     ['i', {class: 'yi-magnifying-glass'}]
-                ]],
-                ['span', {class: 'icon is-right', style: 'cursor:pointer; pointer-events:all;', title: 'clear search'}, [
-                    ['i', {class: 'yi-xmark'}]
-                ], {
-                    'click': (event) => {
-                        event.stopPropagation();
-                        let $input = document.getElementById(search_id);
-                        if($input) { $input.value = ''; $input.dispatchEvent(new Event('input')); }
-                    }
-                }]
+                ]]
             ]]
         );
         let $search_input = $search_box.querySelector(`#${search_id}`);
+        /*  NORM clear (✕): dispatches a synthetic `input`, so the tabulator
+         *  filter below re-runs (empty term → clearFilter).  */
+        attach_clear($search_box, $search_input);
         if($search_input) {
             $search_input.addEventListener('input', (event) => {
                 let searchText = event.target.value.trim().toLowerCase();
@@ -510,7 +517,7 @@ function build_ui(gobj)
 
     if(with_refresh_button) {
         let $refresh = createElement2(
-            ['button', {class: 'button mr-1', title: 'refresh'}, [
+            ['button', {class: 'button mr-1', title: t('refresh'), 'data-i18n-title': 'refresh'}, [
                 ['i', {class: 'yi-arrows-rotate'}],
                 ['span', {class: 'is-hidden-mobile', i18n: 'refresh', style: 'padding-left:5px;'}, 'refresh']
             ], {
@@ -819,7 +826,12 @@ function create_tabulator(gobj)
     }
 
     let pkey = desc.pkey || "id";
-    let selectable = with_checkbox ? true : (with_radio ? 1 : false);
+    /*  Selection is driven ONLY by the checkbox column, never by clicking
+     *  the row: "highlight" keeps the rowSelection checkbox fully working
+     *  (it calls toggleSelect() directly) while disabling click-to-select,
+     *  so opening the edit (yi-pen) form no longer implicitly ticks the
+     *  row. Radio keeps single click-select (its own widget).  */
+    let selectable = with_checkbox ? "highlight" : (with_radio ? 1 : false);
 
     let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 
@@ -847,7 +859,26 @@ function create_tabulator(gobj)
         log_error(`${gobj_short_name(gobj)}: table element '#${table_id}' not found in $container`);
         return;
     }
-    let tabulator = new Tabulator($table_el, tabulator_settings);
+    /*  Tabulator renders its own chrome — the paginator, the placeholder, the
+     *  loading/error notices — and nothing ever passed those through i18n: the
+     *  table sat in English inside a Spanish view. Hand it the current
+     *  language (every key falls back to what it used to render, so an app
+     *  that defines none of them sees no change).  */
+    let tabulator = new Tabulator($table_el,
+        Object.assign({}, tabulator_settings, yui_tabulator_lang(t), {
+            /*  The placeholder ships as an English literal in the settings
+             *  default; hand it the current language (falling back to exactly
+             *  what it said before for an app that does not define the key).  */
+            placeholder: t("no data available", {defaultValue: "No data available"})
+        }));
+
+    /*  "highlight" still paints the whole-row hover wash (and a pointer
+     *  cursor), which reads as a selection. This table selects only via the
+     *  checkbox, so suppress the hover: rows stay visually static, and only
+     *  a checkbox-selected row changes colour (see tabulator.css). */
+    if(with_checkbox) {
+        $table_el.classList.add("yui-no-row-hover");
+    }
 
     /*  Keep the footer in sync with the visible (active) row count,
      *  and hide the pagination chrome while everything fits in one
@@ -1133,9 +1164,14 @@ function open_form_dialog(gobj, mode, record)
 
     let priv = gobj.priv;
     let desc = gobj_read_attr(gobj, "desc");
-    let popup_id = gobj_read_str_attr(gobj, "popup_id");
     let topic_name = gobj_read_str_attr(gobj, "topic_name");
 
+    let shell = yui_shell_of(gobj);
+    if(!shell) {
+        log_error(`${gobj_short_name(gobj)}: no shell, cannot open the edit form`);
+        return;
+    }
+
     /*  Title says what you are doing: "new <topic>" on create,
      *  "<topic> — <pkey>" on update. */
     let pkey = desc.pkey || "id";
@@ -1147,36 +1183,12 @@ function open_form_dialog(gobj, mode, record)
         title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
     }
 
-    let $element = createElement2([
-        'div', {id: popup_id, class: 'modal is-active'}, [
-            ['div', {class: 'modal-background'}, ''],
-            ['div', {class: 'modal-card modal-is-responsive'}, [
-                ['header', {class: 'modal-card-head p-3'}, [
-                    ['p', {class: 'modal-card-title', style: 'text-align:center;'}, title],
-                    ['button', {class: 'delete is-large', 'aria-label': 'close'}, '', {
-                        click: function(evt) {
-                            evt.stopPropagation();
-                            request_close_form_dialog(gobj);
-                        }
-                    }]
-                ]],
-                /*  flex column so the hosted form takes the dialog
-                 *  height: fields scroll internally and the form's
-                 *  bottom toolbar stays visible (dialog footer)  */
-                ['section', {
-                    class: 'modal-card-body p-2',
-                    style: 'display:flex; flex-direction:column;'
-                }, []]
-            ]]
-        ], {
-            click: function(evt) {
-                // Capture bubble events
-                evt.stopPropagation();
-            }
-        }
-    ]);
-
-    let $body = $element.querySelector('.modal-card-body');
+    /*  A flex column so the hosted form takes the dialog height: fields
+     *  scroll internally and the form's bottom toolbar stays visible. */
+    let $body = createElement2(
+        ['div', {class: 'TREEDB_FORM_BODY',
+                 style: 'display:flex; flex-direction:column; height:100%;'}, []]
+    );
 
     let form = gobj_create_pure_child(
         "form_" + clean_name(gobj_name(gobj)),
@@ -1186,6 +1198,10 @@ function open_form_dialog(gobj, mode, record)
             record:         record,
             fkey_options:   build_fkey_options(gobj),
             form_mode:      mode,
+            /*  Editing the raw topic record: structured cols
+             *  (template / table / coordinates) are raw JSON editors,
+             *  not interpreted into sub-widgets (the pre-merge behaviour). */
+            render_mode:    "edit",
             pkey:           desc.pkey || "id",
             topic_name:     topic_name,
             editable:       true,
@@ -1194,7 +1210,6 @@ function open_form_dialog(gobj, mode, record)
         gobj
     );
     priv.form = form;
-    priv.$popup = $element;
 
     let $form_container = gobj_read_attr(form, "$container");
     if($form_container) {
@@ -1202,38 +1217,33 @@ function open_form_dialog(gobj, mode, record)
         $form_container.style.minHeight = "0";
     }
 
-    popup_mount_layer(gobj).appendChild($element);
-    refresh_language($element, t);
-
-    /*  Escape closes through the same unsaved-changes guard as the X.
-     *  Under a shell, ride its Escape priority chain — LIFO with the
-     *  shell confirm dialogs, so Escape on an open confirm never
-     *  reaches this dialog and stacks a second one.  Without a shell
-     *  (bare unit tests) fall back to a document listener. */
-    let shell = yui_shell_of(gobj);
-    if(shell) {
-        priv.escape_shell = shell;
-        priv.escape_handler = function() {
-            request_close_form_dialog(gobj);
-        };
-        yui_shell_push_escape(shell, "popup", priv.escape_handler);
-    } else {
-        priv.on_keydown = function(evt) {
-            if(evt.key === "Escape") {
-                evt.stopPropagation();
-                request_close_form_dialog(gobj);
-            }
-        };
-        document.addEventListener("keydown", priv.on_keydown);
-    }
+    /*  The standardized adaptive dialog, like the sibling treedb views: a
+     *  centered card with the X at the top-right on desktop, a full-screen
+     *  sheet with a back arrow on mobile; Escape / browser Back / backdrop
+     *  are wired by the shell. `before_close` preserves the unsaved-changes
+     *  guard — it vetoes the dismiss and, on confirm, closes the modal
+     *  itself. `on_close` tears the hosted form child down. */
+    priv.form_modal = yui_shell_show_modal(shell, $body, {
+        dialog:        true,
+        logical_class: "TREEDB_FORM_SHEET",
+        title:         title,
+        t:             t,
+        before_close:  function() {
+            return form_may_close(gobj);
+        },
+        on_close:      function() {
+            teardown_form_child(gobj);
+        }
+    });
 
-    gobj_start(form);   // mt_start loads `record` into the form
+    gobj_start(form);           // mt_start loads `record` into the form
+    refresh_language($body, t); // translate anything the form emitted on start
 
     /*  Focus the pkey unless the mode made it readonly (update) —
      *  then the first editable field. */
-    let $with_focus = $element.querySelector('.with-focus:not([readonly])');
+    let $with_focus = $body.querySelector('.with-focus:not([readonly])');
     if(!$with_focus) {
-        $with_focus = $element.querySelector(
+        $with_focus = $body.querySelector(
             'input.input:not([readonly]), textarea, select'
         );
     }
@@ -1243,10 +1253,12 @@ function open_form_dialog(gobj, mode, record)
 }
 
 /************************************************************
- *  Close request from the dialog X: if the form carries
- *  unsaved changes ask first (EV_WINDOW_TO_CLOSE contract).
+ *  Unsaved-changes guard for the dialog's `before_close` hook.
+ *  Returns true to allow the dismiss; false to VETO it (the form
+ *  has pending edits) and pop the confirm — which, on "yes",
+ *  closes the modal itself (EV_WINDOW_TO_CLOSE contract).
  ************************************************************/
-function request_close_form_dialog(gobj)
+function form_may_close(gobj)
 {
     let priv = gobj.priv;
     if(priv.form) {
@@ -1258,31 +1270,24 @@ function request_close_form_dialog(gobj)
                 'All changes will be lost. Are you sure?',
                 {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
             ).then(function(answer) {
-                if(answer === "yes") {
-                    close_form_dialog(gobj);
+                if(answer === "yes" && priv.form_modal) {
+                    priv.form_modal.close();
                 }
             });
-            return;
+            return false;
         }
     }
-    close_form_dialog(gobj);
+    return true;
 }
 
 /************************************************************
- *  Destroy the hosted form and remove the dialog DOM.
+ *  Destroy the hosted C_YUI_FORM child. Called from the modal's
+ *  on_close — the shell has already removed the dialog DOM and
+ *  retired its Escape / history entries.
  ************************************************************/
-function close_form_dialog(gobj)
+function teardown_form_child(gobj)
 {
     let priv = gobj.priv;
-    if(priv.escape_handler) {
-        yui_shell_pop_escape(priv.escape_shell, priv.escape_handler);
-        priv.escape_shell = null;
-        priv.escape_handler = null;
-    }
-    if(priv.on_keydown) {
-        document.removeEventListener("keydown", priv.on_keydown);
-        priv.on_keydown = null;
-    }
     if(priv.form) {
         if(gobj_is_running(priv.form)) {
             gobj_stop(priv.form);
@@ -1290,12 +1295,24 @@ function close_form_dialog(gobj)
         gobj_destroy(priv.form);
         priv.form = null;
     }
-    if(priv.$popup) {
-        if(priv.$popup.parentNode) {
-            priv.$popup.parentNode.removeChild(priv.$popup);
-        }
-        priv.$popup = null;
+    priv.form_modal = null;
+}
+
+/************************************************************
+ *  Force the dialog down (bypasses the unsaved guard): used after a
+ *  successful save and on teardown. Closing the modal runs its
+ *  on_close, which tears the form child down.
+ ************************************************************/
+function close_form_dialog(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.form_modal) {
+        let modal = priv.form_modal;
+        priv.form_modal = null;
+        modal.close();          // -> on_close -> teardown_form_child
+        return;
     }
+    teardown_form_child(gobj);
 }
 
 /************************************************************
@@ -1719,6 +1736,37 @@ function show_dropdown_popup_menu(gobj, x, y, items, callback)
 /************************************************************
  *  From external, at the beginning, load all topic data
  ************************************************************/
+/***************************************************************
+ *  The language changed (the shell publishes it after the app switched).
+ *
+ *  The column headers carry their key (col_label's title formatter emits a
+ *  data-i18n span), so refresh_language() has already re-translated them.
+ *  What it cannot reach is what TABULATOR itself renders: its paginator, its
+ *  placeholder, its loading/error notices — drawn once, from its own lang
+ *  dict. Re-apply it in the new language.
+ ***************************************************************/
+function ac_language_changed(gobj, event, kw, src)
+{
+    let tabulator = gobj_read_attr(gobj, "tabulator");
+    if(!tabulator) {
+        return 0;
+    }
+    yui_tabulator_relocalize(tabulator, t);
+    try {
+        tabulator.options.placeholder =
+            t("no data available", {defaultValue: "No data available"});
+        /*  Re-setting the locale makes Tabulator re-run the title formatter on
+         *  the EXISTING header cell, which APPENDS its span to the one already
+         *  there ("Device GroupDevice Group"). Rebuilding the columns from
+         *  their own definitions renders each header once, from scratch.  */
+        tabulator.setColumns(tabulator.getColumnDefinitions());
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot re-render the table: ${e}`);
+        return -1;
+    }
+    return 0;
+}
+
 function ac_load_nodes(gobj, event, kw, src)
 {
     let data = kw;
@@ -2279,6 +2327,7 @@ function create_gclass(gclass_name)
      *---------------------------------------------*/
     const states = [
         ["ST_IDLE", [
+            ["EV_LANGUAGE_CHANGED",     ac_language_changed,   null],
             ["EV_LOAD_NODES",           ac_load_nodes,         null],
             ["EV_LOAD_NODE_CREATED",    ac_load_node_created,  null],
             ["EV_LOAD_NODE_UPDATED",    ac_load_node_updated,  null],
@@ -2305,6 +2354,7 @@ function create_gclass(gclass_name)
      *          Events
      *---------------------------------------------*/
     const event_types = [
+        ["EV_LANGUAGE_CHANGED",     0],
         ["EV_LOAD_NODES",           0],
         ["EV_LOAD_NODE_CREATED",    0],
         ["EV_LOAD_NODE_UPDATED",    0],

package/src/c_yui_treedb_topics.css

@@ -0,0 +1,73 @@
+/***********************************************************************
+ *          c_yui_treedb_topics.css
+ *
+ *      Styling for C_YUI_TREEDB_TOPICS' cards-landing (list -> detail):
+ *      the topic cards (three hash-routed icon actions) and the routed
+ *      topic-info panel. Theme-aware via Bulma variables.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/*  One topic card: name on top, a row of icon actions below.
+ *  The grid itself is the shell's .yui-nav-cards. */
+.TREEDB_TOPIC_CARD {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 0.75rem;
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    border-radius: 0.5rem;
+    background: var(--bulma-scheme-main, #fff);
+    color: var(--bulma-text, inherit);
+}
+.TREEDB_TOPIC_CARD {
+    cursor: pointer;
+}
+/*  Selected (clicked) card: link-coloured border + soft ring. */
+.TREEDB_TOPIC_CARD.is-selected {
+    border-color: var(--bulma-link, #485fc7);
+    box-shadow: 0 0 0 2px var(--bulma-link, #485fc7) inset;
+}
+.TREEDB_TOPIC_CARD .TREEDB_TOPIC_CARD_NAME {
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.2;
+    word-break: break-word;
+}
+.TREEDB_TOPIC_CARD_ACTIONS {
+    display: flex;
+    justify-content: center;
+    gap: 0.25rem;
+}
+.TREEDB_TOPIC_CARD_ACTIONS > a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 0.375rem;
+    color: var(--bulma-text, inherit);
+    text-decoration: none;
+}
+.TREEDB_TOPIC_CARD_ACTIONS > a .icon {
+    font-size: 1.15rem;
+}
+.TREEDB_TOPIC_CARD_ACTIONS > a:hover,
+.TREEDB_TOPIC_CARD_ACTIONS > a:focus-visible {
+    background: var(--bulma-background, #f5f5f5);
+    color: var(--bulma-link, #485fc7);
+}
+
+/*  Routed topic-info panel. */
+.TREEDB_TOPIC_INFO {
+    padding: 1rem;
+}
+.TREEDB_TOPIC_INFO .TREEDB_TOPIC_INFO_CARD {
+    max-width: 48rem;
+}
+.TREEDB_TOPIC_INFO table code {
+    background: transparent;
+    padding: 0;
+}