@5minds/node-red-dashboard-2-processcube-dynamic-table 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/nodes/dynamic-table.html +345 -293
  2. package/nodes/dynamic-table.js +33 -28
  3. package/nodes/locales/en-US/dynamic-table.html +2 -2
  4. package/nodes/locales/en-US/dynamic-table.json +4 -4
  5. package/package.json +77 -77
  6. package/resources/ui-dynamic-table.umd.js +2 -0
  7. package/ui/main.js +3 -3
  8. package/resources/dynamic-table.umd.js +0 -2
package/nodes/dynamic-table.html CHANGED
@@ -1,310 +1,362 @@
1
1
  <script type="text/javascript">
2
- (function() {
3
- function hasProperty (obj, prop) {
4
- return Object.prototype.hasOwnProperty.call(obj, prop)
2
+ (function () {
3
+ function hasProperty(obj, prop) {
4
+ return Object.prototype.hasOwnProperty.call(obj, prop);
5
+ }
6
+
7
+ RED.nodes.registerType("ui-dynamic-table", {
8
+ category: "ProcessCube UI",
9
+ color: "#00aed7",
10
+ defaults: {
11
+ name: { value: "" },
12
+ tableName: { value: "" },
13
+ group: { type: "ui-group", required: true },
14
+ order: { value: 1 },
15
+ data: { value: "payload" },
16
+ data_type: { value: "msg" },
17
+ options: {
18
+ value: [{ label: "", condition: "" }],
19
+ validate: function (v) {
20
+ const unique = new Set(
21
+ v.map(function (o) {
22
+ return o.label;
23
+ })
24
+ );
25
+ return v.length === unique.size;
26
+ },
27
+ },
28
+ columns: {
29
+ value: [{ value: "", label: "" }],
30
+ validate: function (v) {
31
+ const unique = new Set(
32
+ v.map(function (o) {
33
+ return o.value;
34
+ })
35
+ );
36
+ return v.length === unique.size;
37
+ },
38
+ },
39
+ width: {
40
+ value: 0,
41
+ validate: function (v) {
42
+ const width = v || 0;
43
+ const currentGroup = $("#node-input-group").val() || this.group;
44
+ const groupNode = RED.nodes.node(currentGroup);
45
+ const valid = !groupNode || +width <= +groupNode.width;
46
+ $("#node-input-size").toggleClass("input-error", !valid);
47
+ return valid;
48
+ },
49
+ },
50
+ height: { value: 0 },
51
+ outputs: { value: 1 },
52
+ },
53
+ inputs: 1,
54
+ outputs: 1,
55
+ outputLabels: function (index) {
56
+ return this.options[index].label;
57
+ },
58
+ icon: "file.svg",
59
+ paletteLbel: "file",
60
+ label: function () {
61
+ return this.name || "dynamic-table";
62
+ },
63
+ oneditprepare: function () {
64
+ $("#node-input-size").elementSizer({
65
+ width: "#node-input-width",
66
+ height: "#node-input-height",
67
+ group: "#node-input-group",
68
+ });
69
+
70
+ function generateOption(i, option) {
71
+ const container = $("<li/>", {
72
+ style:
73
+ "background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
74
+ });
75
+
76
+ // Create input fields for value and label
77
+ const row = $("<div/>").appendTo(container);
78
+ $("<input/>", {
79
+ class: "node-input-option-label",
80
+ type: "text",
81
+ style: "margin-left:7px; width:calc(50% - 32px);",
82
+ placeholder: "Label",
83
+ value: option.label,
84
+ })
85
+ .appendTo(row)
86
+ .typedInput({
87
+ type: "str",
88
+ types: ["str"],
89
+ });
90
+
91
+ $("<input/>", {
92
+ class: "node-input-option-condition",
93
+ type: "text",
94
+ style: "margin-left:7px; width:calc(50% - 32px);",
95
+ placeholder: "Condition",
96
+ value: option.condition,
97
+ })
98
+ .appendTo(row)
99
+ .typedInput({
100
+ type: "str",
101
+ types: ["str"],
102
+ });
103
+
104
+ // Create delete button for the option
105
+ const finalSpan = $("<span/>", {
106
+ style: "float:right; margin-right:8px;",
107
+ }).appendTo(row);
108
+ const deleteButton = $("<a/>", {
109
+ href: "#",
110
+ class: "editor-button editor-button-small",
111
+ style: "margin-top:7px; margin-left:5px;",
112
+ }).appendTo(finalSpan);
113
+ $("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
114
+
115
+ deleteButton.click(function () {
116
+ container.css({
117
+ background: "var(--red-ui-secondary-background-inactive, #fee)",
118
+ });
119
+ container.fadeOut(300, function () {
120
+ $(this).remove();
121
+ });
122
+ });
123
+
124
+ $("#node-input-option-container").append(container);
125
+ }
126
+
127
+ function generateColumn(i, column) {
128
+ const container = $("<li/>", {
129
+ style:
130
+ "background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
131
+ });
132
+
133
+ // Create input fields for value and label
134
+ const row = $("<div/>").appendTo(container);
135
+ $("<input/>", {
136
+ class: "node-input-column-value",
137
+ type: "text",
138
+ style: "margin-left:7px; width:calc(50% - 32px);",
139
+ placeholder: "Value",
140
+ value: column.value,
141
+ })
142
+ .appendTo(row)
143
+ .typedInput({ default: column.type || "str", types: ["str"] });
144
+
145
+ $("<input/>", {
146
+ class: "node-input-column-label",
147
+ type: "text",
148
+ style: "margin-left:7px; width:calc(50% - 32px);",
149
+ placeholder: "Label",
150
+ value: column.label,
151
+ })
152
+ .appendTo(row)
153
+ .typedInput({
154
+ type: "str",
155
+ types: ["str"],
156
+ });
157
+
158
+ // Create delete button for the column
159
+ const finalSpan = $("<span/>", {
160
+ style: "float:right; margin-right:8px;",
161
+ }).appendTo(row);
162
+ const deleteButton = $("<a/>", {
163
+ href: "#",
164
+ class: "editor-button editor-button-small",
165
+ style: "margin-top:7px; margin-left:5px;",
166
+ }).appendTo(finalSpan);
167
+ $("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
168
+
169
+ deleteButton.click(function () {
170
+ container.css({
171
+ background: "var(--red-ui-secondary-background-inactive, #fee)",
172
+ });
173
+ container.fadeOut(300, function () {
174
+ $(this).remove();
175
+ });
176
+ });
177
+
178
+ $("#node-input-column-container").append(container);
5
179
  }
6
180
 
7
- RED.nodes.registerType('dynamic-table', {
8
- category: 'ProcessCube UI',
9
- color: '#4a7eb0',
10
- defaults: {
11
- name: { value: "" },
12
- tableName: { value: ""},
13
- group: { type: 'ui-group', required: true },
14
- order: { value: 0 },
15
- data: {value: "payload"},
16
- data_type: {value: "msg"},
17
- options: {
18
- value: [{ label: '', condition: ''}],
19
- validate: function (v) {
20
- const unique = new Set(v.map(function (o) { return o.label }));
21
- return v.length === unique.size;
22
- }
23
- },
24
- columns: {
25
- value: [{ value: '', label: '' }],
26
- validate: function (v) {
27
- const unique = new Set(v.map(function (o) { return o.value }));
28
- return v.length === unique.size;
29
- }
30
- },
31
- width: {
32
- value: 0,
33
- validate: function (v) {
34
- const width = v || 0
35
- const currentGroup = $('#node-input-group').val() || this.group
36
- const groupNode = RED.nodes.node(currentGroup)
37
- const valid = !groupNode || +width <= +groupNode.width
38
- $('#node-input-size').toggleClass('input-error', !valid)
39
- return valid
40
- }
41
- },
42
- height: { value: 0 },
43
- outputs: { value: 1 }
44
- },
45
- inputs: 1,
46
- outputs: 1,
47
- outputLabels: function(index) {
48
- return this.options[index].label
49
- },
50
- icon: "file.svg",
51
- label: function() {
52
- return this.name || "dynamic-table";
53
- },
54
- oneditprepare: function () {
55
- $('#node-input-size').elementSizer({
56
- width: '#node-input-width',
57
- height: '#node-input-height',
58
- group: '#node-input-group'
59
- });
60
-
61
- function generateOption(i, option) {
62
- const container = $('<li/>', {
63
- style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
64
- });
65
-
66
- // Create input fields for value and label
67
- const row = $('<div/>').appendTo(container);
68
- $('<input/>', {
69
- class: 'node-input-option-label',
70
- type: 'text',
71
- style: 'margin-left:7px; width:calc(50% - 32px);',
72
- placeholder: 'Label',
73
- value: option.label
74
- }).appendTo(row).typedInput({
75
- type: 'str', types: ['str']
76
- });
77
-
78
- $('<input/>', {
79
- class: 'node-input-option-condition',
80
- type: 'text',
81
- style: 'margin-left:7px; width:calc(50% - 32px);',
82
- placeholder: 'Condition',
83
- value: option.condition
84
- }).appendTo(row).typedInput({
85
- type: 'str', types: ['str']
86
- });
87
-
88
- // Create delete button for the option
89
- const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
90
- const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
91
- $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
92
-
93
- deleteButton.click(function () {
94
- container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
95
- container.fadeOut(300, function () {
96
- $(this).remove();
97
- });
98
- });
99
-
100
- $('#node-input-option-container').append(container);
101
- }
102
-
103
- function generateColumn(i, column) {
104
- const container = $('<li/>', {
105
- style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
106
- });
107
-
108
- // Create input fields for value and label
109
- const row = $('<div/>').appendTo(container);
110
- $('<input/>', {
111
- class: 'node-input-column-value',
112
- type: 'text',
113
- style: 'margin-left:7px; width:calc(50% - 32px);',
114
- placeholder: 'Value',
115
- value: column.value
116
- }).appendTo(row).typedInput({ default: column.type || 'str', types: ['str'] });
117
-
118
- $('<input/>', {
119
- class: 'node-input-column-label',
120
- type: 'text',
121
- style: 'margin-left:7px; width:calc(50% - 32px);',
122
- placeholder: 'Label',
123
- value: column.label
124
- }).appendTo(row).typedInput({
125
- type: 'str', types: ['str']
126
- });
127
-
128
- // Create delete button for the column
129
- const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
130
- const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
131
- $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
132
-
133
- deleteButton.click(function () {
134
- container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
135
- container.fadeOut(300, function () {
136
- $(this).remove();
137
- });
138
- });
139
-
140
- $('#node-input-column-container').append(container);
141
- }
142
-
143
- $('#node-input-add-column').click(function () {
144
- generateColumn($('#node-input-column-container').children().length + 1, {});
145
- $('#node-input-column-container-div').scrollTop($('#node-input-column-container-div').get(0).scrollHeight);
146
- });
147
-
148
- for (let i = 0; i < this.columns.length; i++) {
149
- const column = this.columns[i];
150
- generateColumn(i + 1, column);
151
- }
152
-
153
- $('#node-input-column-container').sortable({
154
- axis: 'y',
155
- handle: '.node-input-column-handle',
156
- cursor: 'move'
157
- });
158
-
159
- $('#node-input-add-option').click(function () {
160
- generateOption($('#node-input-option-container').children().length + 1, {});
161
- $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
162
- });
163
-
164
- for (let i = 0; i < this.options.length; i++) {
165
- const option = this.options[i];
166
- generateOption(i + 1, option);
167
- }
168
-
169
- $('#node-input-option-container').sortable({
170
- axis: 'y',
171
- handle: '.node-input-option-handle',
172
- cursor: 'move'
173
- });
174
-
175
- $("#node-input-data").typedInput({
176
- default: 'msg',
177
- types: ['msg', 'json', 'flow', 'global']
178
- });
179
-
180
- $("#node-input-data").typedInput('value', this.data);
181
- $("#node-input-data").typedInput('type', this.data_type);
182
- },
183
- oneditsave: function () {
184
- const options = $('#node-input-option-container').children();
185
- const node = this;
186
- node.options = [];
187
- options.each(function (i) {
188
- const option = $(this);
189
- const o = {
190
- label: option.find('.node-input-option-label').val(),
191
- condition: option.find('.node-input-option-condition').val()
192
- };
193
-
194
- node.options.push(o);
195
- });
196
-
197
- const columns = $('#node-input-column-container').children();
198
- node.columns = [];
199
- columns.each(function (i) {
200
- const column = $(this);
201
- const c = {
202
- label: column.find('.node-input-column-label').val(),
203
- value: column.find('.node-input-column-value').typedInput('value'),
204
- type: column.find('.node-input-column-value').typedInput('type')
205
- };
206
- if (column.find('.node-input-column-value').typedInput('type') === 'num') {
207
- c.value = Number(c.value);
208
- }
209
- if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
210
- c.value = (c.value === 'true');
211
- }
212
- node.columns.push(c);
213
- });
214
-
215
- this.outputs = node.options.length || 1
216
-
217
- this.data = $("#node-input-data").typedInput('value'),
218
- this.data_type = $("#node-input-data").typedInput('type')
219
- },
181
+ $("#node-input-add-column").click(function () {
182
+ generateColumn(
183
+ $("#node-input-column-container").children().length + 1,
184
+ {}
185
+ );
186
+ $("#node-input-column-container-div").scrollTop(
187
+ $("#node-input-column-container-div").get(0).scrollHeight
188
+ );
189
+ });
190
+
191
+ for (let i = 0; i < this.columns.length; i++) {
192
+ const column = this.columns[i];
193
+ generateColumn(i + 1, column);
194
+ }
195
+
196
+ $("#node-input-column-container").sortable({
197
+ axis: "y",
198
+ handle: ".node-input-column-handle",
199
+ cursor: "move",
220
200
  });
221
- })();
222
- </script>
223
201
 
224
- <script type="text/html" data-template-name="dynamic-table">
225
- <div class="form-row">
226
- <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
227
- <input type="text" id="node-input-name" placeholder="Name">
228
- </div>
229
- <div class="form-row">
230
- <label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
231
- <input type="text" id="node-input-tableName" placeholder="My Table">
232
- </div>
233
- <div class="form-row">
234
- <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
235
- <input type="text" id="node-input-group">
236
- </div>
237
- <div class="form-row">
238
- <label><i class="fa fa-object-group"></i> <span data-i18n="dynamic-table.label.size"></label>
239
- <input type="hidden" id="node-input-width">
240
- <input type="hidden" id="node-input-height">
241
- <button class="editor-button" id="node-input-size"></button>
242
- </div>
243
- <div class="form-row">
244
- <label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
245
- <input type="text" id="node-input-data" placeholder="Data">
246
- </div>
247
- <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
248
- <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
249
- <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%;">
250
- <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
251
- <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
252
- </div>
253
- <a
254
- data-html="true"
255
- title="Dynamic Property: Send 'msg.options' in order to override this property."
256
- class="red-ui-button ui-node-popover-title"
257
- 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;">
258
- <i style="font-family: ui-serif;">fx</i>
259
- </a>
260
- </div>
261
- <!-- Add Option Button -->
262
- <div class="form-row">
263
- <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>
264
- </div>
265
-
266
- <div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
267
- <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
268
- <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%;">
269
- <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
270
- <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
271
- </div>
272
- <a
273
- data-html="true"
274
- title="Dynamic Property: Send 'msg.columns' in order to override this property."
275
- class="red-ui-button ui-node-popover-title"
276
- 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;">
277
- <i style="font-family: ui-serif;">fx</i>
278
- </a>
279
- </div>
280
- <!-- Add Column Button -->
281
- <div class="form-row">
282
- <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>
283
- </div>
202
+ $("#node-input-add-option").click(function () {
203
+ generateOption(
204
+ $("#node-input-option-container").children().length + 1,
205
+ {}
206
+ );
207
+ $("#node-input-option-container-div").scrollTop(
208
+ $("#node-input-option-container-div").get(0).scrollHeight
209
+ );
210
+ });
211
+
212
+ for (let i = 0; i < this.options.length; i++) {
213
+ const option = this.options[i];
214
+ generateOption(i + 1, option);
215
+ }
216
+
217
+ $("#node-input-option-container").sortable({
218
+ axis: "y",
219
+ handle: ".node-input-option-handle",
220
+ cursor: "move",
221
+ });
222
+
223
+ $("#node-input-data").typedInput({
224
+ default: "msg",
225
+ types: ["msg", "json", "flow", "global"],
226
+ });
227
+
228
+ $("#node-input-data").typedInput("value", this.data);
229
+ $("#node-input-data").typedInput("type", this.data_type);
230
+ },
231
+ oneditsave: function () {
232
+ const options = $("#node-input-option-container").children();
233
+ const node = this;
234
+ node.options = [];
235
+ options.each(function (i) {
236
+ const option = $(this);
237
+ const o = {
238
+ label: option.find(".node-input-option-label").val(),
239
+ condition: option.find(".node-input-option-condition").val(),
240
+ };
241
+
242
+ node.options.push(o);
243
+ });
244
+
245
+ const columns = $("#node-input-column-container").children();
246
+ node.columns = [];
247
+ columns.each(function (i) {
248
+ const column = $(this);
249
+ const c = {
250
+ label: column.find(".node-input-column-label").val(),
251
+ value: column.find(".node-input-column-value").typedInput("value"),
252
+ type: column.find(".node-input-column-value").typedInput("type"),
253
+ };
254
+ if (
255
+ column.find(".node-input-column-value").typedInput("type") === "num"
256
+ ) {
257
+ c.value = Number(c.value);
258
+ }
259
+ if (
260
+ column.find(".node-input-column-value").typedInput("type") ===
261
+ "bool"
262
+ ) {
263
+ c.value = c.value === "true";
264
+ }
265
+ node.columns.push(c);
266
+ });
267
+
268
+ this.outputs = node.options.length || 1;
269
+
270
+ (this.data = $("#node-input-data").typedInput("value")),
271
+ (this.data_type = $("#node-input-data").typedInput("type"));
272
+ },
273
+ });
274
+ })();
284
275
  </script>
285
276
 
286
- <script type="text/markdown" data-help-name="dynamic-table">
287
- Dyanmic-Table ProcessCube UI-Component
277
+ <script type="text/html" data-template-name="ui-dynamic-table">
278
+ <div class="form-row">
279
+ <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
280
+ <input type="text" id="node-input-name" placeholder="Name">
281
+ </div>
282
+ <div class="form-row">
283
+ <label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
284
+ <input type="text" id="node-input-tableName" placeholder="My Table">
285
+ </div>
286
+ <div class="form-row">
287
+ <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
288
+ <input type="text" id="node-input-group">
289
+ </div>
290
+ <div class="form-row">
291
+ <label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-table.label.size"></label>
292
+ <input type="hidden" id="node-input-width">
293
+ <input type="hidden" id="node-input-height">
294
+ <button class="editor-button" id="node-input-size"></button>
295
+ </div>
296
+ <div class="form-row">
297
+ <label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
298
+ <input type="text" id="node-input-data" placeholder="Data">
299
+ </div>
300
+ <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
301
+ <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
302
+ <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%;">
303
+ <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
304
+ <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
305
+ </div>
306
+ <a
307
+ data-html="true"
308
+ title="Dynamic Property: Send 'msg.options' in order to override this property."
309
+ class="red-ui-button ui-node-popover-title"
310
+ 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;">
311
+ <i style="font-family: ui-serif;">fx</i>
312
+ </a>
313
+ </div>
314
+ <!-- Add Option Button -->
315
+ <div class="form-row">
316
+ <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>
317
+ </div>
318
+
319
+ <div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
320
+ <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
321
+ <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%;">
322
+ <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
323
+ <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
324
+ </div>
325
+ <a
326
+ data-html="true"
327
+ title="Dynamic Property: Send 'msg.columns' in order to override this property."
328
+ class="red-ui-button ui-node-popover-title"
329
+ 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;">
330
+ <i style="font-family: ui-serif;">fx</i>
331
+ </a>
332
+ </div>
333
+ <!-- Add Column Button -->
334
+ <div class="form-row">
335
+ <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>
336
+ </div>
337
+ </script>
288
338
 
289
- ### Inputs
339
+ <script type="text/markdown" data-help-name="ui-dynamic-table">
340
+ Dyanmic-Table ProcessCube UI-Component
290
341
 
291
- : Table name (string) : The name of the table.
292
- : Group (string) : The groud in which the Component is rendered.
293
- : Size (string) : The size of the table within the group.
294
- : Data (string) : The property of msg.payload from where the table data is sourced.
295
- : Actions (string) : The actions of each row. Each action corresponds to an output of the node.
296
- : Columns (string) : The columns of the table. Must correspond to a key of the data property.
342
+ ### Inputs
297
343
 
298
- ### Outputs
344
+ : Table name (string) : The name of the table.
345
+ : Group (string) : The groud in which the Component is rendered.
346
+ : Size (string) : The size of the table within the group.
347
+ : Data (string) : The property of msg.payload from where the table data is sourced.
348
+ : Actions (string) : The actions of each row. Each action corresponds to an output of the node.
349
+ : Columns (string) : The columns of the table. Must correspond to a key of the data property.
299
350
 
300
- The outputs are generated dynamicly based on the actions of the table.
351
+ ### Outputs
301
352
 
302
- ### Details
353
+ The outputs are generated dynamicly based on the actions of the table.
303
354
 
304
- `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.
355
+ ### Details
305
356
 
306
- ### Referece
357
+ `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.
307
358
 
308
- [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
359
+ ### Referece
309
360
 
361
+ [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
310
362
  </script>
package/nodes/dynamic-table.js CHANGED
@@ -1,36 +1,41 @@
1
1
  module.exports = function (RED) {
2
- function DynamicTableNode (config) {
3
- RED.nodes.createNode(this, config)
2
+ function DynamicTableNode(config) {
3
+ RED.nodes.createNode(this, config);
4
4
 
5
- const node = this
5
+ const node = this;
6
6
 
7
- const group = RED.nodes.getNode(config.group)
7
+ const group = RED.nodes.getNode(config.group);
8
8
 
9
- const base = group.getBase()
9
+ const base = group.getBase();
10
10
 
11
- // server-side event handlers
12
- const evts = {
13
- onAction: true,
14
- onInput: function (msg, send, done) {
15
- console.log(config.data_type)
16
- columns = RED.util.evaluateNodeProperty(config.data, config.data_type, node, msg)
17
- base.stores.data.save(base, node, columns)
18
- }
19
- }
11
+ //server-side event handlers
12
+ const evts = {
13
+ onAction: true,
14
+ onInput: function (msg, send, done) {
15
+ console.log(config.data_type);
16
+ columns = RED.util.evaluateNodeProperty(
17
+ config.data,
18
+ config.data_type,
19
+ node,
20
+ msg
21
+ );
22
+ base.stores.data.save(base, node, columns);
23
+ },
24
+ };
20
25
 
21
- if (group) {
22
- group.register(node, config, evts)
23
- } else {
24
- node.error('No group configured')
25
- }
26
+ if (group) {
27
+ group.register(node, config, evts);
28
+ } else {
29
+ node.error("No group configured");
26
30
  }
31
+ }
27
32
 
28
- RED.nodes.registerType('dynamic-table', DynamicTableNode, {
29
- defaults: {
30
- outputs: { value: 1 },
31
- },
32
- outputs: function(config) {
33
- return config.outputs || 1;
34
- }
35
- })
36
- }
33
+ RED.nodes.registerType("ui-dynamic-table", DynamicTableNode, {
34
+ defaults: {
35
+ outputs: { value: 1 },
36
+ },
37
+ outputs: function (config) {
38
+ return config.outputs || 1;
39
+ },
40
+ });
41
+ };
package/nodes/locales/en-US/dynamic-table.html CHANGED
@@ -1,3 +1,3 @@
1
- <script type="text/html" data-help-name="dynamic-table">
2
- <p>A table that shows dynamic data with actions.</p>
1
+ <script type="text/html" data-help-name="ui-dynamic-table">
2
+ <p>A table that shows dynamic data with actions.</p>
3
3
  </script>
package/nodes/locales/en-US/dynamic-table.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
- "dynamic-table" : {
3
- "label": {
4
- "size": "Size"
5
- }
2
+ "ui-dynamic-table": {
3
+ "label": {
4
+ "size": "Size"
6
5
  }
6
+ }
7
7
  }
package/package.json CHANGED
@@ -1,80 +1,80 @@
1
1
  {
2
- "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
3
- "version": "1.1.0",
4
- "description": "A ui component for showing dynamic Data with actions in a table",
5
- "keywords": [
6
- "processcube",
7
- "usertask",
8
- "node-red",
9
- "node-red-dashboard-2"
10
- ],
11
- "repository": {
12
- "type": "git",
13
- "url": "https://github.com/5minds/node-red-dashboard-2-processcube-usertask-table.git"
14
- },
15
- "license": "Apache-2.0",
16
- "author": {
17
- "name": "Martin Moellenbeck",
18
- "url": "https://github.com/moellenbeck"
19
- },
20
- "contributors": [
21
- {
22
- "name": "Luis Thieme",
23
- "url": "https://github.com/luisthieme"
24
- }
25
- ],
26
- "exports": {
27
- "import": "./resources/dynamic-table.esm.js",
28
- "require": "./resources/dynamic-table.umd.js"
29
- },
30
- "files": [
31
- "dist/*",
32
- "nodes/*",
33
- "ui/*",
34
- "resources/*"
35
- ],
36
- "scripts": {
37
- "build": "vite build",
38
- "build:dev": "NODE_ENV=development vite build",
39
- "dev": "NODE_ENV=development vite build --watch",
40
- "dev:prod": "vite build --watch",
41
- "lint": "npm run lint:js && npm run lint:package",
42
- "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
43
- "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
44
- "lint:js:fix": "yarn lint:js --fix",
45
- "lint:package": "sort-package-json --check 'package.json'",
46
- "lint:package:fix": "sort-package-json 'package.json'"
47
- },
48
- "dependencies": {
49
- "vue": "^3.3.8",
50
- "vuex": "^4.1.0"
51
- },
52
- "devDependencies": {
53
- "@vitejs/plugin-vue": "^4.5.0",
54
- "eslint": "^8.53.0",
55
- "eslint-config-standard": "^17.1.0",
56
- "eslint-plugin-import": "^2.29.0",
57
- "eslint-plugin-n": "^16.3.1",
58
- "eslint-plugin-vue": "^9.18.1",
59
- "vite": "^5.0.13",
60
- "vite-plugin-css-injected-by-js": "^3.3.0"
61
- },
62
- "engines": {
63
- "node": ">=14"
64
- },
65
- "node-red": {
66
- "version": ">=3.0.0",
67
- "nodes": {
68
- "dynamic-table": "nodes/dynamic-table.js"
69
- }
70
- },
71
- "node-red-dashboard-2": {
72
- "version": "1.0.0",
73
- "widgets": {
74
- "dynamic-table": {
75
- "output": "dynamic-table.umd.js",
76
- "component": "DynamicTable"
77
- }
78
- }
2
+ "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
3
+ "version": "1.1.2",
4
+ "description": "A ui component for showing dynamic Data with actions in a table",
5
+ "keywords": [
6
+ "processcube",
7
+ "usertask",
8
+ "node-red",
9
+ "node-red-dashboard-2"
10
+ ],
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "https://github.com/5minds/node-red-dashboard-2-processcube-usertask-table.git"
14
+ },
15
+ "license": "Apache-2.0",
16
+ "author": {
17
+ "name": "Martin Moellenbeck",
18
+ "url": "https://github.com/moellenbeck"
19
+ },
20
+ "contributors": [
21
+ {
22
+ "name": "Luis Thieme",
23
+ "url": "https://github.com/luisthieme"
79
24
  }
25
+ ],
26
+ "exports": {
27
+ "import": "./resources/dynamic-table.esm.js",
28
+ "require": "./resources/dynamic-table.umd.js"
29
+ },
30
+ "files": [
31
+ "dist/*",
32
+ "nodes/*",
33
+ "ui/*",
34
+ "resources/*"
35
+ ],
36
+ "scripts": {
37
+ "build": "vite build",
38
+ "build:dev": "NODE_ENV=development vite build",
39
+ "dev": "NODE_ENV=development vite build --watch",
40
+ "dev:prod": "vite build --watch",
41
+ "lint": "npm run lint:js && npm run lint:package",
42
+ "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
43
+ "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
44
+ "lint:js:fix": "yarn lint:js --fix",
45
+ "lint:package": "sort-package-json --check 'package.json'",
46
+ "lint:package:fix": "sort-package-json 'package.json'"
47
+ },
48
+ "dependencies": {
49
+ "vue": "^3.3.8",
50
+ "vuex": "^4.1.0"
51
+ },
52
+ "devDependencies": {
53
+ "@vitejs/plugin-vue": "^4.5.0",
54
+ "eslint": "^8.53.0",
55
+ "eslint-config-standard": "^17.1.0",
56
+ "eslint-plugin-import": "^2.29.0",
57
+ "eslint-plugin-n": "^16.3.1",
58
+ "eslint-plugin-vue": "^9.18.1",
59
+ "vite": "^5.3.2",
60
+ "vite-plugin-css-injected-by-js": "^3.3.0"
61
+ },
62
+ "engines": {
63
+ "node": ">=14"
64
+ },
65
+ "node-red": {
66
+ "version": ">=3.0.0",
67
+ "nodes": {
68
+ "ui-dynamic-table": "nodes/dynamic-table.js"
69
+ }
70
+ },
71
+ "node-red-dashboard-2": {
72
+ "version": "1.0.0",
73
+ "widgets": {
74
+ "ui-dynamic-table": {
75
+ "output": "dynamic-table.umd.js",
76
+ "component": "DynamicTable"
77
+ }
78
+ }
79
+ }
80
80
  }
package/resources/ui-dynamic-table.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ (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)}})();
2
+ (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 CHANGED
@@ -3,8 +3,8 @@
3
3
  *
4
4
  * This file is useful for testing your component in isolation from Node-RED.
5
5
  */
6
- import { createApp } from 'vue'
6
+ import { createApp } from "vue";
7
7
 
8
- import UIExample from './components/DynamicTable.vue'
8
+ import DynamicTable from "./components/DynamicTable.vue";
9
9
 
10
- createApp(UIExample).mount('#app')
10
+ createApp(DynamicTable).mount("#app");
package/resources/dynamic-table.umd.js DELETED
@@ -1,2 +0,0 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode("h1[data-v-a5302b6c]{margin-bottom:10px}h2[data-v-a5302b6c]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-a5302b6c]{margin-top:1rem}p[data-v-a5302b6c]{margin-bottom:5px}ul li[data-v-a5302b6c]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-a5302b6c]{padding:12px;margin:12px;background-color:#eee}code[data-v-a5302b6c]{font-size:.825rem;color:#ae0000}input[data-v-a5302b6c]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-a5302b6c]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-a5302b6c]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
- (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,t){"use strict";const m=(e,n)=>{const o=e.__vccOpts||e;for(const[d,s]of n)o[d]=s;return o},f={name:"DynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},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){let o=[];o[n]=e,this.$socket.emit("widget-action",this.id,o)},actionFn(e,n){this.send({payload:n},this.actions.findIndex(o=>o.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(o){return console.error("Error evaluating condition:",o),!1}}}};function _(e,n,o,d,s,c){const k=t.resolveComponent("v-toolbar-title"),x=t.resolveComponent("v-spacer"),y=t.resolveComponent("v-text-field"),u=t.resolveComponent("v-toolbar"),p=t.resolveComponent("v-btn"),h=t.resolveComponent("v-container"),C=t.resolveComponent("v-data-table");return t.openBlock(),t.createBlock(C,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(u,{flat:"",class:"py-2"},{default:t.withCtx(()=>[t.createVNode(k,null,{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.props.tableName),1)]),_:1}),t.createVNode(x),t.createVNode(y,{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(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(()=>[c.conditionCheck(l.condition,r)?(t.openBlock(),t.createBlock(p,{style:{margin:"0px 2px"},key:g,size:"small",onClick:w=>c.actionFn(l,r)},{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(p,{color:"primary",onClick:c.initialize},{default:t.withCtx(()=>[t.createTextVNode(" Reload ")]),_:1},8,["onClick"])]),_:1},8,["headers","items","search"])}const b=m(f,[["render",_],["__scopeId","data-v-a5302b6c"]]);i.DynamicTable=b,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});