@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.1-feature-2f831a-m71olhaf → 1.1.1-feature-47996b-m71std8k

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 (3) hide show
  1. package/package.json +1 -1
  2. package/resources/ui-dynamic-form.umd.js +1 -1
  3. package/ui/components/UIDynamicForm.vue +720 -705
package/ui/components/UIDynamicForm.vue CHANGED
@@ -1,65 +1,60 @@
1
1
  <template>
2
- <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
3
- <div className="ui-dynamic-form-wrapper">
4
- <p v-if="hasFields()">
5
- <v-form ref="form" v-model="form" :class="dynamicClass">
6
- <h3 style="padding: 16px">{{ this.props.name }}</h3>
7
- <div style="padding: 16px; max-height: 550px; overflow-y: auto">
8
- <FormKit type="group" id="form">
9
- <v-row v-for="(field, index) in fields()" :key="field">
10
- <v-col cols="12">
11
- <component
12
- v-if="createComponent(field).innerText"
13
- :is="createComponent(field).type"
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>
21
- <component
22
- :is="createComponent(field).type"
23
- v-bind="createComponent(field).props"
24
- v-model="field.defaultValue"
25
- />
26
- <p class="formkit-help">
27
- {{ field.customForm ? JSON.parse(field.customForm).hint : undefined }}
28
- </p>
29
- </div>
30
- <component
31
- v-else
32
- :is="createComponent(field).type"
33
- v-bind="createComponent(field).props"
34
- v-model="formData[field.id]"
35
- />
36
- </v-col>
37
- </v-row>
38
- </FormKit>
39
-
2
+ <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
3
+ <div className="ui-dynamic-form-wrapper">
4
+ <p v-if="hasFields()">
5
+ <v-form ref="form" v-model="form" :class="dynamicClass">
6
+ <h3 style="padding: 16px">{{ this.props.name }}</h3>
7
+ <div style="padding: 16px; max-height: 550px; overflow-y: auto">
8
+ <FormKit type="group" id="form">
9
+ <v-row v-for="(field, index) in fields()" :key="field">
10
+ <v-col cols="12">
11
+ <component
12
+ v-if="createComponent(field).innerText"
13
+ :is="createComponent(field).type"
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>
21
+ <component
22
+ :is="createComponent(field).type"
23
+ v-bind="createComponent(field).props"
24
+ v-model="field.defaultValue"
25
+ />
26
+ <p class="formkit-help">
27
+ {{ field.customForm ? JSON.parse(field.customForm).hint : undefined }}
28
+ </p>
40
29
  </div>
41
- <v-row :class="dynamicFooterClass">
42
- <v-row v-if="error" style="padding: 12px">
43
- <v-alert v-if="error" type="error">Error: {{ errorMsg }}</v-alert>
44
- </v-row>
45
- <div style="display: flex; gap: 8px">
46
- <div v-for="(action, index) in actions" :key="index" style="flex-grow: 1">
47
- <v-btn
48
- :key="index"
49
- style="width: 100% !important; min-height: 36px"
50
- @click="actionFn(action)"
51
- >
52
- {{ action.label }}
53
- </v-btn>
54
- </div>
55
- </div>
56
- </v-row>
57
- </v-form>
58
- </p>
59
- <p v-else>
60
- <v-alert :text="waiting_info" :title="waiting_title" />
61
- </p>
62
- </div>
30
+ <component
31
+ v-else
32
+ :is="createComponent(field).type"
33
+ v-bind="createComponent(field).props"
34
+ v-model="formData[field.id]"
35
+ />
36
+ </v-col>
37
+ </v-row>
38
+ </FormKit>
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>
43
+ </v-row>
44
+ <div style="display: flex; gap: 8px">
45
+ <div v-for="(action, index) in actions" :key="index" style="flex-grow: 1">
46
+ <v-btn :key="index" style="width: 100% !important; min-height: 36px" @click="actionFn(action)">
47
+ {{ action.label }}
48
+ </v-btn>
49
+ </div>
50
+ </div>
51
+ </v-row>
52
+ </v-form>
53
+ </p>
54
+ <p v-else>
55
+ <v-alert :text="waiting_info" :title="waiting_title" />
56
+ </p>
57
+ </div>
63
58
  </template>
64
59
 
65
60
  <script>
@@ -70,685 +65,705 @@ import '@formkit/themes/genesis';
70
65
  import { FormKit } from '@formkit/vue';
71
66
  import { getNode } from '@formkit/core';
72
67
 
73
-
74
68
  export default {
75
- name: 'UIDynamicForm',
76
- inject: ['$socket'],
77
- props: {
78
- /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
79
- id: { type: String, required: true },
80
- props: { type: Object, default: () => ({}) },
81
- state: {
82
- type: Object,
83
- default: () => ({ enabled: false, visible: false }),
84
- },
69
+ name: 'UIDynamicForm',
70
+ inject: ['$socket'],
71
+ props: {
72
+ /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
73
+ id: { type: String, required: true },
74
+ props: { type: Object, default: () => ({}) },
75
+ state: {
76
+ type: Object,
77
+ default: () => ({ enabled: false, visible: false }),
85
78
  },
86
- setup(props) {
87
- console.info('UIDynamicForm setup with:', props);
88
- console.debug('Vue function loaded correctly', markRaw);
89
- const instance = getCurrentInstance();
90
- const app = instance.appContext.app;
91
- const formkitConfig = defaultConfig({
92
- theme: 'genesis',
93
- });
94
- app.use(plugin, formkitConfig);
79
+ },
80
+ setup(props) {
81
+ console.info('UIDynamicForm setup with:', props);
82
+ console.debug('Vue function loaded correctly', markRaw);
83
+ const instance = getCurrentInstance();
84
+ const app = instance.appContext.app;
85
+ const formkitConfig = defaultConfig({
86
+ theme: 'genesis',
87
+ });
88
+ app.use(plugin, formkitConfig);
89
+ },
90
+ data() {
91
+ return {
92
+ actions: [],
93
+ form: {},
94
+ formData: {},
95
+ taskInput: {},
96
+ theme: '',
97
+ error: false,
98
+ errorMsg: '',
99
+ };
100
+ },
101
+ created() {
102
+ const currentPath = window.location.pathname;
103
+ const lastPart = currentPath.substring(currentPath.lastIndexOf('/'));
104
+
105
+ const store = this.$store.state;
106
+
107
+ for (let key in store.ui.pages) {
108
+ if (store.ui.pages[key].path === lastPart) {
109
+ const theme = store.ui.pages[key].theme;
110
+ if (store.ui.themes[theme].name === 'ProcessCube Lightmode') {
111
+ this.theme = 'light';
112
+ } else if (store.ui.themes[theme].name === 'ProcessCube Darkmode') {
113
+ this.theme = 'dark';
114
+ } else {
115
+ this.theme = 'default';
116
+ }
117
+ break;
118
+ }
119
+ }
120
+ },
121
+ computed: {
122
+ ...mapState('data', ['messages']),
123
+ waiting_title() {
124
+ return this.props.waiting_title || 'Warten auf den Usertask...';
95
125
  },
96
- data() {
97
- return {
98
- actions: [],
99
- form: {},
100
- formData: {},
101
- taskInput: {},
102
- theme: '',
103
- error: false,
104
- errorMsg: '',
105
- };
126
+ waiting_info() {
127
+ return (
128
+ this.props.waiting_info ||
129
+ 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
130
+ );
106
131
  },
107
- created() {
108
- const currentPath = window.location.pathname;
109
- const lastPart = currentPath.substring(currentPath.lastIndexOf('/'));
110
132
 
111
- const store = this.$store.state;
133
+ dynamicClass() {
134
+ return `ui-dynamic-form-${this.theme}`;
135
+ },
112
136
 
113
- for (let key in store.ui.pages) {
114
- if (store.ui.pages[key].path === lastPart) {
115
- const theme = store.ui.pages[key].theme;
116
- if (store.ui.themes[theme].name === 'ProcessCube Lightmode') {
117
- this.theme = 'light';
118
- } else if (store.ui.themes[theme].name === 'ProcessCube Darkmode') {
119
- this.theme = 'dark';
120
- } else {
121
- this.theme = 'default';
122
- }
123
- break;
124
- }
125
- }
137
+ dynamicFooterClass() {
138
+ return `ui-dynamic-form-footer-${this.theme}`;
126
139
  },
127
- computed: {
128
- ...mapState('data', ['messages']),
129
- waiting_title() {
130
- return this.props.waiting_title || 'Warten auf den Usertask...';
131
- },
132
- waiting_info() {
133
- return (
134
- this.props.waiting_info ||
135
- 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
136
- );
137
- },
140
+ },
141
+ mounted() {
142
+ const elements = document.querySelectorAll('.formkit-input');
138
143
 
139
- dynamicClass() {
140
- return `ui-dynamic-form-${this.theme}`;
141
- },
144
+ elements.forEach((element) => {
145
+ element.classList.add('test');
146
+ });
142
147
 
143
- dynamicFooterClass() {
144
- return `ui-dynamic-form-footer-${this.theme}`;
145
- },
148
+ this.$socket.on('widget-load:' + this.id, (msg) => {
149
+ this.init();
150
+ this.$store.commit('data/bind', {
151
+ widgetId: this.id,
152
+ msg,
153
+ });
154
+ });
155
+ this.$socket.on('msg-input:' + this.id, (msg) => {
156
+ // store the latest message in our client-side vuex store when we receive a new message
157
+ this.init();
146
158
 
147
- },
148
- mounted() {
149
- const elements = document.querySelectorAll('.formkit-input');
159
+ this.messages[this.id] = msg;
150
160
 
151
- elements.forEach((element) => {
152
- element.classList.add('test');
153
- });
161
+ const hasTask = msg.payload && msg.payload.userTask;
162
+ const defaultValues = msg.payload.userTask.userTaskConfig.formFields;
163
+ const initialValues = msg.payload.userTask.startToken;
164
+
165
+ if (hasTask) {
166
+ this.taskInput = msg.payload.userTask;
167
+ }
154
168
 
155
- this.$socket.on('widget-load:' + this.id, (msg) => {
156
- this.init();
157
- this.$store.commit('data/bind', {
158
- widgetId: this.id,
159
- msg,
160
- });
169
+ if (hasTask && defaultValues) {
170
+ defaultValues.forEach((field) => {
171
+ this.formData[field.id] = field.defaultValue;
161
172
  });
162
- this.$socket.on('msg-input:' + this.id, (msg) => {
163
- // store the latest message in our client-side vuex store when we receive a new message
164
- this.init();
173
+ }
165
174
 
166
- this.messages[this.id] = msg;
175
+ if (hasTask && initialValues) {
176
+ Object.keys(initialValues).forEach((key) => {
177
+ this.formData[key] = initialValues[key];
178
+ });
179
+ }
167
180
 
168
- const hasTask = msg.payload && msg.payload.userTask;
169
- const defaultValues = msg.payload.userTask.userTaskConfig.formFields;
170
- const initialValues = msg.payload.userTask.startToken;
181
+ this.$store.commit('data/bind', {
182
+ widgetId: this.id,
183
+ msg,
184
+ });
185
+ });
186
+ // tell Node-RED that we're loading a new instance of this widget
187
+ this.$socket.emit('widget-load', this.id);
188
+ },
189
+ unmounted() {
190
+ /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
191
+ this.$socket?.off('widget-load' + this.id);
192
+ this.$socket?.off('msg-input:' + this.id);
193
+ },
194
+ components: {
195
+ FormKit,
196
+ },
197
+ methods: {
198
+ createComponent(field) {
199
+ const hint = field.customForm ? JSON.parse(field.customForm).hint : undefined;
200
+ const placeholder = field.customForm ? JSON.parse(field.customForm).placeholder : undefined;
201
+ const validation = field.customForm ? JSON.parse(field.customForm).validation : undefined;
202
+ const name = field.id;
171
203
 
172
- if (hasTask) {
173
- this.taskInput = msg.payload.userTask;
174
- }
175
-
176
- if (hasTask && defaultValues) {
177
- defaultValues.forEach((field) => {
178
- this.formData[field.id] = field.defaultValue;
179
- });
180
- }
204
+ switch (field.type) {
205
+ case 'long':
206
+ return {
207
+ type: 'FormKit',
208
+ props: {
209
+ type: 'number',
210
+ id: field.id,
211
+ name: name,
212
+ label: field.label,
213
+ required: field.required,
214
+ value: field.defaultValue,
215
+ number: 'integer',
216
+ help: hint,
217
+ wrapperClass: '$remove:formkit-wrapper',
218
+ inputClass: `input-${this.theme}`,
219
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
220
+ validation: validation,
221
+ validationVisibility: 'live',
222
+ },
223
+ };
224
+ case 'number':
225
+ const step = field.customForm ? JSON.parse(field.customForm).step : undefined;
226
+ return {
227
+ type: 'FormKit',
228
+ props: {
229
+ type: 'number',
230
+ id: field.id,
231
+ name: name,
232
+ label: field.label,
233
+ required: field.required,
234
+ value: field.defaultValue,
235
+ step: step,
236
+ help: hint,
237
+ wrapperClass: '$remove:formkit-wrapper',
238
+ inputClass: `input-${this.theme}`,
239
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
240
+ validation: validation,
241
+ validationVisibility: 'live',
242
+ },
243
+ };
244
+ case 'date':
245
+ return {
246
+ type: 'FormKit',
247
+ props: {
248
+ type: 'date',
249
+ id: field.id,
250
+ name: name,
251
+ label: field.label,
252
+ required: field.required,
253
+ value: field.defaultValue,
254
+ help: hint,
255
+ wrapperClass: '$remove:formkit-wrapper',
256
+ inputClass: `input-${this.theme}`,
257
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
258
+ validation: validation,
259
+ validationVisibility: 'live',
260
+ },
261
+ };
262
+ case 'enum':
263
+ const enums = field.enumValues.map((obj) => {
264
+ return { value: obj.id, label: obj.name };
265
+ });
266
+ return {
267
+ type: 'FormKit',
268
+ props: {
269
+ type: 'select', // JSON.parse(field.customForm).displayAs
270
+ id: field.id,
271
+ name: name,
272
+ label: field.label,
273
+ required: field.required,
274
+ value: field.defaultValue,
275
+ options: enums,
276
+ help: hint,
277
+ wrapperClass: '$remove:formkit-wrapper',
278
+ inputClass: `input-${this.theme}`,
279
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
280
+ validation: validation,
281
+ validationVisibility: 'live',
282
+ },
283
+ };
284
+ case 'select':
285
+ const selections = JSON.parse(field.customForm).entries.map((obj) => {
286
+ return { value: obj.key, label: obj.value };
287
+ });
288
+ return {
289
+ type: 'FormKit',
290
+ props: {
291
+ type: 'select', // JSON.parse(field.customForm).displayAs
292
+ id: field.id,
293
+ name: name,
294
+ label: field.label,
295
+ required: field.required,
296
+ value: field.defaultValue,
297
+ options: selections,
298
+ placeholder: placeholder,
299
+ help: hint,
300
+ wrapperClass: '$remove:formkit-wrapper',
301
+ inputClass: `input-${this.theme}`,
302
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
303
+ validation: validation,
304
+ validationVisibility: 'live',
305
+ },
306
+ };
307
+ case 'string':
308
+ return {
309
+ type: 'FormKit',
310
+ props: {
311
+ type: 'text',
312
+ id: field.id,
313
+ name: name,
314
+ label: field.label,
315
+ required: field.required,
316
+ value: field.defaultValue,
317
+ help: hint,
318
+ placeholder: placeholder,
319
+ wrapperClass: '$remove:formkit-wrapper',
320
+ inputClass: `input-${this.theme}`,
321
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
322
+ validation: validation,
323
+ validationVisibility: 'live',
324
+ },
325
+ };
326
+ case 'boolean':
327
+ return {
328
+ type: 'FormKit',
329
+ props: {
330
+ type: 'checkbox',
331
+ id: field.id,
332
+ name: name,
333
+ label: field.label,
334
+ required: field.required,
335
+ value: field.defaultValue,
336
+ help: hint,
337
+ inputClass: `input-${this.theme}`,
338
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
339
+ validation: validation,
340
+ validationVisibility: 'live',
341
+ },
342
+ };
343
+ case 'file':
344
+ return {
345
+ type: 'FormKit',
346
+ props: {
347
+ type: 'file',
348
+ id: field.id,
349
+ name: name,
350
+ label: field.label,
351
+ required: field.required,
352
+ value: field.defaultValue,
353
+ help: hint,
354
+ innerClass: 'reset-background',
355
+ wrapperClass: '$remove:formkit-wrapper',
356
+ inputClass: `input-${this.theme}`,
357
+ // innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
358
+ validation: validation,
359
+ validationVisibility: 'live',
360
+ },
361
+ };
362
+ case 'checkbox':
363
+ const options = JSON.parse(field.customForm).entries.map((obj) => {
364
+ return { value: obj.key, label: obj.value };
365
+ });
366
+ return {
367
+ type: 'FormKit',
368
+ props: {
369
+ type: 'checkbox',
370
+ id: field.id,
371
+ name: name,
372
+ label: field.label,
373
+ required: field.required,
374
+ value: field.defaultValue,
375
+ options: options,
376
+ help: hint,
377
+ fieldsetClass: 'custom-fieldset',
378
+ inputClass: `input-${this.theme}`,
379
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
380
+ validation: validation,
381
+ validationVisibility: 'live',
382
+ },
383
+ };
384
+ case 'color':
385
+ return {
386
+ type: 'FormKit',
387
+ props: {
388
+ type: 'color',
389
+ id: field.id,
390
+ name: name,
391
+ label: field.label,
392
+ required: field.required,
393
+ value: field.defaultValue,
394
+ help: hint,
395
+ validation: validation,
396
+ validationVisibility: 'live',
397
+ },
398
+ };
399
+ case 'datetime-local':
400
+ return {
401
+ type: 'FormKit',
402
+ props: {
403
+ type: 'datetime-local',
404
+ id: field.id,
405
+ name: name,
406
+ label: field.label,
407
+ required: field.required,
408
+ value: field.defaultValue,
409
+ help: hint,
410
+ wrapperClass: '$remove:formkit-wrapper',
411
+ inputClass: `input-${this.theme}`,
412
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
413
+ validation: validation,
414
+ validationVisibility: 'live',
415
+ },
416
+ };
417
+ case 'email':
418
+ return {
419
+ type: 'FormKit',
420
+ props: {
421
+ type: 'email',
422
+ id: field.id,
423
+ name: name,
424
+ label: field.label,
425
+ required: field.required,
426
+ value: field.defaultValue,
427
+ help: hint,
428
+ validation: 'email',
429
+ validationVisibility: 'live',
430
+ placeholder: placeholder,
431
+ wrapperClass: '$remove:formkit-wrapper',
432
+ inputClass: `input-${this.theme}`,
433
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
434
+ validation: validation,
435
+ validationVisibility: 'live',
436
+ },
437
+ };
438
+ case 'header':
439
+ let typeToUse = 'h1';
440
+ if (field.customForm && JSON.parse(field.customForm).style == 'heading_2') {
441
+ typeToUse = 'h2';
442
+ }
443
+ if (field.customForm && JSON.parse(field.customForm).style == 'heading_3') {
444
+ typeToUse = 'h3';
445
+ }
446
+ return {
447
+ type: typeToUse,
448
+ innerText: field.defaultValue,
449
+ };
450
+ case 'hidden':
451
+ return {
452
+ type: 'input',
453
+ props: {
454
+ type: 'hidden',
455
+ value: field.defaultValue,
456
+ },
457
+ };
458
+ case 'month':
459
+ return {
460
+ type: 'FormKit',
461
+ props: {
462
+ type: 'month',
463
+ id: field.id,
464
+ name: name,
465
+ label: field.label,
466
+ required: field.required,
467
+ value: field.defaultValue,
468
+ help: hint,
469
+ wrapperClass: '$remove:formkit-wrapper',
470
+ inputClass: `input-${this.theme}`,
471
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
472
+ validation: validation,
473
+ validationVisibility: 'live',
474
+ },
475
+ };
476
+ case 'paragraph':
477
+ return {
478
+ type: 'p',
479
+ innerText: field.defaultValue,
480
+ };
481
+ case 'password':
482
+ return {
483
+ type: 'FormKit',
484
+ props: {
485
+ type: 'password',
486
+ id: field.id,
487
+ name: name,
488
+ label: field.label,
489
+ required: field.required,
490
+ value: field.defaultValue,
491
+ help: hint,
492
+ placeholder: placeholder,
493
+ wrapperClass: '$remove:formkit-wrapper',
494
+ inputClass: `input-${this.theme}`,
495
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
496
+ validation: validation,
497
+ validationVisibility: 'live',
498
+ },
499
+ };
500
+ case 'radio':
501
+ const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
502
+ return { value: obj.key, label: obj.value };
503
+ });
504
+ return {
505
+ type: 'FormKit',
506
+ props: {
507
+ type: 'radio',
508
+ id: field.id,
509
+ name: name,
510
+ label: field.label,
511
+ required: field.required,
512
+ value: field.defaultValue,
513
+ options: radioOptions,
514
+ help: hint,
515
+ fieldsetClass: 'custom-fieldset',
516
+ inputClass: `input-${this.theme}`,
517
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
518
+ validation: validation,
519
+ validationVisibility: 'live',
520
+ },
521
+ };
522
+ case 'range':
523
+ const customForm = JSON.parse(field.customForm);
524
+ return {
525
+ type: 'v-slider',
526
+ props: {
527
+ id: field.id,
528
+ name: name,
529
+ // label: field.label,
530
+ required: field.required,
531
+ // value: field.defaultValue,
532
+ // help: hint,
533
+ min: customForm.min,
534
+ max: customForm.max,
535
+ step: customForm.step,
536
+ thumbLabel: true,
537
+ // wrapperClass: '$remove:formkit-wrapper',
538
+ // inputClass: `input-${this.theme}`,
539
+ // innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
540
+ validation: validation,
541
+ validationVisibility: 'live',
542
+ },
543
+ };
544
+ case 'tel':
545
+ return {
546
+ type: 'FormKit',
547
+ props: {
548
+ type: 'tel' /* with pro component mask more good */,
549
+ id: field.id,
550
+ name: name,
551
+ label: field.label,
552
+ required: field.required,
553
+ value: field.defaultValue,
554
+ help: hint,
555
+ placeholder: placeholder,
556
+ wrapperClass: '$remove:formkit-wrapper',
557
+ inputClass: `input-${this.theme}`,
558
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
559
+ validation: validation,
560
+ validationVisibility: 'live',
561
+ },
562
+ };
563
+ case 'textarea':
564
+ const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined;
565
+ return {
566
+ type: 'FormKit',
567
+ props: {
568
+ type: 'textarea' /* with pro component mask more good */,
569
+ id: field.id,
570
+ name: name,
571
+ label: field.label,
572
+ required: field.required,
573
+ value: field.defaultValue,
574
+ rows: rows,
575
+ help: hint,
576
+ placeholder: placeholder,
577
+ wrapperClass: '$remove:formkit-wrapper',
578
+ inputClass: `input-${this.theme}`,
579
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
580
+ validation: validation,
581
+ validationVisibility: 'live',
582
+ },
583
+ };
584
+ case 'time':
585
+ return {
586
+ type: 'FormKit',
587
+ props: {
588
+ type: 'time' /* with pro component mask more good */,
589
+ id: field.id,
590
+ name: name,
591
+ label: field.label,
592
+ required: field.required,
593
+ value: field.defaultValue,
594
+ help: hint,
595
+ placeholder: placeholder,
596
+ wrapperClass: '$remove:formkit-wrapper',
597
+ inputClass: `input-${this.theme}`,
598
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
599
+ validation: validation,
600
+ validationVisibility: 'live',
601
+ },
602
+ };
603
+ case 'url':
604
+ return {
605
+ type: 'FormKit',
606
+ props: {
607
+ type: 'url',
608
+ id: field.id,
609
+ name: name,
610
+ label: field.label,
611
+ required: field.required,
612
+ value: field.defaultValue,
613
+ help: hint,
614
+ placeholder: placeholder,
615
+ validation: 'url',
616
+ validationVisibility: 'live',
617
+ wrapperClass: '$remove:formkit-wrapper',
618
+ inputClass: `input-${this.theme}`,
619
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
620
+ validation: validation,
621
+ validationVisibility: 'live',
622
+ },
623
+ };
624
+ case 'week':
625
+ return {
626
+ type: 'FormKit',
627
+ props: {
628
+ type: 'week',
629
+ id: field.id,
630
+ name: name,
631
+ label: field.label,
632
+ required: field.required,
633
+ value: field.defaultValue,
634
+ help: hint,
635
+ placeholder: placeholder,
636
+ wrapperClass: '$remove:formkit-wrapper',
637
+ inputClass: `input-${this.theme}`,
638
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
639
+ validation: validation,
640
+ validationVisibility: 'live',
641
+ },
642
+ };
643
+ default:
644
+ return {
645
+ type: 'FormKit',
646
+ props: {
647
+ type: field.type,
648
+ id: field.id,
649
+ name: name,
650
+ label: field.label,
651
+ required: field.required,
652
+ value: field.defaultValue,
653
+ help: hint,
654
+ inputClass: `input-${this.theme}`,
655
+ innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
656
+ validation: validation,
657
+ validationVisibility: 'live',
658
+ },
659
+ };
660
+ }
661
+ },
662
+ checkFormState(state) {
663
+ // const field = this.$formkit.get('field_01');
664
+ // console.info(field.context.state.valid);
181
665
 
182
- if (hasTask && initialValues) {
183
- Object.keys(initialValues).forEach((key) => {
184
- this.formData[key] = initialValues[key];
185
- });
186
- }
666
+ return true;
187
667
 
188
- this.$store.commit('data/bind', {
189
- widgetId: this.id,
190
- msg,
191
- });
192
- });
193
- // tell Node-RED that we're loading a new instance of this widget
194
- this.$socket.emit('widget-load', this.id);
668
+ // loop over fields then this.$formkit.get(this.id) -> check error state if all ok return true else return false
669
+ // ?? wie unterscheiden wir welche actions dieser validierungsfehler betrifft ??
670
+ // ?? wie machen wir formkit validierung auch im Studio available ??
671
+ // \_ vllt macht es sinn das schema von formkit zu übernehmen oder alternativ nur unsere validierung zu nutzen.
195
672
  },
196
- unmounted() {
197
- /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
198
- this.$socket?.off('widget-load' + this.id);
199
- this.$socket?.off('msg-input:' + this.id);
673
+ hasUserTask() {
674
+ return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask;
200
675
  },
201
- components: {
202
- FormKit,
676
+ userTask() {
677
+ return this.hasUserTask() ? this.messages[this.id].payload.userTask : {};
203
678
  },
204
- methods: {
205
- createComponent(field) {
206
- const hint = field.customForm ? JSON.parse(field.customForm).hint : undefined;
207
- const placeholder = field.customForm ? JSON.parse(field.customForm).placeholder : undefined;
208
- const validation = field.customForm ? JSON.parse(field.customForm).validation : undefined
209
- const name = field.id
210
-
211
- switch (field.type) {
212
- case 'long':
213
- return {
214
- type: 'FormKit',
215
- props: {
216
- type: 'number',
217
- id: field.id,
218
- name: name,
219
- label: field.label,
220
- required: field.required,
221
- value: field.defaultValue,
222
- number: 'integer',
223
- help: hint,
224
- wrapperClass: '$remove:formkit-wrapper',
225
- inputClass: `input-${this.theme}`,
226
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
227
- validation: validation,
228
- },
229
- };
230
- case 'number':
231
- const step = field.customForm ? JSON.parse(field.customForm).step : undefined;
232
- return {
233
- type: 'FormKit',
234
- props: {
235
- type: 'number',
236
- id: field.id,
237
- name: name,
238
- label: field.label,
239
- required: field.required,
240
- value: field.defaultValue,
241
- step: step,
242
- help: hint,
243
- wrapperClass: '$remove:formkit-wrapper',
244
- inputClass: `input-${this.theme}`,
245
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
246
- validation: validation,
247
- },
248
- };
249
- case 'date':
250
- return {
251
- type: 'FormKit',
252
- props: {
253
- type: 'date',
254
- id: field.id,
255
- name: name,
256
- label: field.label,
257
- required: field.required,
258
- value: field.defaultValue,
259
- help: hint,
260
- wrapperClass: '$remove:formkit-wrapper',
261
- inputClass: `input-${this.theme}`,
262
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
263
- validation: validation,
264
- },
265
- };
266
- case 'enum':
267
- const enums = field.enumValues.map((obj) => {
268
- return { value: obj.id, label: obj.name };
269
- });
270
- return {
271
- type: 'FormKit',
272
- props: {
273
- type: 'select', // JSON.parse(field.customForm).displayAs
274
- id: field.id,
275
- name: name,
276
- label: field.label,
277
- required: field.required,
278
- value: field.defaultValue,
279
- options: enums,
280
- help: hint,
281
- wrapperClass: '$remove:formkit-wrapper',
282
- inputClass: `input-${this.theme}`,
283
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
284
- validation: validation,
285
- },
286
- };
287
- case 'select':
288
- const selections = JSON.parse(field.customForm).entries.map((obj) => {
289
- return { value: obj.key, label: obj.value };
290
- });
291
- return {
292
- type: 'FormKit',
293
- props: {
294
- type: 'select', // JSON.parse(field.customForm).displayAs
295
- id: field.id,
296
- name: name,
297
- label: field.label,
298
- required: field.required,
299
- value: field.defaultValue,
300
- options: selections,
301
- placeholder: placeholder,
302
- help: hint,
303
- wrapperClass: '$remove:formkit-wrapper',
304
- inputClass: `input-${this.theme}`,
305
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
306
- validation: validation,
307
- },
308
- };
309
- case 'string':
310
- return {
311
- type: 'FormKit',
312
- props: {
313
- type: 'text',
314
- id: field.id,
315
- name: name,
316
- label: field.label,
317
- required: field.required,
318
- value: field.defaultValue,
319
- help: hint,
320
- placeholder: placeholder,
321
- wrapperClass: '$remove:formkit-wrapper',
322
- inputClass: `input-${this.theme}`,
323
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
324
- validation: validation,
325
- },
326
- };
327
- case 'boolean':
328
- return {
329
- type: 'FormKit',
330
- props: {
331
- type: 'checkbox',
332
- id: field.id,
333
- name: name,
334
- label: field.label,
335
- required: field.required,
336
- value: field.defaultValue,
337
- help: hint,
338
- inputClass: `input-${this.theme}`,
339
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
340
- validation: validation,
341
- },
342
- };
343
- case 'file':
344
- return {
345
- type: 'FormKit',
346
- props: {
347
- type: 'file',
348
- id: field.id,
349
- name: name,
350
- label: field.label,
351
- required: field.required,
352
- value: field.defaultValue,
353
- help: hint,
354
- innerClass: 'reset-background',
355
- wrapperClass: '$remove:formkit-wrapper',
356
- inputClass: `input-${this.theme}`,
357
- // innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
358
- validation: validation,
359
- },
360
- };
361
- case 'checkbox':
362
- const options = JSON.parse(field.customForm).entries.map((obj) => {
363
- return { value: obj.key, label: obj.value };
364
- });
365
- return {
366
- type: 'FormKit',
367
- props: {
368
- type: 'checkbox',
369
- id: field.id,
370
- name: name,
371
- label: field.label,
372
- required: field.required,
373
- value: field.defaultValue,
374
- options: options,
375
- help: hint,
376
- fieldsetClass: 'custom-fieldset',
377
- inputClass: `input-${this.theme}`,
378
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
379
- validation: validation,
380
- },
381
- };
382
- case 'color':
383
- return {
384
- type: 'FormKit',
385
- props: {
386
- type: 'color',
387
- id: field.id,
388
- name: name,
389
- label: field.label,
390
- required: field.required,
391
- value: field.defaultValue,
392
- help: hint,
393
- validation: validation,
394
- },
395
- };
396
- case 'datetime-local':
397
- return {
398
- type: 'FormKit',
399
- props: {
400
- type: 'datetime-local',
401
- id: field.id,
402
- name: name,
403
- label: field.label,
404
- required: field.required,
405
- value: field.defaultValue,
406
- help: hint,
407
- wrapperClass: '$remove:formkit-wrapper',
408
- inputClass: `input-${this.theme}`,
409
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
410
- validation: validation,
411
- },
412
- };
413
- case 'email':
414
- return {
415
- type: 'FormKit',
416
- props: {
417
- type: 'email',
418
- id: field.id,
419
- name: name,
420
- label: field.label,
421
- required: field.required,
422
- value: field.defaultValue,
423
- help: hint,
424
- validation: 'email',
425
- validationVisibility: 'live',
426
- placeholder: placeholder,
427
- wrapperClass: '$remove:formkit-wrapper',
428
- inputClass: `input-${this.theme}`,
429
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
430
- validation: validation,
431
- },
432
- };
433
- case 'header':
434
- let typeToUse = 'h1';
435
- if (field.customForm && JSON.parse(field.customForm).style == 'heading_2') {
436
- typeToUse = 'h2';
437
- }
438
- if (field.customForm && JSON.parse(field.customForm).style == 'heading_3') {
439
- typeToUse = 'h3';
440
- }
441
- return {
442
- type: typeToUse,
443
- innerText: field.defaultValue,
444
- };
445
- case 'hidden':
446
- return {
447
- type: 'input',
448
- props: {
449
- type: 'hidden',
450
- value: field.defaultValue,
451
- },
452
- };
453
- case 'month':
454
- return {
455
- type: 'FormKit',
456
- props: {
457
- type: 'month',
458
- id: field.id,
459
- name: name,
460
- label: field.label,
461
- required: field.required,
462
- value: field.defaultValue,
463
- help: hint,
464
- wrapperClass: '$remove:formkit-wrapper',
465
- inputClass: `input-${this.theme}`,
466
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
467
- validation: validation,
468
- },
469
- };
470
- case 'paragraph':
471
- return {
472
- type: 'p',
473
- innerText: field.defaultValue,
474
- };
475
- case 'password':
476
- return {
477
- type: 'FormKit',
478
- props: {
479
- type: 'password',
480
- id: field.id,
481
- name: name,
482
- label: field.label,
483
- required: field.required,
484
- value: field.defaultValue,
485
- help: hint,
486
- placeholder: placeholder,
487
- wrapperClass: '$remove:formkit-wrapper',
488
- inputClass: `input-${this.theme}`,
489
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
490
- validation: validation,
491
- },
492
- };
493
- case 'radio':
494
- const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
495
- return { value: obj.key, label: obj.value };
496
- });
497
- return {
498
- type: 'FormKit',
499
- props: {
500
- type: 'radio',
501
- id: field.id,
502
- name: name,
503
- label: field.label,
504
- required: field.required,
505
- value: field.defaultValue,
506
- options: radioOptions,
507
- help: hint,
508
- fieldsetClass: 'custom-fieldset',
509
- inputClass: `input-${this.theme}`,
510
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
511
- validation: validation,
512
- },
513
- };
514
- case 'range':
515
- const customForm = JSON.parse(field.customForm);
516
- return {
517
- type: 'v-slider',
518
- props: {
519
- id: field.id,
520
- name: name,
521
- // label: field.label,
522
- required: field.required,
523
- // value: field.defaultValue,
524
- // help: hint,
525
- min: customForm.min,
526
- max: customForm.max,
527
- step: customForm.step,
528
- thumbLabel: true,
529
- // wrapperClass: '$remove:formkit-wrapper',
530
- // inputClass: `input-${this.theme}`,
531
- // innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
532
- validation: validation,
533
- },
534
- };
535
- case 'tel':
536
- return {
537
- type: 'FormKit',
538
- props: {
539
- type: 'tel' /* with pro component mask more good */,
540
- id: field.id,
541
- name: name,
542
- label: field.label,
543
- required: field.required,
544
- value: field.defaultValue,
545
- help: hint,
546
- placeholder: placeholder,
547
- wrapperClass: '$remove:formkit-wrapper',
548
- inputClass: `input-${this.theme}`,
549
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
550
- validation: validation,
551
- },
552
- };
553
- case 'textarea':
554
- const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined;
555
- return {
556
- type: 'FormKit',
557
- props: {
558
- type: 'textarea' /* with pro component mask more good */,
559
- id: field.id,
560
- name: name,
561
- label: field.label,
562
- required: field.required,
563
- value: field.defaultValue,
564
- rows: rows,
565
- help: hint,
566
- placeholder: placeholder,
567
- wrapperClass: '$remove:formkit-wrapper',
568
- inputClass: `input-${this.theme}`,
569
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
570
- validation: validation,
571
- },
572
- };
573
- case 'time':
574
- return {
575
- type: 'FormKit',
576
- props: {
577
- type: 'time' /* with pro component mask more good */,
578
- id: field.id,
579
- name: name,
580
- label: field.label,
581
- required: field.required,
582
- value: field.defaultValue,
583
- help: hint,
584
- placeholder: placeholder,
585
- wrapperClass: '$remove:formkit-wrapper',
586
- inputClass: `input-${this.theme}`,
587
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
588
- validation: validation,
589
- },
590
- };
591
- case 'url':
592
- return {
593
- type: 'FormKit',
594
- props: {
595
- type: 'url',
596
- id: field.id,
597
- name: name,
598
- label: field.label,
599
- required: field.required,
600
- value: field.defaultValue,
601
- help: hint,
602
- placeholder: placeholder,
603
- validation: 'url',
604
- validationVisibility: 'live',
605
- wrapperClass: '$remove:formkit-wrapper',
606
- inputClass: `input-${this.theme}`,
607
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
608
- validation: validation,
609
- },
610
- };
611
- case 'week':
612
- return {
613
- type: 'FormKit',
614
- props: {
615
- type: 'week',
616
- id: field.id,
617
- name: name,
618
- label: field.label,
619
- required: field.required,
620
- value: field.defaultValue,
621
- help: hint,
622
- placeholder: placeholder,
623
- wrapperClass: '$remove:formkit-wrapper',
624
- inputClass: `input-${this.theme}`,
625
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
626
- validation: validation,
627
- },
628
- };
629
- default:
630
- return {
631
- type: 'FormKit',
632
- props: {
633
- type: field.type,
634
- id: field.id,
635
- name: name,
636
- label: field.label,
637
- required: field.required,
638
- value: field.defaultValue,
639
- help: hint,
640
- inputClass: `input-${this.theme}`,
641
- innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`,
642
- validation: validation,
643
- },
644
- };
645
- }
646
- },
647
- checkFormState(state) {
648
- // const field = this.$formkit.get('field_01');
649
- // console.info(field.context.state.valid);
650
-
651
- return true;
652
-
653
- // loop over fields then this.$formkit.get(this.id) -> check error state if all ok return true else return false
654
- // ?? wie unterscheiden wir welche actions dieser validierungsfehler betrifft ??
655
- // ?? wie machen wir formkit validierung auch im Studio available ??
656
- // \_ vllt macht es sinn das schema von formkit zu übernehmen oder alternativ nur unsere validierung zu nutzen.
657
- },
658
- hasUserTask() {
659
- return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask;
660
- },
661
- userTask() {
662
- return this.hasUserTask() ? this.messages[this.id].payload.userTask : {};
663
- },
664
- fields() {
665
- const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : [];
666
- const fieldMap = aFields.map((field) => ({
667
- ...field,
668
- items: mapItems(field.type, field),
669
- }));
679
+ fields() {
680
+ const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : [];
681
+ const fieldMap = aFields.map((field) => ({
682
+ ...field,
683
+ items: mapItems(field.type, field),
684
+ }));
670
685
 
671
- return fieldMap;
672
- },
673
- hasFields() {
674
- return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask !== undefined;
675
- },
676
- /*
686
+ return fieldMap;
687
+ },
688
+ hasFields() {
689
+ return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask !== undefined;
690
+ },
691
+ /*
677
692
  widget-action just sends a msg to Node-RED, it does not store the msg state server-side
678
693
  alternatively, you can use widget-change, which will also store the msg in the Node's datastore
679
694
  */
680
- send(msg, index) {
681
- const msgArr = [];
682
- msgArr[index] = msg;
683
- this.$socket.emit('widget-action', this.id, msgArr);
684
- },
685
- init() {
686
- this.actions = this.props.options;
687
- },
688
- async actionFn(action) {
689
- // this.checkFormState();
690
-
691
- if (action.label === "Speichern" || action.label === "Speichern und nächster") {
692
- const formkitInputs = this.$refs.form.$el.querySelectorAll(".formkit-outer");
693
- let allComplete = true;
695
+ send(msg, index) {
696
+ const msgArr = [];
697
+ msgArr[index] = msg;
698
+ this.$socket.emit('widget-action', this.id, msgArr);
699
+ },
700
+ init() {
701
+ this.actions = this.props.options;
702
+ },
703
+ actionFn(action) {
704
+ // this.checkFormState();
694
705
 
695
- formkitInputs.forEach((input) => {
696
- const isComplete = input.getAttribute("data-complete") === "true";
706
+ if (action.label === 'Speichern' || action.label === 'Speichern und nächster') {
707
+ const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer');
708
+ let allComplete = true;
697
709
 
698
- if (!isComplete) {
699
- allComplete = false;
700
- }
701
- });
710
+ formkitInputs.forEach((input) => {
711
+ const dataComplete = input.getAttribute('data-complete');
702
712
 
703
- if (!allComplete) return;
713
+ if (dataComplete !== null && dataComplete !== "true") {
714
+ allComplete = false;
704
715
  }
716
+ });
705
717
 
706
- if (this.checkCondition(action.condition)) {
707
- this.showError(false, '');
708
- // TODO: MM - begin
709
- // this.send(
710
- // { payload: { formData: this.formData, userTask: this.userTask() } },
711
- // this.actions.findIndex((element) => element.label === action.label)
712
- // );
713
- const msg = this.messages[this.id] || {};
714
- msg.payload = { formData: this.formData, userTask: this.userTask() };
715
- this.send(
716
- msg,
717
- this.actions.findIndex((element) => element.label === action.label)
718
- );
719
- // TODO: mm - end
720
- } else {
721
- this.showError(true, action.errorMessage);
722
- }
723
- },
724
- checkCondition(condition) {
725
- if (condition == '') return true;
726
- try {
727
- const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
728
- const result = func(this.formData, this.taskInput, this.messages[this.id]);
729
- console.log(this.formData, result);
730
- return Boolean(result);
731
- } catch (err) {
732
- console.error('Error while evaluating condition: ' + err);
733
- return false;
734
- }
735
- },
736
- showError(bool, errMsg) {
737
- this.error = bool;
738
- this.errorMsg = errMsg;
739
- },
718
+ if (!allComplete) return;
719
+ }
720
+
721
+ if (this.checkCondition(action.condition)) {
722
+ this.showError(false, '');
723
+ // TODO: MM - begin
724
+ // this.send(
725
+ // { payload: { formData: this.formData, userTask: this.userTask() } },
726
+ // this.actions.findIndex((element) => element.label === action.label)
727
+ // );
728
+ const msg = this.messages[this.id] || {};
729
+ msg.payload = { formData: this.formData, userTask: this.userTask() };
730
+ this.send(
731
+ msg,
732
+ this.actions.findIndex((element) => element.label === action.label)
733
+ );
734
+ // TODO: mm - end
735
+ } else {
736
+ this.showError(true, action.errorMessage);
737
+ }
738
+ },
739
+ checkCondition(condition) {
740
+ if (condition == '') return true;
741
+ try {
742
+ const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
743
+ const result = func(this.formData, this.taskInput, this.messages[this.id]);
744
+ console.log(this.formData, result);
745
+ return Boolean(result);
746
+ } catch (err) {
747
+ console.error('Error while evaluating condition: ' + err);
748
+ return false;
749
+ }
740
750
  },
751
+ showError(bool, errMsg) {
752
+ this.error = bool;
753
+ this.errorMsg = errMsg;
754
+ },
755
+ },
741
756
  };
742
757
 
743
758
  function mapItems(type, field) {
744
- if (type === 'enum') {
745
- return field.enumValues.map((enumValue) => ({
746
- title: enumValue.name,
747
- value: enumValue.id,
748
- }));
749
- } else {
750
- return null;
751
- }
759
+ if (type === 'enum') {
760
+ return field.enumValues.map((enumValue) => ({
761
+ title: enumValue.name,
762
+ value: enumValue.id,
763
+ }));
764
+ } else {
765
+ return null;
766
+ }
752
767
  }
753
768
  </script>
754
769