@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.2-develop-231918-m7na5yab → 1.1.2-feature-997de4-m7nhlmql
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/ui-dynamic-form.html +209 -30
- package/package.json +1 -1
- package/resources/ui-dynamic-form.umd.js +2 -2
- package/ui/components/FooterActions.vue +52 -0
- package/ui/components/TitleText.vue +35 -0
- package/ui/components/UIDynamicForm.vue +194 -117
- package/ui/stylesheets/ui-dynamic-form.css +121 -41
|
@@ -1,71 +1,78 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
v-if="createComponent(field).innerText"
|
|
14
|
-
v-bind="createComponent(field).props"
|
|
15
|
-
v-model="formData[field.id]"
|
|
16
|
-
>
|
|
17
|
-
{{ createComponent(field).innerText }}
|
|
18
|
-
</component>
|
|
19
|
-
<div v-else-if="createComponent(field).type == 'v-slider'">
|
|
20
|
-
<p class="formkit-label">{{ field.label }}</p>
|
|
2
|
+
<div className="ui-dynamic-form-external-sizing-wrapper" :style="props.card_size_styling">
|
|
3
|
+
<!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
|
|
4
|
+
<UIDynamicFormTitleText v-if="props.title_style === 'outside' && hasUserTask()" :style="props.title_style" :title="props.title_text" :customStyles="props.title_custom_text_styling" :titleIcon="props.title_icon" />
|
|
5
|
+
<div className="ui-dynamic-form-wrapper">
|
|
6
|
+
<p v-if="hasUserTask()" style="margin-bottom: 0px;">
|
|
7
|
+
<v-form ref="form" v-model="form" :class="dynamicClass">
|
|
8
|
+
<UIDynamicFormTitleText v-if="props.title_style != 'outside'" :style="props.title_style" :title="props.title_text" :customStyles="props.title_custom_text_styling" :titleIcon="props.title_icon" />
|
|
9
|
+
<div className="ui-dynamic-form-formfield-positioner">
|
|
10
|
+
<FormKit id="form" type="group">
|
|
11
|
+
<v-row v-for="(field, index) in fields()" :key="field" :style="getRowWidthStyling(field, index)">
|
|
12
|
+
<v-col cols="12">
|
|
21
13
|
<component
|
|
22
14
|
:is="createComponent(field).type"
|
|
15
|
+
v-if="createComponent(field).innerText"
|
|
23
16
|
v-bind="createComponent(field).props"
|
|
24
|
-
v-model="field.
|
|
17
|
+
v-model="formData[field.id]"
|
|
18
|
+
>
|
|
19
|
+
{{ createComponent(field).innerText }}
|
|
20
|
+
</component>
|
|
21
|
+
<div v-else-if="createComponent(field).type == 'v-slider'">
|
|
22
|
+
<p class="formkit-label">{{ field.label }}</p>
|
|
23
|
+
<component
|
|
24
|
+
:is="createComponent(field).type"
|
|
25
|
+
v-bind="createComponent(field).props"
|
|
26
|
+
v-model="field.defaultValue"
|
|
27
|
+
/>
|
|
28
|
+
<p class="formkit-help">
|
|
29
|
+
{{ field.customForm ? JSON.parse(field.customForm).hint : undefined }}
|
|
30
|
+
</p>
|
|
31
|
+
</div>
|
|
32
|
+
<component
|
|
33
|
+
:is="createComponent(field).type"
|
|
34
|
+
v-else
|
|
35
|
+
v-bind="createComponent(field).props"
|
|
36
|
+
v-model="formData[field.id]"
|
|
25
37
|
/>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
v-bind="createComponent(field).props"
|
|
34
|
-
v-model="formData[field.id]"
|
|
35
|
-
/>
|
|
36
|
-
</v-col>
|
|
38
|
+
</v-col>
|
|
39
|
+
</v-row>
|
|
40
|
+
</FormKit>
|
|
41
|
+
</div>
|
|
42
|
+
<v-row :class="dynamicFooterClass">
|
|
43
|
+
<v-row v-if="error" style="padding: 12px">
|
|
44
|
+
<v-alert v-if="error" type="error">Error: {{ errorMsg }}</v-alert>
|
|
37
45
|
</v-row>
|
|
38
|
-
|
|
39
|
-
</div>
|
|
40
|
-
<v-row :class="dynamicFooterClass">
|
|
41
|
-
<v-row v-if="error" style="padding: 12px">
|
|
42
|
-
<v-alert v-if="error" type="error">Error: {{ errorMsg }}</v-alert>
|
|
46
|
+
<UIDynamicFormFooterAction v-if="props.actions_inside_card && actions.length > 0" :actions="actions" :actionCallback="actionFn" style="padding: 16px; padding-top: 0px;" />
|
|
43
47
|
</v-row>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</p>
|
|
54
|
-
<p v-else>
|
|
55
|
-
<v-alert :text="waiting_info" :title="waiting_title" />
|
|
56
|
-
</p>
|
|
48
|
+
</v-form>
|
|
49
|
+
</p>
|
|
50
|
+
<p v-else>
|
|
51
|
+
<v-alert :text="waiting_info" :title="waiting_title" />
|
|
52
|
+
</p>
|
|
53
|
+
</div>
|
|
54
|
+
<div v-if="!props.actions_inside_card && actions.length > 0 && hasUserTask()" style="padding-top: 32px;">
|
|
55
|
+
<UIDynamicFormFooterAction :actions="actions" :actionCallback="actionFn" />
|
|
56
|
+
</div>
|
|
57
57
|
</div>
|
|
58
58
|
</template>
|
|
59
59
|
|
|
60
|
+
<!-- eslint-disable no-case-declarations -->
|
|
60
61
|
<script>
|
|
61
62
|
import { FormKit, defaultConfig, plugin } from '@formkit/vue'
|
|
62
|
-
import { getCurrentInstance,
|
|
63
|
+
import { getCurrentInstance, markRaw } from 'vue'
|
|
63
64
|
import { mapState } from 'vuex'
|
|
65
|
+
|
|
66
|
+
// eslint-disable-next-line import/no-unresolved
|
|
64
67
|
import '@formkit/themes/genesis'
|
|
65
|
-
import
|
|
68
|
+
import UIDynamicFormFooterAction from './FooterActions.vue'
|
|
69
|
+
import UIDynamicFormTitleText from './TitleText.vue'
|
|
66
70
|
|
|
67
71
|
export default {
|
|
68
72
|
name: 'UIDynamicForm',
|
|
73
|
+
components: {
|
|
74
|
+
FormKit, UIDynamicFormFooterAction, UIDynamicFormTitleText
|
|
75
|
+
},
|
|
69
76
|
inject: ['$socket'],
|
|
70
77
|
props: {
|
|
71
78
|
/* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
|
|
@@ -97,6 +104,37 @@ export default {
|
|
|
97
104
|
errorMsg: ''
|
|
98
105
|
}
|
|
99
106
|
},
|
|
107
|
+
computed: {
|
|
108
|
+
...mapState('data', ['messages']),
|
|
109
|
+
waiting_title () {
|
|
110
|
+
return this.props.waiting_title || 'Warten auf den Usertask...'
|
|
111
|
+
},
|
|
112
|
+
waiting_info () {
|
|
113
|
+
return (
|
|
114
|
+
this.props.waiting_info ||
|
|
115
|
+
'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
|
|
116
|
+
)
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
dynamicClass () {
|
|
120
|
+
return `ui-dynamic-form-${this.theme} ui-dynamic-form-common`
|
|
121
|
+
},
|
|
122
|
+
|
|
123
|
+
dynamicFooterClass () {
|
|
124
|
+
return `ui-dynamic-form-footer-${this.theme} ui-dynamic-form-footer-common`
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
watch: {
|
|
128
|
+
formData: {
|
|
129
|
+
handler (newData, oldData) {
|
|
130
|
+
if (this.props.trigger_on_change) {
|
|
131
|
+
const res = { payload: { formData: newData, userTask: this.taskInput } }
|
|
132
|
+
this.send(res, this.actions.length)
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
deep: true
|
|
136
|
+
}
|
|
137
|
+
},
|
|
100
138
|
created () {
|
|
101
139
|
const currentPath = window.location.pathname
|
|
102
140
|
const lastPart = currentPath.substring(currentPath.lastIndexOf('/'))
|
|
@@ -117,26 +155,6 @@ export default {
|
|
|
117
155
|
}
|
|
118
156
|
}
|
|
119
157
|
},
|
|
120
|
-
computed: {
|
|
121
|
-
...mapState('data', ['messages']),
|
|
122
|
-
waiting_title () {
|
|
123
|
-
return this.props.waiting_title || 'Warten auf den Usertask...'
|
|
124
|
-
},
|
|
125
|
-
waiting_info () {
|
|
126
|
-
return (
|
|
127
|
-
this.props.waiting_info ||
|
|
128
|
-
'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
|
|
129
|
-
)
|
|
130
|
-
},
|
|
131
|
-
|
|
132
|
-
dynamicClass () {
|
|
133
|
-
return `ui-dynamic-form-${this.theme}`
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
dynamicFooterClass () {
|
|
137
|
-
return `ui-dynamic-form-footer-${this.theme}`
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
158
|
mounted () {
|
|
141
159
|
const elements = document.querySelectorAll('.formkit-input')
|
|
142
160
|
|
|
@@ -158,21 +176,22 @@ export default {
|
|
|
158
176
|
this.messages[this.id] = msg
|
|
159
177
|
|
|
160
178
|
const hasTask = msg.payload && msg.payload.userTask
|
|
161
|
-
const
|
|
179
|
+
const formFields = msg.payload.userTask.userTaskConfig.formFields
|
|
180
|
+
const formFieldIds = formFields.map(ff => ff.id)
|
|
162
181
|
const initialValues = msg.payload.userTask.startToken
|
|
163
182
|
|
|
164
183
|
if (hasTask) {
|
|
165
184
|
this.taskInput = msg.payload.userTask
|
|
166
185
|
}
|
|
167
186
|
|
|
168
|
-
if (hasTask &&
|
|
169
|
-
|
|
187
|
+
if (hasTask && formFields) {
|
|
188
|
+
formFields.forEach((field) => {
|
|
170
189
|
this.formData[field.id] = field.defaultValue
|
|
171
190
|
})
|
|
172
191
|
}
|
|
173
192
|
|
|
174
193
|
if (hasTask && initialValues) {
|
|
175
|
-
Object.keys(initialValues).forEach((key) => {
|
|
194
|
+
Object.keys(initialValues).filter(key => formFieldIds.includes(key)).forEach((key) => {
|
|
176
195
|
this.formData[key] = initialValues[key]
|
|
177
196
|
})
|
|
178
197
|
}
|
|
@@ -186,20 +205,22 @@ export default {
|
|
|
186
205
|
this.$socket.emit('widget-load', this.id)
|
|
187
206
|
},
|
|
188
207
|
unmounted () {
|
|
189
|
-
|
|
208
|
+
/* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
|
|
190
209
|
this.$socket?.off('widget-load' + this.id)
|
|
191
210
|
this.$socket?.off('msg-input:' + this.id)
|
|
192
211
|
},
|
|
193
|
-
components: {
|
|
194
|
-
FormKit
|
|
195
|
-
},
|
|
196
212
|
methods: {
|
|
197
213
|
createComponent (field) {
|
|
198
|
-
const
|
|
199
|
-
const
|
|
200
|
-
const
|
|
214
|
+
const customForm = field.customForm ? JSON.parse(field.customForm) : {}
|
|
215
|
+
const hint = customForm.hint
|
|
216
|
+
const placeholder = customForm.placeholder
|
|
217
|
+
const validation = customForm.validation
|
|
201
218
|
const name = field.id
|
|
202
|
-
|
|
219
|
+
const customProperties = customForm.customProperties ?? []
|
|
220
|
+
const isReadOnly = (
|
|
221
|
+
this.props.readonly || customProperties.find(entry => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true'))
|
|
222
|
+
? 'true'
|
|
223
|
+
: undefined
|
|
203
224
|
switch (field.type) {
|
|
204
225
|
case 'long':
|
|
205
226
|
return {
|
|
@@ -214,8 +235,10 @@ export default {
|
|
|
214
235
|
number: 'integer',
|
|
215
236
|
help: hint,
|
|
216
237
|
wrapperClass: '$remove:formkit-wrapper',
|
|
238
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
217
239
|
inputClass: `input-${this.theme}`,
|
|
218
|
-
innerClass:
|
|
240
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
241
|
+
readonly: isReadOnly,
|
|
219
242
|
validation,
|
|
220
243
|
validationVisibility: 'live'
|
|
221
244
|
}
|
|
@@ -234,8 +257,10 @@ export default {
|
|
|
234
257
|
step,
|
|
235
258
|
help: hint,
|
|
236
259
|
wrapperClass: '$remove:formkit-wrapper',
|
|
260
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
237
261
|
inputClass: `input-${this.theme}`,
|
|
238
|
-
innerClass:
|
|
262
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
263
|
+
readonly: isReadOnly,
|
|
239
264
|
validation,
|
|
240
265
|
validationVisibility: 'live'
|
|
241
266
|
}
|
|
@@ -252,8 +277,10 @@ export default {
|
|
|
252
277
|
value: field.defaultValue,
|
|
253
278
|
help: hint,
|
|
254
279
|
wrapperClass: '$remove:formkit-wrapper',
|
|
280
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
255
281
|
inputClass: `input-${this.theme}`,
|
|
256
|
-
innerClass:
|
|
282
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
283
|
+
readonly: isReadOnly,
|
|
257
284
|
validation,
|
|
258
285
|
validationVisibility: 'live'
|
|
259
286
|
}
|
|
@@ -274,8 +301,11 @@ export default {
|
|
|
274
301
|
options: enums,
|
|
275
302
|
help: hint,
|
|
276
303
|
wrapperClass: '$remove:formkit-wrapper',
|
|
304
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
277
305
|
inputClass: `input-${this.theme}`,
|
|
278
|
-
innerClass:
|
|
306
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
307
|
+
readonly: isReadOnly,
|
|
308
|
+
disabled: isReadOnly,
|
|
279
309
|
validation,
|
|
280
310
|
validationVisibility: 'live'
|
|
281
311
|
}
|
|
@@ -297,8 +327,11 @@ export default {
|
|
|
297
327
|
placeholder,
|
|
298
328
|
help: hint,
|
|
299
329
|
wrapperClass: '$remove:formkit-wrapper',
|
|
330
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
300
331
|
inputClass: `input-${this.theme}`,
|
|
301
|
-
innerClass:
|
|
332
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
333
|
+
readonly: isReadOnly,
|
|
334
|
+
disabled: isReadOnly,
|
|
302
335
|
validation,
|
|
303
336
|
validationVisibility: 'live'
|
|
304
337
|
}
|
|
@@ -316,8 +349,10 @@ export default {
|
|
|
316
349
|
help: hint,
|
|
317
350
|
placeholder,
|
|
318
351
|
wrapperClass: '$remove:formkit-wrapper',
|
|
352
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
319
353
|
inputClass: `input-${this.theme}`,
|
|
320
|
-
innerClass:
|
|
354
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
355
|
+
readonly: isReadOnly,
|
|
321
356
|
validation,
|
|
322
357
|
validationVisibility: 'live'
|
|
323
358
|
}
|
|
@@ -333,8 +368,11 @@ export default {
|
|
|
333
368
|
required: field.required,
|
|
334
369
|
value: field.defaultValue,
|
|
335
370
|
help: hint,
|
|
371
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
336
372
|
inputClass: `input-${this.theme}`,
|
|
337
|
-
innerClass:
|
|
373
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
374
|
+
readonly: isReadOnly,
|
|
375
|
+
disabled: isReadOnly,
|
|
338
376
|
validation,
|
|
339
377
|
validationVisibility: 'live'
|
|
340
378
|
}
|
|
@@ -352,8 +390,11 @@ export default {
|
|
|
352
390
|
help: hint,
|
|
353
391
|
innerClass: 'reset-background',
|
|
354
392
|
wrapperClass: '$remove:formkit-wrapper',
|
|
393
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
355
394
|
inputClass: `input-${this.theme}`,
|
|
356
|
-
// innerClass: `${this.theme
|
|
395
|
+
// innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
396
|
+
readonly: isReadOnly,
|
|
397
|
+
disabled: isReadOnly,
|
|
357
398
|
validation,
|
|
358
399
|
validationVisibility: 'live'
|
|
359
400
|
}
|
|
@@ -374,8 +415,11 @@ export default {
|
|
|
374
415
|
options,
|
|
375
416
|
help: hint,
|
|
376
417
|
fieldsetClass: 'custom-fieldset',
|
|
418
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
377
419
|
inputClass: `input-${this.theme}`,
|
|
378
|
-
innerClass:
|
|
420
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
421
|
+
readonly: isReadOnly,
|
|
422
|
+
disabled: isReadOnly,
|
|
379
423
|
validation,
|
|
380
424
|
validationVisibility: 'live'
|
|
381
425
|
}
|
|
@@ -391,6 +435,8 @@ export default {
|
|
|
391
435
|
required: field.required,
|
|
392
436
|
value: field.defaultValue,
|
|
393
437
|
help: hint,
|
|
438
|
+
readonly: isReadOnly,
|
|
439
|
+
disabled: isReadOnly,
|
|
394
440
|
validation,
|
|
395
441
|
validationVisibility: 'live'
|
|
396
442
|
}
|
|
@@ -407,8 +453,10 @@ export default {
|
|
|
407
453
|
value: field.defaultValue,
|
|
408
454
|
help: hint,
|
|
409
455
|
wrapperClass: '$remove:formkit-wrapper',
|
|
456
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
410
457
|
inputClass: `input-${this.theme}`,
|
|
411
|
-
innerClass:
|
|
458
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
459
|
+
readonly: isReadOnly,
|
|
412
460
|
validation,
|
|
413
461
|
validationVisibility: 'live'
|
|
414
462
|
}
|
|
@@ -424,22 +472,22 @@ export default {
|
|
|
424
472
|
required: field.required,
|
|
425
473
|
value: field.defaultValue,
|
|
426
474
|
help: hint,
|
|
427
|
-
validation: 'email',
|
|
428
|
-
validationVisibility: 'live',
|
|
429
475
|
placeholder,
|
|
430
476
|
wrapperClass: '$remove:formkit-wrapper',
|
|
477
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
431
478
|
inputClass: `input-${this.theme}`,
|
|
432
|
-
innerClass:
|
|
479
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
480
|
+
readonly: isReadOnly,
|
|
433
481
|
validation,
|
|
434
482
|
validationVisibility: 'live'
|
|
435
483
|
}
|
|
436
484
|
}
|
|
437
485
|
case 'header':
|
|
438
486
|
let typeToUse = 'h1'
|
|
439
|
-
if (field.customForm && JSON.parse(field.customForm).style
|
|
487
|
+
if (field.customForm && JSON.parse(field.customForm).style === 'heading_2') {
|
|
440
488
|
typeToUse = 'h2'
|
|
441
489
|
}
|
|
442
|
-
if (field.customForm && JSON.parse(field.customForm).style
|
|
490
|
+
if (field.customForm && JSON.parse(field.customForm).style === 'heading_3') {
|
|
443
491
|
typeToUse = 'h3'
|
|
444
492
|
}
|
|
445
493
|
return {
|
|
@@ -466,8 +514,10 @@ export default {
|
|
|
466
514
|
value: field.defaultValue,
|
|
467
515
|
help: hint,
|
|
468
516
|
wrapperClass: '$remove:formkit-wrapper',
|
|
517
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
469
518
|
inputClass: `input-${this.theme}`,
|
|
470
|
-
innerClass:
|
|
519
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
520
|
+
readonly: isReadOnly,
|
|
471
521
|
validation,
|
|
472
522
|
validationVisibility: 'live'
|
|
473
523
|
}
|
|
@@ -490,8 +540,10 @@ export default {
|
|
|
490
540
|
help: hint,
|
|
491
541
|
placeholder,
|
|
492
542
|
wrapperClass: '$remove:formkit-wrapper',
|
|
543
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
493
544
|
inputClass: `input-${this.theme}`,
|
|
494
|
-
innerClass:
|
|
545
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
546
|
+
readonly: isReadOnly,
|
|
495
547
|
validation,
|
|
496
548
|
validationVisibility: 'live'
|
|
497
549
|
}
|
|
@@ -512,8 +564,11 @@ export default {
|
|
|
512
564
|
options: radioOptions,
|
|
513
565
|
help: hint,
|
|
514
566
|
fieldsetClass: 'custom-fieldset',
|
|
567
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
515
568
|
inputClass: `input-${this.theme}`,
|
|
516
|
-
innerClass:
|
|
569
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
570
|
+
readonly: isReadOnly,
|
|
571
|
+
disabled: isReadOnly,
|
|
517
572
|
validation,
|
|
518
573
|
validationVisibility: 'live'
|
|
519
574
|
}
|
|
@@ -534,8 +589,11 @@ export default {
|
|
|
534
589
|
step: customForm.step,
|
|
535
590
|
thumbLabel: true,
|
|
536
591
|
// wrapperClass: '$remove:formkit-wrapper',
|
|
592
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
537
593
|
// inputClass: `input-${this.theme}`,
|
|
538
|
-
// innerClass: `${this.theme
|
|
594
|
+
// innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
595
|
+
readonly: isReadOnly,
|
|
596
|
+
disabled: isReadOnly,
|
|
539
597
|
validation,
|
|
540
598
|
validationVisibility: 'live'
|
|
541
599
|
}
|
|
@@ -553,8 +611,10 @@ export default {
|
|
|
553
611
|
help: hint,
|
|
554
612
|
placeholder,
|
|
555
613
|
wrapperClass: '$remove:formkit-wrapper',
|
|
614
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
556
615
|
inputClass: `input-${this.theme}`,
|
|
557
|
-
innerClass:
|
|
616
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
617
|
+
readonly: isReadOnly,
|
|
558
618
|
validation,
|
|
559
619
|
validationVisibility: 'live'
|
|
560
620
|
}
|
|
@@ -574,8 +634,10 @@ export default {
|
|
|
574
634
|
help: hint,
|
|
575
635
|
placeholder,
|
|
576
636
|
wrapperClass: '$remove:formkit-wrapper',
|
|
637
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
577
638
|
inputClass: `input-${this.theme}`,
|
|
578
|
-
innerClass:
|
|
639
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
640
|
+
readonly: isReadOnly,
|
|
579
641
|
validation,
|
|
580
642
|
validationVisibility: 'live'
|
|
581
643
|
}
|
|
@@ -593,8 +655,10 @@ export default {
|
|
|
593
655
|
help: hint,
|
|
594
656
|
placeholder,
|
|
595
657
|
wrapperClass: '$remove:formkit-wrapper',
|
|
658
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
596
659
|
inputClass: `input-${this.theme}`,
|
|
597
|
-
innerClass:
|
|
660
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
661
|
+
readonly: isReadOnly,
|
|
598
662
|
validation,
|
|
599
663
|
validationVisibility: 'live'
|
|
600
664
|
}
|
|
@@ -611,11 +675,11 @@ export default {
|
|
|
611
675
|
value: field.defaultValue,
|
|
612
676
|
help: hint,
|
|
613
677
|
placeholder,
|
|
614
|
-
validation: 'url',
|
|
615
|
-
validationVisibility: 'live',
|
|
616
678
|
wrapperClass: '$remove:formkit-wrapper',
|
|
679
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
617
680
|
inputClass: `input-${this.theme}`,
|
|
618
|
-
innerClass:
|
|
681
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
682
|
+
readonly: isReadOnly,
|
|
619
683
|
validation,
|
|
620
684
|
validationVisibility: 'live'
|
|
621
685
|
}
|
|
@@ -633,8 +697,10 @@ export default {
|
|
|
633
697
|
help: hint,
|
|
634
698
|
placeholder,
|
|
635
699
|
wrapperClass: '$remove:formkit-wrapper',
|
|
700
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
636
701
|
inputClass: `input-${this.theme}`,
|
|
637
|
-
innerClass:
|
|
702
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
703
|
+
readonly: isReadOnly,
|
|
638
704
|
validation,
|
|
639
705
|
validationVisibility: 'live'
|
|
640
706
|
}
|
|
@@ -650,8 +716,10 @@ export default {
|
|
|
650
716
|
required: field.required,
|
|
651
717
|
value: field.defaultValue,
|
|
652
718
|
help: hint,
|
|
719
|
+
labelClass: 'ui-dynamic-form-input-label',
|
|
653
720
|
inputClass: `input-${this.theme}`,
|
|
654
|
-
innerClass:
|
|
721
|
+
innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
|
|
722
|
+
readonly: isReadOnly,
|
|
655
723
|
validation,
|
|
656
724
|
validationVisibility: 'live'
|
|
657
725
|
}
|
|
@@ -670,13 +738,25 @@ export default {
|
|
|
670
738
|
// \_ vllt macht es sinn das schema von formkit zu übernehmen oder alternativ nur unsere validierung zu nutzen.
|
|
671
739
|
},
|
|
672
740
|
hasUserTask () {
|
|
673
|
-
return this.messages && this.messages[this.id] && this.messages[this.id].payload
|
|
741
|
+
return this.messages && this.messages[this.id] && this.messages[this.id].payload?.userTask
|
|
674
742
|
},
|
|
675
743
|
userTask () {
|
|
676
744
|
return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}
|
|
677
745
|
},
|
|
746
|
+
getRowWidthStyling (field, index) {
|
|
747
|
+
let style = ''
|
|
748
|
+
if (index === 0) {
|
|
749
|
+
style += 'margin-top: 12px;'
|
|
750
|
+
}
|
|
751
|
+
if (field.type === 'header') {
|
|
752
|
+
style += 'flex-basis: 100%;'
|
|
753
|
+
} else {
|
|
754
|
+
style += `flex-basis: ${1 / this.props.form_columns * 100}%;`
|
|
755
|
+
}
|
|
756
|
+
return style
|
|
757
|
+
},
|
|
678
758
|
fields () {
|
|
679
|
-
const aFields = this.
|
|
759
|
+
const aFields = this.userTask()?.userTaskConfig?.formFields ?? []
|
|
680
760
|
const fieldMap = aFields.map((field) => ({
|
|
681
761
|
...field,
|
|
682
762
|
items: mapItems(field.type, field)
|
|
@@ -684,9 +764,6 @@ export default {
|
|
|
684
764
|
|
|
685
765
|
return fieldMap
|
|
686
766
|
},
|
|
687
|
-
hasFields () {
|
|
688
|
-
return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask !== undefined
|
|
689
|
-
},
|
|
690
767
|
/*
|
|
691
768
|
widget-action just sends a msg to Node-RED, it does not store the msg state server-side
|
|
692
769
|
alternatively, you can use widget-change, which will also store the msg in the Node's datastore
|
|
@@ -737,11 +814,11 @@ export default {
|
|
|
737
814
|
}
|
|
738
815
|
},
|
|
739
816
|
checkCondition (condition) {
|
|
740
|
-
if (condition
|
|
817
|
+
if (condition === '') return true
|
|
741
818
|
try {
|
|
819
|
+
// eslint-disable-next-line no-new-func
|
|
742
820
|
const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')')
|
|
743
821
|
const result = func(this.formData, this.taskInput, this.messages[this.id])
|
|
744
|
-
console.log(this.formData, result)
|
|
745
822
|
return Boolean(result)
|
|
746
823
|
} catch (err) {
|
|
747
824
|
console.error('Error while evaluating condition: ' + err)
|