@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.1-feature-cd5bdc-m71qgnx8 → 1.1.1-feature-ced0aa-m71uv139

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