@yuneta/gobj-ui 2.2.4 → 2.3.0

package/src/c_yui_form.js

@@ -45,12 +45,17 @@ import {
     gobj_read_str_attr,
     gobj_publish_event,
     refresh_language,
+    treedb_decoder_fkey,
+    gclass_find_by_name,
 } from "@yuneta/gobj-js";
 
 import {t} from "i18next";
 import "tom-select/dist/css/tom-select.css"; // Import Tom-Select CSS
 import TomSelect from "tom-select"; // Import Tom-Select JS
 
+import { JSONEditor } from 'vanilla-jsoneditor';
+import "vanilla-jsoneditor/themes/jse-theme-dark.css";
+
 import "tabulator-tables/dist/css/tabulator.min.css"; // Import Tabulator CSS
 import "tabulator-tables/dist/css/tabulator_bulma.css";
 import { TabulatorFull as Tabulator } from "tabulator-tables"; // Import Full Tabulator JS
@@ -74,6 +79,10 @@ SDATA(data_type_t.DTP_POINTER,  "$parent",          0,  null,   "$container will
 SDATA(data_type_t.DTP_POINTER,  "template",         0,  "<div>You must supply a template for form</div>", "Template for form, object -> TEMPLATE, array -> DESC"),
 SDATA(data_type_t.DTP_JSON,     "record",           0,  "{}",   "Data to form"),
 SDATA(data_type_t.DTP_JSON,     "placeholders",     0,  "{}",   "Placeholder values for form fields"),
+SDATA(data_type_t.DTP_JSON,     "fkey_options",     0,  "{}",   "Options for fkey fields: {topic_name: [ids or {id} records]}, read at build time"),
+SDATA(data_type_t.DTP_STRING,   "form_mode",        0,  "",     "'create' (pkey editable+required) or 'update' (pkey readonly); empty = no pkey handling"),
+SDATA(data_type_t.DTP_STRING,   "pkey",             0,  "id",   "Primary key field name, used by form_mode"),
+SDATA(data_type_t.DTP_STRING,   "topic_name",       0,  "",     "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "editable",         0,  false,  "Default is editable, set false to readonly"),
 SDATA(data_type_t.DTP_BOOLEAN,  "selectable",       0,  true,   "Rows selectable with 'click' (BAD with editable=true)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_checkbox",    0,  false,  "Show a first column with checkbox to select rows"),
@@ -284,31 +293,31 @@ function build_ui(gobj)
      *
      *----------------------------------------------*/
     let $container = createElement2(
-        ['div', {class: 'C_YUI_FORM is-flex is-flex-direction-row overscroll-contain', style:'height:100%; width:100%; box-sizing:border-box;'}, [
+        ['div', {class: 'C_YUI_FORM is-flex is-flex-direction-column overscroll-contain', style:'height:100%; width:100%; box-sizing:border-box;'}, [
 
             /*----------------------------*
              *      Form
              *----------------------------*/
             ['div', {
                 class: 'yui-form is-flex-grow-1 p-2',
-                style: 'overflow-y:auto; height:100%;min-height:0;'
+                style: 'overflow-y:auto; min-height:0;'
             }, build_form(gobj)],
 
             /*----------------------------*
-             *      Right toolbar
+             *      Bottom toolbar
              *----------------------------*/
-            ['div', {class: 'yui-toolbar-form ml-2 is-flex-shrink-0 is-flex is-flex-direction-column is-justify-content-space-between', style: 'overflow-y:auto; height:100%; max-width:90px;'}, [
+            ['div', {class: 'yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center', style: 'width:100%; flex-wrap:wrap; row-gap:6px;'}, [
 
                 /*----------------------------*
-                 *      Top buttons
+                 *      Left buttons
                  *----------------------------*/
-                ['div', {class: 'p-1 is-flex is-flex-direction-column is-align-items-center', style:'width:100%; row-gap:6px;'}, [
+                ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'}, [
                     /*----------------------------*
                      *      Save
                      *----------------------------*/
-                    ['button', {class: 'button p-1 is-flex is-flex-direction-column is-align-items-center button-save', style:'width:100%;', disabled: true}, [
+                    ['button', {class: 'button p-1 button-save', title: 'save', 'aria-label': 'save', disabled: true}, [
                         ['span', {class: 'icon m-0'}, '<i class="yi-floppy-disk"></i>'],
-                        ['span', {class: 'is-hidden-mobile', i18n: 'save'}, 'save']
+                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'save'}, 'save']
                     ], {
                         click: function(evt) {
                             evt.stopPropagation();
@@ -319,9 +328,9 @@ function build_ui(gobj)
                     /*----------------------------*
                      *      Undo
                      *----------------------------*/
-                    ['button', {class: 'button p-1 is-flex is-flex-direction-column is-align-items-center button-undo', style:'width:100%;', disabled: true}, [
+                    ['button', {class: 'button p-1 button-undo', title: 'undo', 'aria-label': 'undo', disabled: true}, [
                         ['span', {class: 'icon m-0'}, '<i class="yi-arrow-rotate-left"></i>'],
-                        ['span', {class: 'is-hidden-mobile', i18n: 'undo'}, 'undo']
+                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'undo'}, 'undo']
                     ], {
                         click: function(evt) {
                             evt.stopPropagation();
@@ -332,9 +341,9 @@ function build_ui(gobj)
                     /*----------------------------*
                      *      Clear
                      *----------------------------*/
-                    ['button', {class: 'button p-1 is-flex is-flex-direction-column is-align-items-center', style:'width:100%;'}, [
+                    ['button', {class: 'button p-1', title: 'clear', 'aria-label': 'clear'}, [
                         ['span', {class: 'icon m-0'}, '<i class="yi-broom-wide"></i>'],
-                        ['span', {class: 'is-hidden-mobile', i18n: 'clear'}, 'clear']
+                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'clear'}, 'clear']
                     ], {
                         click: function(evt) {
                             evt.stopPropagation();
@@ -344,15 +353,15 @@ function build_ui(gobj)
                 ]],
 
                 /*----------------------------*
-                 *      Bottom buttons
+                 *      Right buttons
                  *----------------------------*/
-                ['div', {class: 'p-1 is-flex is-flex-direction-column is-align-items-center', style:'width:100%; row-gap:6px;'}, [
+                ['div', {class: 'p-1 is-flex is-flex-direction-row is-align-items-center', style:'column-gap:6px;'}, [
                     /*----------------------------*
                      *      Copy
                      *----------------------------*/
-                    ['button', {class: 'button p-1 is-flex is-flex-direction-column is-align-items-center', style:'width:100%;'}, [
+                    ['button', {class: 'button p-1', title: 'copy', 'aria-label': 'copy'}, [
                         ['span', {class: 'icon m-0'}, '<i class="yi-copy"></i>'],
-                        ['span', {class: 'is-hidden-mobile', i18n: 'copy'}, 'copy']
+                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'copy'}, 'copy']
                     ], {click: function(evt) {
                             evt.stopPropagation();
                             gobj_send_event(gobj, "EV_COPY_RECORD", {}, gobj);
@@ -362,9 +371,9 @@ function build_ui(gobj)
                     /*----------------------------*
                      *      Paste
                      *----------------------------*/
-                    ['button', {class: 'button p-1 is-flex is-flex-direction-column is-align-items-center', style:'width:100%;'}, [
+                    ['button', {class: 'button p-1', title: 'paste', 'aria-label': 'paste'}, [
                         ['span', {class: 'icon m-0'}, '<i class="yi-paste"></i>'],
-                        ['span', {class: 'is-hidden-mobile', i18n: 'paste'}, 'paste']
+                        ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'paste'}, 'paste']
                     ], {click: async function(evt) {
                             evt.stopPropagation();
                             await readClipboard(gobj);
@@ -376,6 +385,7 @@ function build_ui(gobj)
     );
 
     gobj_write_attr(gobj, "$container", $container);
+    apply_form_mode(gobj, $container.querySelector('form'));
     refresh_language($container, t);
 
     let $parent = gobj_read_attr(gobj, "$parent");
@@ -446,7 +456,25 @@ function build_html_form(gobj, $form, prefix, template)
          *  items not filled
          */
         html_field_conf.name = field_desc.name;
-        html_field_conf.label = field_desc.header;
+        /*
+         *  Label i18n: mirror the table-header cascade (col_label) so a
+         *  column translates the same in the form and the table. The
+         *  visible text resolves '<topic>.<col>' -> '<col>' -> header at
+         *  build. Only set `label_i18n` (the retranslation key) when a
+         *  translation actually exists, so refresh_language never
+         *  clobbers an untranslated label with the raw col id — it keeps
+         *  the header, exactly like col_label's `defaultValue`.
+         */
+        let topic_name = gobj_read_str_attr(gobj, "topic_name");
+        let label_keys = topic_name
+            ? [topic_name + "." + field_desc.name, field_desc.name]
+            : [field_desc.name];
+        const NO_I18N = "\x00";
+        html_field_conf.label = t(label_keys, {defaultValue: field_desc.header});
+        html_field_conf.label_i18n =
+            (t(field_desc.name, {defaultValue: NO_I18N}) !== NO_I18N)
+                ? field_desc.name
+                : null;
         html_field_conf.placeholder = field_desc.placeholder?t(field_desc.placeholder):'';
 
         let placeholders = gobj_read_attr(gobj, "placeholders");
@@ -502,12 +530,13 @@ function build_form_field_conf(gobj, field_desc)
     switch(field_desc.type) {
         case "object":
         case "dict":
-            field_conf.tag = "fieldset";
+            /*  free-form dict (no subschema mechanism) edits as raw
+             *  JSON; structured dicts use the "template" flag  */
+            field_conf.tag = "jsoneditor";
             break;
 
         case "template":
             field_conf.tag = "fieldset";
-            // TODO si es para editar, tiene que ser field_conf.tag = "jsoneditor";
             field_conf.options = field_desc.enum_list;
             break;
 
@@ -522,7 +551,9 @@ function build_form_field_conf(gobj, field_desc)
 
         case "array":
         case "list":
-            field_conf.tag = "table";
+            /*  free-form list (no subschema) edits as raw JSON;
+             *  structured lists use the "table" flag  */
+            field_conf.tag = "jsoneditor";
             break;
 
         case "enum":
@@ -546,7 +577,8 @@ function build_form_field_conf(gobj, field_desc)
             break;
 
         case "fkey":
-            // build later
+            field_conf.tag = "select2";
+            field_conf.options = get_fkey_select_options(gobj, field_desc);
             break;
 
         case "image":
@@ -660,6 +692,149 @@ function build_form_field_conf(gobj, field_desc)
     return field_conf;
 }
 
+/************************************************************
+ *  Options for a fkey field: the ids of the parent topic's
+ *  rows, taken from the `fkey_options` attr
+ *  ({topic_name: [ids or {id} records]}, supplied by the host —
+ *  the form never queries the backend or its parent itself).
+ *  Read at build time.
+ ************************************************************/
+function get_fkey_select_options(gobj, field_desc)
+{
+    let fkey_desc = field_desc.fkey;
+    if(!is_object(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+        log_error(sprintf("%s: fkey field '%s' without fkey mapping",
+            gobj_short_name(gobj), field_desc.name
+        ));
+        return [];
+    }
+
+    // HACK we work only with one fkey (same as the treedb stack)
+    let topic_name = Object.keys(fkey_desc)[0];
+
+    let fkey_options = gobj_read_attr(gobj, "fkey_options");
+    let list = is_object(fkey_options)? fkey_options[topic_name] : null;
+    if(!is_array(list)) {
+        log_warning(sprintf("%s: no fkey_options for topic '%s' (field '%s')",
+            gobj_short_name(gobj), topic_name, field_desc.name
+        ));
+        return [];
+    }
+
+    let options = [];
+    for(let item of list) {
+        let id = is_object(item)? item.id : item;
+        if(is_string(id) && !empty_string(id)) {
+            options.push(id);
+        }
+    }
+    return options;
+}
+
+/************************************************************
+ *  Encode the select2 value (array of ids) into fkey ref(s)
+ *  "topic_name^id^hook_name", shaped by the column real type:
+ *      string      -> single ref (or null if no selection)
+ *      object/dict -> {ref: true, ...}
+ *      array/list  -> [ref, ...]
+ ************************************************************/
+function build_fkey_ref(gobj, field_desc, value)
+{
+    let fkey_desc = field_desc.fkey;
+    if(!is_object(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+        log_error(sprintf("%s: fkey field '%s' without fkey mapping",
+            gobj_short_name(gobj), field_desc.name
+        ));
+        return null;
+    }
+
+    // HACK we work only with one fkey (same as the treedb stack)
+    let topic_name = Object.keys(fkey_desc)[0];
+    let hook_name = fkey_desc[topic_name];
+
+    let refs;
+    switch(field_desc.real_type) {
+        case "string":
+            refs = null;
+            break;
+        case "object":
+        case "dict":
+            refs = {};
+            break;
+        case "array":
+        case "list":
+            refs = [];
+            break;
+        default:
+            log_error(sprintf("%s: fkey field '%s' with bad real_type '%s'",
+                gobj_short_name(gobj), field_desc.name, field_desc.real_type
+            ));
+            return null;
+    }
+
+    if(!is_array(value)) {
+        value = value? [value] : [];
+    }
+
+    for(let v of value) {
+        let id = is_object(v)? v.id : v;
+        if(!is_string(id) || empty_string(id)) {
+            log_error(sprintf("%s: fkey field '%s' with bad value: %s",
+                gobj_short_name(gobj), field_desc.name, JSON.stringify(v)
+            ));
+            continue;
+        }
+        let ref = topic_name + "^" + id + "^" + hook_name;
+        switch(field_desc.real_type) {
+            case "string":
+                return ref;     // single-valued: first id wins
+            case "object":
+            case "dict":
+                refs[ref] = true;
+                break;
+            case "array":
+            case "list":
+                refs.push(ref);
+                break;
+        }
+    }
+
+    return refs;
+}
+
+/************************************************************
+ *  Apply the form mode to the pkey field:
+ *      "update" -> pkey readonly, not required
+ *      "create" -> pkey writable and required (readonly if rowid)
+ *  Empty form_mode keeps the template-declared behaviour
+ *  (backward compatible).
+ ************************************************************/
+function apply_form_mode(gobj, $form)
+{
+    let mode = gobj_read_str_attr(gobj, "form_mode");
+    if(empty_string(mode)) {
+        return;
+    }
+
+    let pkey = gobj_read_str_attr(gobj, "pkey");
+    let $input = $form.querySelector(`[name="${pkey}"]`);
+    if(!$input) {
+        log_error(sprintf("%s: form_mode '%s' but form has no pkey field '%s'",
+            gobj_short_name(gobj), mode, pkey
+        ));
+        return;
+    }
+
+    let is_rowid = $input.field_desc && $input.field_desc.type === "rowid";
+    if(mode === "create" && !is_rowid) {
+        $input.removeAttribute("readonly");
+        $input.setAttribute("required", "");
+    } else {
+        $input.setAttribute("readonly", "readonly");
+        $input.removeAttribute("required");
+    }
+}
+
 /******************************************************************
  *  With html field conf builds an html element,
  *  ready to add to the form
@@ -700,6 +875,7 @@ function create_form_field(
         inputType,
         name,
         label,
+        label_i18n,
         placeholder,
         options,
         extras, // extra html input/textarea attributes
@@ -750,7 +926,7 @@ function create_form_field(
                     $element = createElement2(
                         ['div', {class: 'xfield field is-horizontal'}, [
                             ['div', {class: 'field-label is-normal' }, [
-                                ['label', {class:'label ', i18n:label, for:name}, label]
+                                ["label", {class:"label ", i18n:(label_i18n||label), for:name}, label]
                             ]],
 
                             ['div', {class: 'field-body'}, [
@@ -765,7 +941,7 @@ function create_form_field(
                     $element = createElement2(
                         ['div', {class: 'xfield field is-horizontal'}, [
                             ['div', {class: 'field-label is-normal' }, [
-                                ['label', {class:'label ', i18n:label, for:name}, label]
+                                ["label", {class:"label ", i18n:(label_i18n||label), for:name}, label]
                             ]],
 
                             ['div', {class: 'field-body'}, [
@@ -788,7 +964,7 @@ function create_form_field(
             $element = createElement2(
                 ['div', {class: 'xfield field is-horizontal'}, [
                     ['div', {class: 'field-label is-normal' }, [
-                        ['label', {class:'label ', i18n:label, for:name}, label]
+                        ["label", {class:"label ", i18n:(label_i18n||label), for:name}, label]
                     ]],
 
                     ['div', {class: 'field-body'}, [
@@ -804,7 +980,7 @@ function create_form_field(
             $element = createElement2(
                 ['div', {class: 'xfield field is-horizontal'}, [
                     ['div', {class: 'field-label is-normal' }, [
-                        ['label', {class:'label ', i18n:label, for:name}, label]
+                        ["label", {class:"label ", i18n:(label_i18n||label), for:name}, label]
                     ]],
 
                     ['div', {class: 'field-body'}, [
@@ -823,7 +999,7 @@ function create_form_field(
             $element = createElement2(
                 ['div', {class: 'field is-horizontal tabulator-buttons'}, [
                     ['div', {class: 'field-label is-normal' }, [
-                        ['label', {class:'label', i18n:label}, label]
+                        ['label', {class:'label', i18n:(label_i18n||label)}, label]
                     ]],
 
                     ['div', {class: 'field-body'}, [
@@ -866,7 +1042,7 @@ function create_form_field(
             $element = createElement2(
                 ['div', {class: 'xfield field is-horizontal'}, [
                     ['div', {class: 'field-label is-normal' }, [
-                        ['label', {class:'label ', i18n:label, for:name}, label]
+                        ["label", {class:"label ", i18n:(label_i18n||label), for:name}, label]
                     ]],
 
                     ['div', {class: 'field-body'}, [
@@ -895,7 +1071,7 @@ function create_form_field(
         case 'input':
         {
             let attrs = {
-                class: `input ${name==='id'?'with-focus':''}`,
+                class: `input ${name===gobj_read_str_attr(gobj, "pkey")?'with-focus':''}`,
                 name: name,
                 type: inputType,
                 placeholder: placeholder
@@ -968,11 +1144,19 @@ function create_form_field(
                     },
                     options.map(option =>
                         ['option', {value:option, i18n:option}, option]
-                    )
+                    ),
+                    {
+                        'change': function (evt) {
+                            gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+                        }
+                    }
                 ]
             ];
-            $extend = createElement2(extend);
-            $control.appendChild($extend);
+            let $wrapper = createElement2(extend);
+            $control.appendChild($wrapper);
+            /*  the data-input marker must land on the SELECT, not on the
+             *  bulma .select wrapper — get/set read/write $input.value */
+            $extend = $wrapper.querySelector('select');
             break;
         }
 
@@ -996,6 +1180,9 @@ function create_form_field(
             $extend.tom_select = new TomSelect($extend, {
                 allowEmptyOption: true,
                 placeholder: placeholder,
+                /*  single-valued fkey (real_type string): one selection only */
+                maxItems: (field_desc.type === "fkey" &&
+                    field_desc.real_type === "string")? 1 : null,
                 plugins: {
                     'clear_button': {
                         'title': t('Remove all selected options'),
@@ -1014,10 +1201,17 @@ function create_form_field(
         case 'checkbox':
         {
             let extend = ['label', {class: 'checkbox'},
-                ['input', {type: 'checkbox', name:name}]
+                ['input', {type: 'checkbox', name:name}, '', {
+                    'change': function (evt) {
+                        gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+                    }
+                }]
             ];
-            $extend = createElement2(extend);
-            $control.appendChild($extend);
+            let $wrapper = createElement2(extend);
+            $control.appendChild($wrapper);
+            /*  the data-input marker must land on the checkbox INPUT,
+             *  not on the label — get/set read/write $input.checked */
+            $extend = $wrapper.querySelector('input');
             break;
         }
 
@@ -1043,6 +1237,7 @@ function create_form_field(
         {
             let attrs = {
                 class: 'jsoneditor jse-theme-dark',
+                name: name,
                 style: ''
             };
             Object.assign(attrs, extras);
@@ -1055,6 +1250,22 @@ function create_form_field(
             let extend = ['div', attrs];
             $extend = createElement2(extend);
             $control.appendChild($extend);
+            $extend.jsoneditor = new JSONEditor({
+                target: $extend,
+                props: {
+                    readOnly: !!readonly,
+                    onChange: function() {
+                        gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+                    },
+                    timestampTag: function({field, value, path}) {
+                        return field === '__t__' || field === '__tm__' ||
+                            field === 'tm' || field === 't' || field === 'time' ||
+                            field === 'from_t' || field === 'to_t' ||
+                            field === 't_input' || field === 't_output' ||
+                            field === 'from_tm' || field === 'to_tm';
+                    },
+                }
+            });
             break;
         }
 
@@ -1828,8 +2039,9 @@ function get_form_values(gobj, $form)
  ************************************************************/
 function clear_data(gobj, $form)
 {
+    let pkey = gobj_read_str_attr(gobj, "pkey");
     $form.querySelectorAll('input, select, textarea, .jsoneditor').forEach($input => {
-        if($input.name !== 'id') { // TODO review
+        if($input.name !== pkey) {
             if($input.classList.contains("jsoneditor")) {
                 let jsoneditor = $input.jsoneditor;
                 if(jsoneditor) {
@@ -1923,7 +2135,7 @@ function set_form_values(gobj, template, $form, record)
 
     clear_data(gobj, $form);
 
-    if(!record || record.length === 0) {
+    if(!record || Object.keys(record).length === 0) {
         record = create_template_record(template);
     }
 
@@ -1948,12 +2160,28 @@ function set_form_values(gobj, template, $form, record)
             modified = true;
         }
         value = treedb_value_2_form_value(gobj, field_desc, value);
+        if(value === undefined) {
+            /*  DOM 'value' setters stringify undefined as "undefined";
+             *  null is safe (LegacyNullToEmptyString). */
+            value = null;
+        }
 
         switch(tag) {
             case "input":
                 switch(input_type) {
                     case "datetime-local":
-                        // TODO $input.value = epochToDateTimeLocal(value);
+                        /*  value is a Date (see treedb_value_2_form_value);
+                         *  a datetime-local input wants local
+                         *  "YYYY-MM-DDTHH:mm" (no seconds). */
+                        if(value instanceof Date && !isNaN(value.getTime())) {
+                            let pad = (n) => String(n).padStart(2, "0");
+                            $input.value =
+                                `${value.getFullYear()}-${pad(value.getMonth() + 1)}` +
+                                `-${pad(value.getDate())}T` +
+                                `${pad(value.getHours())}:${pad(value.getMinutes())}`;
+                        } else {
+                            $input.value = "";
+                        }
                         break;
                     case "color":
                         $input.value = convertColor(value);
@@ -1988,7 +2216,7 @@ function set_form_values(gobj, template, $form, record)
             case "jsoneditor":
                 let jsoneditor = $input.jsoneditor;
                 if(jsoneditor) {
-                    jsoneditor.set(value);
+                    jsoneditor.set(value ? value : {text: ''});
                 }
                 break;
 
@@ -2000,7 +2228,7 @@ function set_form_values(gobj, template, $form, record)
                 break;
 
             case "table":
-                load_tabulator_data(gobj, $input, value);
+                load_tabulator_data(gobj, $input, value ? value : []);
                 break;
 
             case "coordinates":
@@ -2080,7 +2308,35 @@ function treedb_value_2_form_value(gobj, field_desc, value)
     let real_type = field_desc.real_type;
 
     switch(type) {
-        case "fkey":
+        case "fkey": {
+            /*  Decode ref(s) ("topic^id^hook", bare "$id", dict keys or
+             *  {topic_name,id,hook_name}) into a plain array of ids for
+             *  the select2 widget. */
+            let new_value = [];
+            if(is_string(value) && !empty_string(value)) {
+                let fkey = treedb_decoder_fkey(field_desc, value);
+                if(fkey) {
+                    new_value.push(fkey.id);
+                }
+            } else if(is_array(value)) {
+                for(let v of value) {
+                    let fkey = treedb_decoder_fkey(field_desc, v);
+                    if(fkey) {
+                        new_value.push(fkey.id);
+                    }
+                }
+            } else if(is_object(value)) {
+                // dict-type fkeys store refs as keys {"topic^id^hook": true}
+                for(let v of Object.keys(value)) {
+                    let fkey = treedb_decoder_fkey(field_desc, v);
+                    if(fkey) {
+                        new_value.push(fkey.id);
+                    }
+                }
+            }
+            value = new_value;
+            break;
+        }
         case "hook":
         case "enum":
         case "uuid":
@@ -2091,8 +2347,9 @@ function treedb_value_2_form_value(gobj, field_desc, value)
             break;
         case "now":
         case "time":
-            value = parseInt(value) || 0;
-            value = new Date(value);
+            /*  Stored epoch is in SECONDS (Yuneta/timeranger convention),
+             *  matching get_form_values() which saves getTime()/1000. */
+            value = new Date((parseInt(value) || 0) * 1000);
             break;
         case "date":
         case "color":
@@ -2110,17 +2367,22 @@ function treedb_value_2_form_value(gobj, field_desc, value)
 
         case "string":
         case "integer":
-        case "object":
-        case "dict":
-        case "array":
-        case "list":
         case "real":
         case "boolean":
             break;
+        case "object":
+        case "dict":
+            /*  jsoneditor Content shape  */
+            value = {json: is_object(value)? value : {}};
+            break;
         case "blob":
-            // Return as it is, manage by jsoneditor
-            // TODO si es para editar, tiene que ser
-            // value = {json: value};
+            /*  jsoneditor Content shape (a blob may hold any json)  */
+            value = {json: (is_object(value) || is_array(value))? value : {}};
+            break;
+        case "array":
+        case "list":
+            /*  jsoneditor Content shape  */
+            value = {json: is_array(value)? value : []};
             break;
         case "number":
             break;
@@ -2173,6 +2435,7 @@ function form_value_2_treedb_value(gobj, field_desc, value)
 
     switch(type) {
         case "fkey":
+            value = build_fkey_ref(gobj, field_desc, value);
             break;
         case "hook":
             value = null;
@@ -2334,6 +2597,7 @@ function ac_load_record(gobj, event, kw, src)
 
     gobj_write_bool_attr(gobj, "initialized", false);
     let modified = set_form_values(gobj, gobj_read_attr(gobj, "template"), $form, kw);
+    apply_form_mode(gobj, $form);
     set_changed_stated(gobj, modified);
     gobj_write_bool_attr(gobj, "initialized", true);
 
@@ -2619,6 +2883,13 @@ function create_gclass(gclass_name)
  ***************************************************************/
 function register_c_yui_form()
 {
+    /*  Idempotent: C_YUI_TREEDB_TOPIC_WITH_FORM auto-registers this
+     *  gclass for its hosted edit 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);
 }