@fui-org/fui-cli 1.2.1 → 1.3.2

package/skills/fui-skill-cli/references/ui-crosswindow-patterns.md

@@ -0,0 +1,321 @@
+# FUI Cross-window Patterns — openWindow & data exchange
+
+> Owns: **`openWindow`, cross-window data exchange (`#PARENT`/`#Win`), `set.menu` for child modules, `onclose`**.
+
+Open a module as a sub-window and exchange data between windows/iframes (`#PARENT`, `#WinID`). From project **security-manager** and `ex-v3-*` examples. See also [ui-patterns.md](ui-patterns.md), [default-function.md](default-function.md) (`openWindow`, `windowSendMessage`).
+
+---
+
+## 1. openWindow
+
+Opens another module as a separate popup window. `id` is the handle for later references.
+
+```json
+{
+  "FUN": "openWindow",
+  "IN": {
+    "id": "`Win1",
+    "title": "`User Permission",
+    "url": "`/UserPermission",
+    "data": "danhSachChoTable",
+    "width": "`800px",
+    "height": "`600px",
+    "onclose": {
+      "CALL": "reloadData"
+    }
+  }
+}
+```
+
+| Param              | Required | Description                                                                 |
+| ------------------ | -------- | --------------------------------------------------------------------------- |
+| `id`               | ✅       | Window id (backtick = literal) — referenced as `#Win1`                      |
+| `url`              | ✅       | Module URL — no `?menu=0`; child declares `"set": { "menu": false }` itself |
+| `title`            | ❌       | Dialog title                                                                |
+| `data`             | ❌       | Data passed to the child — child reads `#PARENT.data`                       |
+| `width` / `height` | ❌       | Window size (`"800px"`, `"50%"`)                                            |
+| `onclose`          | ❌       | Action run after the sub-window closes                                      |
+
+> **Child module:** never pass `?menu=0` in the URL. The child declares `"set": { "menu": false }` in its module.json to hide the menu permanently, regardless of how it's opened. URL carries only the IDs needed to query the DB.
+
+**`onclose` targeting another window:**
+
+```json
+"onclose": {
+  "#Win1": { "CALL": "cmdThongBao" }
+}
+```
+
+> When Win2 closes → runs `cmdThongBao` in Win1 (not the current window).
+
+---
+
+## 2. Cross-window data exchange
+
+`#PARENT` and `#WinID` exchange data between windows (iframes). Works same-domain and cross-domain (via `postMessage`).
+
+### Read (value position)
+
+```json
+"data": [
+  {
+    "sUserID":      "#PARENT.sUserID",
+    "sFullName":    "#PARENT.sFullName",
+    "dataFromWin1": "#Win1.apiChart"
+  }
+]
+```
+
+| Syntax            | Meaning                                    |
+| ----------------- | ------------------------------------------ |
+| `"#PARENT.field"` | Read `vueData.field` from parent           |
+| `"#Win1.field"`   | Read `vueData.field` from iframe id `Win1` |
+
+### Write (key position)
+
+```json
+"data": [
+  {
+    "#PARENT.abcdef": 1234567890,
+    "#Win1.dulieuTuForm2": "`huynh cao tuan"
+  }
+]
+```
+
+```json
+":action": {
+  "#PARENT.val4": "DauRaTuCauTruc_IN"
+}
+```
+
+| Syntax                   | Meaning                           |
+| ------------------------ | --------------------------------- |
+| `"#PARENT.field": value` | Write to parent's `vueData.field` |
+| `"#Win1.field": value`   | Write to Win1's `vueData.field`   |
+
+### Call an action in another window
+
+```json
+":action": {
+  "#PARENT": { "CALL": "cmdSETData" }
+}
+```
+
+```json
+"#Win1": { "CALL": "cmdThongBao" }
+```
+
+- `"#PARENT"` (no field) with an action value → `runAction(value)` in parent
+- `"#Win1"` with an action value → `runAction(value)` in Win1
+
+### Receive data passed by openWindow
+
+Parent opens child with `"data": "sourceData"`:
+
+```json
+"data": [
+  {
+    "LayDuLieuWinCha": "#PARENT.Win1"
+  }
+]
+```
+
+> `#PARENT.Win1` reads parent variable `Win1`. When the parent calls `openWindow` with `id: "Win1"`, FUI sets `vueData.Win1 = passed_data` in the parent before opening.
+
+### Full pattern — child receives parent data
+
+**Parent (ex-v3-1SetData):**
+
+```json
+":action": {
+  "FUN": "openWindow",
+  "IN": {
+    "id":   "`Win1",
+    "url":  "`/ex/ex-v3-2CauTruc",
+    "data": "danhSachChoTable"
+  }
+}
+```
+
+**Child (ex-v3-2CauTruc):**
+
+```json
+"data": [
+  {
+    "IF": "typeof menu != 'undefined' && menu=='0'",
+    "THEN": { "v_Set.menu": false }
+  },
+  {
+    "LayDuLieuWinCha":    "#PARENT.Win1",
+    "GiaTriTuCHA.thu.xem": "#PARENT.val7",
+    "GiaTriSetTuCHA":      null
+  }
+]
+```
+
+> Put `#PARENT.*` BEFORE startup CALLs so data is ready before the first API runs.
+
+---
+
+## 3. Sub-window checklist
+
+A module opened via `openWindow` needs:
+
+- `"set": { "menu": false }` — hides the navigation header (in module.json, not `?menu=0` in the URL)
+- URL params are injected into `vueData` before `data[]` runs — a trailing `{ "CALL": "apiLoad" }` is enough
+- URL passes only the parent record **ID** the child actually uses — no names or fields re-queryable from the DB
+
+```json
+// module.json của module con
+"set": { "menu": false },
+"data": [
+  { "ContestID": null },
+  {
+    "getDetail": {
+      "API": "/SM_Contest_Detail",
+      "IN": { "ContestID": "ContestID" },
+      "OUT": "dsDetail"
+    }
+  },
+  { "CALL": "getDetail" }
+]
+// ContestID tự động inject từ URL ?ContestID=xxx trước khi data[] chạy
+```
+
+---
+
+## 4. Complete parent ↔ child example (`ex-v3-1SetData` → `ex-v3-2CauTruc`)
+
+Standard: **parent opens child via `openWindow` passing table data; child reads/writes/calls back up to parent.**
+
+### 4.1 Parent — f-table + open button, pass `data`
+
+`openWindow.IN.data` passes an object/array (here table list `danhSachChoTable`) to the child; child reads `#PARENT.<id>`.
+
+```json
+{
+  "el": "f-table",
+  "attr": {
+    "label": "Danh sách",
+    ":items": "danhSachChoTable",
+    ":headers": [
+      { "text": "STT", "value": "STT" },
+      { "text": "Họ",  "value": "ho" },
+      { "text": "Tên", "value": "ten" }
+    ]
+  },
+  "w": "6"
+},
+{
+  "el": "f-button",
+  "attr": {
+    "label": "Open Window",
+    ":action": {
+      "FUN": "openWindow",
+      "IN": {
+        "id": "`Win1",
+        "title": "`Chỉnh sửa cho module",
+        "url": "`/ex/ex-v3-2CauTruc",
+        "data": "danhSachChoTable"
+      }
+    }
+  },
+  "w": "3"
+}
+```
+
+Parent can also declare **named actions** for the child to call, and write into the child from `data[]`:
+
+```json
+"data": [
+  { "#PARENT.abcdef": 1234567890, "#Win1": { "CALL": "cmdTHONGBao" } },
+  {
+    "cmdSETData": [
+      { "MESS": "Lệnh của form CHA được gọi từ form CON" },
+      { "#Win1.GiaTriSetTuCHA": "Giá trị set từ CHA" }
+    ]
+  }
+]
+```
+
+### 4.2 Child — read parent, write back, call parent, open another child
+
+```json
+// data[] của con: đọc dữ liệu cha NGAY đầu tiên
+"data": [
+  {
+    "LayDuLieuWinCha": "#PARENT.Win1",   // = data cha đã truyền qua openWindow (id=Win1)
+    "GiaTriTuCHA.thu.xem": "#PARENT.val7",
+    "GiaTriSetTuCHA": null
+  }
+],
+"set": { "menu": false, "login": false }
+```
+
+```json
+// Các nút trong controls của con:
+{ "el": "f-button", "attr": { "label": "Lấy dữ liệu từ cha",
+  ":action": { "USERINFO": "#PARENT.val4" } } },
+
+{ "el": "f-button", "attr": { "label": "Set dữ liệu xuống cha",
+  ":action": { "#PARENT.val4": "DauRaTuCauTruc_IN" } } },
+
+{ "el": "f-button", "attr": { "label": "Gọi lệnh ở cha",
+  ":action": { "#PARENT": { "CALL": "cmdSETData" } } } },
+
+{ "el": "f-button", "attr": { "label": "Mở thêm form con",
+  ":action": { "FUN": "openWindow", "IN": {
+    "id": "`Win2",
+    "url": "`https://fui.vn/ex/ex-v3-1SetData",
+    "onclose": { "#Win1": { "CALL": "cmdThongBaoCuaFormNay" } }
+  } } } }
+```
+
+**Syntax summary (value = read, key = write):**
+
+| Syntax                         | Meaning                                                |
+| ------------------------------ | ------------------------------------------------------ |
+| `"x": "#PARENT.field"`         | Read parent `field` into `x`                           |
+| `"x": "#Win1.field"`           | Read `field` of window `Win1`                          |
+| `"#PARENT.field": "src"`       | Write `src` to parent `field`                          |
+| `"#Win1.field": "src"`         | Write to window `Win1`                                 |
+| `"#PARENT": { "CALL": "cmd" }` | Call action `cmd` in parent                            |
+| `"#Win1": { "CALL": "cmd" }`   | Call action in `Win1`                                  |
+| `openWindow.IN.data`           | Pass object/array to child; child reads `#PARENT.<id>` |
+| `openWindow.IN.onclose`        | Action after child closes (may target `#WinX`)         |
+
+> Works **same-domain and cross-domain** (runtime uses `postMessage` across domains).
+
+---
+
+## 5. f-table / f-sheet + detail window
+
+Common: list table → click a row → open child window to view/edit that row.
+
+- In `f-table` `headers`, use `t-button` or `t-menu` with `:action` calling `openWindow`; `item` is the current row.
+- Pass **only the row ID** via URL (child queries DB), or the whole row object via `openWindow.IN.data`.
+
+```json
+{
+  "el": "t-button",
+  "text": "Chi tiết",
+  "value": "ID",
+  "align": "center",
+  "attr": {
+    "icon-text": "mdi-eye",
+    "color": "primary",
+    ":action": {
+      "FUN": "openWindow",
+      "IN": {
+        "id": "`WinDetail",
+        "title": "`Chi tiết",
+        "url": "`/DetailModule?RecordID={{item.ID}}",
+        "onclose": { "CALL": "reloadList" }
+      }
+    }
+  }
+}
+```
+
+- **`f-sheet`** (grid-entry spreadsheet) works the same: a button/menu in the sheet calls `openWindow`, or save the sheet's `vueData` then open a child for extra input; the child writes back via `#PARENT.<field>` on close.
+- Reload after child closes: `onclose: { "CALL": "reloadList" }` (runs in the opener window) — see §1.

package/skills/fui-skill-cli/references/ui-dialog-patterns.md

@@ -0,0 +1,255 @@
+# FUI Dialog Patterns — manual v-dialog (STANDARD), hidden-container, checkbox-list
+
+> Owns: **manual dialogs: `hidden-container`, `v-card`/`v-toolbar` anatomy, opening a dialog with a row, checkbox-list**. `f-dialog`: [components-dialog.md](components-dialog.md).
+
+From **security-manager** and demo **ex-v3-dialog**.
+
+> **Dialog STANDARD: build `v-dialog` manually per the §1 anatomy** (easy to read/edit piecewise), **styled like `f-dialog`**: uncolored `dense flat` toolbar + close icon, floating-label form, last row is `v-card-actions`. Actions right-aligned, buttons keep natural width; only the primary action gets a filled color, secondary actions are text buttons. Full anatomy + rule table: `fui design read fui` §4–5. `f-dialog` (§0) is the secondary option for very small forms.
+
+> See also: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md) (menuChucNang opening a dialog), [components-dialog.md](components-dialog.md).
+
+---
+
+## 0. `f-dialog` — compact dialog component (secondary)
+
+`f-dialog` bundles card + toolbar + buttons — shorter than manual `v-dialog` but hard to customise layout. Use only for very small/simple forms; default is manual `v-dialog` (§1). Inner fields' `v-model` **points directly at keys of the `data` object** (no `vueData.dialogData.X`).
+
+```json
+{
+  "el": "f-dialog",
+  "attr": {
+    "v-model": "dialogOpen", // boolean mở/đóng
+    "v-model:data": "dialogData", // object dữ liệu của form
+    "title": "Nhập dữ liệu",
+    ":open-action": { "MESSBOX": "Bạn vừa mở dialog" },
+    ":controls": [
+      { "el": "v-text-field", "attr": { "v-model": "Domain", "label": "Domain" }, "w": 4 },
+      { "el": "v-text-field", "attr": { "v-model": "ModuleID", "label": "ModuleID" }, "w": 3 },
+      { "el": "v-checkbox", "attr": { "v-model": "checkBoxValue", ":label": "`Tôi đồng ý: ${checkBoxValue}`" } },
+      {
+        "el": "v-select",
+        "attr": {
+          "label": "Chọn",
+          "v-model": "bienselect",
+          ":items": "vueData.Mang",
+          "item-title": "AppName",
+          "item-value": "AppListID"
+        }
+      }
+    ],
+    ":watch": {
+      "bienselect": { "MESSBOX": "Watch {{bienselect}}" }
+    },
+    ":button": [
+      {
+        "label": "Lưu",
+        "type": "submit",
+        ":disabled": "!checkBoxValue",
+        "action": [{ "MESSBOX": "Đã lưu" }, { "dialogOpen": false }]
+      },
+      { "label": "Chạy API", "checkvalid": true, "v-if": "ModuleID==1", "action": [{ "API": "/chaymotapi" }] },
+      { "label": "Đóng", "action": [{ "dialogOpen": false }] }
+    ]
+  }
+}
+```
+
+| Prop           | Role                                                                           |
+| -------------- | ------------------------------------------------------------------------------ |
+| `v-model`      | Boolean open/close                                                             |
+| `v-model:data` | Form data object; `:controls` fields bind directly to its keys                 |
+| `title`        | Dialog title                                                                   |
+| `:open-action` | Action run on open                                                             |
+| `:controls`    | Control Object array = form fields                                             |
+| `:watch`       | Dialog-scoped watchers (by field name)                                         |
+| `:button`      | Buttons: `label`, `type:"submit"`, `checkvalid`, `:disabled`, `v-if`, `action` |
+
+**Which to use:** every dialog by default → **manual `v-dialog` per §1** (project standard). `f-dialog` only for very small forms (1–3 fields, no special layout) with no customisation requested.
+
+---
+
+## 1. Manual v-dialog in hidden-container (STANDARD)
+
+Dialogs always live in their own container with `prop: "hidden-container"` — never inside the main rows.
+
+```json
+{
+  "prop": "hidden-container",
+  "rows": [
+    {
+      "prop": "",
+      "cols": [
+        {
+          "el": "v-dialog",
+          "attr": {
+            "v-model": "dlUserInfo",
+            "width": 650
+          },
+          "innerHTML": [
+            {
+              "el": "v-card",
+              "attr": { "class": "pa-0" },
+              "innerHTML": [
+                {
+                  "el": "v-toolbar",
+                  "attr": { "dense": "", "flat": "" },
+                  "innerHTML": [
+                    { "el": "v-toolbar-title", "attr": {}, "innerHTML": "Update User Info" },
+                    { "el": "v-spacer", "attr": {} },
+                    {
+                      "el": "v-btn",
+                      "innerHTML": "<v-icon>mdi-close</v-icon>",
+                      "attr": { "icon": "", "v-on:click": "vueData.dlUserInfo = false" }
+                    }
+                  ]
+                },
+                {
+                  "el": "v-container",
+                  "attr": { "class": "grid-list-md px-4" },
+                  "innerHTML": [
+                    {
+                      "el": "v-layout",
+                      "w": 12,
+                      "attr": { "row": "", "wrap": "" },
+                      "innerHTML": [
+                        {
+                          "el": "v-text-field",
+                          "col": {},
+                          "attr": { "v-model": "vueData.sUserName", "label": "Tên đăng nhập" },
+                          "w": 6
+                        },
+                        {
+                          "el": "v-text-field",
+                          "col": {},
+                          "attr": { "v-model": "vueData.sLastName", "label": "Họ tên" },
+                          "w": 6
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "el": "v-card-actions",
+                  "attr": { "class": "mr-1 mb-1" },
+                  "innerHTML": [
+                    { "el": "v-spacer", "attr": {} },
+                    {
+                      "el": "f-button",
+                      "attr": {
+                        "text": "",
+                        "label": "Đặt lại",
+                        ":action": { "CALL": "resetForm" }
+                      }
+                    },
+                    {
+                      "el": "f-button",
+                      "attr": {
+                        "color": "primary",
+                        ":checkvalid": true,
+                        "label": "Lưu",
+                        "icon-text": "mdi-content-save",
+                        ":action": {
+                          "API": "SM_Users_Update",
+                          "IN": { "UserID": "sUserID", "UserName": "sUserName" },
+                          "CALLBACK": [
+                            { "MESS": "Cập nhật thành công." },
+                            { "dlUserInfo": false },
+                            { "CALL": "getUser" }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+**Rules (f-dialog look):**
+
+- `v-card[class="pa-0"]` — removes padding so the toolbar touches the edges (Vuetify class, not inline style); no elevation/outlined.
+- `v-toolbar[dense flat]` — thin title bar, **no** color/dark.
+- Close: `v-btn[icon]` mdi-close + `v-on:click: "vueData.dlXxx = false"` — no extra "Đóng" button in actions.
+- Form body: `v-container.grid-list-md.px-4` > `v-layout[row wrap]` > **floating-label** fields (`label` in attr; w:12 long / 6+6 short) — NO separate label divs.
+- Last button row MUST be `v-card-actions[class="mr-1 mb-1"]` — not a `v-layout`, `v-container` or normal form row.
+- `v-spacer` before the buttons → all actions right-aligned.
+- Buttons keep natural content width: no `w`, `width`, `block`, `flex-grow`, and don't wrap each in a growing column.
+- At most one primary action (e.g. **Lưu**) gets filled `color="primary"`; secondary actions use `f-button` + `"text": ""`, unfilled. Few buttons, short labels, restrained.
+- Save CALLBACK: MESS → close dialog → reload data.
+
+---
+
+## 2. Open dialog with row data
+
+Two steps: copy data into state → set `dlXxx = true`.
+
+**From menuChucNang:**
+
+```json
+"action": [
+  {
+    "addNew": 0,
+    "dongChon": "item",
+    "sUserID":    "item.UserID",
+    "sUserName":  "item.UserName",
+    "sLastName":  "item.LastName"
+  },
+  { "dlUserInfo": true }
+]
+```
+
+**From f-button:**
+
+```json
+":action": [
+  { "addNew": 1, "sUserID": "", "sUserName": "" },
+  { "dlUserInfo": true }
+]
+```
+
+> `addNew: 0` = edit, `addNew: 1` = new. In the dialog use `:disabled="addNew==0"` to lock the ID field on edit.
+
+---
+
+## 3. Checkbox-list dialog
+
+Dialog with a checkbox list for multi-select, saving on each click.
+
+```json
+{
+  "el": "v-card-text",
+  "attr": {},
+  "innerHTML": [
+    {
+      "el": "v-layout",
+      "attr": { "class": "fluid row justify-center grid-list-lg fill-height mt-3" },
+      "innerHTML": [
+        {
+          "el": "div",
+          "attr": { "v-for": "fc in vueData.dsFunctionRight", ":key": "fc.FunctionID" },
+          "innerHTML": [
+            {
+              "el": "v-checkbox",
+              "attr": {
+                "color": "primary",
+                "v-model": "sFunctionSelected",
+                ":value": "`${fc.FunctionID}`",
+                ":label": "`${fc.FunctionName}`",
+                "v-on:click": "CALL(saveFunction)"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+> `v-on:click` on the checkbox → saves immediately, no Save button. `v-model` holds an array; `:value` uses a backtick literal.