@5minds/node-red-dashboard-2-processcube-dynamic-table 2.0.3-develop-8a7c9e-mets8ufl → 2.0.3-develop-e1e056-mewuxjwr

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 (5) hide show
  1. package/nodes/dynamic-table.html +392 -369
  2. package/nodes/dynamic-table.js +11 -1
  3. package/package.json +89 -88
  4. package/resources/ui-dynamic-table.umd.js +22 -19
  5. package/ui/components/UIDynamicTable.vue +251 -82
package/nodes/dynamic-table.html CHANGED
@@ -1,394 +1,417 @@
1
1
  <script type="text/javascript">
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
- 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
- $('#node-input-title_style').typedInput({
75
- types: [
76
- {
77
- value: 'default',
78
- label: 'Default',
79
- hasValue: false,
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
- value: 'minimal',
83
- label: 'Minimal',
84
- hasValue: false,
57
+ inputs: 1,
58
+ outputs: 1,
59
+ outputLabels: function (index) {
60
+ return this.options[index].label;
85
61
  },
86
- {
87
- value: 'outside',
88
- label: 'Outside of card',
89
- hasValue: false,
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-name"><i class="fa fa-tag"></i> Name</label>
287
- <input type="text" id="node-input-name" placeholder="Name">
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
- <hr />
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
- A Node to dynamicly display arrays of data in a table with actions for every row.
390
+ A Node to dynamicly display arrays of data in a table with actions for every row.
368
391
 
369
- ## Actions
392
+ ## Actions
370
393
 
371
- Define a label for the action button that is going be displayed and a condition for when it should be displayed.
372
- Inside the condition you have access to every key from the current row.
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
- ### Inputs
397
+ ### Inputs
375
398
 
376
- : Table name (string) : The name of the table.
377
- : Group (string) : The groud in which the Component is rendered.
378
- : Size (string) : The size of the table within the group.
379
- : Data (string) : The property of msg.payload from where the table data is sourced.
380
- : Actions (string) : The actions of each row. Each action corresponds to an output of the node.
381
- : Columns (string) : The columns of the table. Must correspond to a key of the data property.
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
- ### Outputs
406
+ ### Outputs
384
407
 
385
- The outputs are generated dynamicly based on the actions of the table.
408
+ The outputs are generated dynamicly based on the actions of the table.
386
409
 
387
- ### Details
410
+ ### Details
388
411
 
389
- `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.
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
- ### Referece
414
+ ### Referece
392
415
 
393
- [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
416
+ [https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
394
417
  </script>