@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.2-feature-997de4-m7nhlmql → 1.1.2-feature-3cca8f-m7uo92tb

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 (7) hide show
  1. package/nodes/ui-dynamic-form.html +47 -18
  2. package/package.json +1 -1
  3. package/resources/ui-dynamic-form.umd.js +2 -2
  4. package/ui/components/FooterActions.vue +4 -1
  5. package/ui/components/TitleText.vue +24 -3
  6. package/ui/components/UIDynamicForm.vue +155 -149
  7. package/ui/stylesheets/ui-dynamic-form.css +16 -0
package/ui/components/FooterActions.vue CHANGED
@@ -7,6 +7,7 @@
7
7
  :key="index"
8
8
  style="min-height: 36px"
9
9
  :class="getActionButtonClass(action)"
10
+ :disabled="formIsFinished"
10
11
  @click="actionCallback(action)"
11
12
  >
12
13
  {{ action.label }}
@@ -20,6 +21,7 @@
20
21
  :key="index"
21
22
  style="min-height: 36px"
22
23
  :class="getActionButtonClass(action)"
24
+ :disabled="formIsFinished"
23
25
  @click="actionCallback(action)"
24
26
  >
25
27
  {{ action.label }}
@@ -35,7 +37,8 @@ export default {
35
37
  name: 'UIDynamicFormFooterAction',
36
38
  props: {
37
39
  actions: { type: Array, default () { return [] } },
38
- actionCallback: { type: Function, default (action) {} }
40
+ actionCallback: { type: Function, default (action) {} },
41
+ formIsFinished: { type: Boolean, default () { return false } }
39
42
  },
40
43
  methods: {
41
44
  getActionButtonClass (action) {
package/ui/components/TitleText.vue CHANGED
@@ -1,7 +1,25 @@
1
1
  <template>
2
2
  <div v-if="title.length > 0">
3
- <h3 :class="typeSpecificStyling">
4
- <div style="width: fit-content">
3
+ <h3 :class="typeSpecificStyling" style="display: flex; gap: 25px; align-items: center">
4
+ <svg
5
+ v-if="collapsible && !collapsed"
6
+ style="width: 25px; height: 25px; cursor: pointer;"
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ viewBox="0 0 448 512"
9
+ @click="toggleCollapse"
10
+ >
11
+ <path :fill="style === 'default' ? 'white' : 'black'" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
12
+ </svg>
13
+ <svg
14
+ v-if="collapsible && collapsed"
15
+ style="width: 25px; height: 25px; cursor: pointer;"
16
+ xmlns="http://www.w3.org/2000/svg"
17
+ viewBox="0 0 320 512"
18
+ @click="toggleCollapse"
19
+ >
20
+ <path :fill="style === 'default' ? 'white' : 'black'" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
21
+ </svg>
22
+ <div :style="{width: 'fit-content', display: style === 'default' ? '' : 'flex'}">
5
23
  <img v-if="titleIcon.length > 0" :src="titleIcon" style="padding-right: 16px;">
6
24
  <span :style="customStyles">{{ title }}</span>
7
25
  <hr v-if="style === 'default'">
@@ -18,7 +36,10 @@ export default {
18
36
  style: { type: String, default () { return 'default' } },
19
37
  title: { type: String, default () { return '' } },
20
38
  customStyles: { type: String, default () { return '' } },
21
- titleIcon: { type: String, default () { return '' } }
39
+ collapsible: { type: Boolean, default () { return false } },
40
+ collapsed: { type: Boolean, default () { return false } },
41
+ titleIcon: { type: String, default () { return '' } },
42
+ toggleCollapse: { type: Function, default () {} }
22
43
  },
23
44
  computed: {
24
45
  typeSpecificStyling () {
package/ui/components/UIDynamicForm.vue CHANGED
@@ -1,57 +1,79 @@
1
1
  <template>
2
2
  <div className="ui-dynamic-form-external-sizing-wrapper" :style="props.card_size_styling">
3
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" />
4
+ <UIDynamicFormTitleText
5
+ v-if="props.title_style === 'outside' && hasUserTask"
6
+ :style="props.title_style"
7
+ :title="props.title_text"
8
+ :customStyles="props.title_custom_text_styling"
9
+ :titleIcon="props.title_icon"
10
+ :collapsible="props.collapsible || (props.collapse_when_finished && formIsFinished)"
11
+ :collapsed="collapsed"
12
+ :toggleCollapse="toggleCollapse"
13
+ />
5
14
  <div className="ui-dynamic-form-wrapper">
6
- <p v-if="hasUserTask()" style="margin-bottom: 0px;">
15
+ <p v-if="hasUserTask" style="margin-bottom: 0px;">
7
16
  <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">
13
- <component
14
- :is="createComponent(field).type"
15
- v-if="createComponent(field).innerText"
16
- v-bind="createComponent(field).props"
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]"
37
- />
38
- </v-col>
17
+ <UIDynamicFormTitleText
18
+ v-if="props.title_style != 'outside'"
19
+ :style="props.title_style"
20
+ :title="props.title_text"
21
+ :customStyles="props.title_custom_text_styling"
22
+ :titleIcon="props.title_icon"
23
+ :collapsible="props.collapsible || (props.collapse_when_finished && formIsFinished)"
24
+ :collapsed="collapsed"
25
+ :toggleCollapse="toggleCollapse"
26
+ />
27
+ <Transition name="cardCollapse">
28
+ <div v-if="!collapsed">
29
+ <div className="ui-dynamic-form-formfield-positioner">
30
+ <FormKit id="form" type="group">
31
+ <v-row v-for="(field, index) in fields()" :key="field" :style="getRowWidthStyling(field, index)">
32
+ <v-col cols="12">
33
+ <component
34
+ :is="createComponent(field).type"
35
+ v-if="createComponent(field).innerText"
36
+ v-bind="createComponent(field).props"
37
+ v-model="formData[field.id]"
38
+ >
39
+ {{ createComponent(field).innerText }}
40
+ </component>
41
+ <div v-else-if="createComponent(field).type == 'v-slider'">
42
+ <p class="formkit-label">{{ field.label }}</p>
43
+ <component
44
+ :is="createComponent(field).type"
45
+ v-bind="createComponent(field).props"
46
+ v-model="field.defaultValue"
47
+ />
48
+ <p class="formkit-help">
49
+ {{ field.customForm ? JSON.parse(field.customForm).hint : undefined }}
50
+ </p>
51
+ </div>
52
+ <component
53
+ :is="createComponent(field).type"
54
+ v-else
55
+ v-bind="createComponent(field).props"
56
+ v-model="formData[field.id]"
57
+ />
58
+ </v-col>
59
+ </v-row>
60
+ </FormKit>
61
+ </div>
62
+ <v-row :class="dynamicFooterClass">
63
+ <v-row v-if="errorMsg.length > 0" style="padding: 12px">
64
+ <v-alert type="error">Error: {{ errorMsg }}</v-alert>
65
+ </v-row>
66
+ <UIDynamicFormFooterAction v-if="props.actions_inside_card && actions.length > 0" :actions="actions" :actionCallback="actionFn" :formIsFinished="formIsFinished" style="padding: 16px; padding-top: 0px;" />
39
67
  </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>
45
- </v-row>
46
- <UIDynamicFormFooterAction v-if="props.actions_inside_card && actions.length > 0" :actions="actions" :actionCallback="actionFn" style="padding: 16px; padding-top: 0px;" />
47
- </v-row>
68
+ </div>
69
+ </Transition>
48
70
  </v-form>
49
71
  </p>
50
72
  <p v-else>
51
- <v-alert :text="waiting_info" :title="waiting_title" />
73
+ <v-alert v-if="props.waiting_info.length > 0 || props.waiting_title.length > 0" :text="props.waiting_info" :title="props.waiting_title" />
52
74
  </p>
53
75
  </div>
54
- <div v-if="!props.actions_inside_card && actions.length > 0 && hasUserTask()" style="padding-top: 32px;">
76
+ <div v-if="!props.actions_inside_card && actions.length > 0 && hasUserTask" style="padding-top: 32px;">
55
77
  <UIDynamicFormFooterAction :actions="actions" :actionCallback="actionFn" />
56
78
  </div>
57
79
  </div>
@@ -61,7 +83,6 @@
61
83
  <script>
62
84
  import { FormKit, defaultConfig, plugin } from '@formkit/vue'
63
85
  import { getCurrentInstance, markRaw } from 'vue'
64
- import { mapState } from 'vuex'
65
86
 
66
87
  // eslint-disable-next-line import/no-unresolved
67
88
  import '@formkit/themes/genesis'
@@ -96,39 +117,31 @@ export default {
96
117
  data () {
97
118
  return {
98
119
  actions: [],
99
- form: {},
100
120
  formData: {},
101
- taskInput: {},
121
+ userTask: null,
102
122
  theme: '',
103
- error: false,
104
- errorMsg: ''
123
+ errorMsg: '',
124
+ formIsFinished: false,
125
+ msg: null,
126
+ collapsed: false
105
127
  }
106
128
  },
107
129
  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
130
  dynamicClass () {
120
131
  return `ui-dynamic-form-${this.theme} ui-dynamic-form-common`
121
132
  },
122
-
123
133
  dynamicFooterClass () {
124
134
  return `ui-dynamic-form-footer-${this.theme} ui-dynamic-form-footer-common`
135
+ },
136
+ hasUserTask () {
137
+ return !!this.userTask
125
138
  }
126
139
  },
127
140
  watch: {
128
141
  formData: {
129
142
  handler (newData, oldData) {
130
143
  if (this.props.trigger_on_change) {
131
- const res = { payload: { formData: newData, userTask: this.taskInput } }
144
+ const res = { payload: { formData: newData, userTask: this.userTask } }
132
145
  this.send(res, this.actions.length)
133
146
  }
134
147
  },
@@ -163,43 +176,11 @@ export default {
163
176
  })
164
177
 
165
178
  this.$socket.on('widget-load:' + this.id, (msg) => {
166
- this.init()
167
- this.$store.commit('data/bind', {
168
- widgetId: this.id,
169
- msg
170
- })
179
+ this.init(msg)
171
180
  })
172
181
  this.$socket.on('msg-input:' + this.id, (msg) => {
173
182
  // store the latest message in our client-side vuex store when we receive a new message
174
- this.init()
175
-
176
- this.messages[this.id] = msg
177
-
178
- const hasTask = msg.payload && msg.payload.userTask
179
- const formFields = msg.payload.userTask.userTaskConfig.formFields
180
- const formFieldIds = formFields.map(ff => ff.id)
181
- const initialValues = msg.payload.userTask.startToken
182
-
183
- if (hasTask) {
184
- this.taskInput = msg.payload.userTask
185
- }
186
-
187
- if (hasTask && formFields) {
188
- formFields.forEach((field) => {
189
- this.formData[field.id] = field.defaultValue
190
- })
191
- }
192
-
193
- if (hasTask && initialValues) {
194
- Object.keys(initialValues).filter(key => formFieldIds.includes(key)).forEach((key) => {
195
- this.formData[key] = initialValues[key]
196
- })
197
- }
198
-
199
- this.$store.commit('data/bind', {
200
- widgetId: this.id,
201
- msg
202
- })
183
+ this.init(msg)
203
184
  })
204
185
  // tell Node-RED that we're loading a new instance of this widget
205
186
  this.$socket.emit('widget-load', this.id)
@@ -218,7 +199,7 @@ export default {
218
199
  const name = field.id
219
200
  const customProperties = customForm.customProperties ?? []
220
201
  const isReadOnly = (
221
- this.props.readonly || customProperties.find(entry => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true'))
202
+ this.props.readonly || this.formIsFinished || customProperties.find(entry => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true'))
222
203
  ? 'true'
223
204
  : undefined
224
205
  switch (field.type) {
@@ -231,7 +212,7 @@ export default {
231
212
  name,
232
213
  label: field.label,
233
214
  required: field.required,
234
- value: field.defaultValue,
215
+ value: this.formData[field.id],
235
216
  number: 'integer',
236
217
  help: hint,
237
218
  wrapperClass: '$remove:formkit-wrapper',
@@ -253,7 +234,7 @@ export default {
253
234
  name,
254
235
  label: field.label,
255
236
  required: field.required,
256
- value: field.defaultValue,
237
+ value: this.formData[field.id],
257
238
  step,
258
239
  help: hint,
259
240
  wrapperClass: '$remove:formkit-wrapper',
@@ -274,7 +255,7 @@ export default {
274
255
  name,
275
256
  label: field.label,
276
257
  required: field.required,
277
- value: field.defaultValue,
258
+ value: this.formData[field.id],
278
259
  help: hint,
279
260
  wrapperClass: '$remove:formkit-wrapper',
280
261
  labelClass: 'ui-dynamic-form-input-label',
@@ -297,7 +278,7 @@ export default {
297
278
  name,
298
279
  label: field.label,
299
280
  required: field.required,
300
- value: field.defaultValue,
281
+ value: this.formData[field.id],
301
282
  options: enums,
302
283
  help: hint,
303
284
  wrapperClass: '$remove:formkit-wrapper',
@@ -322,7 +303,7 @@ export default {
322
303
  name,
323
304
  label: field.label,
324
305
  required: field.required,
325
- value: field.defaultValue,
306
+ value: this.formData[field.id],
326
307
  options: selections,
327
308
  placeholder,
328
309
  help: hint,
@@ -345,7 +326,7 @@ export default {
345
326
  name,
346
327
  label: field.label,
347
328
  required: field.required,
348
- value: field.defaultValue,
329
+ value: this.formData[field.id],
349
330
  help: hint,
350
331
  placeholder,
351
332
  wrapperClass: '$remove:formkit-wrapper',
@@ -366,7 +347,7 @@ export default {
366
347
  name,
367
348
  label: field.label,
368
349
  required: field.required,
369
- value: field.defaultValue,
350
+ value: this.formData[field.id],
370
351
  help: hint,
371
352
  labelClass: 'ui-dynamic-form-input-label',
372
353
  inputClass: `input-${this.theme}`,
@@ -386,7 +367,7 @@ export default {
386
367
  name,
387
368
  label: field.label,
388
369
  required: field.required,
389
- value: field.defaultValue,
370
+ value: this.formData[field.id],
390
371
  help: hint,
391
372
  innerClass: 'reset-background',
392
373
  wrapperClass: '$remove:formkit-wrapper',
@@ -411,7 +392,7 @@ export default {
411
392
  name,
412
393
  label: field.label,
413
394
  required: field.required,
414
- value: field.defaultValue,
395
+ value: this.formData[field.id],
415
396
  options,
416
397
  help: hint,
417
398
  fieldsetClass: 'custom-fieldset',
@@ -433,7 +414,7 @@ export default {
433
414
  name,
434
415
  label: field.label,
435
416
  required: field.required,
436
- value: field.defaultValue,
417
+ value: this.formData[field.id],
437
418
  help: hint,
438
419
  readonly: isReadOnly,
439
420
  disabled: isReadOnly,
@@ -450,7 +431,7 @@ export default {
450
431
  name,
451
432
  label: field.label,
452
433
  required: field.required,
453
- value: field.defaultValue,
434
+ value: this.formData[field.id],
454
435
  help: hint,
455
436
  wrapperClass: '$remove:formkit-wrapper',
456
437
  labelClass: 'ui-dynamic-form-input-label',
@@ -470,7 +451,7 @@ export default {
470
451
  name,
471
452
  label: field.label,
472
453
  required: field.required,
473
- value: field.defaultValue,
454
+ value: this.formData[field.id],
474
455
  help: hint,
475
456
  placeholder,
476
457
  wrapperClass: '$remove:formkit-wrapper',
@@ -492,14 +473,14 @@ export default {
492
473
  }
493
474
  return {
494
475
  type: typeToUse,
495
- innerText: field.defaultValue
476
+ innerText: this.formData[field.id]
496
477
  }
497
478
  case 'hidden':
498
479
  return {
499
480
  type: 'input',
500
481
  props: {
501
482
  type: 'hidden',
502
- value: field.defaultValue
483
+ value: this.formData[field.id]
503
484
  }
504
485
  }
505
486
  case 'month':
@@ -511,7 +492,7 @@ export default {
511
492
  name,
512
493
  label: field.label,
513
494
  required: field.required,
514
- value: field.defaultValue,
495
+ value: this.formData[field.id],
515
496
  help: hint,
516
497
  wrapperClass: '$remove:formkit-wrapper',
517
498
  labelClass: 'ui-dynamic-form-input-label',
@@ -525,7 +506,7 @@ export default {
525
506
  case 'paragraph':
526
507
  return {
527
508
  type: 'p',
528
- innerText: field.defaultValue
509
+ innerText: this.formData[field.id]
529
510
  }
530
511
  case 'password':
531
512
  return {
@@ -536,7 +517,7 @@ export default {
536
517
  name,
537
518
  label: field.label,
538
519
  required: field.required,
539
- value: field.defaultValue,
520
+ value: this.formData[field.id],
540
521
  help: hint,
541
522
  placeholder,
542
523
  wrapperClass: '$remove:formkit-wrapper',
@@ -560,7 +541,7 @@ export default {
560
541
  name,
561
542
  label: field.label,
562
543
  required: field.required,
563
- value: field.defaultValue,
544
+ value: this.formData[field.id],
564
545
  options: radioOptions,
565
546
  help: hint,
566
547
  fieldsetClass: 'custom-fieldset',
@@ -582,7 +563,7 @@ export default {
582
563
  name,
583
564
  // label: field.label,
584
565
  required: field.required,
585
- // value: field.defaultValue,
566
+ // value: this.formData[field.id],
586
567
  // help: hint,
587
568
  min: customForm.min,
588
569
  max: customForm.max,
@@ -607,7 +588,7 @@ export default {
607
588
  name,
608
589
  label: field.label,
609
590
  required: field.required,
610
- value: field.defaultValue,
591
+ value: this.formData[field.id],
611
592
  help: hint,
612
593
  placeholder,
613
594
  wrapperClass: '$remove:formkit-wrapper',
@@ -629,7 +610,7 @@ export default {
629
610
  name,
630
611
  label: field.label,
631
612
  required: field.required,
632
- value: field.defaultValue,
613
+ value: this.formData[field.id],
633
614
  rows,
634
615
  help: hint,
635
616
  placeholder,
@@ -651,7 +632,7 @@ export default {
651
632
  name,
652
633
  label: field.label,
653
634
  required: field.required,
654
- value: field.defaultValue,
635
+ value: this.formData[field.id],
655
636
  help: hint,
656
637
  placeholder,
657
638
  wrapperClass: '$remove:formkit-wrapper',
@@ -672,7 +653,7 @@ export default {
672
653
  name,
673
654
  label: field.label,
674
655
  required: field.required,
675
- value: field.defaultValue,
656
+ value: this.formData[field.id],
676
657
  help: hint,
677
658
  placeholder,
678
659
  wrapperClass: '$remove:formkit-wrapper',
@@ -693,7 +674,7 @@ export default {
693
674
  name,
694
675
  label: field.label,
695
676
  required: field.required,
696
- value: field.defaultValue,
677
+ value: this.formData[field.id],
697
678
  help: hint,
698
679
  placeholder,
699
680
  wrapperClass: '$remove:formkit-wrapper',
@@ -714,7 +695,7 @@ export default {
714
695
  name,
715
696
  label: field.label,
716
697
  required: field.required,
717
- value: field.defaultValue,
698
+ value: this.formData[field.id],
718
699
  help: hint,
719
700
  labelClass: 'ui-dynamic-form-input-label',
720
701
  inputClass: `input-${this.theme}`,
@@ -726,22 +707,8 @@ export default {
726
707
  }
727
708
  }
728
709
  },
729
- checkFormState (state) {
730
- // const field = this.$formkit.get('field_01');
731
- // console.info(field.context.state.valid);
732
-
733
- return true
734
-
735
- // loop over fields then this.$formkit.get(this.id) -> check error state if all ok return true else return false
736
- // ?? wie unterscheiden wir welche actions dieser validierungsfehler betrifft ??
737
- // ?? wie machen wir formkit validierung auch im Studio available ??
738
- // \_ vllt macht es sinn das schema von formkit zu übernehmen oder alternativ nur unsere validierung zu nutzen.
739
- },
740
- hasUserTask () {
741
- return this.messages && this.messages[this.id] && this.messages[this.id].payload?.userTask
742
- },
743
- userTask () {
744
- return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}
710
+ toggleCollapse () {
711
+ this.collapsed = !this.collapsed
745
712
  },
746
713
  getRowWidthStyling (field, index) {
747
714
  let style = ''
@@ -756,7 +723,7 @@ export default {
756
723
  return style
757
724
  },
758
725
  fields () {
759
- const aFields = this.userTask()?.userTaskConfig?.formFields ?? []
726
+ const aFields = this.userTask.userTaskConfig?.formFields ?? []
760
727
  const fieldMap = aFields.map((field) => ({
761
728
  ...field,
762
729
  items: mapItems(field.type, field)
@@ -773,12 +740,52 @@ export default {
773
740
  msgArr[index] = msg
774
741
  this.$socket.emit('widget-action', this.id, msgArr)
775
742
  },
776
- init () {
743
+ init (msg) {
744
+ this.msg = msg
745
+ if (!msg) {
746
+ return
747
+ }
748
+
777
749
  this.actions = this.props.options
750
+
751
+ const hasTask = msg.payload && msg.payload.userTask
752
+
753
+ if (hasTask) {
754
+ this.userTask = msg.payload.userTask
755
+ } else {
756
+ this.userTask = null
757
+ this.formData = {}
758
+ return
759
+ }
760
+
761
+ const formFields = this.userTask.userTaskConfig.formFields
762
+ const formFieldIds = formFields.map(ff => ff.id)
763
+ const initialValues = this.userTask.startToken
764
+ const finishedFormData = msg.payload.formData
765
+ this.formIsFinished = !!msg.payload.formData
766
+ if (this.formIsFinished) {
767
+ this.collapsed = this.props.collapse_when_finished
768
+ }
769
+
770
+ if (formFields) {
771
+ formFields.forEach((field) => {
772
+ this.formData[field.id] = field.defaultValue
773
+ })
774
+ }
775
+
776
+ if (initialValues) {
777
+ Object.keys(initialValues).filter(key => formFieldIds.includes(key)).forEach((key) => {
778
+ this.formData[key] = initialValues[key]
779
+ })
780
+ }
781
+
782
+ if (this.formIsFinished) {
783
+ Object.keys(finishedFormData).filter(key => formFieldIds.includes(key)).forEach(key => {
784
+ this.formData[key] = finishedFormData[key]
785
+ })
786
+ }
778
787
  },
779
788
  actionFn (action) {
780
- // this.checkFormState();
781
-
782
789
  if (action.label === 'Speichern' || action.label === 'Speichern und nächster') {
783
790
  const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer')
784
791
  let allComplete = true
@@ -796,21 +803,21 @@ export default {
796
803
  }
797
804
 
798
805
  if (this.checkCondition(action.condition)) {
799
- this.showError(false, '')
806
+ this.showError('')
800
807
  // TODO: MM - begin
801
808
  // this.send(
802
- // { payload: { formData: this.formData, userTask: this.userTask() } },
809
+ // { payload: { formData: this.formData, userTask: this.userTask } },
803
810
  // this.actions.findIndex((element) => element.label === action.label)
804
811
  // );
805
- const msg = this.messages[this.id] || {}
806
- msg.payload = { formData: this.formData, userTask: this.userTask() }
812
+ const msg = this.msg ?? {}
813
+ msg.payload = { formData: this.formData, userTask: this.userTask }
807
814
  this.send(
808
815
  msg,
809
816
  this.actions.findIndex((element) => element.label === action.label)
810
817
  )
811
818
  // TODO: mm - end
812
819
  } else {
813
- this.showError(true, action.errorMessage)
820
+ this.showError(action.errorMessage)
814
821
  }
815
822
  },
816
823
  checkCondition (condition) {
@@ -818,15 +825,14 @@ export default {
818
825
  try {
819
826
  // eslint-disable-next-line no-new-func
820
827
  const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')')
821
- const result = func(this.formData, this.taskInput, this.messages[this.id])
828
+ const result = func(this.formData, this.userTask, this.msg)
822
829
  return Boolean(result)
823
830
  } catch (err) {
824
831
  console.error('Error while evaluating condition: ' + err)
825
832
  return false
826
833
  }
827
834
  },
828
- showError (bool, errMsg) {
829
- this.error = bool
835
+ showError (errMsg) {
830
836
  this.errorMsg = errMsg
831
837
  }
832
838
  }