@5minds/node-red-dashboard-2-processcube-dynamic-table 2.0.3 → 2.0.4
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.
- package/nodes/dynamic-table.html +392 -369
- package/nodes/dynamic-table.js +11 -1
- package/package.json +89 -88
- package/resources/ui-dynamic-table.umd.js +22 -19
- package/ui/components/UIDynamicTable.vue +428 -50
package/nodes/dynamic-table.html
CHANGED
|
@@ -1,394 +1,417 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
title_text: { value: '' },
|
|
53
|
-
title_style: { value: 'default' },
|
|
54
|
-
title_custom_text_styling: { value: '' },
|
|
55
|
-
title_icon: { value: '' },
|
|
56
|
-
},
|
|
57
|
-
inputs: 1,
|
|
58
|
-
outputs: 1,
|
|
59
|
-
outputLabels: function (index) {
|
|
60
|
-
return this.options[index].label;
|
|
61
|
-
},
|
|
62
|
-
icon: 'ui_dynamic_table.svg',
|
|
63
|
-
paletteLbel: 'file',
|
|
64
|
-
label: function () {
|
|
65
|
-
return this.name || 'dynamic-table';
|
|
66
|
-
},
|
|
67
|
-
oneditprepare: function () {
|
|
68
|
-
$('#node-input-size').elementSizer({
|
|
69
|
-
width: '#node-input-width',
|
|
70
|
-
height: '#node-input-height',
|
|
71
|
-
group: '#node-input-group',
|
|
72
|
-
});
|
|
2
|
+
(function () {
|
|
3
|
+
function hasProperty(obj, prop) {
|
|
4
|
+
return Object.prototype.hasOwnProperty.call(obj, prop);
|
|
5
|
+
}
|
|
73
6
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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: '', label_type: 'str', 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
|
+
title_text: { value: '' },
|
|
53
|
+
title_style: { value: 'default' },
|
|
54
|
+
title_custom_text_styling: { value: '' },
|
|
55
|
+
title_icon: { value: '' },
|
|
80
56
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
57
|
+
inputs: 1,
|
|
58
|
+
outputs: 1,
|
|
59
|
+
outputLabels: function (index) {
|
|
60
|
+
return this.options[index].label;
|
|
85
61
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
62
|
+
icon: 'ui_dynamic_table.svg',
|
|
63
|
+
paletteLbel: 'file',
|
|
64
|
+
label: function () {
|
|
65
|
+
return this.name || 'dynamic-table';
|
|
66
|
+
},
|
|
67
|
+
oneditprepare: function () {
|
|
68
|
+
$('#node-input-size').elementSizer({
|
|
69
|
+
width: '#node-input-width',
|
|
70
|
+
height: '#node-input-height',
|
|
71
|
+
group: '#node-input-group',
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
$('#node-input-title_style').typedInput({
|
|
75
|
+
types: [
|
|
76
|
+
{
|
|
77
|
+
value: 'default',
|
|
78
|
+
label: 'Default',
|
|
79
|
+
hasValue: false,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
value: 'minimal',
|
|
83
|
+
label: 'Minimal',
|
|
84
|
+
hasValue: false,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
value: 'outside',
|
|
88
|
+
label: 'Outside of card',
|
|
89
|
+
hasValue: false,
|
|
90
|
+
},
|
|
91
|
+
],
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
function generateOption(i, option) {
|
|
95
|
+
const container = $('<li/>', {
|
|
96
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// Create input fields for value and label
|
|
100
|
+
const row = $('<div/>').appendTo(container);
|
|
101
|
+
$('<input/>', {
|
|
102
|
+
class: 'node-input-option-label',
|
|
103
|
+
type: 'text',
|
|
104
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
105
|
+
placeholder: 'Label',
|
|
106
|
+
value: option.label,
|
|
107
|
+
})
|
|
108
|
+
.appendTo(row)
|
|
109
|
+
.typedInput({
|
|
110
|
+
default: option.label_type || 'str',
|
|
111
|
+
types: [
|
|
112
|
+
'msg',
|
|
113
|
+
'str',
|
|
114
|
+
'jsonata',
|
|
115
|
+
{
|
|
116
|
+
value: 'row',
|
|
117
|
+
label: 'row.',
|
|
118
|
+
hasValue: true,
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// Set the typed input value and type
|
|
124
|
+
const labelInput = row.find('.node-input-option-label');
|
|
125
|
+
if (option.label_type) {
|
|
126
|
+
labelInput.typedInput('type', option.label_type);
|
|
127
|
+
}
|
|
128
|
+
if (option.label) {
|
|
129
|
+
labelInput.typedInput('value', option.label);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
$('<input/>', {
|
|
133
|
+
class: 'node-input-option-condition',
|
|
134
|
+
type: 'text',
|
|
135
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
136
|
+
placeholder: 'Condition',
|
|
137
|
+
value: option.condition,
|
|
138
|
+
})
|
|
139
|
+
.appendTo(row)
|
|
140
|
+
.typedInput({
|
|
141
|
+
type: 'str',
|
|
142
|
+
types: ['str'],
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
// Create delete button for the option
|
|
146
|
+
const finalSpan = $('<span/>', {
|
|
147
|
+
style: 'float:right; margin-right:8px;',
|
|
148
|
+
}).appendTo(row);
|
|
149
|
+
const deleteButton = $('<a/>', {
|
|
150
|
+
href: '#',
|
|
151
|
+
class: 'editor-button editor-button-small',
|
|
152
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
153
|
+
}).appendTo(finalSpan);
|
|
154
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
155
|
+
|
|
156
|
+
deleteButton.click(function () {
|
|
157
|
+
container.css({
|
|
158
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
159
|
+
});
|
|
160
|
+
container.fadeOut(300, function () {
|
|
161
|
+
$(this).remove();
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
$('#node-input-option-container').append(container);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function generateColumn(i, column) {
|
|
169
|
+
const container = $('<li/>', {
|
|
170
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
// Create input fields for value and label
|
|
174
|
+
const row = $('<div/>').appendTo(container);
|
|
175
|
+
$('<input/>', {
|
|
176
|
+
class: 'node-input-column-value',
|
|
177
|
+
type: 'text',
|
|
178
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
179
|
+
placeholder: 'Value',
|
|
180
|
+
value: column.value,
|
|
181
|
+
})
|
|
182
|
+
.appendTo(row)
|
|
183
|
+
.typedInput({ default: column.type || 'str', types: ['str'] });
|
|
184
|
+
|
|
185
|
+
$('<input/>', {
|
|
186
|
+
class: 'node-input-column-label',
|
|
187
|
+
type: 'text',
|
|
188
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
189
|
+
placeholder: 'Label',
|
|
190
|
+
value: column.label,
|
|
191
|
+
})
|
|
192
|
+
.appendTo(row)
|
|
193
|
+
.typedInput({
|
|
194
|
+
type: 'str',
|
|
195
|
+
types: ['str'],
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
// Create delete button for the column
|
|
199
|
+
const finalSpan = $('<span/>', {
|
|
200
|
+
style: 'float:right; margin-right:8px;',
|
|
201
|
+
}).appendTo(row);
|
|
202
|
+
const deleteButton = $('<a/>', {
|
|
203
|
+
href: '#',
|
|
204
|
+
class: 'editor-button editor-button-small',
|
|
205
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
206
|
+
}).appendTo(finalSpan);
|
|
207
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
208
|
+
|
|
209
|
+
deleteButton.click(function () {
|
|
210
|
+
container.css({
|
|
211
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
212
|
+
});
|
|
213
|
+
container.fadeOut(300, function () {
|
|
214
|
+
$(this).remove();
|
|
215
|
+
});
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
$('#node-input-column-container').append(container);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
$('#node-input-add-column').click(function () {
|
|
222
|
+
generateColumn($('#node-input-column-container').children().length + 1, {});
|
|
223
|
+
$('#node-input-column-container-div').scrollTop(
|
|
224
|
+
$('#node-input-column-container-div').get(0).scrollHeight
|
|
225
|
+
);
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
for (let i = 0; i < this.columns.length; i++) {
|
|
229
|
+
const column = this.columns[i];
|
|
230
|
+
generateColumn(i + 1, column);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
$('#node-input-column-container').sortable({
|
|
234
|
+
axis: 'y',
|
|
235
|
+
handle: '.node-input-column-handle',
|
|
236
|
+
cursor: 'move',
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
$('#node-input-add-option').click(function () {
|
|
240
|
+
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
241
|
+
$('#node-input-option-container-div').scrollTop(
|
|
242
|
+
$('#node-input-option-container-div').get(0).scrollHeight
|
|
243
|
+
);
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
for (let i = 0; i < this.options.length; i++) {
|
|
247
|
+
const option = this.options[i];
|
|
248
|
+
generateOption(i + 1, option);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
$('#node-input-option-container').sortable({
|
|
252
|
+
axis: 'y',
|
|
253
|
+
handle: '.node-input-option-handle',
|
|
254
|
+
cursor: 'move',
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
$('#node-input-data').typedInput({
|
|
258
|
+
default: 'msg',
|
|
259
|
+
types: ['msg', 'json', 'flow', 'global'],
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
$('#node-input-data').typedInput('value', this.data);
|
|
263
|
+
$('#node-input-data').typedInput('type', this.data_type);
|
|
264
|
+
},
|
|
265
|
+
oneditsave: function () {
|
|
266
|
+
const options = $('#node-input-option-container').children();
|
|
267
|
+
const node = this;
|
|
268
|
+
node.options = [];
|
|
269
|
+
options.each(function (i) {
|
|
270
|
+
const option = $(this);
|
|
271
|
+
const o = {
|
|
272
|
+
label: option.find('.node-input-option-label').typedInput('value'),
|
|
273
|
+
label_type: option.find('.node-input-option-label').typedInput('type'),
|
|
274
|
+
condition: option.find('.node-input-option-condition').val(),
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
node.options.push(o);
|
|
278
|
+
});
|
|
279
|
+
|
|
280
|
+
const columns = $('#node-input-column-container').children();
|
|
281
|
+
node.columns = [];
|
|
282
|
+
columns.each(function (i) {
|
|
283
|
+
const column = $(this);
|
|
284
|
+
const c = {
|
|
285
|
+
label: column.find('.node-input-column-label').val(),
|
|
286
|
+
value: column.find('.node-input-column-value').typedInput('value'),
|
|
287
|
+
type: column.find('.node-input-column-value').typedInput('type'),
|
|
288
|
+
};
|
|
289
|
+
if (column.find('.node-input-column-value').typedInput('type') === 'num') {
|
|
290
|
+
c.value = Number(c.value);
|
|
291
|
+
}
|
|
292
|
+
if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
|
|
293
|
+
c.value = c.value === 'true';
|
|
294
|
+
}
|
|
295
|
+
node.columns.push(c);
|
|
296
|
+
});
|
|
297
|
+
|
|
298
|
+
this.outputs = node.options.length || 1;
|
|
299
|
+
|
|
300
|
+
(this.data = $('#node-input-data').typedInput('value')),
|
|
301
|
+
(this.data_type = $('#node-input-data').typedInput('type'));
|
|
90
302
|
},
|
|
91
|
-
],
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
function generateOption(i, option) {
|
|
95
|
-
const container = $('<li/>', {
|
|
96
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
// Create input fields for value and label
|
|
100
|
-
const row = $('<div/>').appendTo(container);
|
|
101
|
-
$('<input/>', {
|
|
102
|
-
class: 'node-input-option-label',
|
|
103
|
-
type: 'text',
|
|
104
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
105
|
-
placeholder: 'Label',
|
|
106
|
-
value: option.label,
|
|
107
|
-
})
|
|
108
|
-
.appendTo(row)
|
|
109
|
-
.typedInput({
|
|
110
|
-
type: 'str',
|
|
111
|
-
types: ['str'],
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
$('<input/>', {
|
|
115
|
-
class: 'node-input-option-condition',
|
|
116
|
-
type: 'text',
|
|
117
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
118
|
-
placeholder: 'Condition',
|
|
119
|
-
value: option.condition,
|
|
120
|
-
})
|
|
121
|
-
.appendTo(row)
|
|
122
|
-
.typedInput({
|
|
123
|
-
type: 'str',
|
|
124
|
-
types: ['str'],
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
// Create delete button for the option
|
|
128
|
-
const finalSpan = $('<span/>', {
|
|
129
|
-
style: 'float:right; margin-right:8px;',
|
|
130
|
-
}).appendTo(row);
|
|
131
|
-
const deleteButton = $('<a/>', {
|
|
132
|
-
href: '#',
|
|
133
|
-
class: 'editor-button editor-button-small',
|
|
134
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
135
|
-
}).appendTo(finalSpan);
|
|
136
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
137
|
-
|
|
138
|
-
deleteButton.click(function () {
|
|
139
|
-
container.css({
|
|
140
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
141
|
-
});
|
|
142
|
-
container.fadeOut(300, function () {
|
|
143
|
-
$(this).remove();
|
|
144
|
-
});
|
|
145
|
-
});
|
|
146
|
-
|
|
147
|
-
$('#node-input-option-container').append(container);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
function generateColumn(i, column) {
|
|
151
|
-
const container = $('<li/>', {
|
|
152
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
// Create input fields for value and label
|
|
156
|
-
const row = $('<div/>').appendTo(container);
|
|
157
|
-
$('<input/>', {
|
|
158
|
-
class: 'node-input-column-value',
|
|
159
|
-
type: 'text',
|
|
160
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
161
|
-
placeholder: 'Value',
|
|
162
|
-
value: column.value,
|
|
163
|
-
})
|
|
164
|
-
.appendTo(row)
|
|
165
|
-
.typedInput({ default: column.type || 'str', types: ['str'] });
|
|
166
|
-
|
|
167
|
-
$('<input/>', {
|
|
168
|
-
class: 'node-input-column-label',
|
|
169
|
-
type: 'text',
|
|
170
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
171
|
-
placeholder: 'Label',
|
|
172
|
-
value: column.label,
|
|
173
|
-
})
|
|
174
|
-
.appendTo(row)
|
|
175
|
-
.typedInput({
|
|
176
|
-
type: 'str',
|
|
177
|
-
types: ['str'],
|
|
178
|
-
});
|
|
179
|
-
|
|
180
|
-
// Create delete button for the column
|
|
181
|
-
const finalSpan = $('<span/>', {
|
|
182
|
-
style: 'float:right; margin-right:8px;',
|
|
183
|
-
}).appendTo(row);
|
|
184
|
-
const deleteButton = $('<a/>', {
|
|
185
|
-
href: '#',
|
|
186
|
-
class: 'editor-button editor-button-small',
|
|
187
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
188
|
-
}).appendTo(finalSpan);
|
|
189
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
190
|
-
|
|
191
|
-
deleteButton.click(function () {
|
|
192
|
-
container.css({
|
|
193
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
194
|
-
});
|
|
195
|
-
container.fadeOut(300, function () {
|
|
196
|
-
$(this).remove();
|
|
197
|
-
});
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
$('#node-input-column-container').append(container);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
$('#node-input-add-column').click(function () {
|
|
204
|
-
generateColumn($('#node-input-column-container').children().length + 1, {});
|
|
205
|
-
$('#node-input-column-container-div').scrollTop($('#node-input-column-container-div').get(0).scrollHeight);
|
|
206
|
-
});
|
|
207
|
-
|
|
208
|
-
for (let i = 0; i < this.columns.length; i++) {
|
|
209
|
-
const column = this.columns[i];
|
|
210
|
-
generateColumn(i + 1, column);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
$('#node-input-column-container').sortable({
|
|
214
|
-
axis: 'y',
|
|
215
|
-
handle: '.node-input-column-handle',
|
|
216
|
-
cursor: 'move',
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
$('#node-input-add-option').click(function () {
|
|
220
|
-
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
221
|
-
$('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
|
|
222
|
-
});
|
|
223
|
-
|
|
224
|
-
for (let i = 0; i < this.options.length; i++) {
|
|
225
|
-
const option = this.options[i];
|
|
226
|
-
generateOption(i + 1, option);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
$('#node-input-option-container').sortable({
|
|
230
|
-
axis: 'y',
|
|
231
|
-
handle: '.node-input-option-handle',
|
|
232
|
-
cursor: 'move',
|
|
233
|
-
});
|
|
234
|
-
|
|
235
|
-
$('#node-input-data').typedInput({
|
|
236
|
-
default: 'msg',
|
|
237
|
-
types: ['msg', 'json', 'flow', 'global'],
|
|
238
|
-
});
|
|
239
|
-
|
|
240
|
-
$('#node-input-data').typedInput('value', this.data);
|
|
241
|
-
$('#node-input-data').typedInput('type', this.data_type);
|
|
242
|
-
},
|
|
243
|
-
oneditsave: function () {
|
|
244
|
-
const options = $('#node-input-option-container').children();
|
|
245
|
-
const node = this;
|
|
246
|
-
node.options = [];
|
|
247
|
-
options.each(function (i) {
|
|
248
|
-
const option = $(this);
|
|
249
|
-
const o = {
|
|
250
|
-
label: option.find('.node-input-option-label').val(),
|
|
251
|
-
condition: option.find('.node-input-option-condition').val(),
|
|
252
|
-
};
|
|
253
|
-
|
|
254
|
-
node.options.push(o);
|
|
255
|
-
});
|
|
256
|
-
|
|
257
|
-
const columns = $('#node-input-column-container').children();
|
|
258
|
-
node.columns = [];
|
|
259
|
-
columns.each(function (i) {
|
|
260
|
-
const column = $(this);
|
|
261
|
-
const c = {
|
|
262
|
-
label: column.find('.node-input-column-label').val(),
|
|
263
|
-
value: column.find('.node-input-column-value').typedInput('value'),
|
|
264
|
-
type: column.find('.node-input-column-value').typedInput('type'),
|
|
265
|
-
};
|
|
266
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'num') {
|
|
267
|
-
c.value = Number(c.value);
|
|
268
|
-
}
|
|
269
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
|
|
270
|
-
c.value = c.value === 'true';
|
|
271
|
-
}
|
|
272
|
-
node.columns.push(c);
|
|
273
303
|
});
|
|
274
|
-
|
|
275
|
-
this.outputs = node.options.length || 1;
|
|
276
|
-
|
|
277
|
-
(this.data = $('#node-input-data').typedInput('value')),
|
|
278
|
-
(this.data_type = $('#node-input-data').typedInput('type'));
|
|
279
|
-
},
|
|
280
|
-
});
|
|
281
|
-
})();
|
|
304
|
+
})();
|
|
282
305
|
</script>
|
|
283
306
|
|
|
284
307
|
<script type="text/html" data-template-name="ui-dynamic-table">
|
|
308
|
+
<div class="form-row">
|
|
309
|
+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
310
|
+
<input type="text" id="node-input-name" placeholder="Name">
|
|
311
|
+
</div>
|
|
312
|
+
<div class="form-row">
|
|
313
|
+
<label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
|
|
314
|
+
<input type="text" id="node-input-tableName" placeholder="My Table">
|
|
315
|
+
</div>
|
|
316
|
+
<div class="form-row">
|
|
317
|
+
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
318
|
+
<input type="text" id="node-input-group">
|
|
319
|
+
</div>
|
|
320
|
+
<div class="form-row">
|
|
321
|
+
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-table.label.size"></label>
|
|
322
|
+
<input type="hidden" id="node-input-width">
|
|
323
|
+
<input type="hidden" id="node-input-height">
|
|
324
|
+
<button class="editor-button" id="node-input-size"></button>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="form-row">
|
|
327
|
+
<label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
|
|
328
|
+
<input type="text" id="node-input-data" placeholder="Data">
|
|
329
|
+
</div>
|
|
330
|
+
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
331
|
+
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
|
|
332
|
+
<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%;">
|
|
333
|
+
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
334
|
+
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
|
|
335
|
+
</div>
|
|
336
|
+
<a
|
|
337
|
+
data-html="true"
|
|
338
|
+
title="Dynamic Property: Send 'msg.options' in order to override this property."
|
|
339
|
+
class="red-ui-button ui-node-popover-title"
|
|
340
|
+
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;">
|
|
341
|
+
<i style="font-family: ui-serif;">fx</i>
|
|
342
|
+
</a>
|
|
343
|
+
</div>
|
|
344
|
+
<!-- Add Option Button -->
|
|
345
|
+
<div class="form-row">
|
|
346
|
+
<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>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
|
|
350
|
+
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
|
|
351
|
+
<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%;">
|
|
352
|
+
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
353
|
+
<ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
|
|
354
|
+
</div>
|
|
355
|
+
<a
|
|
356
|
+
data-html="true"
|
|
357
|
+
title="Dynamic Property: Send 'msg.columns' in order to override this property."
|
|
358
|
+
class="red-ui-button ui-node-popover-title"
|
|
359
|
+
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;">
|
|
360
|
+
<i style="font-family: ui-serif;">fx</i>
|
|
361
|
+
</a>
|
|
362
|
+
</div>
|
|
363
|
+
<!-- Add Column Button -->
|
|
364
|
+
<div class="form-row">
|
|
365
|
+
<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>
|
|
366
|
+
</div>
|
|
367
|
+
<hr />
|
|
368
|
+
|
|
369
|
+
<h4>Title Configuration</h4>
|
|
285
370
|
<div class="form-row">
|
|
286
|
-
<label for="node-input-
|
|
287
|
-
<input type="text" id="node-input-
|
|
288
|
-
</div>
|
|
289
|
-
<div class="form-row">
|
|
290
|
-
<label for="node-input-tableName"><i class="fa fa-tag"></i> Table name</label>
|
|
291
|
-
<input type="text" id="node-input-tableName" placeholder="My Table">
|
|
292
|
-
</div>
|
|
293
|
-
<div class="form-row">
|
|
294
|
-
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
295
|
-
<input type="text" id="node-input-group">
|
|
296
|
-
</div>
|
|
297
|
-
<div class="form-row">
|
|
298
|
-
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-table.label.size"></label>
|
|
299
|
-
<input type="hidden" id="node-input-width">
|
|
300
|
-
<input type="hidden" id="node-input-height">
|
|
301
|
-
<button class="editor-button" id="node-input-size"></button>
|
|
302
|
-
</div>
|
|
303
|
-
<div class="form-row">
|
|
304
|
-
<label for="node-input-data"><i class="fa fa-tag"></i> Data</label>
|
|
305
|
-
<input type="text" id="node-input-data" placeholder="Data">
|
|
306
|
-
</div>
|
|
307
|
-
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
308
|
-
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
|
|
309
|
-
<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%;">
|
|
310
|
-
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
311
|
-
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
|
|
312
|
-
</div>
|
|
313
|
-
<a
|
|
314
|
-
data-html="true"
|
|
315
|
-
title="Dynamic Property: Send 'msg.options' in order to override this property."
|
|
316
|
-
class="red-ui-button ui-node-popover-title"
|
|
317
|
-
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;">
|
|
318
|
-
<i style="font-family: ui-serif;">fx</i>
|
|
319
|
-
</a>
|
|
320
|
-
</div>
|
|
321
|
-
<!-- Add Option Button -->
|
|
322
|
-
<div class="form-row">
|
|
323
|
-
<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>
|
|
324
|
-
</div>
|
|
325
|
-
|
|
326
|
-
<div class="form-row form-row-flex node-input-column-container-row" style="margin-bottom: 0px;width: 100%">
|
|
327
|
-
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
|
|
328
|
-
<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%;">
|
|
329
|
-
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
330
|
-
<ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
|
|
331
|
-
</div>
|
|
332
|
-
<a
|
|
333
|
-
data-html="true"
|
|
334
|
-
title="Dynamic Property: Send 'msg.columns' in order to override this property."
|
|
335
|
-
class="red-ui-button ui-node-popover-title"
|
|
336
|
-
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;">
|
|
337
|
-
<i style="font-family: ui-serif;">fx</i>
|
|
338
|
-
</a>
|
|
339
|
-
</div>
|
|
340
|
-
<!-- Add Column Button -->
|
|
341
|
-
<div class="form-row">
|
|
342
|
-
<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>
|
|
343
|
-
</div>
|
|
344
|
-
<hr />
|
|
345
|
-
|
|
346
|
-
<h4>Title Configuration</h4>
|
|
347
|
-
<div class="form-row">
|
|
348
|
-
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
349
|
-
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
350
|
-
</div>
|
|
351
|
-
<div class="form-row">
|
|
352
|
-
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
353
|
-
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
354
|
-
</div>
|
|
355
|
-
<div class="form-row">
|
|
356
|
-
<label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
|
|
357
|
-
<input type="text" id="node-input-title_custom_text_styling" title="Use CSS properties like font-size, color or padding to influence the appearance of the title">
|
|
358
|
-
</div>
|
|
359
|
-
<div class="form-row">
|
|
360
|
-
<label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
|
|
361
|
-
<input type="text" id="node-input-title_icon" title="Enter an URL to fetch an icon from. Use a dataurl for images, that are not available online. This value will be used as a HTML <img>'s src value.">
|
|
371
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
372
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
362
373
|
</div>
|
|
363
|
-
|
|
374
|
+
<div class="form-row">
|
|
375
|
+
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
376
|
+
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
377
|
+
</div>
|
|
378
|
+
<div class="form-row">
|
|
379
|
+
<label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
|
|
380
|
+
<input type="text" id="node-input-title_custom_text_styling" title="Use CSS properties like font-size, color or padding to influence the appearance of the title">
|
|
381
|
+
</div>
|
|
382
|
+
<div class="form-row">
|
|
383
|
+
<label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
|
|
384
|
+
<input type="text" id="node-input-title_icon" title="Enter an URL to fetch an icon from. Use a dataurl for images, that are not available online. This value will be used as a HTML <img>'s src value.">
|
|
385
|
+
</div>
|
|
386
|
+
<hr />
|
|
364
387
|
</script>
|
|
365
388
|
|
|
366
389
|
<script type="text/markdown" data-help-name="ui-dynamic-table">
|
|
367
|
-
|
|
390
|
+
A Node to dynamicly display arrays of data in a table with actions for every row.
|
|
368
391
|
|
|
369
|
-
|
|
392
|
+
## Actions
|
|
370
393
|
|
|
371
|
-
|
|
372
|
-
|
|
394
|
+
Define a label for the action button that is going be displayed and a condition for when it should be displayed.
|
|
395
|
+
Inside the condition you have access to every key from the current row.
|
|
373
396
|
|
|
374
|
-
|
|
397
|
+
### Inputs
|
|
375
398
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
399
|
+
: Table name (string) : The name of the table.
|
|
400
|
+
: Group (string) : The groud in which the Component is rendered.
|
|
401
|
+
: Size (string) : The size of the table within the group.
|
|
402
|
+
: Data (string) : The property of msg.payload from where the table data is sourced.
|
|
403
|
+
: Actions (string) : The actions of each row. Each action corresponds to an output of the node.
|
|
404
|
+
: Columns (string) : The columns of the table. Must correspond to a key of the data property.
|
|
382
405
|
|
|
383
|
-
|
|
406
|
+
### Outputs
|
|
384
407
|
|
|
385
|
-
|
|
408
|
+
The outputs are generated dynamicly based on the actions of the table.
|
|
386
409
|
|
|
387
|
-
|
|
410
|
+
### Details
|
|
388
411
|
|
|
389
|
-
|
|
412
|
+
`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.
|
|
390
413
|
|
|
391
|
-
|
|
414
|
+
### Referece
|
|
392
415
|
|
|
393
|
-
|
|
416
|
+
[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
|
|
394
417
|
</script>
|