@5minds/node-red-dashboard-2-processcube-dynamic-table 1.1.18 → 1.2.0-develop-5998e7-m2eo3ibv

package/nodes/dynamic-table.html

@@ -1,362 +1,354 @@
 <script type="text/javascript">
-  (function () {
-    function hasProperty(obj, prop) {
-      return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-
-    RED.nodes.registerType("ui-dynamic-table", {
-      category: "ProcessCube UI",
-      color: "#00aed7",
-      defaults: {
-        name: { value: "" },
-        tableName: { value: "" },
-        group: { type: "ui-group", required: true },
-        order: { value: 1 },
-        data: { value: "payload" },
-        data_type: { value: "msg" },
-        options: {
-          value: [{ label: "", condition: "" }],
-          validate: function (v) {
-            const unique = new Set(
-              v.map(function (o) {
-                return o.label;
-              })
-            );
-            return v.length === unique.size;
-          },
-        },
-        columns: {
-          value: [{ value: "", label: "" }],
-          validate: function (v) {
-            const unique = new Set(
-              v.map(function (o) {
-                return o.value;
-              })
-            );
-            return v.length === unique.size;
-          },
-        },
-        width: {
-          value: 0,
-          validate: function (v) {
-            const width = v || 0;
-            const currentGroup = $("#node-input-group").val() || this.group;
-            const groupNode = RED.nodes.node(currentGroup);
-            const valid = !groupNode || +width <= +groupNode.width;
-            $("#node-input-size").toggleClass("input-error", !valid);
-            return valid;
-          },
-        },
-        height: { value: 0 },
-        outputs: { value: 1 },
-      },
-      inputs: 1,
-      outputs: 1,
-      outputLabels: function (index) {
-        return this.options[index].label;
-      },
-      icon: "ui_dynamic_table.svg",
-      paletteLbel: "file",
-      label: function () {
-        return this.name || "dynamic-table";
-      },
-      oneditprepare: function () {
-        $("#node-input-size").elementSizer({
-          width: "#node-input-width",
-          height: "#node-input-height",
-          group: "#node-input-group",
-        });
-
-        function generateOption(i, option) {
-          const container = $("<li/>", {
-            style:
-              "background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
-          });
-
-          // Create input fields for value and label
-          const row = $("<div/>").appendTo(container);
-          $("<input/>", {
-            class: "node-input-option-label",
-            type: "text",
-            style: "margin-left:7px; width:calc(50% - 32px);",
-            placeholder: "Label",
-            value: option.label,
-          })
-            .appendTo(row)
-            .typedInput({
-              type: "str",
-              types: ["str"],
-            });
-
-          $("<input/>", {
-            class: "node-input-option-condition",
-            type: "text",
-            style: "margin-left:7px; width:calc(50% - 32px);",
-            placeholder: "Condition",
-            value: option.condition,
-          })
-            .appendTo(row)
-            .typedInput({
-              type: "str",
-              types: ["str"],
-            });
-
-          // Create delete button for the option
-          const finalSpan = $("<span/>", {
-            style: "float:right; margin-right:8px;",
-          }).appendTo(row);
-          const deleteButton = $("<a/>", {
-            href: "#",
-            class: "editor-button editor-button-small",
-            style: "margin-top:7px; margin-left:5px;",
-          }).appendTo(finalSpan);
-          $("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
-
-          deleteButton.click(function () {
-            container.css({
-              background: "var(--red-ui-secondary-background-inactive, #fee)",
-            });
-            container.fadeOut(300, function () {
-              $(this).remove();
-            });
-          });
-
-          $("#node-input-option-container").append(container);
-        }
-
-        function generateColumn(i, column) {
-          const container = $("<li/>", {
-            style:
-              "background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
-          });
-
-          // Create input fields for value and label
-          const row = $("<div/>").appendTo(container);
-          $("<input/>", {
-            class: "node-input-column-value",
-            type: "text",
-            style: "margin-left:7px; width:calc(50% - 32px);",
-            placeholder: "Value",
-            value: column.value,
-          })
-            .appendTo(row)
-            .typedInput({ default: column.type || "str", types: ["str"] });
-
-          $("<input/>", {
-            class: "node-input-column-label",
-            type: "text",
-            style: "margin-left:7px; width:calc(50% - 32px);",
-            placeholder: "Label",
-            value: column.label,
-          })
-            .appendTo(row)
-            .typedInput({
-              type: "str",
-              types: ["str"],
-            });
-
-          // Create delete button for the column
-          const finalSpan = $("<span/>", {
-            style: "float:right; margin-right:8px;",
-          }).appendTo(row);
-          const deleteButton = $("<a/>", {
-            href: "#",
-            class: "editor-button editor-button-small",
-            style: "margin-top:7px; margin-left:5px;",
-          }).appendTo(finalSpan);
-          $("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
-
-          deleteButton.click(function () {
-            container.css({
-              background: "var(--red-ui-secondary-background-inactive, #fee)",
-            });
-            container.fadeOut(300, function () {
-              $(this).remove();
-            });
-          });
-
-          $("#node-input-column-container").append(container);
-        }
-
-        $("#node-input-add-column").click(function () {
-          generateColumn(
-            $("#node-input-column-container").children().length + 1,
-            {}
-          );
-          $("#node-input-column-container-div").scrollTop(
-            $("#node-input-column-container-div").get(0).scrollHeight
-          );
-        });
-
-        for (let i = 0; i < this.columns.length; i++) {
-          const column = this.columns[i];
-          generateColumn(i + 1, column);
-        }
-
-        $("#node-input-column-container").sortable({
-          axis: "y",
-          handle: ".node-input-column-handle",
-          cursor: "move",
-        });
-
-        $("#node-input-add-option").click(function () {
-          generateOption(
-            $("#node-input-option-container").children().length + 1,
-            {}
-          );
-          $("#node-input-option-container-div").scrollTop(
-            $("#node-input-option-container-div").get(0).scrollHeight
-          );
-        });
-
-        for (let i = 0; i < this.options.length; i++) {
-          const option = this.options[i];
-          generateOption(i + 1, option);
+    (function () {
+        function hasProperty(obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
         }
 
-        $("#node-input-option-container").sortable({
-          axis: "y",
-          handle: ".node-input-option-handle",
-          cursor: "move",
-        });
-
-        $("#node-input-data").typedInput({
-          default: "msg",
-          types: ["msg", "json", "flow", "global"],
-        });
-
-        $("#node-input-data").typedInput("value", this.data);
-        $("#node-input-data").typedInput("type", this.data_type);
-      },
-      oneditsave: function () {
-        const options = $("#node-input-option-container").children();
-        const node = this;
-        node.options = [];
-        options.each(function (i) {
-          const option = $(this);
-          const o = {
-            label: option.find(".node-input-option-label").val(),
-            condition: option.find(".node-input-option-condition").val(),
-          };
-
-          node.options.push(o);
+        RED.nodes.registerType('ui-dynamic-table', {
+            category: 'ProcessCube UI',
+            color: '#00aed7',
+            defaults: {
+                name: { value: '' },
+                tableName: { value: '' },
+                group: { type: 'ui-group', required: true },
+                order: { value: 1 },
+                data: { value: 'payload' },
+                data_type: { value: 'msg' },
+                options: {
+                    value: [{ label: '', condition: '' }],
+                    validate: function (v) {
+                        const unique = new Set(
+                            v.map(function (o) {
+                                return o.label;
+                            })
+                        );
+                        return v.length === unique.size;
+                    },
+                },
+                columns: {
+                    value: [{ value: '', label: '' }],
+                    validate: function (v) {
+                        const unique = new Set(
+                            v.map(function (o) {
+                                return o.value;
+                            })
+                        );
+                        return v.length === unique.size;
+                    },
+                },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0;
+                        const currentGroup = $('#node-input-group').val() || this.group;
+                        const groupNode = RED.nodes.node(currentGroup);
+                        const valid = !groupNode || +width <= +groupNode.width;
+                        $('#node-input-size').toggleClass('input-error', !valid);
+                        return valid;
+                    },
+                },
+                height: { value: 0 },
+                outputs: { value: 1 },
+            },
+            inputs: 1,
+            outputs: 1,
+            outputLabels: function (index) {
+                return this.options[index].label;
+            },
+            icon: 'ui_dynamic_table.svg',
+            paletteLbel: 'file',
+            label: function () {
+                return this.name || 'dynamic-table';
+            },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group',
+                });
+
+                function generateOption(i, option) {
+                    const container = $('<li/>', {
+                        style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
+                    });
+
+                    // Create input fields for value and label
+                    const row = $('<div/>').appendTo(container);
+                    $('<input/>', {
+                        class: 'node-input-option-label',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Label',
+                        value: option.label,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    $('<input/>', {
+                        class: 'node-input-option-condition',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Condition',
+                        value: option.condition,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    // Create delete button for the option
+                    const finalSpan = $('<span/>', {
+                        style: 'float:right; margin-right:8px;',
+                    }).appendTo(row);
+                    const deleteButton = $('<a/>', {
+                        href: '#',
+                        class: 'editor-button editor-button-small',
+                        style: 'margin-top:7px; margin-left:5px;',
+                    }).appendTo(finalSpan);
+                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
+
+                    deleteButton.click(function () {
+                        container.css({
+                            background: 'var(--red-ui-secondary-background-inactive, #fee)',
+                        });
+                        container.fadeOut(300, function () {
+                            $(this).remove();
+                        });
+                    });
+
+                    $('#node-input-option-container').append(container);
+                }
+
+                function generateColumn(i, column) {
+                    const container = $('<li/>', {
+                        style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
+                    });
+
+                    // Create input fields for value and label
+                    const row = $('<div/>').appendTo(container);
+                    $('<input/>', {
+                        class: 'node-input-column-value',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Value',
+                        value: column.value,
+                    })
+                        .appendTo(row)
+                        .typedInput({ default: column.type || 'str', types: ['str'] });
+
+                    $('<input/>', {
+                        class: 'node-input-column-label',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Label',
+                        value: column.label,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    // Create delete button for the column
+                    const finalSpan = $('<span/>', {
+                        style: 'float:right; margin-right:8px;',
+                    }).appendTo(row);
+                    const deleteButton = $('<a/>', {
+                        href: '#',
+                        class: 'editor-button editor-button-small',
+                        style: 'margin-top:7px; margin-left:5px;',
+                    }).appendTo(finalSpan);
+                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
+
+                    deleteButton.click(function () {
+                        container.css({
+                            background: 'var(--red-ui-secondary-background-inactive, #fee)',
+                        });
+                        container.fadeOut(300, function () {
+                            $(this).remove();
+                        });
+                    });
+
+                    $('#node-input-column-container').append(container);
+                }
+
+                $('#node-input-add-column').click(function () {
+                    generateColumn($('#node-input-column-container').children().length + 1, {});
+                    $('#node-input-column-container-div').scrollTop(
+                        $('#node-input-column-container-div').get(0).scrollHeight
+                    );
+                });
+
+                for (let i = 0; i < this.columns.length; i++) {
+                    const column = this.columns[i];
+                    generateColumn(i + 1, column);
+                }
+
+                $('#node-input-column-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-column-handle',
+                    cursor: 'move',
+                });
+
+                $('#node-input-add-option').click(function () {
+                    generateOption($('#node-input-option-container').children().length + 1, {});
+                    $('#node-input-option-container-div').scrollTop(
+                        $('#node-input-option-container-div').get(0).scrollHeight
+                    );
+                });
+
+                for (let i = 0; i < this.options.length; i++) {
+                    const option = this.options[i];
+                    generateOption(i + 1, option);
+                }
+
+                $('#node-input-option-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-option-handle',
+                    cursor: 'move',
+                });
+
+                $('#node-input-data').typedInput({
+                    default: 'msg',
+                    types: ['msg', 'json', 'flow', 'global'],
+                });
+
+                $('#node-input-data').typedInput('value', this.data);
+                $('#node-input-data').typedInput('type', this.data_type);
+            },
+            oneditsave: function () {
+                const options = $('#node-input-option-container').children();
+                const node = this;
+                node.options = [];
+                options.each(function (i) {
+                    const option = $(this);
+                    const o = {
+                        label: option.find('.node-input-option-label').val(),
+                        condition: option.find('.node-input-option-condition').val(),
+                    };
+
+                    node.options.push(o);
+                });
+
+                const columns = $('#node-input-column-container').children();
+                node.columns = [];
+                columns.each(function (i) {
+                    const column = $(this);
+                    const c = {
+                        label: column.find('.node-input-column-label').val(),
+                        value: column.find('.node-input-column-value').typedInput('value'),
+                        type: column.find('.node-input-column-value').typedInput('type'),
+                    };
+                    if (column.find('.node-input-column-value').typedInput('type') === 'num') {
+                        c.value = Number(c.value);
+                    }
+                    if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
+                        c.value = c.value === 'true';
+                    }
+                    node.columns.push(c);
+                });
+
+                this.outputs = node.options.length || 1;
+
+                (this.data = $('#node-input-data').typedInput('value')),
+                    (this.data_type = $('#node-input-data').typedInput('type'));
+            },
         });
-
-        const columns = $("#node-input-column-container").children();
-        node.columns = [];
-        columns.each(function (i) {
-          const column = $(this);
-          const c = {
-            label: column.find(".node-input-column-label").val(),
-            value: column.find(".node-input-column-value").typedInput("value"),
-            type: column.find(".node-input-column-value").typedInput("type"),
-          };
-          if (
-            column.find(".node-input-column-value").typedInput("type") === "num"
-          ) {
-            c.value = Number(c.value);
-          }
-          if (
-            column.find(".node-input-column-value").typedInput("type") ===
-            "bool"
-          ) {
-            c.value = c.value === "true";
-          }
-          node.columns.push(c);
-        });
-
-        this.outputs = node.options.length || 1;
-
-        (this.data = $("#node-input-data").typedInput("value")),
-          (this.data_type = $("#node-input-data").typedInput("type"));
-      },
-    });
-  })();
+    })();
 </script>
 
 <script type="text/html" data-template-name="ui-dynamic-table">
-  <div class="form-row">
-      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
-      <input type="text" id="node-input-name" placeholder="Name">
-  </div>
-  <div class="form-row">
-      <label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
-      <input type="text" id="node-input-tableName" placeholder="My Table">
-  </div>
-  <div class="form-row">
-      <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
-      <input type="text" id="node-input-group">
-  </div>
-  <div class="form-row">
-      <label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-table.label.size"></label>
-      <input type="hidden" id="node-input-width">
-      <input type="hidden" id="node-input-height">
-      <button class="editor-button" id="node-input-size"></button>
-  </div>
-  <div class="form-row">
-    <label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
-    <input type="text" id="node-input-data" placeholder="Data">
-  </div>
-  <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
-      <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
-      <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
-          <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
-          <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
-      </div>
-      <a
-          data-html="true"
-          title="Dynamic Property: Send 'msg.options' in order to override this property."
-          class="red-ui-button ui-node-popover-title"
-          style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
-          <i style="font-family: ui-serif;">fx</i>
-      </a>
-  </div>
-  <!-- Add Option Button -->
-  <div class="form-row">
-      <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
-  </div>
-
-  <div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
-      <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
-      <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
-          <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
-          <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
-      </div>
-      <a
-          data-html="true"
-          title="Dynamic Property: Send 'msg.columns' in order to override this property."
-          class="red-ui-button ui-node-popover-title"
-          style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display:inline-flex; justify-content: center; align-items: center;">
-          <i style="font-family: ui-serif;">fx</i>
-      </a>
-  </div>
-  <!-- Add Column Button -->
-  <div class="form-row">
-      <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>column</span></a>
-  </div>
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
+        <input type="text" id="node-input-tableName" placeholder="My Table">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-table.label.size"></label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+      <label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
+      <input type="text" id="node-input-data" placeholder="Data">
+    </div>
+    <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
+        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+        <a
+            data-html="true"
+            title="Dynamic Property: Send 'msg.options' in order to override this property."
+            class="red-ui-button ui-node-popover-title"
+            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+            <i style="font-family: ui-serif;">fx</i>
+        </a>
+    </div>
+    <!-- Add Option Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
+    </div>
+
+    <div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
+        <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+        <a
+            data-html="true"
+            title="Dynamic Property: Send 'msg.columns' in order to override this property."
+            class="red-ui-button ui-node-popover-title"
+            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display:inline-flex; justify-content: center; align-items: center;">
+            <i style="font-family: ui-serif;">fx</i>
+        </a>
+    </div>
+    <!-- Add Column Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>column</span></a>
+    </div>
 </script>
 
 <script type="text/markdown" data-help-name="ui-dynamic-table">
-  Dyanmic-Table ProcessCube UI-Component
+A Node to dynamicly display arrays of data in a table with actions for every row.
+
+## Actions
+
+Define a label for the action button that is going be displayed and a condition for when it should be displayed.
+Inside the condition you have access to every key from the current row.
 
-  ### Inputs
+### Inputs
 
-  : Table name (string) : The name of the table.
-  : Group (string) : The groud in which the Component is rendered.
-  : Size (string) : The size of the table within the group.
-  : Data (string) : The property of msg.payload from where the table data is sourced.
-  : Actions (string) : The actions of each row. Each action corresponds to an output of the node.
-  : Columns (string) : The columns of the table. Must correspond to a key of the data property.
+: Table name (string) : The name of the table.
+: Group (string) : The groud in which the Component is rendered.
+: Size (string) : The size of the table within the group.
+: Data (string) : The property of msg.payload from where the table data is sourced.
+: Actions (string) : The actions of each row. Each action corresponds to an output of the node.
+: Columns (string) : The columns of the table. Must correspond to a key of the data property.
 
-  ### Outputs
+### Outputs
 
-  The outputs are generated dynamicly based on the actions of the table.
+The outputs are generated dynamicly based on the actions of the table.
 
-  ### Details
+### Details
 
-  `msg.payload` is used as the base for the data form there on the data source can be specified further with the `data` input field.
+`msg.payload` is used as the base for the data form there on the data source can be specified further with the `data` input field.
 
-  ### Referece
+### Referece
 
-  [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
+[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
 </script>

package/nodes/dynamic-table.js

@@ -13,13 +13,8 @@ module.exports = function (RED) {
             onAction: true,
             beforeSend: function (msg) {
                 if (Array.isArray(msg)) return msg;
-                msg.payload = RED.util.evaluateNodeProperty(
-                    config.data,
-                    config.data_type,
-                    node,
-                    msg
-                );
-
+                msg.payload = RED.util.evaluateNodeProperty(config.data, config.data_type, node, msg);
+                
                 return msg;
             },
             onInput: function (msg, send, done) {
@@ -30,11 +25,11 @@ module.exports = function (RED) {
         if (group) {
             group.register(node, config, evts);
         } else {
-            node.error("No group configured");
+            node.error('No group configured');
         }
     }
 
-    RED.nodes.registerType("ui-dynamic-table", UIDynamicTableNode, {
+    RED.nodes.registerType('ui-dynamic-table', UIDynamicTableNode, {
         defaults: {
             outputs: { value: 1 },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
-    "version": "1.1.18",
+    "version": "1.2.0-develop-5998e7-m2eo3ibv",
     "description": "A ui component for showing dynamic Data with actions in a table",
     "keywords": [
         "processcube",

package/resources/ui-dynamic-table.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("h1[data-v-86dfbccf]{margin-bottom:10px}h2[data-v-86dfbccf]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-86dfbccf]{margin-top:1rem}p[data-v-86dfbccf]{margin-bottom:5px}ul li[data-v-86dfbccf]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-86dfbccf]{padding:12px;margin:12px;background-color:#eee}code[data-v-86dfbccf]{font-size:.825rem;color:#ae0000}input[data-v-86dfbccf]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-86dfbccf]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-86dfbccf]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(t)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
-(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o["ui-dynamic-table"]={},o.vuex,o.Vue))})(this,function(o,a,t){"use strict";const h=(e,n)=>{const i=e.__vccOpts||e;for(const[r,s]of n)i[r]=s;return i},m={name:"UIDynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},computed:{...a.mapState("data",["messages"])},data(){return{search:"",actions:[],tasks:[],headers:[]}},mounted(){this.$socket.on("widget-load:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.on("msg-input:"+this.id,e=>{this.initialize(e),this.messages[this.id]=e,this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.emit("widget-load",this.id)},unmounted(){var e,n;(e=this.$socket)==null||e.off("widget-load"+this.id),(n=this.$socket)==null||n.off("msg-input:"+this.id)},methods:{send(e,n){const i=[];i[n]=e,this.$socket.emit("widget-action",this.id,i)},actionFn(e,n){const i=this.messages[this.id]||{};i.payload=n,this.send(i,this.actions.findIndex(r=>r.label===e.label))},initialize(e){this.tasks=e.payload,this.actions=this.props.options,this.headers=this.props.columns.map(n=>({title:n.label,key:n.value})),this.headers.push({title:"Actions",align:"center",key:"actions"})},conditionCheck(e,n){if(e=="")return!0;try{return new Function("row",`return ${e}`)(n)}catch(i){return console.error("Error evaluating condition:",i),!1}}}};function f(e,n,i,r,s,d){const u=t.resolveComponent("v-text-field"),k=t.resolveComponent("v-toolbar"),b=t.resolveComponent("v-btn"),p=t.resolveComponent("v-container"),x=t.resolveComponent("v-alert"),y=t.resolveComponent("v-data-table");return t.openBlock(),t.createBlock(y,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(k,{flat:"",class:"py-2"},{default:t.withCtx(()=>[t.createVNode(u,{class:"mx-3",modelValue:s.search,"onUpdate:modelValue":n[0]||(n[0]=c=>s.search=c),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":t.withCtx(({item:c})=>[t.createVNode(p,{class:"action-button-container"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.actions,(l,g)=>(t.openBlock(),t.createBlock(p,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[d.conditionCheck(l.condition,c)?(t.openBlock(),t.createBlock(b,{style:{margin:"0px 2px"},key:g,size:"small",onClick:C=>d.actionFn(l,c)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(l.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(x,{text:"No Data",style:{margin:"12px"}})]),_:1},8,["headers","items","search"])}const _=h(m,[["render",f],["__scopeId","data-v-86dfbccf"]]);o.UIDynamicTable=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("h1[data-v-f265f54e]{margin-bottom:10px}h2[data-v-f265f54e]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-f265f54e]{margin-top:1rem}p[data-v-f265f54e]{margin-bottom:5px}ul li[data-v-f265f54e]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-f265f54e]{padding:12px;margin:12px;background-color:#eee}code[data-v-f265f54e]{font-size:.825rem;color:#ae0000}input[data-v-f265f54e]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-f265f54e]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-f265f54e]{width:100%;display:flex;justify-content:center}.full-width-table .v-toolbar[data-v-f265f54e],.full-width-table .v-table__wrapper .v-alert--variant-flat[data-v-f265f54e]{background:unset!important;color:unset!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o["ui-dynamic-table"]={},o.vuex,o.Vue))})(this,function(o,a,t){"use strict";const p=(e,i)=>{const n=e.__vccOpts||e;for(const[r,s]of i)n[r]=s;return n},m={name:"UIDynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},computed:{...a.mapState("data",["messages"])},data(){return{search:"",actions:[],tasks:[],headers:[]}},mounted(){this.$socket.on("widget-load:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.on("msg-input:"+this.id,e=>{Array.isArray(e)&&(e=e.filter(i=>i._client.socketId==this.$socket.id)[0]),this.initialize(e),this.messages[this.id]=e,this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.emit("widget-load",this.id)},unmounted(){var e,i;(e=this.$socket)==null||e.off("widget-load"+this.id),(i=this.$socket)==null||i.off("msg-input:"+this.id)},methods:{send(e,i){const n=[];n[i]=e,this.$socket.emit("widget-action",this.id,n)},actionFn(e,i){const n=this.messages[this.id]||{};n.payload=i,this.send(n,this.actions.findIndex(r=>r.label===e.label))},initialize(e){this.tasks=e.payload,this.actions=this.props.options,this.headers=this.props.columns.map(i=>({title:i.label,key:i.value})),this.headers.push({title:"Actions",align:"center",key:"actions"})},conditionCheck(e,i){if(e=="")return!0;try{return new Function("row",`return ${e}`)(i)}catch(n){return console.error("Error evaluating condition:",n),!1}}}};function f(e,i,n,r,s,d){const u=t.resolveComponent("v-text-field"),k=t.resolveComponent("v-toolbar"),y=t.resolveComponent("v-btn"),h=t.resolveComponent("v-container"),x=t.resolveComponent("v-alert"),b=t.resolveComponent("v-data-table");return t.openBlock(),t.createBlock(b,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(k,{flat:"",class:"py-2"},{default:t.withCtx(()=>[t.createVNode(u,{class:"mx-3",modelValue:s.search,"onUpdate:modelValue":i[0]||(i[0]=c=>s.search=c),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":t.withCtx(({item:c})=>[t.createVNode(h,{class:"action-button-container"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.actions,(l,g)=>(t.openBlock(),t.createBlock(h,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[d.conditionCheck(l.condition,c)?(t.openBlock(),t.createBlock(y,{style:{margin:"0px 2px"},key:g,size:"small",onClick:C=>d.actionFn(l,c)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(l.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(x,{text:"No Data",style:{margin:"12px"}})]),_:1},8,["headers","items","search"])}const _=p(m,[["render",f],["__scopeId","data-v-f265f54e"]]);o.UIDynamicTable=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIDynamicTable.vue

@@ -54,7 +54,7 @@ export default {
         },
     },
     computed: {
-        ...mapState('data', ['messages'])
+        ...mapState('data', ['messages']),
     },
     data() {
         return {
@@ -73,9 +73,14 @@ export default {
             });
         });
         this.$socket.on('msg-input:' + this.id, (msg) => {
+            if (Array.isArray(msg)) {
+                msg = msg.filter((obj) => obj._client.socketId == this.$socket.id)[0];
+            }
+
             this.initialize(msg);
 
             this.messages[this.id] = msg;
+
             this.$store.commit('data/bind', {
                 widgetId: this.id,
                 msg,

package/ui/stylesheets/ui-dynamic-table.css

@@ -51,3 +51,13 @@ input {
     display: flex;
     justify-content: center;
 }
+
+.full-width-table .v-toolbar {
+    background: unset !important;
+    color: unset !important;
+}
+
+.full-width-table .v-table__wrapper .v-alert--variant-flat {
+    background: unset !important;
+    color: unset !important;
+}