@processmaker/screen-builder 2.83.2 → 2.83.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue-form-builder.css +1 -1
- package/dist/vue-form-builder.es.js +19994 -19801
- package/dist/vue-form-builder.es.js.map +1 -1
- package/dist/vue-form-builder.umd.js +53 -53
- package/dist/vue-form-builder.umd.js.map +1 -1
- package/package.json +13 -13
- package/src/components/editor/loop.vue +152 -132
- package/src/components/editor/multi-column.vue +178 -152
- package/src/components/inspector/collection-select-list.vue +43 -36
- package/src/components/inspector/label-submit-button.vue +5 -0
- package/src/components/inspector/loading-submit-button.vue +8 -5
- package/src/components/inspector/outbound-config.vue +91 -71
- package/src/components/inspector/screen-selector.vue +47 -44
- package/src/components/inspector/select-data-type-mask.vue +1 -1
- package/src/components/inspector/tooltip.vue +62 -60
- package/src/components/inspector/validation-select.vue +404 -180
- package/src/components/renderer/add-loop-row.vue +32 -21
- package/src/components/renderer/file-upload.vue +12 -1
- package/src/components/renderer/form-analytics-chart.vue +23 -26
- package/src/components/renderer/form-list-table.vue +77 -30
- package/src/components/renderer/form-loop.vue +88 -60
- package/src/components/renderer/form-masked-input.vue +1 -1
- package/src/components/renderer/form-nested-screen.vue +5 -0
- package/src/components/renderer/form-record-list.vue +25 -0
- package/src/components/vue-form-renderer.vue +2 -1
- package/src/main.js +4 -2
|
@@ -2,46 +2,91 @@
|
|
|
2
2
|
<div class="form-group">
|
|
3
3
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
4
4
|
<label class="m-0">{{ label }}</label>
|
|
5
|
-
<b-button
|
|
5
|
+
<b-button
|
|
6
|
+
class=""
|
|
7
|
+
variant="secondary"
|
|
8
|
+
size="sm"
|
|
9
|
+
data-cy="add-rule"
|
|
10
|
+
@click="showAddCard"
|
|
11
|
+
>{{ $t("Add Rule") }}</b-button
|
|
12
|
+
>
|
|
6
13
|
</div>
|
|
7
14
|
<div v-if="showCard" class="card mb-2">
|
|
8
15
|
<div class="card-body p-2">
|
|
9
16
|
<multiselect
|
|
17
|
+
v-model="selectedOption"
|
|
10
18
|
label="content"
|
|
11
19
|
track-by="content"
|
|
12
|
-
v-model="selectedOption"
|
|
13
20
|
:placeholder="$t('Select...')"
|
|
14
21
|
:show-labels="false"
|
|
15
22
|
:options="options"
|
|
16
23
|
:class="fieldClass"
|
|
17
24
|
data-cy="select-rule"
|
|
18
25
|
>
|
|
19
|
-
<template slot="noResult">{{
|
|
20
|
-
|
|
26
|
+
<template slot="noResult">{{
|
|
27
|
+
$t("No elements found. Consider changing the search query.")
|
|
28
|
+
}}</template>
|
|
29
|
+
<template slot="noOptions">{{ $t("No Data Available") }}</template>
|
|
21
30
|
</multiselect>
|
|
22
31
|
<div v-if="optionError" class="invalid-feedback d-block">
|
|
23
32
|
<div>{{ optionError }}</div>
|
|
24
33
|
</div>
|
|
25
34
|
</div>
|
|
26
35
|
<div class="card-footer text-right p-2">
|
|
27
|
-
<b-button
|
|
28
|
-
|
|
36
|
+
<b-button
|
|
37
|
+
variant="outline-secondary"
|
|
38
|
+
size="sm"
|
|
39
|
+
class="mr-2"
|
|
40
|
+
data-cy="cancel-rule"
|
|
41
|
+
@click="hideCard"
|
|
42
|
+
>{{ $t("Cancel") }}</b-button
|
|
43
|
+
>
|
|
44
|
+
<b-button
|
|
45
|
+
:disabled="disableBtn"
|
|
46
|
+
variant="secondary"
|
|
47
|
+
size="sm"
|
|
48
|
+
data-cy="save-rule"
|
|
49
|
+
@click="saveRule"
|
|
50
|
+
>{{ $t("Save") }}</b-button
|
|
51
|
+
>
|
|
29
52
|
</div>
|
|
30
53
|
</div>
|
|
31
|
-
<p v-if="!hasRules && !showCard">{{ $t(
|
|
54
|
+
<p v-if="!hasRules && !showCard">{{ $t("No validation rule(s)") }}</p>
|
|
32
55
|
<div v-if="hasRules">
|
|
33
56
|
<div role="tablist">
|
|
34
|
-
<b-card
|
|
35
|
-
|
|
57
|
+
<b-card
|
|
58
|
+
v-for="(rule, index) in rules"
|
|
59
|
+
:key="index"
|
|
60
|
+
class="mb-2 border-1"
|
|
61
|
+
:class="{
|
|
62
|
+
'border-0': showDeleteConfirmCard,
|
|
63
|
+
'border-top-1': showDeleteConfirmCard,
|
|
64
|
+
'border-1': !showDeleteConfirmCard
|
|
65
|
+
}"
|
|
66
|
+
>
|
|
67
|
+
<div
|
|
68
|
+
v-if="showDeleteConfirmCard && removeIndex == index"
|
|
69
|
+
class="card mb-3 bg-danger text-white text-right"
|
|
70
|
+
>
|
|
36
71
|
<div class="card-body p-2 text-left">
|
|
37
72
|
{{ confirmMessage }}
|
|
38
73
|
</div>
|
|
39
74
|
<div class="card-footer text-right p-2">
|
|
40
|
-
<button
|
|
41
|
-
|
|
75
|
+
<button
|
|
76
|
+
type="button"
|
|
77
|
+
class="btn btn-sm btn-light mr-2"
|
|
78
|
+
data-cy="cancel-confirm-delete-rule"
|
|
79
|
+
@click="hideDeleteConfirmCard"
|
|
80
|
+
>
|
|
81
|
+
{{ $t("Cancel") }}
|
|
42
82
|
</button>
|
|
43
|
-
<button
|
|
44
|
-
|
|
83
|
+
<button
|
|
84
|
+
type="button"
|
|
85
|
+
class="btn btn-sm btn-danger"
|
|
86
|
+
data-cy="confirm-delete-rule"
|
|
87
|
+
@click="deleteRule(index)"
|
|
88
|
+
>
|
|
89
|
+
{{ $t("Delete") }}
|
|
45
90
|
</button>
|
|
46
91
|
</div>
|
|
47
92
|
</div>
|
|
@@ -49,37 +94,82 @@
|
|
|
49
94
|
<div class="p-1 d-flex justify-content-between align-items-center">
|
|
50
95
|
{{ rule.content }}
|
|
51
96
|
<div class="actions">
|
|
52
|
-
<b-button
|
|
53
|
-
|
|
97
|
+
<b-button
|
|
98
|
+
v-if="rule.configs"
|
|
99
|
+
v-b-toggle="formatRuleContentAsId(rule.content)"
|
|
100
|
+
:aria-label="$t('Toggle Configuration')"
|
|
101
|
+
variant="link"
|
|
102
|
+
class="p-0 mr-1 secondary"
|
|
103
|
+
data-cy="edit-rule"
|
|
104
|
+
>
|
|
105
|
+
<i class="fas fa-cog fa-fw text-secondary" />
|
|
54
106
|
</b-button>
|
|
55
|
-
<b-button
|
|
107
|
+
<b-button
|
|
108
|
+
:aria-label="$t('Delete')"
|
|
109
|
+
variant="link"
|
|
110
|
+
class="p-0"
|
|
111
|
+
data-cy="remove-rule"
|
|
112
|
+
@click="confirmDelete(index)"
|
|
113
|
+
><i class="fas fa-trash-alt fa-fw text-secondary"
|
|
114
|
+
/></b-button>
|
|
56
115
|
</div>
|
|
57
116
|
</div>
|
|
58
117
|
</b-card-header>
|
|
59
|
-
<b-collapse
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
118
|
+
<b-collapse
|
|
119
|
+
:id="formatRuleContentAsId(rule.content)"
|
|
120
|
+
:accordion="formatRuleContentAsId(rule.content)"
|
|
121
|
+
:visible="rule.visible"
|
|
122
|
+
role="tabpanel"
|
|
123
|
+
>
|
|
124
|
+
<b-card-body>
|
|
125
|
+
<div class="p-2">
|
|
126
|
+
<div
|
|
127
|
+
v-for="config in rule.configs"
|
|
128
|
+
:key="config.label"
|
|
129
|
+
class="mb-2"
|
|
130
|
+
>
|
|
63
131
|
<div v-if="config.type === 'FormInput'">
|
|
64
|
-
<form-input
|
|
132
|
+
<form-input
|
|
133
|
+
v-model="config.value"
|
|
134
|
+
:label="config.label"
|
|
135
|
+
:name="config.name || config.label"
|
|
136
|
+
:validation="config.validation"
|
|
137
|
+
:helper="config.helper"
|
|
138
|
+
/>
|
|
65
139
|
</div>
|
|
66
|
-
<component
|
|
140
|
+
<component
|
|
67
141
|
:is="config.type"
|
|
142
|
+
v-else
|
|
143
|
+
v-model="config.value"
|
|
68
144
|
:label="config.label"
|
|
69
145
|
:name="config.name || config.label"
|
|
70
|
-
v-model="config.value"
|
|
71
146
|
:validation="config.validation"
|
|
72
147
|
:helper="config.helper"
|
|
73
148
|
:builder="builder"
|
|
74
|
-
:
|
|
75
|
-
:
|
|
149
|
+
:selected-control="selectedControl"
|
|
150
|
+
:form-config="formConfig"
|
|
76
151
|
/>
|
|
77
152
|
</div>
|
|
78
|
-
<div
|
|
153
|
+
<div>
|
|
154
|
+
<small class="form-text text-muted">{{ rule.helper }}</small>
|
|
155
|
+
</div>
|
|
79
156
|
</div>
|
|
80
157
|
<b-card-footer class="text-right">
|
|
81
|
-
<b-button
|
|
82
|
-
|
|
158
|
+
<b-button
|
|
159
|
+
variant="outline-secondary"
|
|
160
|
+
size="sm"
|
|
161
|
+
class="mr-2"
|
|
162
|
+
data-cy="cancel-rule"
|
|
163
|
+
@click="onCancel(rule, index)"
|
|
164
|
+
>{{ $t("Cancel") }}</b-button
|
|
165
|
+
>
|
|
166
|
+
<b-button
|
|
167
|
+
variant="secondary"
|
|
168
|
+
size="sm"
|
|
169
|
+
data-cy="update-rule"
|
|
170
|
+
@click="onUpdate(rule, index)"
|
|
171
|
+
>{{ $t("Update") }}</b-button
|
|
172
|
+
>
|
|
83
173
|
</b-card-footer>
|
|
84
174
|
</b-card-body>
|
|
85
175
|
</b-collapse>
|
|
@@ -94,220 +184,352 @@
|
|
|
94
184
|
</template>
|
|
95
185
|
|
|
96
186
|
<script>
|
|
97
|
-
import { FormInput, FormCheckbox } from
|
|
98
|
-
import _ from
|
|
99
|
-
import InputVariable from
|
|
187
|
+
import { FormInput, FormCheckbox } from "@processmaker/vue-form-elements";
|
|
188
|
+
import _ from "lodash";
|
|
189
|
+
import InputVariable from "./input-variable.vue";
|
|
100
190
|
|
|
101
191
|
export default {
|
|
102
|
-
props: ['label', 'value', 'helper', 'name', 'builder', 'selectedControl', 'formConfig'],
|
|
103
192
|
components: {
|
|
104
193
|
FormInput,
|
|
105
194
|
InputVariable,
|
|
106
|
-
FormCheckbox
|
|
195
|
+
FormCheckbox
|
|
107
196
|
},
|
|
197
|
+
props: [
|
|
198
|
+
"label",
|
|
199
|
+
"value",
|
|
200
|
+
"helper",
|
|
201
|
+
"name",
|
|
202
|
+
"builder",
|
|
203
|
+
"selectedControl",
|
|
204
|
+
"formConfig"
|
|
205
|
+
],
|
|
108
206
|
data() {
|
|
109
207
|
return {
|
|
110
208
|
rules: [],
|
|
111
209
|
showCard: false,
|
|
112
210
|
showDeleteConfirmCard: false,
|
|
113
|
-
selectedOption:
|
|
114
|
-
confirmMessage:
|
|
211
|
+
selectedOption: "",
|
|
212
|
+
confirmMessage: "",
|
|
115
213
|
removeIndex: null,
|
|
116
|
-
optionError:
|
|
214
|
+
optionError: "",
|
|
117
215
|
disableBtn: false,
|
|
118
216
|
cloneRules: [],
|
|
119
217
|
options: [
|
|
120
218
|
{
|
|
121
|
-
value:
|
|
122
|
-
content: this.$t(
|
|
123
|
-
helper: this.$t(
|
|
219
|
+
value: "accepted",
|
|
220
|
+
content: this.$t("Accepted"),
|
|
221
|
+
helper: this.$t(
|
|
222
|
+
"The field under validation must be yes, on, 1 or true."
|
|
223
|
+
)
|
|
124
224
|
},
|
|
125
225
|
{
|
|
126
|
-
value:
|
|
127
|
-
content: this.$t(
|
|
128
|
-
helper: this.$t(
|
|
226
|
+
value: "alpha",
|
|
227
|
+
content: this.$t("Alpha"),
|
|
228
|
+
helper: this.$t(
|
|
229
|
+
"The field under validation must be entirely alphabetic characters."
|
|
230
|
+
)
|
|
129
231
|
},
|
|
130
232
|
{
|
|
131
|
-
value:
|
|
132
|
-
content: this.$t(
|
|
133
|
-
helper: this.$t(
|
|
233
|
+
value: "alpha_num",
|
|
234
|
+
content: this.$t("Alpha-Numeric"),
|
|
235
|
+
helper: this.$t(
|
|
236
|
+
"The field under validation must be entirely alpha-numeric characters."
|
|
237
|
+
)
|
|
134
238
|
},
|
|
135
239
|
{
|
|
136
|
-
value:
|
|
137
|
-
field:
|
|
138
|
-
content: this.$t(
|
|
139
|
-
helper: this.$t(
|
|
240
|
+
value: "",
|
|
241
|
+
field: "between:",
|
|
242
|
+
content: this.$t("Between Min & Max"),
|
|
243
|
+
helper: this.$t(
|
|
244
|
+
"The field under validation must have a size between the given min and max."
|
|
245
|
+
),
|
|
140
246
|
visible: true,
|
|
141
247
|
configs: [
|
|
142
|
-
{
|
|
143
|
-
|
|
144
|
-
|
|
248
|
+
{
|
|
249
|
+
type: "FormInput",
|
|
250
|
+
label: this.$t("Min"),
|
|
251
|
+
helper: "",
|
|
252
|
+
validation: "required|integer"
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
type: "FormInput",
|
|
256
|
+
label: this.$t("Max"),
|
|
257
|
+
helper: "",
|
|
258
|
+
validation: "required|integer"
|
|
259
|
+
}
|
|
260
|
+
]
|
|
145
261
|
},
|
|
146
262
|
{
|
|
147
|
-
value:
|
|
148
|
-
content: this.$t(
|
|
149
|
-
helper: this.$t(
|
|
263
|
+
value: "email",
|
|
264
|
+
content: this.$t("Email"),
|
|
265
|
+
helper: this.$t(
|
|
266
|
+
"The field under validation must be formatted as an e-mail address."
|
|
267
|
+
)
|
|
150
268
|
},
|
|
151
269
|
{
|
|
152
|
-
value:
|
|
153
|
-
field:
|
|
154
|
-
content: this.$t(
|
|
155
|
-
helper: this.$t(
|
|
270
|
+
value: "",
|
|
271
|
+
field: "in:",
|
|
272
|
+
content: this.$t("In"),
|
|
273
|
+
helper: this.$t(
|
|
274
|
+
"The field under validation must be included in the given list of values. The field can be an array or string."
|
|
275
|
+
),
|
|
156
276
|
visible: true,
|
|
157
277
|
configs: [
|
|
158
|
-
{
|
|
159
|
-
|
|
278
|
+
{
|
|
279
|
+
type: "FormInput",
|
|
280
|
+
label: this.$t("Values"),
|
|
281
|
+
helper: "",
|
|
282
|
+
validation: "required"
|
|
283
|
+
}
|
|
284
|
+
]
|
|
160
285
|
},
|
|
161
286
|
{
|
|
162
|
-
value:
|
|
163
|
-
field:
|
|
164
|
-
content: this.$t(
|
|
165
|
-
helper:
|
|
287
|
+
value: "",
|
|
288
|
+
field: "max:",
|
|
289
|
+
content: this.$t("Max Length"),
|
|
290
|
+
helper: "",
|
|
166
291
|
visible: true,
|
|
167
292
|
configs: [
|
|
168
|
-
{
|
|
169
|
-
|
|
293
|
+
{
|
|
294
|
+
type: "FormInput",
|
|
295
|
+
label: this.$t("Max Input"),
|
|
296
|
+
helper: this.$t(
|
|
297
|
+
"Validate that an attribute is no greater than a given length."
|
|
298
|
+
),
|
|
299
|
+
validation: "required|integer"
|
|
300
|
+
}
|
|
301
|
+
]
|
|
170
302
|
},
|
|
171
303
|
{
|
|
172
|
-
value:
|
|
173
|
-
field:
|
|
174
|
-
content: this.$t(
|
|
175
|
-
helper:
|
|
304
|
+
value: "",
|
|
305
|
+
field: "min:",
|
|
306
|
+
content: this.$t("Min Length"),
|
|
307
|
+
helper: "",
|
|
176
308
|
visible: true,
|
|
177
309
|
configs: [
|
|
178
|
-
{
|
|
179
|
-
|
|
310
|
+
{
|
|
311
|
+
type: "FormInput",
|
|
312
|
+
label: this.$t("Min Input"),
|
|
313
|
+
helper: this.$t(
|
|
314
|
+
"Validate that an attribute is at least a given length."
|
|
315
|
+
),
|
|
316
|
+
validation: "required|integer"
|
|
317
|
+
}
|
|
318
|
+
]
|
|
180
319
|
},
|
|
181
320
|
{
|
|
182
|
-
value:
|
|
183
|
-
field:
|
|
184
|
-
content: this.$t(
|
|
185
|
-
helper: this.$t(
|
|
321
|
+
value: "",
|
|
322
|
+
field: "not_in:",
|
|
323
|
+
content: this.$t("Not In"),
|
|
324
|
+
helper: this.$t(
|
|
325
|
+
"The field under validation must not be included in the given list of values."
|
|
326
|
+
),
|
|
186
327
|
visible: true,
|
|
187
328
|
configs: [
|
|
188
|
-
{
|
|
189
|
-
|
|
329
|
+
{
|
|
330
|
+
type: "FormInput",
|
|
331
|
+
label: this.$t("Values"),
|
|
332
|
+
helper: "",
|
|
333
|
+
validation: "required"
|
|
334
|
+
}
|
|
335
|
+
]
|
|
190
336
|
},
|
|
191
337
|
{
|
|
192
|
-
value:
|
|
193
|
-
content: this.$t(
|
|
194
|
-
helper: this.$t(
|
|
338
|
+
value: "required",
|
|
339
|
+
content: this.$t("Required"),
|
|
340
|
+
helper: this.$t(
|
|
341
|
+
"Checks if the length of the String representation of the value is >"
|
|
342
|
+
)
|
|
195
343
|
},
|
|
196
344
|
{
|
|
197
|
-
value:
|
|
198
|
-
field:
|
|
199
|
-
content: this.$t(
|
|
200
|
-
helper: this.$t(
|
|
345
|
+
value: "",
|
|
346
|
+
field: "required_if:",
|
|
347
|
+
content: this.$t("Required If"),
|
|
348
|
+
helper: this.$t(
|
|
349
|
+
"The field under validation must be present and not empty if the Variable Name field is equal to any value."
|
|
350
|
+
),
|
|
201
351
|
visible: true,
|
|
202
352
|
configs: [
|
|
203
|
-
{
|
|
204
|
-
|
|
205
|
-
|
|
353
|
+
{
|
|
354
|
+
type: "InputVariable",
|
|
355
|
+
name: "variable-name",
|
|
356
|
+
label: this.$t("Variable Name"),
|
|
357
|
+
helper: "",
|
|
358
|
+
validation: "required"
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
type: "FormInput",
|
|
362
|
+
name: "variable-value",
|
|
363
|
+
label: this.$t("Variable Value"),
|
|
364
|
+
helper: "",
|
|
365
|
+
validation: ""
|
|
366
|
+
}
|
|
367
|
+
]
|
|
206
368
|
},
|
|
207
369
|
{
|
|
208
|
-
value:
|
|
209
|
-
field:
|
|
210
|
-
content: this.$t(
|
|
211
|
-
helper: this.$t(
|
|
370
|
+
value: "",
|
|
371
|
+
field: "required_unless:",
|
|
372
|
+
content: this.$t("Required Unless"),
|
|
373
|
+
helper: this.$t(
|
|
374
|
+
"The field under validation must be present and not empty unless the Variable Name field is equal to any value."
|
|
375
|
+
),
|
|
212
376
|
visible: true,
|
|
213
377
|
configs: [
|
|
214
|
-
{
|
|
215
|
-
|
|
216
|
-
|
|
378
|
+
{
|
|
379
|
+
type: "InputVariable",
|
|
380
|
+
name: "variable-name",
|
|
381
|
+
label: this.$t("Variable Name"),
|
|
382
|
+
helper: "",
|
|
383
|
+
validation: "required"
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
type: "FormInput",
|
|
387
|
+
name: "variable-value",
|
|
388
|
+
label: this.$t("Variable Value"),
|
|
389
|
+
helper: ""
|
|
390
|
+
}
|
|
391
|
+
]
|
|
217
392
|
},
|
|
218
393
|
{
|
|
219
|
-
value:
|
|
220
|
-
field:
|
|
221
|
-
content: this.$t(
|
|
222
|
-
helper: this.$t(
|
|
394
|
+
value: "",
|
|
395
|
+
field: "same:",
|
|
396
|
+
content: this.$t("Same"),
|
|
397
|
+
helper: this.$t(
|
|
398
|
+
"The given field must match the field under validation."
|
|
399
|
+
),
|
|
223
400
|
visible: true,
|
|
224
401
|
configs: [
|
|
225
|
-
{
|
|
226
|
-
|
|
402
|
+
{
|
|
403
|
+
type: "InputVariable",
|
|
404
|
+
name: "variable-name",
|
|
405
|
+
label: this.$t("Variable Name"),
|
|
406
|
+
helper: "",
|
|
407
|
+
validation: "required"
|
|
408
|
+
}
|
|
409
|
+
]
|
|
227
410
|
},
|
|
228
411
|
{
|
|
229
|
-
value:
|
|
230
|
-
content:
|
|
231
|
-
helper: this.$t(
|
|
412
|
+
value: "url",
|
|
413
|
+
content: "URL",
|
|
414
|
+
helper: this.$t("Validate that an attribute has a valid URL format.")
|
|
232
415
|
},
|
|
233
416
|
{
|
|
234
|
-
value:
|
|
235
|
-
content:
|
|
236
|
-
helper: this.$t(
|
|
417
|
+
value: "custom_date",
|
|
418
|
+
content: "Date",
|
|
419
|
+
helper: this.$t(
|
|
420
|
+
"The field under validation must be a valid date format which is acceptable by Javascript's Date object."
|
|
421
|
+
)
|
|
237
422
|
},
|
|
238
423
|
{
|
|
239
|
-
value:
|
|
240
|
-
field:
|
|
241
|
-
content: this.$t(
|
|
242
|
-
helper: this.$t(
|
|
424
|
+
value: "",
|
|
425
|
+
field: "after:",
|
|
426
|
+
content: this.$t("After Date"),
|
|
427
|
+
helper: this.$t(
|
|
428
|
+
"The field under validation must be after the given date."
|
|
429
|
+
),
|
|
243
430
|
visible: true,
|
|
244
431
|
configs: [
|
|
245
|
-
{
|
|
246
|
-
|
|
432
|
+
{
|
|
433
|
+
type: "FormInput",
|
|
434
|
+
label: this.$t("Date"),
|
|
435
|
+
helper: "",
|
|
436
|
+
validation: "required"
|
|
437
|
+
}
|
|
438
|
+
]
|
|
247
439
|
},
|
|
248
440
|
{
|
|
249
|
-
value:
|
|
250
|
-
field:
|
|
251
|
-
content: this.$t(
|
|
252
|
-
helper: this.$t(
|
|
441
|
+
value: "",
|
|
442
|
+
field: "after_or_equal:",
|
|
443
|
+
content: this.$t("After or Equal to Date"),
|
|
444
|
+
helper: this.$t(
|
|
445
|
+
"The field unter validation must be after or equal to the given field."
|
|
446
|
+
),
|
|
253
447
|
visible: true,
|
|
254
448
|
configs: [
|
|
255
|
-
{
|
|
256
|
-
|
|
449
|
+
{
|
|
450
|
+
type: "FormInput",
|
|
451
|
+
label: this.$t("Date"),
|
|
452
|
+
helper: "",
|
|
453
|
+
validation: "required"
|
|
454
|
+
}
|
|
455
|
+
]
|
|
257
456
|
},
|
|
258
457
|
{
|
|
259
|
-
value:
|
|
260
|
-
field:
|
|
261
|
-
content: this.$t(
|
|
262
|
-
helper: this.$t(
|
|
458
|
+
value: "",
|
|
459
|
+
field: "before:",
|
|
460
|
+
content: this.$t("Before Date"),
|
|
461
|
+
helper: this.$t(
|
|
462
|
+
"The field unter validation must be before the given date."
|
|
463
|
+
),
|
|
263
464
|
visible: true,
|
|
264
465
|
configs: [
|
|
265
|
-
{
|
|
266
|
-
|
|
466
|
+
{
|
|
467
|
+
type: "FormInput",
|
|
468
|
+
label: this.$t("Date"),
|
|
469
|
+
helper: "",
|
|
470
|
+
validation: "required"
|
|
471
|
+
}
|
|
472
|
+
]
|
|
267
473
|
},
|
|
268
474
|
{
|
|
269
|
-
value:
|
|
270
|
-
field:
|
|
271
|
-
content: this.$t(
|
|
272
|
-
helper: this.$t(
|
|
475
|
+
value: "",
|
|
476
|
+
field: "before_or_equal:",
|
|
477
|
+
content: this.$t("Before or Equal to Date"),
|
|
478
|
+
helper: this.$t(
|
|
479
|
+
"The field unter validation must be before or equal to the given field."
|
|
480
|
+
),
|
|
273
481
|
visible: true,
|
|
274
482
|
configs: [
|
|
275
|
-
{
|
|
276
|
-
|
|
483
|
+
{
|
|
484
|
+
type: "FormInput",
|
|
485
|
+
label: this.$t("Date"),
|
|
486
|
+
helper: "",
|
|
487
|
+
validation: "required"
|
|
488
|
+
}
|
|
489
|
+
]
|
|
277
490
|
},
|
|
278
491
|
{
|
|
279
|
-
value:
|
|
280
|
-
field:
|
|
281
|
-
content: this.$t(
|
|
282
|
-
helper: this.$t(
|
|
492
|
+
value: "",
|
|
493
|
+
field: "regex:",
|
|
494
|
+
content: this.$t("Regex"),
|
|
495
|
+
helper: this.$t(
|
|
496
|
+
"The field under validation must match the given regular expression."
|
|
497
|
+
),
|
|
283
498
|
visible: true,
|
|
284
499
|
configs: [
|
|
285
|
-
{
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
500
|
+
{
|
|
501
|
+
type: "FormInput",
|
|
502
|
+
label: this.$t("Regex Pattern"),
|
|
503
|
+
helper: "",
|
|
504
|
+
validation: "required"
|
|
505
|
+
}
|
|
506
|
+
]
|
|
507
|
+
}
|
|
508
|
+
].sort((a, b) => (a.content > b.content ? 1 : -1))
|
|
289
509
|
};
|
|
290
510
|
},
|
|
291
511
|
computed: {
|
|
292
512
|
fieldClass() {
|
|
293
|
-
return this.optionError ?
|
|
513
|
+
return this.optionError ? "is-invalid" : "";
|
|
294
514
|
},
|
|
295
515
|
hasRules() {
|
|
296
516
|
if (this.rules && this.rules.length) {
|
|
297
517
|
return true;
|
|
298
518
|
}
|
|
299
|
-
|
|
519
|
+
|
|
300
520
|
return false;
|
|
301
521
|
},
|
|
302
522
|
requiredCheckbox: {
|
|
303
523
|
get() {
|
|
304
|
-
return this.rules.some(item => item.value ===
|
|
524
|
+
return this.rules.some((item) => item.value === "required");
|
|
305
525
|
},
|
|
306
526
|
set(value) {
|
|
307
527
|
if (value) {
|
|
308
|
-
this.rules.push(
|
|
528
|
+
this.rules.push(
|
|
529
|
+
this.options.find((item) => item.value === "required")
|
|
530
|
+
);
|
|
309
531
|
} else {
|
|
310
|
-
this.rules = this.rules.filter(item => item.value !==
|
|
532
|
+
this.rules = this.rules.filter((item) => item.value !== "required");
|
|
311
533
|
}
|
|
312
534
|
}
|
|
313
535
|
}
|
|
@@ -317,37 +539,40 @@ export default {
|
|
|
317
539
|
deep: true,
|
|
318
540
|
handler(rules) {
|
|
319
541
|
this.showCard = false;
|
|
320
|
-
this.selectedOption =
|
|
321
|
-
if (typeof rules ===
|
|
542
|
+
this.selectedOption = "";
|
|
543
|
+
if (typeof rules === "string" || rules === undefined) {
|
|
322
544
|
this.rules = [];
|
|
323
545
|
}
|
|
324
546
|
if (this.rules) {
|
|
325
547
|
this.setRuleConfigs();
|
|
326
548
|
}
|
|
327
|
-
this.$emit(
|
|
328
|
-
}
|
|
549
|
+
this.$emit("input", rules);
|
|
550
|
+
}
|
|
329
551
|
},
|
|
330
552
|
value() {
|
|
331
553
|
this.rules = this.value || [];
|
|
332
554
|
this.cloneSetRules();
|
|
333
|
-
|
|
334
555
|
},
|
|
335
556
|
selectedOption: {
|
|
336
557
|
deep: true,
|
|
337
558
|
handler(value) {
|
|
338
559
|
this.disableBtn = true;
|
|
339
|
-
this.optionError =
|
|
560
|
+
this.optionError = "";
|
|
340
561
|
if (!value) {
|
|
341
562
|
return;
|
|
342
563
|
}
|
|
343
|
-
if (this.rules
|
|
344
|
-
this.optionError = this.$t(
|
|
564
|
+
if (this.rules?.find((item) => item.content === value.content)) {
|
|
565
|
+
this.optionError = this.$t("This field already exists");
|
|
345
566
|
this.disableBtn = true;
|
|
346
567
|
} else {
|
|
347
568
|
this.disableBtn = false;
|
|
348
569
|
}
|
|
349
|
-
}
|
|
350
|
-
}
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
},
|
|
573
|
+
mounted() {
|
|
574
|
+
this.rules = this.value || [];
|
|
575
|
+
this.cloneSetRules();
|
|
351
576
|
},
|
|
352
577
|
methods: {
|
|
353
578
|
showAddCard() {
|
|
@@ -358,22 +583,23 @@ export default {
|
|
|
358
583
|
},
|
|
359
584
|
hideCard() {
|
|
360
585
|
this.showCard = false;
|
|
361
|
-
this.selectedOption =
|
|
362
|
-
this.optionError =
|
|
586
|
+
this.selectedOption = "";
|
|
587
|
+
this.optionError = "";
|
|
363
588
|
},
|
|
364
589
|
saveRule() {
|
|
365
590
|
const option = _.cloneDeep(this.selectedOption);
|
|
366
591
|
this.rules.push(option);
|
|
367
592
|
this.hideCard();
|
|
368
|
-
this.selectedOption =
|
|
593
|
+
this.selectedOption = "";
|
|
369
594
|
},
|
|
370
595
|
confirmDelete(index) {
|
|
371
596
|
this.removeIndex = index;
|
|
372
597
|
this.showDeleteConfirmCard = true;
|
|
373
|
-
this.confirmMessage = _.unescape(
|
|
374
|
-
'Are you sure you want to delete the "{{item}}" rule?',
|
|
375
|
-
|
|
376
|
-
|
|
598
|
+
this.confirmMessage = _.unescape(
|
|
599
|
+
this.$t('Are you sure you want to delete the "{{item}}" rule?', {
|
|
600
|
+
item: this.rules[index].content
|
|
601
|
+
})
|
|
602
|
+
);
|
|
377
603
|
},
|
|
378
604
|
hideDeleteConfirmCard() {
|
|
379
605
|
this.removeIndex = null;
|
|
@@ -385,58 +611,56 @@ export default {
|
|
|
385
611
|
this.hideDeleteConfirmCard();
|
|
386
612
|
},
|
|
387
613
|
setRuleConfigs() {
|
|
388
|
-
this.rules.forEach(rule => {
|
|
614
|
+
this.rules.forEach((rule) => {
|
|
389
615
|
if (rule.configs) {
|
|
390
616
|
let ruleConfigs = [];
|
|
391
|
-
rule.configs.forEach(config => {
|
|
617
|
+
rule.configs.forEach((config) => {
|
|
392
618
|
if (config.value) {
|
|
393
619
|
ruleConfigs.push(config.value);
|
|
394
620
|
}
|
|
395
621
|
});
|
|
396
622
|
|
|
397
|
-
if (ruleConfigs.length > 1) {
|
|
398
|
-
ruleConfigs = ruleConfigs.join(
|
|
623
|
+
if (ruleConfigs.length > 1) {
|
|
624
|
+
ruleConfigs = ruleConfigs.join(",");
|
|
399
625
|
}
|
|
400
626
|
if (ruleConfigs.length) {
|
|
401
627
|
rule.value = rule.field + ruleConfigs;
|
|
402
628
|
}
|
|
403
|
-
|
|
404
629
|
}
|
|
405
630
|
});
|
|
406
631
|
},
|
|
407
632
|
onUpdate(rule, index) {
|
|
408
633
|
const content = this.formatRuleContentAsId(rule.content);
|
|
409
|
-
this.$root.$emit(
|
|
410
|
-
this.$set(this.rules[index],
|
|
634
|
+
this.$root.$emit("bv::toggle::collapse", content);
|
|
635
|
+
this.$set(this.rules[index], "visible", false);
|
|
411
636
|
this.cloneRules = JSON.parse(JSON.stringify(this.rules));
|
|
412
637
|
},
|
|
413
638
|
onCancel(rule, index) {
|
|
414
639
|
const content = this.formatRuleContentAsId(rule.content);
|
|
415
640
|
if (this.cloneRules && this.cloneRules[index]) {
|
|
416
641
|
if (!_.isEqual(rule, this.cloneRules[index])) {
|
|
417
|
-
Object.assign(
|
|
642
|
+
Object.assign(
|
|
643
|
+
this.rules[index],
|
|
644
|
+
JSON.parse(JSON.stringify(this.cloneRules[index]))
|
|
645
|
+
);
|
|
418
646
|
}
|
|
419
647
|
} else {
|
|
420
|
-
rule.configs.forEach(config => {
|
|
648
|
+
rule.configs.forEach((config) => {
|
|
421
649
|
if (config.value) {
|
|
422
|
-
config.value =
|
|
650
|
+
config.value = "";
|
|
423
651
|
}
|
|
424
652
|
});
|
|
425
653
|
this.rules[index].configs = rule.configs;
|
|
426
654
|
}
|
|
427
|
-
this.$root.$emit(
|
|
655
|
+
this.$root.$emit("bv::toggle::collapse", content);
|
|
428
656
|
},
|
|
429
657
|
formatRuleContentAsId(content) {
|
|
430
|
-
return content.toLowerCase().split(
|
|
658
|
+
return content.toLowerCase().split(" ").join("-");
|
|
431
659
|
},
|
|
432
660
|
cloneSetRules() {
|
|
433
661
|
this.cloneRules = JSON.parse(JSON.stringify(this.rules));
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
mounted() {
|
|
437
|
-
this.rules = this.value || [];
|
|
438
|
-
this.cloneSetRules();
|
|
439
|
-
},
|
|
662
|
+
}
|
|
663
|
+
}
|
|
440
664
|
};
|
|
441
665
|
</script>
|
|
442
666
|
|