fixing some validation issues when using autoPage prop

webdevnerdstuff · webdevnerdstuff · commit 32a614cb392a · 2024-10-31T13:09:58.000-07:00
diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue
@@ -913,7 +913,6 @@ const formSettings = ref({
 	// altLabels: true,																	// * VStepper
 	// bgColor: 'secondary',														// * VStepper
 	// border: 'lg',																		// * VStepper
-	// canReview: false,																// ! VStepper - Needs more testing and refining
 	// color: 'yellow',																	// * Global, VStepper, VStepperItem
 	// completeIcon: 'fas fa-check',										// ? VStepper Not sure how this works yet
 	// density: 'default',															// * Global
diff --git a/src/plugin/VStepperForm.vue b/src/plugin/VStepperForm.vue
@@ -35,16 +35,15 @@
 							>
 								<v-stepper-item
 									:color="settings.color"
-									:disabled="headerItemDisabled(page)"
 									:edit-icon="page.isReview ? '$complete' : settings.editIcon"
-									:editable="page.editable"
+									:editable="headerItemDisabled(page)"
 									elevation="0"
 									:error="page.error"
 									:title="page.title"
 									:value="getIndex(i)"
 								></v-stepper-item>
 								<v-divider
-									v-if="getIndex(i) !== Object.keys(pages).length"
+									v-if="getIndex(i) !== Object.keys(computedPages).length"
 									:key="getIndex(i)"
 								></v-divider>
 							</template>
@@ -247,9 +246,14 @@ const nextButtonDisabled = computed(() => {
 	return fieldsHaveErrors.value || isDisabled;
 });
 
-// TODO: Make this disabled if the previous page is not editable //
 const canReviewPreviousButtonDisabled = computed<boolean>(() => {
-	return stepperModel.value === pages.length && !props.canReview;
+	const previousPage = computedPages.value[stepperModel.value - 2];
+
+	if (previousPage) {
+		return previousPage.editable === false;
+	}
+
+	return stepperModel.value === computedPages.value.length && !props.editable;
 });
 
 
@@ -269,12 +273,23 @@ const lastPage = computed<boolean>(() => {
 
 // TODO: This needs some more work and add a setting to not allow users to jump ahead in the questions //
 function headerItemDisabled(page: Page): boolean {
-	const totalSteps = Object.keys(pages).length;
+	const totalSteps = Object.keys(computedPages.value).length;
 	const lastStep = totalSteps - 1;
 
-	// If you're on the last page
+	if (page.editable === false && currentPageHasErrors.value) {
+		return true;
+	}
+
+	const currentPageIdx = stepperModel.value - 1;
+	const pageIdx = computedPages.value.findIndex((p) => p === page);
+
+	if (page.editable !== false && pageIdx < currentPageIdx) {
+		return true;
+	}
+
+	// If you're on the last step (not review page) //
 	if (stepperModel.value === lastStep) {
-		return !page.isReview && (!settings.value.canReview) && (!page.editable && settings.value?.editable !== false);
+		return !page.isReview && (!settings.value.editable) && (!page.editable && settings.value?.editable !== false);
 	}
 
 	return false;
@@ -297,6 +312,8 @@ function runValidation(
 	validate()
 		.then((response: ValidateResult) => {
 			const errors = response.errors as unknown as ValidateResult['errors'];
+
+
 			checkForPageErrors(errors, source, next);
 		})
 		.catch((error: Error) => {
@@ -321,13 +338,13 @@ function removePageError(pageIndex: number): void {
 // ------------------------ Check the if the page has errors //
 function checkForPageErrors(errors: ValidateResult['errors'], source: string, next = () => { }): void {
 	const currentPage = stepperModel.value - 1;
-	const page = pages[currentPage];
+	const page = computedPages.value[currentPage];
 
 	if (!page) {
 		return;
 	}
 
-	const pageIndex = pages.findIndex((p) => p === page);
+	const pageIndex = computedPages.value.findIndex((p) => p === page);
 	const pageFields = page?.fields ?? [];
 	const hasErrorInField = Object.keys(errors as object[]).some(errorKey => pageFields.some(field => field.name === errorKey));
 
@@ -364,16 +381,36 @@ function setPageToError(pageIndex: number, page?: Page, source = 'submit'): void
 let debounceTimer: ReturnType<typeof setTimeout>;
 
 function onFieldValidate(field: Field, next: () => void): void {
-	const errors = parentForm.value?.errors as unknown as ValidateResult['errors'];
+	const errors = parentForm.value?.errors as ValidateResult['errors'];
 	const shouldAutoPage = (field.autoPage || settings.value.autoPage ? next : null) as () => void;
 
-	// If autoPage debounce next //
+	// If autoPage //
 	if (field?.autoPage || settings.value?.autoPage) {
-		clearTimeout(debounceTimer);
 
-		debounceTimer = setTimeout(() => {
-			checkForPageErrors(errors, 'field', shouldAutoPage);
-		}, (field?.autoPageDelay ?? settings.value?.autoPageDelay));
+		if (parentForm.value) {
+			// First validate the page before proceeding to the next page //
+			(parentForm.value as { validate: () => Promise<ValidateResult>; }).validate()
+				.then((res: ValidateResult) => {
+					if (res.valid) {
+						// debounce next //
+						clearTimeout(debounceTimer);
+						debounceTimer = setTimeout(() => {
+							checkForPageErrors(errors, 'field', shouldAutoPage);
+						}, (field?.autoPageDelay ?? settings.value?.autoPageDelay));
+
+						return;
+					}
+
+					const currentPage = stepperModel.value - 1;
+					const page = computedPages.value[currentPage];
+					const pageIndex = computedPages.value.findIndex((p) => p === page);
+
+					setPageToError(pageIndex, page, 'validating');
+				})
+				.catch((error: Error) => {
+					console.error('Error', error);
+				});
+		}
 
 		return;
 	}
@@ -384,7 +421,6 @@ function onFieldValidate(field: Field, next: () => void): void {
 
 // -------------------------------------------------- Submit //
 function onSubmit(values: any): void {
-	console.log('%c%s', 'color: #00ff00; font-weight: bold;', 'onSubmit SUBMIT FORM \n', values);
 	emit('submit', values);
 }
 
@@ -414,12 +450,12 @@ const computedPages = computed<Page[]>(() => {
 });
 
 function whenCallback(): void {
-	Object.values(pages).forEach((page: Page, pageIdx: number) => {
+	Object.values(computedPages.value).forEach((page: Page, pageIdx: number) => {
 		if (page.fields) {
 			Object.values(page.fields).forEach((field: Field, fieldIdx) => {
 				if (field.when) {
 					const enabledField: boolean = field.when(modelValue.value);
-					const indexPage = pages[pageIdx];
+					const indexPage = computedPages.value[pageIdx];
 
 					if (indexPage?.fields && indexPage?.fields[fieldIdx]) {
 						indexPage.fields[fieldIdx].type = enabledField ? originalPages[pageIdx].fields[fieldIdx].type : 'hidden';
diff --git a/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue b/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue
@@ -13,6 +13,7 @@
 			v-model="modelValue"
 			v-bind="(boundSettings as Omit<Settings, 'validateOn'>)"
 			:density="fieldDensity"
+			:disabled="isValidating"
 			:error="errorMessage ? errorMessage?.length > 0 : false"
 			:error-messages="errorMessage"
 			@blur="onActions(validate, 'blur')"
@@ -80,6 +81,7 @@
 								:id="option.id"
 								v-model="modelValue"
 								:density="fieldDensity"
+								:disabled="isValidating"
 								:error="errorMessage ? errorMessage?.length > 0 : false"
 								:error-messages="errorMessage"
 								:hide-details="true"
@@ -144,14 +146,22 @@ onUnmounted(() => {
 
 
 // ------------------------- Validate On Actions //
+const isValidating = ref<boolean>(field?.disabled as boolean);
+
 async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
-	await useOnActions({
-		action,
-		emit,
-		field,
-		settingsValidateOn: settings.value.validateOn,
-		validate,
-	});
+	if (!isValidating.value) {
+		isValidating.value = true;
+
+		await useOnActions({
+			action: field?.autoPage ? 'click' : action,
+			emit,
+			field,
+			settingsValidateOn: settings.value.validateOn,
+			validate,
+		}).then(() => {
+			isValidating.value = false;
+		});
+	}
 }
 
 
diff --git a/src/plugin/components/fields/VSFRadio/VSFRadio.vue b/src/plugin/components/fields/VSFRadio/VSFRadio.vue
@@ -38,6 +38,7 @@
 						:append-icon="field?.appendIcon"
 						:density="fieldDensity"
 						:direction="field?.direction"
+						:disabled="isValidating"
 						:error="hasErrors"
 						:error-messages="errorMessage || field?.errorMessages"
 						:hideDetails="field?.hideDetails || settings?.hideDetails"
@@ -67,7 +68,9 @@
 								:name="field.name"
 								:style="radioStyle"
 								:value="option.value"
-								@click="onActions(validate, 'click')"
+								@blur="onActions(validate, 'blur')"
+								@change="onActions(validate, 'change')"
+								@input="onActions(validate, 'input')"
 							>
 							</v-radio>
 						</div>
@@ -111,14 +114,22 @@ onUnmounted(() => {
 
 
 // ------------------------- Validate On Actions //
+const isValidating = ref<boolean>(field?.disabled as boolean);
+
 async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
-	await useOnActions({
-		action,
-		emit,
-		field,
-		settingsValidateOn: settings.value.validateOn,
-		validate,
-	});
+	if (!isValidating.value) {
+		isValidating.value = true;
+
+		await useOnActions({
+			action: field?.autoPage ? 'click' : action,
+			emit,
+			field,
+			settingsValidateOn: settings.value.validateOn,
+			validate,
+		}).then(() => {
+			isValidating.value = false;
+		});
+	}
 }
 
 
diff --git a/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue b/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue
@@ -12,6 +12,7 @@
 			v-bind="(boundSettings as Omit<Settings, 'validateOn'>)"
 			v-model="modelValue"
 			:density="fieldDensity"
+			:disabled="isValidating"
 			:error="errorMessage ? errorMessage?.length > 0 : false"
 			:error-messages="errorMessage"
 			@blur="onActions((validate as ValidateFieldResult), 'blur')"
@@ -61,14 +62,22 @@ onUnmounted(() => {
 
 
 // ------------------------- Validate On Actions //
+const isValidating = ref<boolean>(field?.disabled as boolean);
+
 async function onActions(validate: ValidateFieldResult, action: ValidateAction): Promise<void> {
-	await useOnActions({
-		action,
-		emit,
-		field,
-		settingsValidateOn: settings.value.validateOn,
-		validate,
-	});
+	if (!isValidating.value) {
+		isValidating.value = true;
+
+		await useOnActions({
+			action: field?.autoPage ? 'click' : action,
+			emit,
+			field,
+			settingsValidateOn: settings.value.validateOn,
+			validate,
+		}).then(() => {
+			isValidating.value = false;
+		});
+	}
 }
 
 
diff --git a/src/plugin/components/shared/PageReviewContainer.vue b/src/plugin/components/shared/PageReviewContainer.vue
@@ -25,8 +25,8 @@
 					color="background"
 				>
 					<v-list-item
-						v-if="settings.canReview && checkIfEditable(field)"
-						@click="settings.canReview ? goToQuestion(field) : null"
+						v-if="checkIfEditable(field)"
+						@click="settings.editable ? goToQuestion(field) : null"
 					>
 						<v-list-item-title>
 							{{ field.label }}
diff --git a/src/plugin/composables/helpers.ts b/src/plugin/composables/helpers.ts
@@ -31,7 +31,6 @@ export const useBuildSettings: UseBuildSettings = (stepperProps: Settings) => {
 		autoPageDelay: stepperProps.autoPageDelay,
 		bgColor: stepperProps.bgColor,
 		border: stepperProps.border,
-		canReview: stepperProps.canReview,
 		color: stepperProps.color,
 		density: stepperProps.density,
 		disabled: stepperProps.disabled,
diff --git a/src/plugin/types/index.ts b/src/plugin/types/index.ts
@@ -122,7 +122,6 @@ export interface ResponsiveColumns {
 export interface Field {
 	autoPage?: Props['autoPage'];
 	autoPageDelay?: Props['autoPageDelay'];
-	canReview?: Props['canReview'];
 	class?: string;
 	color?: Props['color'];
 	columns?: Props['fieldColumns'];
@@ -169,7 +168,6 @@ export interface Page {
 
 
 // -------------------------------------------------- Props //
-// TODO: Revert this back to the stupid way //
 export interface Props extends /* @vue-ignore */ VStepperProps, VStepperWindowItemProps {
 	// Required //
 	pages: Page[];
@@ -178,7 +176,6 @@ export interface Props extends /* @vue-ignore */ VStepperProps, VStepperWindowIt
 	// Optional //
 	autoPage?: boolean;
 	autoPageDelay?: number;
-	canReview?: boolean; 													// TODO: Determine a better prop name for canReview //
 	color?: string | undefined;
 	density?: GlobalDensity;
 	direction?: 'horizontal' | 'vertical';
diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts
@@ -1,8 +1,5 @@
 export const AllProps = {
 	autoPageDelay: 250,
-	canReview: true,
-
-	// density: 'default' as const,
 	direction: 'horizontal' as const,
 	disabled: false,
 	editable: true,
diff --git a/src/stores/props.ts b/src/stores/props.ts
@@ -85,12 +85,6 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'border',
 			type: 'string | number | boolean',
 		},
-		{
-			default: 'true',
-			desc: 'Determines if the user can review the form after completion.',
-			name: 'canReview',
-			type: 'boolean',
-		},
 		{
 			default: 'undefined',
 			desc: 'Applies specified color to the control and fields - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).',

Original file line number	Diff line number	Diff line change
`@@ -25,8 +25,8 @@`
`25`	`25`	`color="background"`
`26`	`26`	`>`
`27`	`27`	`<v-list-item`
`28`		`- v-if="settings.canReview && checkIfEditable(field)"`
`29`		`- @click="settings.canReview ? goToQuestion(field) : null"`
	`28`	`+ v-if="checkIfEditable(field)"`
	`29`	`+ @click="settings.editable ? goToQuestion(field) : null"`
`30`	`30`	`>`
`31`	`31`	`<v-list-item-title>`
`32`	`32`	`{{ field.label }}`