[DEV] Working on validation more

Author: webdevnerdstuff

src/plugin/VStepperForm.vue

@@ -12,17 +12,15 @@
 						</h2>
 					</v-col>
 				</v-row>
-				<!-- <v-row>
+				<v-row>
 					<v-col>
 						stepperMode: {{ stepperModel }}
 						<br />
 						currentPageHasErrors: {{ currentPageHasErrors }}
 						<br />
 						errorPageIndexes: {{ errorPageIndexes }}
-						<br />
-						triggerValidation: {{ triggerValidation }}
 					</v-col>
-				</v-row> -->
+				</v-row>
 			</v-container>
 
 			<v-container
@@ -75,10 +73,9 @@
 											:index="getIndex(i)"
 											:page="page"
 											:settings="settings"
-											:triggerValidation="triggerValidation"
 											:validateSchema="validateSchema"
 											@next="validatePage(next)"
-											@validate="onValidate"
+											@validate="onValidate($event, next)"
 										/>
 										<PageReviewContainer
 											v-else
@@ -138,10 +135,12 @@
 // import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
 import { AllProps } from './utils/props';
 import { useDisplay } from 'vuetify';
-import {
+import type {
+	EmitValidateEventPayload,
 	Field,
 	Page,
 	Props,
+	SchemaField,
 	Settings,
 	SummaryColumns,
 } from '@/plugin/types';
@@ -150,11 +149,15 @@ import {
 	useStepperContainerClasses,
 } from './composables/classes';
 import componentEmits from './utils/emits';
+import { TriggerValidationBus } from './utils/globals';
 import { globalOptions } from './';
 import PageContainer from './components/shared/PageContainer.vue';
 import PageReviewContainer from './components/shared/PageReviewContainer.vue';
 import { useMergeProps } from './composables/helpers';
-import { watchDeep } from '@vueuse/core';
+import {
+	useEventBus,
+	watchDeep,
+} from '@vueuse/core';
 import {
 	useGetValidationSchema,
 } from './composables/validation';
@@ -308,146 +311,118 @@ function headerItemDisabled(page: Page): boolean {
 }
 
 
-// & ------------------------------------------------ Validation //
-const validateSchema = useGetValidationSchema(allFieldsArray.value);
-const triggerValidation = ref(false);
-const fieldsHaveErrors = ref(false);
-
-console.log('validateSchema', validateSchema);
-
-
 
-// function validateButtonDisabled() {
-// 	const foo = JSON.parse(JSON.stringify(pages));
-// 	console.log('foo', foo);
-// 	fieldsHaveErrors.value = Object.values(pages).some((page: Page) => Object.values(page.fields).some((field: Field) => field.error));
 
-// 	console.log('fieldsHaveErrors', fieldsHaveErrors.value);
+// & ------------------------------------------------ Validation //
+const validateSchema = useGetValidationSchema(allFieldsArray.value as SchemaField[]);
+const fieldsHaveErrors = ref(false);
+let triggerValidationBus: unknown | any;
 
-// }
+onMounted(() => {
+	triggerValidationBus = useEventBus<string>(TriggerValidationBus);
+});
 
 
-// TODO: This needs to be fixed //
 const currentPageHasErrors = ref(false);
 const errorPageIndexes = ref<number[]>([]);
 
-function checkForPageErrors() {
-	errorPageIndexes.value = [];
 
-	Object.values(pages).forEach((p: Page, i: number) => {
-		const errorField = Object.values(p.fields).find((field: Field) => field.error);
-
-		if (errorField) {
-			// eslint-disable-next-line no-param-reassign
-			p.error = true;
-			errorPageIndexes.value.push(i);
-			return;
-		}
+function setPageToError(pageIndex: EmitValidateEventPayload['pageIndex'], page?: Page): void {
+	currentPageHasErrors.value = true;
 
+	if (page) {
 		// eslint-disable-next-line no-param-reassign
-		p.error = false;
-	});
-
-	// Reset the error //
-	const stepperPage = pages[stepperModel.value - 1];
-
-	if (stepperPage) {
-		stepperPage.error = false;
+		page.error = true;
 	}
 
-	currentPageHasErrors.value = errorPageIndexes.value.includes(stepperModel.value - 1);
+	if (!errorPageIndexes.value.includes(pageIndex)) {
+		errorPageIndexes.value.push(pageIndex);
+	}
 }
 
 
-// TODO: Figure out why this triggers twice for each field on the page //
-function onValidate(val) {
-	console.group('onValidate');
-	console.log(val);
+function onValidate(payload: EmitValidateEventPayload, event: () => void) {
+	// console.group('onValidate');
+	// console.log('payload', payload);
 
-	const { errors, fieldName } = val;
-	let fieldHasErrors = false;
-
-	if (errors) {
-		fieldHasErrors = errors[fieldName] || false;
-	}
+	const page = pages[payload.pageIndex];
 
-	const fieldPageIdx = Object.values(pages).findIndex((page: Page) => Object.values(page.fields).find((f: Field) => f.name === fieldName));
-	const page = pages[fieldPageIdx];
-
-	console.log('page', page);
+	// console.log('page', page);
 
 	if (!page) {
-		console.groupEnd();
-
 		return;
 	}
 
-	const field = page.fields.find((f: Field) => f.name === val.fieldName);
+	const currentFieldIndex = page.fields.findIndex((f) => f.name === payload.fieldName);
 
-	console.log('field', field);
-
-	if (!field) {
-		console.groupEnd();
+	// Do not continue if field is not the last field //
+	if (currentFieldIndex !== page.fields.length - 1) {
 		return;
 	}
 
-	console.log('fieldHasErrors', fieldHasErrors);
+	let fieldsError = false;
 
-	field.error = fieldHasErrors ? true : false;
-	page.error = field.error;
-	currentPageHasErrors.value = field.error;
-	fieldsHaveErrors.value = field.error;
+	Object.values(page.fields).forEach((field: Field) => {
+		if (field.error === true || !Object.prototype.hasOwnProperty.call(field, 'error')) {
+			fieldsError = true;
+		}
+	});
 
-	console.log('pages', pages);
 
-	console.log(currentPageHasErrors.value);
+	if (fieldsError) {
+		// page.error = payload.error;
+		setPageToError(payload.pageIndex);
+		return;
+	}
 
-	checkForPageErrors();
+	if (payload.action === 'page') {
+		page.error = payload.error === true;
 
-	// Resets so it can be triggered again //
-	triggerValidation.value = false;
+		if (page.error) {
+			setPageToError(payload.pageIndex, page);
 
-	console.groupEnd();
+			// console.groupEnd();
+			return;
+		}
 
-	// validateButtonDisabled();
+		currentPageHasErrors.value = false;
+	}
 
-}
+	const index = errorPageIndexes.value.indexOf(payload.pageIndex);
 
+	if (index > -1) {
+		errorPageIndexes.value.splice(index, 1);
+	}
 
 
-function onSubmit(val) {
-	triggerValidation.value = true;
-	checkForPageErrors();
+	// debugger;
 
-	console.log('onSubmit', val);
-	if (fieldsHaveErrors.value) {
+	// const field = page.fields.find((f) => f.name === payload.fieldName);
+
+	if (fieldsError) {
+		// console.log('XXXX fieldsError', fieldsError);
+		// console.groupEnd();
 		return;
 	}
-	// useValidation({
-	// 	fields: allFieldsArray.value,
-	// });
-}
 
+	currentPageHasErrors.value = false;
 
-function validatePage(event: () => void): void {
-	console.log('validatePage', event);
-	triggerValidation.value = true;
+	if (payload.nextPage && stepperModel.value === payload.pageIndex + 1) {
+		nextPage(event);
+	}
 
-	setTimeout(() => {
-		// Resets so it can be triggered again //
-		triggerValidation.value = false;
+	// console.groupEnd();
+}
 
-		if (currentPageHasErrors.value) {
-			return;
-		}
 
-		nextPage(event);
-	}, 250);
+function validatePage(event: () => void): void {
+	console.log('validatePage', event);
 
-	// nextPage(event);
+	triggerValidationBus.emit({
+		pageIndex: stepperModel.value,
+	});
 }
 
-
 // ------------------------------------------------ Callbacks //
 function callbacks() {
 	whenCallback();
@@ -473,11 +448,24 @@ function whenCallback() {
 }
 
 
-// ------------------------------------------------ Submit Form //
+// -------------------------------------------------- Submit //
+function onSubmit(val) {
+	// checkForPageErrors();
+
+	console.log('onSubmit', val);
+	if (fieldsHaveErrors.value) {
+		return;
+	}
+	// useValidation({
+	// 	fields: allFieldsArray.value,
+	// });
+}
+
+
 function submitForm() {
-	console.log('VStepperForm submitForm');
+	// console.log('VStepperForm submitForm');
 	emit('submit');
-}
+};
 
 
 // ------------------------------------------------ Class & Styles //