json-renderers-build-table 1.9.1 → 1.17.3

package/src/v16/tableWithOptions/config/instructions.json

@@ -0,0 +1,116 @@
+[
+    {
+        "narration": "Build the column widths for the table using the configured columns.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Build the table header row from the column metadata.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Create one table row for each record and place it into the table body container.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "data"
+            ]
+        },
+        "templateKey": "buildBodyTr",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Append the options column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options button cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "pushToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "body"
+            ]
+        },
+        "templateKey": "buttonCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v16/tableWithOptions/index.js

@@ -0,0 +1,66 @@
+import { runInstructions, buildBody, findByRole } from "../common/runner.js";
+import spec from "../spec.json" with { type: "json" };
+import base from "./config/base.json" with { type: "json" };
+import instructions from "./config/instructions.json" with { type: "json" };
+
+const buildSpec = ({ inColumns = [], inData = [], inOptions = {} } = {}) => {
+    const localColumns = inColumns;
+    const localData = inData;
+    const localOptions = {
+        col: { width: "100px" },
+        header: { columnName: "options" },
+        body: { columnName: "show" },
+        ...inOptions
+    };
+
+    const localBase = structuredClone(base);
+    const localSpec = structuredClone(spec);
+
+    const normalizedColumns = localColumns.map(col => {
+        const colCopy = structuredClone(col);
+        colCopy.template = {
+            bodyCell: "buildBodyCell",
+            ...(colCopy.template || {})
+        };
+        return colCopy;
+    });
+
+    const buildData = {
+        columns: normalizedColumns,
+        data: localData,
+        options: localOptions
+    };
+
+    const registry = {
+        data: buildData,
+        base: localBase,
+        spec: localSpec
+    };
+
+    runInstructions({
+        inInstructions: instructions,
+        inRegistry: registry
+    });
+
+    const tbodyElement = findByRole(localBase, "table-body");
+    if (tbodyElement && Array.isArray(tbodyElement.children)) {
+        buildBody(tbodyElement.children, buildData, localSpec);
+    }
+
+    return localBase;
+};
+
+const startFunc = (input = {}) => {
+    const localInput = (input && typeof input === "object" && "inConfig" in input)
+        ? input.inConfig
+        : input;
+
+    return buildSpec({
+        inColumns: localInput.columns || [],
+        inData: localInput.data || [],
+        inOptions: localInput.options || {}
+    });
+};
+
+export { buildSpec };
+export default startFunc;

package/src/v16/tableWithSerial/config/base.json

@@ -0,0 +1,38 @@
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table table-hover table-striped align-middle border mb-0"
+    },
+    "children": [
+        {
+            "tagName": "colgroup",
+            "attributes": {
+                "data-role": "table-colgroup"
+            },
+            "children": []
+        },
+        {
+            "tagName": "thead",
+            "attributes": {
+                "class": "table-dark",
+                "data-role": "table-header"
+            },
+            "children": [
+                {
+                    "tagName": "tr",
+                    "attributes": {
+                        "data-role": "table-header-row"
+                    },
+                    "children": []
+                }
+            ]
+        },
+        {
+            "tagName": "tbody",
+            "attributes": {
+                "data-role": "table-body"
+            },
+            "children": []
+        }
+    ]
+}

package/src/v16/tableWithSerial/config/instructions.json

@@ -0,0 +1,116 @@
+[
+    {
+        "narration": "Build the column widths for the table using the configured columns.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Build the table header row from the column metadata.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Create one table row for each record and place it into the table body container.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "data"
+            ]
+        },
+        "templateKey": "buildBodyTr",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Prepend the serial column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial number cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshiftSerialToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "body"
+            ]
+        },
+        "templateKey": "buildBodyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v16/tableWithSerial/index.js

@@ -0,0 +1,66 @@
+import { runInstructions, buildBody, findByRole } from "../common/runner.js";
+import spec from "../spec.json" with { type: "json" };
+import base from "./config/base.json" with { type: "json" };
+import instructions from "./config/instructions.json" with { type: "json" };
+
+const buildSpec = ({ inColumns = [], inData = [], inSerial = {} } = {}) => {
+    const localColumns = inColumns;
+    const localData = inData;
+    const localSerial = {
+        col: { width: "50px" },
+        header: { columnName: "#" },
+        body: {},
+        ...inSerial
+    };
+
+    const localBase = structuredClone(base);
+    const localSpec = structuredClone(spec);
+
+    const normalizedColumns = localColumns.map(col => {
+        const colCopy = structuredClone(col);
+        colCopy.template = {
+            bodyCell: "buildBodyCell",
+            ...(colCopy.template || {})
+        };
+        return colCopy;
+    });
+
+    const buildData = {
+        columns: normalizedColumns,
+        data: localData,
+        serial: localSerial
+    };
+
+    const registry = {
+        data: buildData,
+        base: localBase,
+        spec: localSpec
+    };
+
+    runInstructions({
+        inInstructions: instructions,
+        inRegistry: registry
+    });
+
+    const tbodyElement = findByRole(localBase, "table-body");
+    if (tbodyElement && Array.isArray(tbodyElement.children)) {
+        buildBody(tbodyElement.children, buildData, localSpec);
+    }
+
+    return localBase;
+};
+
+const startFunc = (input = {}) => {
+    const localInput = (input && typeof input === "object" && "inConfig" in input)
+        ? input.inConfig
+        : input;
+
+    return buildSpec({
+        inColumns: localInput.columns || [],
+        inData: localInput.data || [],
+        inSerial: localInput.serial || {}
+    });
+};
+
+export { buildSpec };
+export default startFunc;

package/src/v17/index.js

@@ -0,0 +1,5 @@
+// V16 exposes three focused table scenarios. Each scenario owns its config and instructions.
+// Only genuinely shared execution helpers live in ./common.
+import simple from "./simple/index.js";
+
+export { simple };

package/src/v17/simple/base.json

@@ -0,0 +1,53 @@
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table table-hover table-striped align-middle border mb-0"
+    },
+    "children": [
+        {
+            "tagName": "colgroup",
+            "attributes": {
+                "data-role": "table-colgroup"
+            },
+            "children": []
+        },
+        {
+            "tagName": "thead",
+            "attributes": {
+                "class": "table-dark",
+                "data-role": "table-header"
+            },
+            "children": [
+                {
+                    "tagName": "tr",
+                    "attributes": {
+                        "data-role": "table-header-row"
+                    },
+                    "children": []
+                }
+            ]
+        },
+        {
+            "tagName": "tbody",
+            "attributes": {
+                "data-role": "table-body"
+            },
+            "children": []
+        },
+        {
+            "tagName": "tfoot",
+            "attributes": {
+                "data-role": "table-footer"
+            },
+            "children": [
+                {
+                    "tagName": "tr",
+                    "attributes": {
+                        "data-role": "table-footer-row"
+                    },
+                    "children": []
+                }
+            ]
+        }
+    ]
+}

package/src/v17/simple/index.js

@@ -0,0 +1,56 @@
+import fromCollection from "json-transformer-funcs-one-dimension";
+import twoDimensional from "json-transformer-funcs-two-dimensions";
+
+import { resolvePath } from "json-transformer-funcs";
+
+import spec from "../spec.json" with { type: "json" };
+import base from "./base.json" with { type: "json" };
+
+import singleInstructions from "./instructions/single.json" with { type: "json" };
+import twoDimensionalInstructions from "./instructions/double.json" with { type: "json" };
+
+import writePath from "./writePath/index.js";
+
+// 1. Keep the input, table structure, and templates together as the build context.
+const registry = { data: {}, base, spec };
+const functions = {
+    fromCollection, twoDimensional
+};
+
+// 2. Apply each instruction: read source, build result, write destination.
+const runInstructions = instructions => {
+    instructions.forEach(instruction => {
+        const source = resolvePath(registry, instruction.sourcePath);
+
+        if (source) {
+            const result = functions[instruction.func](source, spec[instruction.templateKey]);
+            writePath(registry, instruction.destinationPath, result);
+        } else {
+            console.log("   !instruction : ", instruction);
+            console.log("   !source : ", source);
+        };
+    });
+};
+
+const runInstructions2 = instructions => {
+    instructions.forEach(instruction => {
+        const result = functions[instruction.func](
+            registry.data.columns,
+            registry.data.data,
+            spec
+        );
+        writePath(registry, instruction.destinationPath, result);
+    });
+};
+
+// 3. Complete the table and return its JSON specification.
+const startFunc = data => {
+    registry.data = data;
+
+    runInstructions(singleInstructions);
+    runInstructions2(twoDimensionalInstructions);
+
+    return base;
+};
+
+export default startFunc;

package/src/v17/simple/instructions/double.json

@@ -0,0 +1,19 @@
+[
+    {
+        "narration": "Build the table body rows for the table using the configured columns and data.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "func": "twoDimensional"
+    }
+]

package/src/v17/simple/instructions/single.json

@@ -0,0 +1,38 @@
+[
+    {
+        "narration": "Build the column widths for the table using the configured columns.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Build the header row for the table using the configured columns.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "fromCollection"
+    }
+]

package/src/v17/simple/spec.json

@@ -0,0 +1,86 @@
+{
+    "buildBodyTr": {
+        "tagName": "tr",
+        "attributes": {
+            "class": "align-middle"
+        },
+        "children": []
+    },
+    "buildColGroup": {
+        "tagName": "col",
+        "attributes": {
+            "width": "${width}"
+        }
+    },
+    "buildHeader": {
+        "tagName": "th",
+        "textContent": "${columnName}",
+        "attributes": {
+            "class": "py-3 px-3 fw-semibold text-uppercase small"
+        }
+    },
+    "buildFooter": {
+        "tagName": "td",
+        "children": [
+            {
+                "tagName": "input",
+                "attributes": {
+                    "type": "text",
+                    "placeholder": "enter ${columnName}",
+                    "name": "${columnName}",
+                    "class": "form-control"
+                }
+            }
+        ]
+    },
+    "buildBodyCell": {
+        "tagName": "td",
+        "textContent": "${rowValue}",
+        "attributes": {
+            "class": "py-3 px-3 text-secondary"
+        }
+    },
+    "button": {
+        "tagName": "button",
+        "textContent": "${columnName}",
+        "attributes": {
+            "class": "btn btn-primary btn-sm"
+        }
+    },
+    "buttonCell": {
+        "tagName": "td",
+        "attributes": {
+            "class": "py-2 px-3 text-center"
+        },
+        "children": [
+            {
+                "tagName": "button",
+                "textContent": "${agg:count}",
+                "attributes": {
+                    "class": "btn btn-primary btn-sm"
+                }
+            }
+        ]
+    },
+    "buildOption": {
+        "tagName": "option",
+        "textContent": "${rowValue}",
+        "attributes": {
+            "value": "${rowValue}"
+        }
+    },
+    "buildSelect": {
+        "tagName": "select",
+        "attributes": {
+            "id": "LedgerName"
+        },
+        "children": []
+    },
+    "buildDataList": {
+        "tagName": "datalist",
+        "attributes": {
+            "data-name": "${columnName}"
+        },
+        "children": []
+    }
+}