Skip to content

Commit 6898eb9

Browse files
webdevnerdstuffwebdevnerdstuff
committed
[DEV] trying to figure out how to validate this sucker
1 parent 0ee5b97 commit 6898eb9

File tree

6 files changed

+265
-80
lines changed

6 files changed

+265
-80
lines changed

‎src/plugin/VStepperForm.vue

Lines changed: 123 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -47,56 +47,65 @@
4747
</template>
4848
</v-stepper-header>
4949

50-
<v-stepper-window>
51-
<v-stepper-window-item
52-
v-for="page, i in pages"
53-
:key="`${i}-content`"
54-
:reverse-transition="transition"
55-
:transition="transition"
56-
:value="getIndex(i)"
57-
>
58-
<v-container>
59-
<PageContainer
60-
v-if="!page.isReview"
61-
v-model="modelValue"
62-
:index="getIndex(i)"
63-
:page="page"
64-
:settings="settings"
65-
@callback="callbacks"
66-
@next="validatePage(next)"
67-
/>
68-
<PageReviewContainer
69-
v-else
70-
v-model="modelValue"
71-
:page="page"
72-
:pages="pages"
73-
:settings="settings"
74-
:summary-columns="summaryColumns"
75-
@goToQuestion="stepperModel = $event"
76-
@submit="submitForm"
50+
<form @submit.prevent="onSubmit">
51+
<v-stepper-window>
52+
<v-stepper-window-item
53+
v-for="page, i in pages"
54+
:key="`${i}-content`"
55+
:reverse-transition="transition"
56+
:transition="transition"
57+
:value="getIndex(i)"
58+
>
59+
<v-container>
60+
<PageContainer
61+
v-if="!page.isReview"
62+
v-model="modelValue"
63+
:index="getIndex(i)"
64+
:page="page"
65+
:settings="settings"
66+
:validateSchema="validateSchema"
67+
@next="validatePage(next)"
68+
@validate="onSubmit"
69+
/>
70+
<PageReviewContainer
71+
v-else
72+
v-model="modelValue"
73+
:page="page"
74+
:pages="pages"
75+
:settings="settings"
76+
:summary-columns="summaryColumns"
77+
@goToQuestion="stepperModel = $event"
78+
@submit="submitForm"
79+
/>
80+
</v-container>
81+
</v-stepper-window-item>
82+
</v-stepper-window>
83+
84+
<v-stepper-actions v-if="!settings.hideActions">
85+
<template #next>
86+
<v-btn
87+
:color="settings.color"
88+
:disabled="((stepperActionsDisabled === 'next' || settings.disabled) as boolean)"
89+
:size="navButtonSize"
90+
@click="validatePage(next)"
7791
/>
78-
</v-container>
79-
</v-stepper-window-item>
80-
</v-stepper-window>
81-
82-
<v-stepper-actions v-if="!settings.hideActions">
83-
<template #next>
84-
<v-btn
85-
:color="settings.color"
86-
:disabled="((stepperActionsDisabled === 'next' || settings.disabled) as boolean)"
87-
:size="navButtonSize"
88-
@click="validatePage(next)"
89-
/>
90-
</template>
92+
</template>
9193

92-
<template #prev>
93-
<v-btn
94-
:disabled="((stepperActionsDisabled === 'prev' || settings.disabled || canReviewPreviousButtonDisabled) as boolean)"
95-
:size="navButtonSize"
96-
@click="previousPage(prev)"
97-
/>
98-
</template>
99-
</v-stepper-actions>
94+
<template #prev>
95+
<v-btn
96+
:disabled="((stepperActionsDisabled === 'prev' || settings.disabled || canReviewPreviousButtonDisabled) as boolean)"
97+
:size="navButtonSize"
98+
@click="previousPage(prev)"
99+
/>
100+
</template>
101+
</v-stepper-actions>
102+
103+
<v-row>
104+
<v-col>
105+
<v-btn type="submit">Submit</v-btn>
106+
</v-col>
107+
</v-row>
108+
</form>
100109
</template>
101110
</v-stepper>
102111
</v-container>
@@ -127,6 +136,9 @@ import PageContainer from './components/shared/PageContainer.vue';
127136
import PageReviewContainer from './components/shared/PageReviewContainer.vue';
128137
import { useMergeProps } from './composables/helpers';
129138
import { watchDeep } from '@vueuse/core';
139+
import {
140+
useGetValidationSchema,
141+
} from './composables/validation';
130142
131143
132144
const attrs = useAttrs();
@@ -178,6 +190,59 @@ const settings = ref<Settings>({
178190
console.log('settings.value', settings.value);
179191
180192
193+
// const { handleSubmit } = useForm({
194+
// validationSchema: toTypedSchema(
195+
// yupObject({
196+
// }),
197+
// ),
198+
// });
199+
200+
// const onSubmit = handleSubmit(item => {
201+
// console.log('onSubmit handleSubmit', item);
202+
// });
203+
204+
const allFieldsArray = ref<Field[]>([]);
205+
206+
Object.values(pages.value).forEach((p: Page) => {
207+
Object.values(p.fields).forEach((field: Field) => {
208+
allFieldsArray.value.push(field as Field);
209+
});
210+
});
211+
212+
const validateSchema = useGetValidationSchema(allFieldsArray.value);
213+
console.log('validateSchema', validateSchema);
214+
215+
// const initialValues = {};
216+
// allFieldsArray.value.forEach(item => {
217+
// initialValues[item.name] = item.label || "";
218+
// });
219+
220+
// const yepSchema = allFieldsArray.value.reduce(useCreateYupSchema, { validationType: 'required', validations: allFieldsArray.value });
221+
// console.log('yepSchema', yepSchema);
222+
// const validateSchema = yupObject().shape(yepSchema);
223+
// console.log('validateSchema', validateSchema);
224+
225+
// const foo = useCreateYupSchema(allFieldsArray.value, {});
226+
227+
// console.log(foo);
228+
229+
function onSubmit() {
230+
console.log('onSubmit');
231+
// useValidation({
232+
// fields: allFieldsArray.value,
233+
// });
234+
}
235+
236+
237+
// function validateField(field: Field) {
238+
// console.log('validateField', field);
239+
// console.log('allFieldsArray', allFieldsArray.value);
240+
// useValidation({
241+
// fields: allFieldsArray.value,
242+
// });
243+
// }
244+
245+
181246
// const StepperComponent = markRaw(props.direction === 'vertical' ? VStepperVertical : VStepper);
182247
// console.log('StepperComponent', StepperComponent);
183248
@@ -186,7 +251,14 @@ console.log('settings.value', settings.value);
186251
onMounted(() => {
187252
whenCallback();
188253
254+
// useSetupValidation({
255+
// fields: allFieldsArray.value,
256+
// });
257+
189258
summaryColumnErrorCheck();
259+
260+
261+
190262
});
191263
192264
@@ -260,6 +332,8 @@ function headerItemDisabled(page: Page): boolean {
260332
261333
262334
// ------------------------------------------------ Callback & Validation //
335+
336+
263337
// const pagesValidation = ref((pages.value)
264338
// .map((_, i) => ({ page: i + 1, valid: false })));
265339
@@ -280,9 +354,7 @@ function callbacks() {
280354
}
281355
282356
283-
284-
285-
357+
// ------------------------ Conditional "when" callback //
286358
function whenCallback() {
287359
Object.values(pages.value).forEach((page: Page, pageIdx: number) => {
288360
Object.values(page.fields as Field[]).forEach((field: Field, fieldIdx) => {

‎src/plugin/components/fields/VSFTextField/VSFTextField.vue

Lines changed: 68 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,58 @@
11
<template>
2-
<v-text-field
3-
v-model="modelValue"
2+
<!-- <v-text-field
3+
v-model="value"
44
v-bind="boundSettings"
5-
:error="hasError"
6-
:required="field.required"
7-
@blur="checkForErrors('blur')"
5+
:error-messages="errorMessage"
6+
@blur="onBlur"
7+
@change="onChange"
88
>
99
<template #label>
1010
<FieldLabel
1111
:label="field.label"
1212
:required="field.required"
1313
/>
1414
</template>
15-
</v-text-field>
15+
</v-text-field> -->
16+
17+
<Form :validation-schema="validateSchema">
18+
<Field
19+
v-slot="{ errorMessage, validate }"
20+
v-model="modelValue"
21+
:name="field.name"
22+
>
23+
<v-text-field
24+
v-model="modelValue"
25+
v-bind="boundSettings"
26+
:error-messages="errorMessage"
27+
@blur="onActions('blur', validate)"
28+
@change="onActions('change', validate)"
29+
@input="onActions('input', validate)"
30+
>
31+
<template #label>
32+
<FieldLabel
33+
:label="field.label"
34+
:required="field.required"
35+
/>
36+
</template>
37+
</v-text-field>
38+
</Field>
39+
</Form>
40+
41+
<!-- <v-text-field
42+
v-model="value"
43+
v-bind="boundSettings"
44+
:error-messages="errorMessage"
45+
@blur="onBlur"
46+
@change="onChange"
47+
>
48+
<template #label>
49+
<FieldLabel
50+
:label="field.label"
51+
:required="field.required"
52+
/>
53+
</template>
54+
</v-text-field> -->
55+
1656
</template>
1757

1858

@@ -23,53 +63,53 @@ import type {
2363
import FieldLabel from '../../shared/FieldLabel.vue';
2464
import { useBindingSettings } from '../../../composables/bindings';
2565
import { useAutoPage } from '../../../composables/helpers';
66+
import { Field, Form } from 'vee-validate';
67+
import type { FieldValidator } from 'vee-validate';
68+
2669
2770
28-
const emit = defineEmits(['next']);
71+
const emit = defineEmits(['next', 'validate']);
2972
const modelValue = defineModel<any>();
30-
const { field, settings } = defineProps<VSFTextFieldProps>();
73+
const props = defineProps<VSFTextFieldProps>();
74+
75+
const { field, settings, validateSchema } = props;
3176
3277
3378
// Auto Paging //
3479
useAutoPage({ emit, field, modelValue, settings });
3580
3681
37-
const hasError = ref(false);
38-
const validateOn = ref(field.validateOn || settings?.validateOn || 'input');
3982
40-
// console.log(validateOn.value);
83+
// const schema = ref({});
84+
// const validationSchema = ref();
4185
42-
onMounted(() => {
43-
checkForErrors(validateOn?.value);
44-
});
86+
// useForm({
87+
// validationSchema: schema.value,
88+
// });
4589
46-
watch(modelValue, () => {
47-
if (validateOn?.value === 'input') {
48-
checkForErrors('input');
49-
}
50-
});
5190
52-
// TODO: Make this a composable //
53-
function checkForErrors(param = 'update') {
54-
if (validateOn?.value === 'blur' && param !== 'blur') {
55-
return;
91+
async function onActions(action: string, validate: FieldValidator<unknown>) {
92+
console.log('onActions', action);
93+
if (action === 'blur' && field.validateOn === 'blur') {
94+
await validate();
5695
}
5796
58-
if (validateOn?.value === 'input' && param !== 'input') {
59-
return;
97+
if (action === 'input' && field.validateOn === 'input') {
98+
await validate();
6099
}
61100
62-
if (field.validate != null) {
63-
hasError.value = !field.validate(field, modelValue.value);
101+
if (action === 'change' && field.validateOn === 'change') {
102+
await validate();
64103
}
65104
}
66105
106+
67107
// -------------------------------------------------- Bound Settings //
68108
const bindSettings = computed(() => ({
69109
...field,
70110
color: field.color || settings?.color,
71111
density: field.density || settings?.density,
72-
error: hasError.value,
112+
// error: hasError.value,
73113
hideDetails: field.hideDetails || settings?.hideDetails,
74114
variant: field.variant || settings?.variant,
75115
}));

‎src/plugin/components/fields/VSFTextField/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface InternalField extends Omit<Field,
1717

1818
export interface VSFTextFieldProps extends SharedProps {
1919
field: InternalField;
20+
validateSchema: any;
2021
}
2122

2223
export type VSFTextField = InstanceType<typeof VSFTextField>;

0 commit comments

Comments
 (0)