Skip to content

Commit 95e8d68

Browse files
szczepanmasnyszczepanmasny
committed
field rules
1 parent f93dbaa commit 95e8d68

File tree

5 files changed

+137
-91
lines changed

5 files changed

+137
-91
lines changed

‎src/crud/components/ChildDetails.vue‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,33 @@
88
<div v-for="(field, i) in fields" :key="i">
99

1010
<!-- input -->
11-
<v-text-field :required="isRequired(field.required)" hide-details v-if="field.type == 'input'" :label="field.text"
11+
<v-text-field :rules="fieldRules(field)" hide-details v-if="field.type == 'input'" :label="field.text"
1212
v-model="field.value"></v-text-field>
1313

1414
<!-- number -->
1515
<v-text-field hide-details v-else-if="field.type == 'number'" :label="field.text" v-model="field.value" type="number" step="1" min="0"></v-text-field>
1616

1717
<!-- decimal -->
18-
<v-text-field :required="isRequired(field.required)" hide-details v-else-if="field.type == 'decimal'" :label="field.text" v-model="field.value" type="number" step="0.01" min="0"></v-text-field>
18+
<v-text-field :rules="fieldRules(field)" hide-details v-else-if="field.type == 'decimal'" :label="field.text" v-model="field.value" type="number" step="0.01" min="0"></v-text-field>
1919

2020
<!--date -->
21-
<v-text-field :required="isRequired(field.required)" hide-details v-else-if="field.type == 'date'" :label="field.text" v-model="field.value" mask="####-##-##" return-masked-value></v-text-field>
21+
<v-text-field :rules="fieldRules(field)" hide-details v-else-if="field.type == 'date'" :label="field.text" v-model="field.value" mask="####-##-##" return-masked-value></v-text-field>
2222

2323
<!--time -->
24-
<v-text-field :required="isRequired(field.required)" hide-details v-else-if="field.type == 'time'" :label="field.text" v-model="field.value" mask="##:##" return-masked-value></v-text-field>
24+
<v-text-field :rules="fieldRules(field)" hide-details v-else-if="field.type == 'time'" :label="field.text" v-model="field.value" mask="##:##" return-masked-value></v-text-field>
2525

2626
<!--datetime -->
27-
<v-text-field :required="isRequired(field.required)" hide-details v-else-if="field.type == 'datetime'" :label="field.text" v-model="field.value" mask="####-##-## ##:##:##" return-masked-value></v-text-field>
27+
<v-text-field :rules="fieldRules(field)" hide-details v-else-if="field.type == 'datetime'" :label="field.text" v-model="field.value" mask="####-##-## ##:##:##" return-masked-value></v-text-field>
2828

2929
<!-- text area -->
30-
<v-textarea :required="isRequired(field.required)" hide-details v-else-if="field.type == 'textarea'" :label="field.text"
30+
<v-textarea :rules="fieldRules(field)" hide-details v-else-if="field.type == 'textarea'" :label="field.text"
3131
v-model="field.value"></v-textarea>
3232

3333
<!-- select -->
3434
<template v-else-if="field.type == 'select'">
3535
<v-autocomplete v-if="field.async"
3636
hide-details
37-
:required="isRequired(field.required)"
37+
:rules="fieldRules(field)"
3838
:loading="searchLoading['search_' + field.name]"
3939
:items="searchData['search_' + field.name]"
4040
v-model="field.value"
@@ -49,7 +49,7 @@
4949
></v-autocomplete>
5050
<v-autocomplete v-else
5151
hide-details
52-
:required="isRequired(field.required)"
52+
:rules="fieldRules(field)"
5353
:items="field.list.data"
5454
v-model="field.value"
5555
:item-text="field.list.text"
@@ -62,7 +62,7 @@
6262
</template>
6363

6464
<span v-else-if="field.type == 'checkbox'">
65-
<input :required="isRequired(field.required)" type="checkbox" color="blue" :label="field.text" v-model="field.value">
65+
<input :rules="fieldRules(field)" type="checkbox" color="blue" :label="field.text" v-model="field.value">
6666
<label class="checkbox-label">{{field.text}}</label>
6767
</span>
6868

@@ -196,7 +196,8 @@ export default {
196196
rules() {
197197
let self = this;
198198
return {
199-
input: [v => !!v || self.$t("global.details.rules.required")]
199+
input: [v => !!v || self.$t("global.details.rules.required")],
200+
required: v => !!v || self.$t("global.details.rules.required")
200201
};
201202
}
202203
},
@@ -278,8 +279,11 @@ export default {
278279
}
279280
},
280281
methods: {
281-
isRequired(required) {
282-
return required != undefined ? required : true;
282+
fieldRules(field) {
283+
let rules = []
284+
let required = field.required != undefined ? field.required : true;
285+
rules.push(this.rules.required)
286+
return rules
283287
},
284288
reset() {
285289
this.$parent.reset();

‎src/crud/components/ItemDetails.vue‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<!-- input -->
2020
<v-text-field
2121
hide-details
22-
:required="isRequired(field.required)"
22+
:rules="fieldRules(field)"
2323
v-if="field.type == 'input'"
2424
:label="field.text"
2525
v-model="field.value"
@@ -28,7 +28,7 @@
2828
<!-- number -->
2929
<v-text-field
3030
hide-details
31-
:required="isRequired(field.required)"
31+
:rules="fieldRules(field)"
3232
v-else-if="field.type == 'number'"
3333
:label="field.text"
3434
v-model="field.value"
@@ -40,7 +40,7 @@
4040
<!-- decimal -->
4141
<v-text-field
4242
hide-details
43-
:required="isRequired(field.required)"
43+
:rules="fieldRules(field)"
4444
v-else-if="field.type == 'decimal'"
4545
:label="field.text"
4646
v-model="field.value"
@@ -52,7 +52,7 @@
5252
<!--date -->
5353
<v-text-field
5454
hide-details
55-
:required="isRequired(field.required)"
55+
:rules="fieldRules(field)"
5656
v-else-if="field.type == 'date'"
5757
:label="field.text"
5858
v-model="field.value"
@@ -63,7 +63,7 @@
6363
<!--time -->
6464
<v-text-field
6565
hide-details
66-
:required="isRequired(field.required)"
66+
:rules="fieldRules(field)"
6767
v-else-if="field.type == 'time'"
6868
:label="field.text"
6969
v-model="field.value"
@@ -74,7 +74,7 @@
7474
<!--datetime -->
7575
<v-text-field
7676
hide-details
77-
:required="isRequired(field.required)"
77+
:rules="fieldRules(field)"
7878
v-else-if="field.type == 'datetime'"
7979
:label="field.text"
8080
v-model="field.value"
@@ -85,7 +85,7 @@
8585
<!-- text area -->
8686
<v-textarea
8787
hide-details
88-
:required="isRequired(field.required)"
88+
:rules="fieldRules(field)"
8989
v-else-if="field.type == 'textarea'"
9090
:label="field.text"
9191
v-model="field.value"
@@ -116,7 +116,7 @@
116116
<v-autocomplete
117117
v-if="field.async"
118118
hide-details
119-
:required="isRequired(field.required)"
119+
:rules="fieldRules(field)"
120120
:loading="searchLoading['search_' + field.name]"
121121
:items="searchData['search_' + field.name]"
122122
v-model="field.value"
@@ -132,7 +132,7 @@
132132
<v-autocomplete
133133
v-else
134134
hide-details
135-
:required="isRequired(field.required)"
135+
:rules="fieldRules(field)"
136136
:items="field.list.data"
137137
v-model="field.value"
138138
:item-text="field.list.text"
@@ -233,7 +233,7 @@ export default {
233233
uploadLoaders: {},
234234
searchPhrases: {},
235235
searchLoading: {},
236-
searchData: {}
236+
searchData: {},
237237
};
238238
},
239239
created() {
@@ -434,7 +434,9 @@ export default {
434434
rules() {
435435
let self = this;
436436
return {
437-
input: [v => !!v || self.$t("global.details.rules.required")]
437+
required: v => !!v || self.$t("global.details.rules.required"),
438+
minLength: (v) => v.length >= 24 || 'Min ' + 24 + ' characters',
439+
maxLength: (v, val) => v.length <= val || 'Max ' + val + ' characters'
438440
};
439441
}
440442
},
@@ -461,29 +463,34 @@ export default {
461463
close() {
462464
this.details.show = false;
463465
},
464-
isRequired(required) {
465-
if (this.details.action == "multiedit") {
466-
return false;
467-
} else {
468-
return required != undefined ? required : true;
466+
fieldRules(field) {
467+
let rules = []
468+
let required = field.required != undefined ? field.required : true;
469+
if (this.details.action != "multiedit"){
470+
if (required) {
471+
rules.push(this.rules.required)
472+
}
469473
}
474+
return rules
470475
},
471476
update() {
472-
this.close();
473477
this.updateItem([
474478
this.details.id,
475479
this.itemData,
476480
this.$t("global.alerts.updated"),
477481
this.$t("global.alerts.updateError")
478-
]);
482+
]).then(response => {
483+
this.close();
484+
})
479485
},
480486
store() {
481-
this.close();
482487
this.storeItem([
483488
this.itemData,
484489
this.$t("global.alerts.stored"),
485490
this.$t("global.alerts.storeError")
486-
]);
491+
]).then(response => {
492+
this.close();
493+
})
487494
},
488495
updateSelected() {
489496
let filteredFields = this.fields.filter(field => field.updateColumn);

‎src/crud/components/ItemDetailsExtended.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,13 @@ export default {
264264
},
265265
computed: {
266266
...mapState("crud", ["item", "itemIdColumn", "detailsDialog"]),
267+
rules() {
268+
let self = this;
269+
return {
270+
input: [v => !!v || self.$t("global.details.rules.required")],
271+
required: v => !!v || self.$t("global.details.rules.required")
272+
};
273+
},
267274
fields() {
268275
let self = this;
269276
let result = this.fieldsInfo.map(field => {
@@ -303,6 +310,12 @@ export default {
303310
}
304311
}, 100);
305312
},
313+
fieldRules(field) {
314+
let rules = []
315+
let required = field.required != undefined ? field.required : true;
316+
rules.push(this.rules.required)
317+
return rules
318+
},
306319
remember(field) {
307320
field.oldValue = field.value;
308321
}

‎src/crud/mixins/child.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,22 +108,24 @@ export default {
108108
}
109109
},
110110
update(id, data) {
111-
this.close()
112111
this.updateChild([
113112
id,
114113
data,
115114
this.$t('global.alerts.updated'),
116115
this.path
117-
])
116+
]).then(response => {
117+
this.close();
118+
})
118119
},
119120
store(data) {
120121
data[this.fkName] = this.item[this.itemIdColumn]
121-
this.close()
122122
this.storeChild([
123123
data,
124124
this.$t('global.alerts.stored'),
125125
this.path
126-
])
126+
]).then(response => {
127+
this.close();
128+
})
127129
},
128130
itemElementsClosed(){
129131
this.getItemDetails([this.item[this.itemIdColumn]])

0 commit comments

Comments
 (0)