@5minds/node-red-dashboard-2-processcube-dynamic-table 1.2.1-feature-fb877a-ma41fzwu → 2.0.0-feature-953474-mcevwszq
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
CHANGED
|
@@ -1,264 +1,284 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
+
});
|
|
6
73
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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;
|
|
74
|
+
$('#node-input-title_style').typedInput({
|
|
75
|
+
types: [
|
|
76
|
+
{
|
|
77
|
+
value: 'default',
|
|
78
|
+
label: 'Default',
|
|
79
|
+
hasValue: false,
|
|
57
80
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
81
|
+
{
|
|
82
|
+
value: 'minimal',
|
|
83
|
+
label: 'Minimal',
|
|
84
|
+
hasValue: false,
|
|
62
85
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
group: '#node-input-group',
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
function generateOption(i, option) {
|
|
71
|
-
const container = $('<li/>', {
|
|
72
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
// Create input fields for value and label
|
|
76
|
-
const row = $('<div/>').appendTo(container);
|
|
77
|
-
$('<input/>', {
|
|
78
|
-
class: 'node-input-option-label',
|
|
79
|
-
type: 'text',
|
|
80
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
81
|
-
placeholder: 'Label',
|
|
82
|
-
value: option.label,
|
|
83
|
-
})
|
|
84
|
-
.appendTo(row)
|
|
85
|
-
.typedInput({
|
|
86
|
-
type: 'str',
|
|
87
|
-
types: ['str'],
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
$('<input/>', {
|
|
91
|
-
class: 'node-input-option-condition',
|
|
92
|
-
type: 'text',
|
|
93
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
94
|
-
placeholder: 'Condition',
|
|
95
|
-
value: option.condition,
|
|
96
|
-
})
|
|
97
|
-
.appendTo(row)
|
|
98
|
-
.typedInput({
|
|
99
|
-
type: 'str',
|
|
100
|
-
types: ['str'],
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
// Create delete button for the option
|
|
104
|
-
const finalSpan = $('<span/>', {
|
|
105
|
-
style: 'float:right; margin-right:8px;',
|
|
106
|
-
}).appendTo(row);
|
|
107
|
-
const deleteButton = $('<a/>', {
|
|
108
|
-
href: '#',
|
|
109
|
-
class: 'editor-button editor-button-small',
|
|
110
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
111
|
-
}).appendTo(finalSpan);
|
|
112
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
113
|
-
|
|
114
|
-
deleteButton.click(function () {
|
|
115
|
-
container.css({
|
|
116
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
117
|
-
});
|
|
118
|
-
container.fadeOut(300, function () {
|
|
119
|
-
$(this).remove();
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
$('#node-input-option-container').append(container);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function generateColumn(i, column) {
|
|
127
|
-
const container = $('<li/>', {
|
|
128
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
// Create input fields for value and label
|
|
132
|
-
const row = $('<div/>').appendTo(container);
|
|
133
|
-
$('<input/>', {
|
|
134
|
-
class: 'node-input-column-value',
|
|
135
|
-
type: 'text',
|
|
136
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
137
|
-
placeholder: 'Value',
|
|
138
|
-
value: column.value,
|
|
139
|
-
})
|
|
140
|
-
.appendTo(row)
|
|
141
|
-
.typedInput({ default: column.type || 'str', types: ['str'] });
|
|
142
|
-
|
|
143
|
-
$('<input/>', {
|
|
144
|
-
class: 'node-input-column-label',
|
|
145
|
-
type: 'text',
|
|
146
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
147
|
-
placeholder: 'Label',
|
|
148
|
-
value: column.label,
|
|
149
|
-
})
|
|
150
|
-
.appendTo(row)
|
|
151
|
-
.typedInput({
|
|
152
|
-
type: 'str',
|
|
153
|
-
types: ['str'],
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
// Create delete button for the column
|
|
157
|
-
const finalSpan = $('<span/>', {
|
|
158
|
-
style: 'float:right; margin-right:8px;',
|
|
159
|
-
}).appendTo(row);
|
|
160
|
-
const deleteButton = $('<a/>', {
|
|
161
|
-
href: '#',
|
|
162
|
-
class: 'editor-button editor-button-small',
|
|
163
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
164
|
-
}).appendTo(finalSpan);
|
|
165
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
166
|
-
|
|
167
|
-
deleteButton.click(function () {
|
|
168
|
-
container.css({
|
|
169
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
170
|
-
});
|
|
171
|
-
container.fadeOut(300, function () {
|
|
172
|
-
$(this).remove();
|
|
173
|
-
});
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
$('#node-input-column-container').append(container);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
$('#node-input-add-column').click(function () {
|
|
180
|
-
generateColumn($('#node-input-column-container').children().length + 1, {});
|
|
181
|
-
$('#node-input-column-container-div').scrollTop(
|
|
182
|
-
$('#node-input-column-container-div').get(0).scrollHeight
|
|
183
|
-
);
|
|
184
|
-
});
|
|
185
|
-
|
|
186
|
-
for (let i = 0; i < this.columns.length; i++) {
|
|
187
|
-
const column = this.columns[i];
|
|
188
|
-
generateColumn(i + 1, column);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
$('#node-input-column-container').sortable({
|
|
192
|
-
axis: 'y',
|
|
193
|
-
handle: '.node-input-column-handle',
|
|
194
|
-
cursor: 'move',
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
$('#node-input-add-option').click(function () {
|
|
198
|
-
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
199
|
-
$('#node-input-option-container-div').scrollTop(
|
|
200
|
-
$('#node-input-option-container-div').get(0).scrollHeight
|
|
201
|
-
);
|
|
202
|
-
});
|
|
203
|
-
|
|
204
|
-
for (let i = 0; i < this.options.length; i++) {
|
|
205
|
-
const option = this.options[i];
|
|
206
|
-
generateOption(i + 1, option);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
$('#node-input-option-container').sortable({
|
|
210
|
-
axis: 'y',
|
|
211
|
-
handle: '.node-input-option-handle',
|
|
212
|
-
cursor: 'move',
|
|
213
|
-
});
|
|
214
|
-
|
|
215
|
-
$('#node-input-data').typedInput({
|
|
216
|
-
default: 'msg',
|
|
217
|
-
types: ['msg', 'json', 'flow', 'global'],
|
|
218
|
-
});
|
|
219
|
-
|
|
220
|
-
$('#node-input-data').typedInput('value', this.data);
|
|
221
|
-
$('#node-input-data').typedInput('type', this.data_type);
|
|
222
|
-
},
|
|
223
|
-
oneditsave: function () {
|
|
224
|
-
const options = $('#node-input-option-container').children();
|
|
225
|
-
const node = this;
|
|
226
|
-
node.options = [];
|
|
227
|
-
options.each(function (i) {
|
|
228
|
-
const option = $(this);
|
|
229
|
-
const o = {
|
|
230
|
-
label: option.find('.node-input-option-label').val(),
|
|
231
|
-
condition: option.find('.node-input-option-condition').val(),
|
|
232
|
-
};
|
|
233
|
-
|
|
234
|
-
node.options.push(o);
|
|
235
|
-
});
|
|
236
|
-
|
|
237
|
-
const columns = $('#node-input-column-container').children();
|
|
238
|
-
node.columns = [];
|
|
239
|
-
columns.each(function (i) {
|
|
240
|
-
const column = $(this);
|
|
241
|
-
const c = {
|
|
242
|
-
label: column.find('.node-input-column-label').val(),
|
|
243
|
-
value: column.find('.node-input-column-value').typedInput('value'),
|
|
244
|
-
type: column.find('.node-input-column-value').typedInput('type'),
|
|
245
|
-
};
|
|
246
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'num') {
|
|
247
|
-
c.value = Number(c.value);
|
|
248
|
-
}
|
|
249
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
|
|
250
|
-
c.value = c.value === 'true';
|
|
251
|
-
}
|
|
252
|
-
node.columns.push(c);
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
this.outputs = node.options.length || 1;
|
|
256
|
-
|
|
257
|
-
(this.data = $('#node-input-data').typedInput('value')),
|
|
258
|
-
(this.data_type = $('#node-input-data').typedInput('type'));
|
|
86
|
+
{
|
|
87
|
+
value: 'outside',
|
|
88
|
+
label: 'Outside of card',
|
|
89
|
+
hasValue: false,
|
|
259
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
|
+
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',
|
|
260
217
|
});
|
|
261
|
-
|
|
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
|
+
});
|
|
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
|
+
})();
|
|
262
282
|
</script>
|
|
263
283
|
|
|
264
284
|
<script type="text/html" data-template-name="ui-dynamic-table">
|
|
@@ -321,34 +341,54 @@
|
|
|
321
341
|
<div class="form-row">
|
|
322
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>
|
|
323
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.">
|
|
362
|
+
</div>
|
|
363
|
+
<hr />
|
|
324
364
|
</script>
|
|
325
365
|
|
|
326
366
|
<script type="text/markdown" data-help-name="ui-dynamic-table">
|
|
327
|
-
A Node to dynamicly display arrays of data in a table with actions for every row.
|
|
367
|
+
A Node to dynamicly display arrays of data in a table with actions for every row.
|
|
328
368
|
|
|
329
|
-
## Actions
|
|
369
|
+
## Actions
|
|
330
370
|
|
|
331
|
-
Define a label for the action button that is going be displayed and a condition for when it should be displayed.
|
|
332
|
-
Inside the condition you have access to every key from the current row.
|
|
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.
|
|
333
373
|
|
|
334
|
-
### Inputs
|
|
374
|
+
### Inputs
|
|
335
375
|
|
|
336
|
-
: Table name (string) : The name of the table.
|
|
337
|
-
: Group (string) : The groud in which the Component is rendered.
|
|
338
|
-
: Size (string) : The size of the table within the group.
|
|
339
|
-
: Data (string) : The property of msg.payload from where the table data is sourced.
|
|
340
|
-
: Actions (string) : The actions of each row. Each action corresponds to an output of the node.
|
|
341
|
-
: Columns (string) : The columns of the table. Must correspond to a key of the data property.
|
|
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.
|
|
342
382
|
|
|
343
|
-
### Outputs
|
|
383
|
+
### Outputs
|
|
344
384
|
|
|
345
|
-
The outputs are generated dynamicly based on the actions of the table.
|
|
385
|
+
The outputs are generated dynamicly based on the actions of the table.
|
|
346
386
|
|
|
347
|
-
### Details
|
|
387
|
+
### Details
|
|
348
388
|
|
|
349
|
-
`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.
|
|
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.
|
|
350
390
|
|
|
351
|
-
### Referece
|
|
391
|
+
### Referece
|
|
352
392
|
|
|
353
|
-
[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
|
|
393
|
+
[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
|
|
354
394
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-feature-953474-mcevwszq",
|
|
4
4
|
"description": "A ui component for showing dynamic Data with actions in a table",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"processcube",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("h1[data-v-
|
|
2
|
-
(function(
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("h1{margin-bottom:10px}h2{margin-top:1.5rem;margin-bottom:.75rem}h3{margin-top:1rem}p{margin-bottom:5px}ul li{list-style-type:circle;list-style-position:inside;margin-left:15px}pre{padding:12px;margin:12px;background-color:#eee}code{font-size:.825rem;color:#ae0000}input{padding:12px;margin:12px;background-color:#eee}.task-div{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container{width:100%;display:flex;justify-content:center}.full-width-table{--v-table-header-height: 40px !important;background-color:#fff;border-radius:0 0 8px 8px}.full-width-table .v-toolbar,.full-width-table .v-table__wrapper .v-alert--variant-flat{background:unset!important;color:unset!important}.full-width-table :deep(thead th){border-bottom:4px solid rgb(var(--v-theme-primary))!important;font-weight:700!important;font-size:16px!important}.full-width-table :deep(tbody){background-color:unset!important;--widget-row-height: 40px !important;font-size:16px}.search-input :deep(.v-field__outline__end){border:none!important}.search-input :deep(.v-field__outline__start){border:none!important}.search-input :deep(.v-field__outline){display:none!important}.search-input :deep(.v-label){font-size:14px!important}.search-input :deep(.v-field){border-radius:0 0 0 8px;border-bottom:2px solid rgb(var(--v-theme-primary))!important;border-left:2px solid rgb(var(--v-theme-primary))!important;border-right:none!important;border-top:none!important;transition:border-width .1s ease-in-out;margin-bottom:8px}.search-input :deep(.v-field__input){font-size:18px;font-weight:400;font-style:normal;padding:4px 8px}.search-input:focus-within :deep(.v-field){border-bottom:4px solid rgb(var(--v-theme-primary))!important;border-left:4px solid rgb(var(--v-theme-primary))!important}.search-input:focus-within :deep(.v-field__input){background-color:#f6f5fa;border-radius:0 8px 0 5px}.action-button{border-radius:8px;background-color:transparent!important;border-color:rgb(var(--v-theme-primary));border:2px solid;color:rgb(var(--v-theme-primary));padding:8px}.ui-dynamic-table-container{border-radius:8px;border-bottom:4px solid rgb(var(--v-theme-primary));box-shadow:0 4px 16px -3px #00000080}.ui-dynamic-table-title-default{background:linear-gradient(131deg,#18181a 26.76%,#242326 100.16%);padding:32px;color:#fff;font-size:36px;font-weight:700;border-radius:8px 8px 0 0;margin-top:0;border:2px solid #f6f5fa;border-bottom:none;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.ui-dynamic-table-title-default hr{border:4px solid rgb(var(--v-theme-primary));border-radius:2px}.ui-dynamic-table-title-minimal{padding:16px;margin-top:0;border:2px solid #f6f5fa;border-bottom:none}.ui-dynamic-table-title-outside{padding-bottom:24px;padding-top:24px;font-size:24px;font-weight:700}h1[data-v-8295c023]{margin-bottom:10px}h2[data-v-8295c023]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-8295c023]{margin-top:1rem}p[data-v-8295c023]{margin-bottom:5px}ul li[data-v-8295c023]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-8295c023]{padding:12px;margin:12px;background-color:#eee}code[data-v-8295c023]{font-size:.825rem;color:#ae0000}input[data-v-8295c023]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-8295c023]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-8295c023]{width:100%;display:flex;justify-content:center}.full-width-table[data-v-8295c023]{--v-table-header-height: 40px !important;background-color:#fff;border-radius:0 0 8px 8px}.full-width-table .v-toolbar[data-v-8295c023],.full-width-table .v-table__wrapper .v-alert--variant-flat[data-v-8295c023]{background:unset!important;color:unset!important}.full-width-table[data-v-8295c023] thead th{border-bottom:4px solid rgb(var(--v-theme-primary))!important;font-weight:700!important;font-size:16px!important}.full-width-table[data-v-8295c023] tbody{background-color:unset!important;--widget-row-height: 40px !important;font-size:16px}.search-input[data-v-8295c023] .v-field__outline__end,.search-input[data-v-8295c023] .v-field__outline__start{border:none!important}.search-input[data-v-8295c023] .v-field__outline{display:none!important}.search-input[data-v-8295c023] .v-label{font-size:14px!important}.search-input[data-v-8295c023] .v-field{border-radius:0 0 0 8px;border-bottom:2px solid rgb(var(--v-theme-primary))!important;border-left:2px solid rgb(var(--v-theme-primary))!important;border-right:none!important;border-top:none!important;transition:border-width .1s ease-in-out;margin-bottom:8px}.search-input[data-v-8295c023] .v-field__input{font-size:18px;font-weight:400;font-style:normal;padding:4px 8px}.search-input[data-v-8295c023]:focus-within .v-field{border-bottom:4px solid rgb(var(--v-theme-primary))!important;border-left:4px solid rgb(var(--v-theme-primary))!important}.search-input[data-v-8295c023]:focus-within .v-field__input{background-color:#f6f5fa;border-radius:0 8px 0 5px}.action-button[data-v-8295c023]{border-radius:8px;background-color:transparent!important;border-color:rgb(var(--v-theme-primary));border:2px solid;color:rgb(var(--v-theme-primary));padding:8px}.ui-dynamic-table-container[data-v-8295c023]{border-radius:8px;border-bottom:4px solid rgb(var(--v-theme-primary));box-shadow:0 4px 16px -3px #00000080}.ui-dynamic-table-title-default[data-v-8295c023]{background:linear-gradient(131deg,#18181a 26.76%,#242326 100.16%);padding:32px;color:#fff;font-size:36px;font-weight:700;border-radius:8px 8px 0 0;margin-top:0;border:2px solid #f6f5fa;border-bottom:none;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.ui-dynamic-table-title-default hr[data-v-8295c023]{border:4px solid rgb(var(--v-theme-primary));border-radius:2px}.ui-dynamic-table-title-minimal[data-v-8295c023]{padding:16px;margin-top:0;border:2px solid #f6f5fa;border-bottom:none}.ui-dynamic-table-title-outside[data-v-8295c023]{padding-bottom:24px;padding-top:24px;font-size:24px;font-weight:700}")),document.head.appendChild(t)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
+
(function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l["ui-dynamic-table"]={},l.vuex,l.Vue))})(this,function(l,s,t){"use strict";const m=(e,i)=>{const n=e.__vccOpts||e;for(const[a,o]of i)n[a]=o;return n},h={name:"UIDynamicTableTitleText",props:{style:{type:String,default(){return"default"}},title:{type:String,default(){return""}},customStyles:{type:String,default(){return""}},titleIcon:{type:String,default(){return""}}},computed:{typeSpecificStyling(){return`ui-dynamic-table-title-${this.style}`}}},y={key:0},_=["src"],f={key:1};function u(e,i,n,a,o,c){return n.title.length>0?(t.openBlock(),t.createElementBlock("div",y,[t.createElementVNode("h3",{class:t.normalizeClass(c.typeSpecificStyling),style:{display:"flex",gap:"25px","align-items":"center"}},[t.createElementVNode("div",{style:t.normalizeStyle({width:"fit-content",display:n.style==="default"?"":"flex"})},[n.titleIcon.length>0?(t.openBlock(),t.createElementBlock("img",{key:0,src:n.titleIcon,style:{"padding-right":"16px"}},null,8,_)):t.createCommentVNode("",!0),t.createElementVNode("span",{style:t.normalizeStyle(n.customStyles)},t.toDisplayString(n.title),5),n.style==="default"?(t.openBlock(),t.createElementBlock("hr",f)):t.createCommentVNode("",!0)],4)],2)])):t.createCommentVNode("",!0)}const k={name:"UIDynamicTable",components:{UIDynamicTableTitleText:m(h,[["render",u]])},inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},computed:{...s.mapState("data",["messages"])},data(){return{search:"",actions:[],tasks:[],headers:[]}},mounted(){this.$socket.on("widget-load:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.on("msg-input:"+this.id,e=>{Array.isArray(e)&&(e=e.filter(i=>i._client.socketId==this.$socket.id)[0]),this.initialize(e),this.messages[this.id]=e,this.$store.commit("data/bind",{widgetId:this.id,msg:e})}),this.$socket.emit("widget-load",this.id)},unmounted(){var e,i;(e=this.$socket)==null||e.off("widget-load"+this.id),(i=this.$socket)==null||i.off("msg-input:"+this.id)},methods:{send(e,i){const n=[];n[i]=e,this.$socket.emit("widget-action",this.id,n)},actionFn(e,i){const n=this.messages[this.id]||{};n.payload=i,this.send(n,this.actions.findIndex(a=>a.label===e.label))},initialize(e){this.tasks=e.payload,this.actions=this.props.options,this.headers=this.props.columns.map(i=>({title:i.label,key:i.value})),this.headers.push({title:"Actions",align:"center",key:"actions"})},conditionCheck(e,i){if(e=="")return!0;try{return new Function("row",`return ${e}`)(i)}catch(n){return console.error("Error evaluating condition:",n),!1}}}},x={class:"ui-dynamic-table-container"};function g(e,i,n,a,o,c){const C=t.resolveComponent("UIDynamicTableTitleText"),S=t.resolveComponent("v-text-field"),T=t.resolveComponent("v-toolbar"),w=t.resolveComponent("v-btn"),p=t.resolveComponent("v-container"),I=t.resolveComponent("v-alert"),V=t.resolveComponent("v-data-table");return t.openBlock(),t.createElementBlock("div",x,[n.props.title_text&&n.props.title_text.length>0?(t.openBlock(),t.createBlock(C,{key:0,title:n.props.title_text,style:t.normalizeStyle(n.props.title_style||"default"),customStyles:n.props.title_custom_text_styling||"",titleIcon:n.props.title_icon||""},null,8,["title","style","customStyles","titleIcon"])):t.createCommentVNode("",!0),t.createVNode(V,{headers:o.headers,items:o.tasks,search:o.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(T,{flat:"",class:"pb-2 pt-8"},{default:t.withCtx(()=>[t.createVNode(S,{class:"mx-3 search-input",modelValue:o.search,"onUpdate:modelValue":i[0]||(i[0]=r=>o.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(o.actions,(d,B)=>(t.openBlock(),t.createBlock(p,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[c.conditionCheck(d.condition,r)?(t.openBlock(),t.createBlock(w,{style:{margin:"0px 2px"},class:"action-button",key:B,size:"small",onClick:D=>c.actionFn(d,r)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(d.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(I,{text:"No Data",style:{margin:"12px"}})]),_:1},8,["headers","items","search"])])}const b=m(k,[["render",g],["__scopeId","data-v-8295c023"]]);l.UIDynamicTable=b,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div v-if="title.length > 0">
|
|
3
|
+
<h3 :class="typeSpecificStyling" style="display: flex; gap: 25px; align-items: center">
|
|
4
|
+
<div :style="{ width: 'fit-content', display: style === 'default' ? '' : 'flex' }">
|
|
5
|
+
<img v-if="titleIcon.length > 0" :src="titleIcon" style="padding-right: 16px;">
|
|
6
|
+
<span :style="customStyles">{{ title }}</span>
|
|
7
|
+
<hr v-if="style === 'default'">
|
|
8
|
+
</div>
|
|
9
|
+
</h3>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
name: 'UIDynamicTableTitleText',
|
|
17
|
+
props: {
|
|
18
|
+
style: { type: String, default() { return 'default' } },
|
|
19
|
+
title: { type: String, default() { return '' } },
|
|
20
|
+
customStyles: { type: String, default() { return '' } },
|
|
21
|
+
titleIcon: { type: String, default() { return '' } }
|
|
22
|
+
},
|
|
23
|
+
computed: {
|
|
24
|
+
typeSpecificStyling() {
|
|
25
|
+
return `ui-dynamic-table-title-${this.style}`
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<style>
|
|
33
|
+
/* CSS is auto scoped, but using named classes is still recommended */
|
|
34
|
+
@import '../stylesheets/ui-dynamic-table.css';
|
|
35
|
+
</style>
|
|
@@ -1,47 +1,43 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
style="margin: 0px 2px"
|
|
24
|
-
v-if="conditionCheck(action.condition, item)"
|
|
25
|
-
:key="index"
|
|
26
|
-
size="small"
|
|
27
|
-
@click="actionFn(action, item)"
|
|
28
|
-
>
|
|
29
|
-
{{ action.label }}
|
|
30
|
-
</v-btn>
|
|
2
|
+
<div class="ui-dynamic-table-container">
|
|
3
|
+
<UIDynamicTableTitleText v-if="props.title_text && props.title_text.length > 0" :title="props.title_text"
|
|
4
|
+
:style="props.title_style || 'default'" :customStyles="props.title_custom_text_styling || ''"
|
|
5
|
+
:titleIcon="props.title_icon || ''" />
|
|
6
|
+
<v-data-table :headers="headers" :items="tasks" :search="search" class="full-width-table">
|
|
7
|
+
<template v-slot:top>
|
|
8
|
+
<v-toolbar flat class="pb-2 pt-8">
|
|
9
|
+
<v-text-field class="mx-3 search-input" v-model="search" label="Search"
|
|
10
|
+
prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
|
|
11
|
+
</v-toolbar>
|
|
12
|
+
</template>
|
|
13
|
+
<template v-slot:item.actions="{ item }">
|
|
14
|
+
<v-container class="action-button-container">
|
|
15
|
+
<v-container v-for="(action, index) in actions"
|
|
16
|
+
style="padding: 0px; display: inline; width: fit-content; margin: 0px">
|
|
17
|
+
<v-btn style="margin: 0px 2px" class="action-button"
|
|
18
|
+
v-if="conditionCheck(action.condition, item)" :key="index" size="small"
|
|
19
|
+
@click="actionFn(action, item)">
|
|
20
|
+
{{ action.label }}
|
|
21
|
+
</v-btn>
|
|
22
|
+
</v-container>
|
|
31
23
|
</v-container>
|
|
32
|
-
</
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</
|
|
37
|
-
</
|
|
24
|
+
</template>
|
|
25
|
+
<template v-slot:no-data>
|
|
26
|
+
<v-alert text="No Data" style="margin: 12px"></v-alert>
|
|
27
|
+
</template>
|
|
28
|
+
</v-data-table>
|
|
29
|
+
</div>
|
|
38
30
|
</template>
|
|
39
31
|
|
|
40
32
|
<script>
|
|
41
33
|
import { mapState } from 'vuex';
|
|
34
|
+
import UIDynamicTableTitleText from './TitleText.vue'
|
|
42
35
|
|
|
43
36
|
export default {
|
|
44
37
|
name: 'UIDynamicTable',
|
|
38
|
+
components: {
|
|
39
|
+
UIDynamicTableTitleText
|
|
40
|
+
},
|
|
45
41
|
inject: ['$socket'],
|
|
46
42
|
props: {
|
|
47
43
|
/* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
|
|
@@ -1,94 +1,171 @@
|
|
|
1
1
|
h1 {
|
|
2
|
-
|
|
2
|
+
margin-bottom: 10px;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
h2 {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
margin-top: 1.5rem;
|
|
7
|
+
margin-bottom: 0.75rem;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
h3 {
|
|
11
|
-
|
|
11
|
+
margin-top: 1rem;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
p {
|
|
15
|
-
|
|
15
|
+
margin-bottom: 5px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
ul li {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
list-style-type: circle;
|
|
20
|
+
list-style-position: inside;
|
|
21
|
+
margin-left: 15px;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
pre {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
padding: 12px;
|
|
26
|
+
margin: 12px;
|
|
27
|
+
background-color: #eee;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
code {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
font-size: 0.825rem;
|
|
32
|
+
color: #ae0000;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
input {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
padding: 12px;
|
|
37
|
+
margin: 12px;
|
|
38
|
+
background-color: #eee;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.task-div {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
padding: 8px;
|
|
43
|
+
margin: 16px;
|
|
44
|
+
border: solid;
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
border-color: #303030;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.action-button-container {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
width: 100%;
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: center;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.full-width-table {
|
|
56
56
|
--v-table-header-height: 40px !important;
|
|
57
|
+
background-color: #fff;
|
|
58
|
+
border-radius: 0px 0px 8px 8px;
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
.full-width-table .v-toolbar {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
background: unset !important;
|
|
63
|
+
color: unset !important;
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
.full-width-table .v-table__wrapper .v-alert--variant-flat {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
background: unset !important;
|
|
68
|
+
color: unset !important;
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
.full-width-table
|
|
70
|
-
border-bottom: 4px solid
|
|
71
|
+
.full-width-table :deep(thead th) {
|
|
72
|
+
border-bottom: 4px solid rgb(var(--v-theme-primary)) !important;
|
|
71
73
|
font-weight: 700 !important;
|
|
72
74
|
font-size: 16px !important;
|
|
73
75
|
}
|
|
74
76
|
|
|
75
|
-
.full-width-table
|
|
76
|
-
background-color:
|
|
77
|
+
.full-width-table :deep(tbody) {
|
|
78
|
+
background-color: unset !important;
|
|
77
79
|
--widget-row-height: 40px !important;
|
|
78
80
|
font-size: 16px;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
.search-input
|
|
82
|
-
border
|
|
83
|
-
border-top: none;
|
|
84
|
-
border-radius: 0px;
|
|
83
|
+
.search-input :deep(.v-field__outline__end) {
|
|
84
|
+
border: none !important;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
.search-input
|
|
87
|
+
.search-input :deep(.v-field__outline__start) {
|
|
88
|
+
border: none !important;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.search-input :deep(.v-field__outline) {
|
|
92
|
+
display: none !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.search-input :deep(.v-label) {
|
|
88
96
|
font-size: 14px !important;
|
|
89
97
|
}
|
|
90
98
|
|
|
91
|
-
.search-input
|
|
99
|
+
.search-input :deep(.v-field) {
|
|
92
100
|
border-radius: 0px 0px 0px 8px;
|
|
93
|
-
border-
|
|
101
|
+
border-bottom: 2px solid rgb(var(--v-theme-primary)) !important;
|
|
102
|
+
border-left: 2px solid rgb(var(--v-theme-primary)) !important;
|
|
103
|
+
border-right: none !important;
|
|
104
|
+
border-top: none !important;
|
|
105
|
+
transition: border-width 0.1s ease-in-out;
|
|
106
|
+
margin-bottom: 8px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.search-input :deep(.v-field__input) {
|
|
110
|
+
font-size: 18px;
|
|
111
|
+
font-weight: 400;
|
|
112
|
+
font-style: normal;
|
|
113
|
+
padding: 4px 8px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.search-input:focus-within :deep(.v-field) {
|
|
117
|
+
border-bottom: 4px solid rgb(var(--v-theme-primary)) !important;
|
|
118
|
+
border-left: 4px solid rgb(var(--v-theme-primary)) !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.search-input:focus-within :deep(.v-field__input) {
|
|
122
|
+
background-color: #f6f5fa;
|
|
123
|
+
border-radius: 0 8px 0px 5px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.action-button {
|
|
127
|
+
border-radius: 8px;
|
|
128
|
+
background-color: transparent !important;
|
|
129
|
+
border-color: rgb(var(--v-theme-primary));
|
|
130
|
+
border: 2px solid;
|
|
131
|
+
color: rgb(var(--v-theme-primary));
|
|
132
|
+
padding: 8px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ui-dynamic-table-container {
|
|
136
|
+
border-radius: 8px;
|
|
137
|
+
border-bottom: 4px solid rgb(var(--v-theme-primary));
|
|
138
|
+
box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.ui-dynamic-table-title-default {
|
|
142
|
+
background: linear-gradient(131deg, #18181a 26.76%, #242326 100.16%);
|
|
143
|
+
padding: 32px;
|
|
144
|
+
color: #ffffff;
|
|
145
|
+
font-size: 36px;
|
|
146
|
+
font-weight: 700;
|
|
147
|
+
border-radius: 8px 8px 0px 0px;
|
|
148
|
+
margin-top: 0px;
|
|
149
|
+
border: 2px solid #f6f5fa;
|
|
150
|
+
border-bottom: none;
|
|
151
|
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ui-dynamic-table-title-default hr {
|
|
155
|
+
border: 4px solid rgb(var(--v-theme-primary));
|
|
156
|
+
border-radius: 2px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ui-dynamic-table-title-minimal {
|
|
160
|
+
padding: 16px;
|
|
161
|
+
margin-top: 0px;
|
|
162
|
+
border: 2px solid #f6f5fa;
|
|
163
|
+
border-bottom: none;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.ui-dynamic-table-title-outside {
|
|
167
|
+
padding-bottom: 24px;
|
|
168
|
+
padding-top: 24px;
|
|
169
|
+
font-size: 24px;
|
|
170
|
+
font-weight: 700;
|
|
94
171
|
}
|