pkp/pkp-lib#3594 Updates for initial integration with OJS

src/components/Form/Form.vue

@@ -1,15 +1,15 @@
 <template>
 	<form
-		method="POST"
 		class="pkpForm -pkpClearfix"
+		:method="method"
 		:action="action"
 	>
 		<form-locales v-if="availableLocales.length"
 			:locales="availableLocales"
 			:active="activeLocales"
 			@updateLocales="setActiveLocales"
 		/>
-		<form-page-list v-if="pages.length"
+		<form-page-list v-if="pages.length > 1"
 			:pages="pages"
 			:currentPage="currentPage"
 			@setPage="setCurrentPage"
@@ -24,6 +24,7 @@
 				:isCurrentPage="currentPage === page.id"
 				:activeLocales="activeLocales"
 				:availableLocales="availableLocales"
+				:isSaving="isSaving"
 				:i18n="i18n"
 				@change="fieldChanged"
 				@pageSubmitted="submitPage"
@@ -38,7 +39,7 @@ import FormLocales from './FormLocales.vue';
 import FormPage from './FormPage.vue';
 import FormPageList from './FormPageList.vue';
 import PkpButton from '@/components/Button/Button.vue';
-import Icon from '@/components/Icon/Icon';
+import Icon from '@/components/Icon/Icon.vue';
 
 export default {
 	name: 'Form',
@@ -52,6 +53,7 @@ export default {
 	data: function () {
 		return {
 			id: '',
+			method: '',
 			action: '',
 			errors: [],
 			object: null,
@@ -60,6 +62,7 @@ export default {
 			pages: [],
 			activeLocales: [],
 			currentPage: '',
+			isSaving: false,
 			i18n: {},
 		};
 	},
@@ -105,19 +108,69 @@ export default {
 				this.submitForm();
 				return;
 			}
-			const page = this.pages.find((page) => page.id === pageId);
-			if (page.submitOnNext) {
-				console.log('Submit page');
-			} else {
-				this.setCurrentPage(true);
-			}
+			this.setCurrentPage(true);
 		},
 
 		/**
 		 * Submit the form
 		 */
 		submitForm: function () {
-			console.log('Submit form');
+
+			this.onSubmit();
+
+			let values = {};
+			this.fields.forEach((field) => {
+				values[field.name] = field.value;
+			});
+
+			$.ajax({
+				context: this,
+				method: this.method,
+				url: this.action,
+				data: values,
+				success: this.onSuccess,
+				error: this.onError,
+				complete: this.onComplete,
+			});
+		},
+
+		/**
+		 * This method is fired when the form is submitted, before the AJAX request
+		 * is sent.
+		 */
+		onSubmit: function () {
+			this.isSaving = true;
+		},
+
+		/**
+		 * Callback to fire when the form submission's ajax request has been
+		 * returned successfully
+		 *
+		 * @param object r The response to the AJAX request
+		 */
+		onSuccess: function (r) {
+			pkp.eventBus.$emit('notify', {text: this.__('successMessage', r), type: 'success'});
+		},
+
+		/**
+		 * Callback to fire when the form submission's ajax request has been
+		 * returned with errors
+		 *
+		 * @param object r The response to the AJAX request
+		 */
+		onError: function (r) {
+			pkp.eventBus.$emit('notify', {text: this.__('errors', {count: Object.keys(r.responseJSON).length}), type: 'error'});
+			this.errors = r.responseJSON;
+		},
+
+		/**
+		 * Callback to fire when the form submission's ajax request has been
+		 * returned, and the success or error callbacks have already been fired.
+		 *
+		 * @param object r The response to the AJAX request
+		 */
+		onComplete: function (r) {
+			this.isSaving = false;
 		},
 
 		/**

src/components/Form/FormFieldLabel.vue

@@ -1,8 +1,14 @@
 <template>
 	<label :for="controlId" class="pkpFormFieldLabel">
-		{{ label }}
+		<template v-if="localeLabel">
+			<span class="aria-hidden">{{ localeLabel }}</span>
+			<span class="-screenReader">{{ multilingualLabel }}</span>
+		</template>
+		<template v-else>
+			{{ label }}
+		</template>
 		<span v-if="isRequired" class="pkpFormFieldLabel__required">
-			*
+			<span class="aria-hidden">*</span>
 			<span class="-screenReader">{{ requiredLabel }}</span>
 		</span>
 	</label>
@@ -14,6 +20,8 @@ export default {
 	props: {
 		controlId: String,
 		label: String,
+		localeLabel: String,
+		multilingualLabel: String,
 		isRequired: {
 			type: Boolean,
 			default: false,

src/components/Form/FormGroup.vue

@@ -55,8 +55,8 @@ export default {
 	},
 	props: {
 		id: String,
-		label: [String, Object],
-		description: [String, Object],
+		label: String,
+		description: String,
 		pageId: String,
 		fields: Array,
 		formId: String,
@@ -73,16 +73,6 @@ export default {
 		fieldsInGroup: function () {
 			return this.fields.filter(field => field.groupId === this.id);
 		},
-
-		/**
-		 * Are there any multilingual fields in this group?
-		 *
-		 * @return boolean
-		 */
-		isMultilingual: function () {
-			return this.availableLocales.length > 1 &&
-				this.fieldsInGroup.find((field) => field.isMultilingual === true);
-		},
 	},
 	methods: {
 		/**
@@ -139,7 +129,8 @@ export default {
 
 .pkpFormGroup .pkpFormField + .pkpFormField,
 .pkpFormGroup .pkpFormField + .pkpFormGroup__localeGroup,
-.pkpFormGroup .pkpFormGroup__localeGroup + .pkpFormField {
+.pkpFormGroup .pkpFormGroup__localeGroup + .pkpFormField,
+.pkpFormGroup .pkpFormGroup__localeGroup + .pkpFormGroup__localeGroup {
 	margin-top: @base + @half;
 }
 

src/components/Form/FormPage.vue

@@ -10,15 +10,23 @@
 			:i18n="i18n"
 			@change="fieldChanged"
 		/>
-		<div class="pkpFormPage__buttons">
-			<pkp-button v-if="previousButton"
-				v-bind="previousButton"
-				@click="previousPage"
-			/>
-			<pkp-button v-if="submitButton"
-				v-bind="submitButton"
-				@click="submit"
-			/>
+		<div class="pkpFormPage__buttons" ref="buttons" aria-live="polite">
+			<template v-if="isSaving">
+				<span class="pkpFormPage__loading">
+					<span class="pkpSpinner" aria-hidden="true"></span>
+					{{ i18n.saving }}
+				</span>
+			</template>
+			<template v-else>
+				<pkp-button v-if="previousButton"
+					v-bind="previousButton"
+					@click="previousPage"
+				/>
+				<pkp-button v-if="submitButton"
+					v-bind="submitButton"
+					@click="submit"
+				/>
+			</template>
 		</div>
 	</div>
 </template>
@@ -35,10 +43,6 @@ export default {
 	},
 	props: {
 		id: String,
-		submitOnNext: {
-			type: Boolean,
-			default: false,
-		},
 		groups: Array,
 		fields: Array,
 		formId: String,
@@ -47,6 +51,7 @@ export default {
 		availableLocales: Array,
 		submitButton: Object,
 		previousButton: Object,
+		isSaving: Boolean,
 		i18n: Object,
 	},
 	computed: {
@@ -68,6 +73,15 @@ export default {
 			return this.fields.filter(field => this.groupsInPage.includes(this.fields.groupId));
 		},
 	},
+	watch: {
+		/**
+		 * When saving, set the focus to the button wrapper element so it doesn't
+		 * get dropped as the dom updates
+		 */
+		isSaving: function () {
+			this.$refs.buttons.focus();
+		},
+	},
 	methods: {
 		/**
 		 * Emit an event when a field's value has changed
@@ -107,4 +121,12 @@ export default {
 	padding: @base;
 	text-align: right;
 }
+
+.pkpFormPage__loading {
+	font-size: @font-tiny;
+
+	.pkpSpinner {
+		margin-right: 0.5em;
+	}
+}
 </style>

src/components/Form/fields/FieldBase.vue

@@ -1,8 +1,8 @@
 <script>
-import FormFieldLabel from '../FormFieldLabel';
-import HelpButton from '@/components/HelpButton/HelpButton';
-import Tooltip from '@/components/Tooltip/Tooltip';
-import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress';
+import FormFieldLabel from '../FormFieldLabel.vue';
+import HelpButton from '@/components/HelpButton/HelpButton.vue';
+import Tooltip from '@/components/Tooltip/Tooltip.vue';
+import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress.vue';
 
 export default {
 	name: 'FieldBase',
@@ -15,9 +15,9 @@ export default {
 	props: {
 		name: String,
 		component: String,
-		label: [String, Object],
-		description: [String, Object],
-		tooltip: [String, Object],
+		label: String,
+		description: String,
+		tooltip: String,
 		helpTopic: String,
 		groupId: String,
 		formId: String,
@@ -27,8 +27,7 @@ export default {
 		localeKey: String,
 		locales: Array,
 		value: {
-			type: [String, Number, Object, Array, Boolean],
-			default: '',
+			required: true,
 		},
 		i18n: Object,
 	},
@@ -145,31 +144,43 @@ export default {
 				return val;
 			}).length;
 		},
-	},
-	methods: {
-		/**
-		 * Maybe localize a value. If it is not a locale object, return the value.
+
+		/*
+		 * Is this a multilingual field and is this the primary locale?
 		 *
-		 * This is used to support multingual fields. When a field is multilingual,
-		 * the appropraite value must be retrieved from the locale object:
+		 * @return Boolean
+		 */
+		isPrimaryLocale: function () {
+			return !this.isMultilingual || this.localeKey === $.pkp.app.primaryLocale;
+		},
+
+		/**
+		 * The label for this field
 		 *
-		 * {
-		 *   en_US: 'Value',
-		 *   fr_CA: 'Valeur',
-	 	 * }
+		 * For multilingual fields, the secondary languages will indicate the
+		 * locale name in the label.
 		 *
-		 * @param string|number|object value
-		 * @param string|null localeKey
-		 * @return mixed
+		 * @return string
 		 */
-		maybeLocalize: function (value, localeKey) {
-			if (this.isMultilingual) {
-				return this.localize(value, localeKey);
-			} else {
-				return value;
+		localeLabel: function () {
+			if (!this.isMultilingual || this.isPrimaryLocale) {
+				return '';
 			}
+			return this.locales.find((locale) => locale.key === this.localeKey).label;
 		},
 
+		/**
+		 * For multilingual fields, the secondary languages need a hidden label for
+		 * screenreaders that indicates the language as well as the original field
+		 * label.
+		 *
+		 * @return string
+		 */
+		multilingualLabel: function () {
+			return this.__('multilingualLabel', {label: this.label, localeName: this.localeLabel});
+		},
+	},
+	methods: {
 		/**
 		 * Helper function to compile unique IDs for labels and aria-describedby
 		 * attributes.