@5minds/node-red-dashboard-2-processcube-dynamic-table 1.1.1 → 1.1.3

package/nodes/dynamic-table.html

@@ -1,310 +1,362 @@
 <script type="text/javascript">
-    (function() {
-        function hasProperty (obj, prop) {
-            return Object.prototype.hasOwnProperty.call(obj, prop)
+  (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: "file.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);
         }
 
-        RED.nodes.registerType('dynamic-table', {
-            category: 'ProcessCube UI',
-            color: '#4a7eb0',
-            defaults: {
-                name: { value: "" },
-                tableName: { value: ""},
-                group: { type: 'ui-group', required: true },
-                order: { value: 0 },
-                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: "file.svg",
-            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')
-            },
+        $("#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",
         });
-    })();
-</script>
 
-<script type="text/html" data-template-name="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="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>
+        $("#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"));
+      },
+    });
+  })();
 </script>
 
-<script type="text/markdown" data-help-name="dynamic-table">
-Dyanmic-Table ProcessCube UI-Component
+<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>
+</script>
 
-### Inputs
+<script type="text/markdown" data-help-name="ui-dynamic-table">
+  Dyanmic-Table ProcessCube UI-Component
 
-: 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.
+  ### Inputs
 
-### Outputs
+  : 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.
 
-The outputs are generated dynamicly based on the actions of the table.
+  ### Outputs
 
-### Details
+  The outputs are generated dynamicly based on the actions of the table.
 
-`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.
+  ### Details
 
-### Referece
+  `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.
 
-[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
+  ### Referece
 
+  [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
 </script>

package/nodes/dynamic-table.js

@@ -1,36 +1,41 @@
 module.exports = function (RED) {
-    function DynamicTableNode (config) {
-        RED.nodes.createNode(this, config)
+  function DynamicTableNode(config) {
+    RED.nodes.createNode(this, config);
 
-        const node = this
+    const node = this;
 
-        const group = RED.nodes.getNode(config.group)
+    const group = RED.nodes.getNode(config.group);
 
-        const base = group.getBase()
+    const base = group.getBase();
 
-        // server-side event handlers
-        const evts = {
-            onAction: true,
-            onInput: function (msg, send, done) {
-                console.log(config.data_type)
-                columns = RED.util.evaluateNodeProperty(config.data, config.data_type, node, msg)
-                base.stores.data.save(base, node, columns)
-            }
-        }
+    //server-side event handlers
+    const evts = {
+      onAction: true,
+      onInput: function (msg, send, done) {
+        console.log(config.data_type);
+        columns = RED.util.evaluateNodeProperty(
+          config.data,
+          config.data_type,
+          node,
+          msg
+        );
+        base.stores.data.save(base, node, columns);
+      },
+    };
 
-        if (group) {
-            group.register(node, config, evts)
-        } else {
-            node.error('No group configured')
-        }
+    if (group) {
+      group.register(node, config, evts);
+    } else {
+      node.error("No group configured");
     }
+  }
 
-    RED.nodes.registerType('dynamic-table', DynamicTableNode, {
-      defaults: {
-        outputs: { value: 1 },
-      },
-      outputs: function(config) {
-        return config.outputs || 1;
-      }
-    })
-}
+  RED.nodes.registerType("ui-dynamic-table", DynamicTableNode, {
+    defaults: {
+      outputs: { value: 1 },
+    },
+    outputs: function (config) {
+      return config.outputs || 1;
+    },
+  });
+};

package/nodes/locales/en-US/dynamic-table.html

@@ -1,3 +1,3 @@
-<script type="text/html" data-help-name="dynamic-table">
-    <p>A table that shows dynamic data with actions.</p>
+<script type="text/html" data-help-name="ui-dynamic-table">
+  <p>A table that shows dynamic data with actions.</p>
 </script>

package/nodes/locales/en-US/dynamic-table.json

@@ -1,7 +1,7 @@
 {
-    "dynamic-table" : {
-        "label": {
-            "size": "Size"
-        }
+  "ui-dynamic-table": {
+    "label": {
+      "size": "Size"
     }
+  }
 }

package/package.json

@@ -1,80 +1,80 @@
 {
-    "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
-    "version": "1.1.1",
-    "description": "A ui component for showing dynamic Data with actions in a table",
-    "keywords": [
-        "processcube",
-        "usertask",
-        "node-red",
-        "node-red-dashboard-2"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/5minds/node-red-dashboard-2-processcube-usertask-table.git"
-    },
-    "license": "Apache-2.0",
-    "author": {
-        "name": "Martin Moellenbeck",
-        "url": "https://github.com/moellenbeck"
-    },
-    "contributors": [
-        {
-            "name": "Luis Thieme",
-            "url": "https://github.com/luisthieme"
-        }
-    ],
-    "exports": {
-        "import": "./resources/dynamic-table.esm.js",
-        "require": "./resources/dynamic-table.umd.js"
-    },
-    "files": [
-        "dist/*",
-        "nodes/*",
-        "ui/*",
-        "resources/*"
-    ],
-    "scripts": {
-        "build": "vite build",
-        "build:dev": "NODE_ENV=development vite build",
-        "dev": "NODE_ENV=development vite build --watch",
-        "dev:prod": "vite build --watch",
-        "lint": "npm run lint:js && npm run lint:package",
-        "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
-        "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
-        "lint:js:fix": "yarn lint:js --fix",
-        "lint:package": "sort-package-json --check 'package.json'",
-        "lint:package:fix": "sort-package-json 'package.json'"
-    },
-    "dependencies": {
-        "vue": "^3.3.8",
-        "vuex": "^4.1.0"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-vue": "^4.5.0",
-        "eslint": "^8.53.0",
-        "eslint-config-standard": "^17.1.0",
-        "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-n": "^16.3.1",
-        "eslint-plugin-vue": "^9.18.1",
-        "vite": "^5.3.2",
-        "vite-plugin-css-injected-by-js": "^3.3.0"
-    },
-    "engines": {
-        "node": ">=14"
-    },
-    "node-red": {
-        "version": ">=3.0.0",
-        "nodes": {
-            "dynamic-table": "nodes/dynamic-table.js"
-        }
-    },
-    "node-red-dashboard-2": {
-        "version": "1.0.0",
-        "widgets": {
-            "dynamic-table": {
-                "output": "dynamic-table.umd.js",
-                "component": "DynamicTable"
-            }
-        }
+  "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
+  "version": "1.1.3",
+  "description": "A ui component for showing dynamic Data with actions in a table",
+  "keywords": [
+    "processcube",
+    "usertask",
+    "node-red",
+    "node-red-dashboard-2"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/5minds/node-red-dashboard-2-processcube-usertask-table.git"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Martin Moellenbeck",
+    "url": "https://github.com/moellenbeck"
+  },
+  "contributors": [
+    {
+      "name": "Luis Thieme",
+      "url": "https://github.com/luisthieme"
     }
+  ],
+  "exports": {
+    "import": "./resources/dynamic-table.esm.js",
+    "require": "./resources/dynamic-table.umd.js"
+  },
+  "files": [
+    "dist/*",
+    "nodes/*",
+    "ui/*",
+    "resources/*"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "dev:prod": "vite build --watch",
+    "lint": "npm run lint:js && npm run lint:package",
+    "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
+    "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
+    "lint:js:fix": "yarn lint:js --fix",
+    "lint:package": "sort-package-json --check 'package.json'",
+    "lint:package:fix": "sort-package-json 'package.json'"
+  },
+  "dependencies": {
+    "vue": "^3.3.8",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "eslint": "^8.53.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-vue": "^9.18.1",
+    "vite": "^5.3.2",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "node-red": {
+    "version": ">=3.0.0",
+    "nodes": {
+      "ui-dynamic-table": "nodes/dynamic-table.js"
+    }
+  },
+  "node-red-dashboard-2": {
+    "version": "1.0.0",
+    "widgets": {
+      "ui-dynamic-table": {
+        "output": "ui-dynamic-table.umd.js",
+        "component": "DynamicTable"
+      }
+    }
+  }
 }

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

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var d=document.createElement("style");d.appendChild(document.createTextNode("h1[data-v-3b78dd72]{margin-bottom:10px}h2[data-v-3b78dd72]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-3b78dd72]{margin-top:1rem}p[data-v-3b78dd72]{margin-bottom:5px}ul li[data-v-3b78dd72]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-3b78dd72]{padding:12px;margin:12px;background-color:#eee}code[data-v-3b78dd72]{font-size:.825rem;color:#ae0000}input[data-v-3b78dd72]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-3b78dd72]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-3b78dd72]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(d)}}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 h=(e,n)=>{const i=e.__vccOpts||e;for(const[l,s]of n)i[l]=s;return i},m={name:"DynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},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,columns:e})}),this.$socket.on("msg-input:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,columns: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){this.send({payload:n},this.actions.findIndex(i=>i.label===e.label))},initialize(e){this.tasks=e,this.actions=this.props.options,this.headers=this.props.columns.map(n=>({title:n.label,key:n.value})),this.headers.push({title:"Action",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,l,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]=r=>s.search=r),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":t.withCtx(({item:r})=>[t.createVNode(p,{class:"action-button-container"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.actions,(c,g)=>(t.openBlock(),t.createBlock(p,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[d.conditionCheck(c.condition,r)?(t.openBlock(),t.createBlock(b,{style:{margin:"0px 2px"},key:g,size:"small",onClick:C=>d.actionFn(c,r)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(c.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(x,{text:"No data"})]),_:1},8,["headers","items","search"])}const _=h(m,[["render",f],["__scopeId","data-v-3b78dd72"]]);o.DynamicTable=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/ui/main.js

@@ -3,8 +3,8 @@
  *
  * This file is useful for testing your component in isolation from Node-RED.
  */
-import { createApp } from 'vue'
+import { createApp } from "vue";
 
-import UIExample from './components/DynamicTable.vue'
+import DynamicTable from "./components/DynamicTable.vue";
 
-createApp(UIExample).mount('#app')
+createApp(DynamicTable).mount("#app");

package/resources/dynamic-table.umd.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"dynamic-table.umd.js","sources":["../ui/components/DynamicTable.vue"],"sourcesContent":["<template>\n  <v-data-table\n    :headers=\"headers\"\n    :items=\"tasks\"\n    :search=\"search\"\n    class=\"full-width-table\"\n  >\n    <template v-slot:top>\n      <v-toolbar flat class=\"py-2\">\n        <v-text-field\n          class=\"mx-3\"\n          v-model=\"search\"\n          label=\"Search\"\n          prepend-inner-icon=\"mdi-magnify\"\n          variant=\"outlined\"\n          hide-details\n          single-line\n        ></v-text-field>\n      </v-toolbar>\n    </template>\n    <template v-slot:item.actions=\"{ item }\">\n      <v-container class=\"action-button-container\">\n        <v-container\n          v-for=\"(action, index) in actions\"\n          style=\"padding: 0px; display: inline; width: fit-content; margin: 0px\"\n        >\n          <v-btn\n            style=\"margin: 0px 2px\"\n            v-if=\"conditionCheck(action.condition, item)\"\n            :key=\"index\"\n            size=\"small\"\n            @click=\"actionFn(action, item)\"\n          >\n            {{ action.label }}\n          </v-btn>\n        </v-container>\n      </v-container>\n    </template>\n    <template v-slot:no-data>\n      <v-alert text=\"No data\"></v-alert>\n    </template>\n  </v-data-table>\n</template>\n\n<script>\nimport { mapState } from \"vuex\";\n\nexport default {\n  name: \"DynamicTable\",\n  inject: [\"$socket\"],\n  props: {\n    /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */\n    id: { type: String, required: true },\n    props: { type: Object, default: () => ({}) },\n    /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */\n    state: { type: Object, default: () => ({ enabled: true, visible: true }) },\n  },\n  data() {\n    return {\n      search: \"\",\n      actions: [],\n      tasks: [],\n      headers: [],\n    };\n  },\n  mounted() {\n    this.$socket.on(\"widget-load:\" + this.id, (columns) => {\n      this.initialize(columns);\n      this.$store.commit(\"data/bind\", {\n        widgetId: this.id,\n        columns,\n      });\n    });\n    this.$socket.on(\"msg-input:\" + this.id, (columns) => {\n      this.initialize(columns);\n      this.$store.commit(\"data/bind\", {\n        widgetId: this.id,\n        columns,\n      });\n    });\n    this.$socket.emit(\"widget-load\", this.id);\n  },\n  unmounted() {\n    this.$socket?.off(\"widget-load\" + this.id);\n    this.$socket?.off(\"msg-input:\" + this.id);\n  },\n  methods: {\n    send(msg, index) {\n      const msgArr = [];\n      msgArr[index] = msg;\n      this.$socket.emit(\"widget-action\", this.id, msgArr);\n    },\n    actionFn(action, item) {\n      this.send(\n        { payload: item },\n        this.actions.findIndex((element) => element.label === action.label)\n      );\n    },\n    initialize(tasks) {\n      this.tasks = tasks;\n      this.actions = this.props.options;\n\n      this.headers = this.props.columns.map((item) => ({\n        title: item.label,\n        key: item.value,\n      }));\n\n      this.headers.push({ title: \"Action\", align: \"center\", key: \"actions\" });\n    },\n    conditionCheck(condition, row) {\n      if (condition == \"\") return true;\n      try {\n        const func = new Function(\"row\", `return ${condition}`);\n        return func(row);\n      } catch (error) {\n        console.error(\"Error evaluating condition:\", error);\n        return false;\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n/* CSS is auto scoped, but using named classes is still recommended */\n@import \"../stylesheets/dynamic-table.css\";\n</style>\n"],"names":["_sfc_main","columns","_a","_b","msg","index","msgArr","action","item","element","tasks","condition","row","error","_createBlock","_component_v_data_table","$data","_createVNode","_component_v_toolbar","_withCtx","_component_v_text_field","_cache","$event","_component_v_container","_openBlock","_createElementBlock","_Fragment","_renderList","$options","_component_v_btn","_createTextVNode","_toDisplayString","_createCommentVNode","_component_v_alert"],"mappings":"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"}