Form customSubmit with useFetch

jardakotesovec · Aug 22, 2024 · 1847386 · 1847386
1 parent 8c14552
commit 1847386
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 62 deletions.
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
@@ -17,7 +17,7 @@
 			:primary-locale-key="primaryLocale"
 			:locales="availableLocales"
 			:visible="visibleLocales"
-			@updateLocales="setVisibleLocales"
+			@update-locales="setVisibleLocales"
 		/>
 		<div v-if="pages.length > 1" class="pkpForm__pageNav">
 			<ol class="pkpForm__pageNavList">
@@ -59,10 +59,10 @@
 				:available-locales="availableLocales"
 				:is-saving="isSaving"
 				@change="fieldChanged"
-				@pageSubmitted="nextPage"
-				@previousPage="setCurrentPage(false)"
-				@showField="showField"
-				@showLocale="showLocale"
+				@page-submitted="nextPage"
+				@previous-page="setCurrentPage(false)"
+				@show-field="showField"
+				@show-locale="showLocale"
 				@cancel="cancel"
 				@set-errors="setErrors"
 			/>
@@ -128,6 +128,10 @@ export default {
 		visibleLocales: Array,
 		/** The locale(s) supported by this form. If a form has multilingual fields, it will display a separate input control for each of these locales. */
 		supportedFormLocales: Array,
+		/** For custom AJAX call, while still keep the error handling within Form
+		 *  Async function, receiving data from form and returning {validationError, data} from useFetch
+		 */
+		customSubmit: Function,
 	},
 	emits: [
 		/** When the form props need to be updated. The payload is an object with any keys that need to be modified. */
@@ -285,7 +289,7 @@ export default {
 		/**
 		 * Submit the form
 		 */
-		submit() {
+		async submit() {
 			if (!this.canSubmit) {
 				return false;
 			}
@@ -304,7 +308,17 @@ export default {
 				return;
 			}
 
-			if (this.action === 'emit') {
+			if (this.customSubmit) {
+				const {data, validationError} = await this.customSubmit(
+					this.submitValues,
+				);
+				if (validationError) {
+					this.error({status: 400, responseJSON: validationError});
+				} else {
+					this.success(data);
+				}
+				this.complete();
+			} else if (this.action === 'emit') {
 				this.$emit('success', this.submitValues);
 			} else {
 				$.ajax({

diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -4,11 +4,7 @@
 			{{ title }}
 		</template>
 		<SideModalLayoutBasic>
-			<PkpForm
-				v-bind="activeForm"
-				@set="(...args) => emit('updateForm', ...args)"
-				@success="(...args) => counterFormSubmit(...args)"
-			/>
+			<PkpForm v-bind="form" @set="set" />
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -18,13 +14,13 @@ import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import PkpForm from '@/components/Form/Form.vue';
 import {useForm} from '@/composables/useForm';
+import {useFetch} from '@/composables/useFetch';
 
 const props = defineProps({
 	title: {type: String, required: true},
 	submitAction: {type: String, required: true},
 	activeForm: {type: Object, required: true},
 });
-const emit = defineEmits(['updateForm', 'formSuccess']);
 
 /**
  * Get the report parameters
@@ -66,58 +62,25 @@ function getReportParams(formSubmitValues) {
 	return params;
 }
 
-/**
- * Submit the form
- *
- * @param {Object}
- */
-function counterFormSubmit(submittedValues) {
-	const {form: form} = useForm(props.activeForm);
+const {form, set} = useForm(props.activeForm, {
+	customSubmit: async (submittedValues) => {
+		const {validationError, data, fetch} = useFetch(props.submitAction, {
+			expectValidationError: true,
+			headers: {Accept: 'text/tab-separated-values; charset=utf-8'},
+			query: getReportParams(submittedValues),
+		});
 
-	form.isSaving = true;
+		await fetch();
 
-	$.ajax({
-		context: form,
-		method: form.method,
-		url: props.submitAction,
-		headers: {
-			Accept: 'text/tab-separated-values; charset=utf-8',
-		},
-		data: getReportParams(submittedValues),
-		error(r) {
-			form.isSaving = false;
-			if (r.status && r.status === 400) {
-				if (Object.prototype.hasOwnProperty.call(r.responseJSON, 'Code')) {
-					// COUNTER speific errors should actually not occur
-					// because of the form/user input validation
-					// but consider them for any case as well.
-					pkp.eventBus.$emit(
-						'notify',
-						r.responseJSON.Code +
-							':' +
-							r.responseJSON.Message +
-							'(' +
-							r.responseJSON.Data +
-							')',
-						'warning',
-					);
-				} else {
-					// Field validation errors
-					emit('updateForm', form.id, {errors: r.responseJSON});
-				}
-			} else {
-				form.error(r);
-			}
-		},
-		success(r) {
-			var blob = new Blob([r]);
+		if (data.value) {
+			var blob = new Blob([data.value]);
 			var link = document.createElement('a');
 			link.href = window.URL.createObjectURL(blob);
 			link.download = 'counterReport.tsv';
 			link.click();
-			form.isSaving = false;
-			emit('formSuccess', this.id, r);
-		},
-	});
-}
+		}
+
+		return {data: data.value, validationError: validationError.value};
+	},
+});
 </script>
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
@@ -30,9 +30,13 @@ function mapFromSelectedToValue(selected) {
 	return selected.map((iv) => iv.value);
 }
 
-export function useForm(_form) {
+export function useForm(_form, {customSubmit}) {
 	const form = ref(_form);
 
+	if (customSubmit) {
+		form.value.customSubmit = customSubmit;
+	}
+
 	function connectWithPayload(payload) {
 		watch(
 			payload,