pkp/pkp-lib#10820 Display error summary at the top of the page with multiple forms (#494)

* pkp/pkp-lib#10820 Add FormErrorSummary component

* pkp/pkp-lib#10820 Add showErrorFooter prop in Form and FormPage components

* pkp/pkp-lib#10820 Use FormErrorSummary in UserInvitationDetailsFormStep component

* pkp/pkp-lib#10820 Add locale keys for new error summary message

Author: blesildaramirez

public/globals.js

@@ -431,6 +431,10 @@ window.pkp = {
 		'form.errorOne': 'Please correct one error.',
 		'form.errors':
 			'The form was not saved because {$count} error(s) were encountered. Please correct these errors and try again.',
+		'form.errorSummaryOne':
+			'1 error detected! Please correct the error below before proceeding.',
+		'form.errorSummaryMany':
+			'{$count} errors detected! Please correct the errors below before proceeding.',
 		'form.multilingualLabel': '{$label} in {$localeName}',
 		'form.multilingualProgress': '{$count}/{$total} languages completed',
 		'form.saved': 'Saved',
@@ -454,8 +458,8 @@ window.pkp = {
 		'grid.noItems': 'No Items',
 		'grid.user.confirmLogInAs':
 			'Log in as this user? All actions you perform will be attributed to this user.',
-		'grid.user.currentUsers':'Current Users',
-		'grid.action.mergeUser':'Merge User',
+		'grid.user.currentUsers': 'Current Users',
+		'grid.action.mergeUser': 'Merge User',
 		'help.help': 'Help',
 		'informationCenter.informationCenter': 'Information Center',
 		'invitation.cancelInvite.actionName': 'Cancel Invite',

src/components/Form/Form.stories.js

@@ -1,4 +1,5 @@
 import Form from './Form.vue';
+import FormErrorSummary from './FormErrorSummary.vue';
 import {useContainerStateManager} from '@/composables/useContainerStateManager';
 import FormBase from './mocks/form-base';
 import FormMultilingual from './mocks/form-multilingual';
@@ -126,3 +127,44 @@ export const WithErrors = {
 
 	args: {},
 };
+
+export const WithErrorSummary = {
+	render: (args) => ({
+		components: {PkpForm: Form, FormErrorSummary},
+		setup() {
+			const {get, set, components} = useContainerStateManager();
+			set('example', {
+				...FormUser,
+				...args,
+				errors: {
+					email: ['Please provide a valid email address'],
+					affiliation: {
+						en: ['You must enter your affiliation in English.'],
+						fr_CA: ['You must enter your affiliation in French.'],
+						ar: ['You must enter your affiliation in Arabic.'],
+					},
+					'user-locales': ['You must select at least two options.'],
+					bio: {
+						en: [
+							'Please provide a bio statement to accompany your publication.',
+						],
+					},
+					country: ['Please select your country.'],
+					'mailing-address': [
+						'You must enter a mailing address where you can receive post.',
+					],
+				},
+			});
+
+			return {args, get, set, components};
+		},
+		template: `
+			<FormErrorSummary :errors="components.example.errors"/>
+			<PkpForm v-bind="components.example" @set="set" />
+		`,
+	}),
+
+	args: {
+		showErrorFooter: false,
+	},
+};

src/components/Form/Form.vue

@@ -61,6 +61,7 @@
 				:visible-locales="visibleLocales"
 				:available-locales="availableLocales"
 				:is-saving="isSaving"
+				:show-error-footer="showErrorFooter"
 				@change="fieldChanged"
 				@page-submitted="nextPage"
 				@previous-page="setCurrentPage(false)"
@@ -135,6 +136,13 @@ export default {
 		 *  Async function, receiving data from form and returning {validationError, data} from useFetch
 		 */
 		customSubmit: Function,
+		/** If the error summary is shown in the form's footer. */
+		showErrorFooter: {
+			type: Boolean,
+			default() {
+				return true;
+			},
+		},
 	},
 	emits: [
 		/** When the form props need to be updated. The payload is an object with any keys that need to be modified. */

src/components/Form/FormErrorSummary.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		v-if="errorsCount"
+		class="inline-flex w-full gap-x-1 rounded border border-s-4 border-attention p-2"
+	>
+		<div class="leading-none">
+			<Icon icon="Error" class="h-5 w-5" :inline="true" />
+		</div>
+		<span class="text-lg-normal">
+			{{ message }}
+		</span>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	errors: {
+		type: Object,
+		default: () => {},
+	},
+});
+
+const errorsCount = computed(() => Object.keys(props.errors).length);
+
+const message = computed(() => {
+	const count = errorsCount.value;
+	if (count > 1) {
+		return t('form.errorSummaryMany', {count});
+	}
+	return t('form.errorSummaryOne');
+});
+</script>

src/components/Form/FormPage.vue

@@ -20,7 +20,7 @@
 			aria-live="polite"
 		>
 			<FormErrors
-				v-if="Object.keys(errors).length"
+				v-if="Object.keys(errors).length && showErrorFooter"
 				:errors="errors"
 				:fields="fields"
 				@showField="showField"
@@ -108,6 +108,12 @@ export default {
 			},
 		},
 		isSaving: Boolean,
+		showErrorFooter: {
+			type: Boolean,
+			default() {
+				return true;
+			},
+		},
 	},
 	data() {
 		return {

src/pages/userInvitation/UserInvitationDetailsFormStep.vue

@@ -1,8 +1,12 @@
 <template>
 	<div v-if="store.invitationPayload.userId === null">
+		<div v-if="Object.keys(store.errors).length" class="p-4">
+			<FormErrorSummary :errors="store.errors" />
+		</div>
 		<PkpForm
 			v-bind="userForm"
 			class="userInvitation__stepForm"
+			:show-error-footer="false"
 			@set="updateUserForm"
 		></PkpForm>
 	</div>
@@ -60,6 +64,7 @@ import {useTranslation} from '@/composables/useTranslation';
 import UserInvitationUserGroupsTable from './UserInvitationUserGroupsTable.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 import {useForm} from '@/composables/useForm';
+import FormErrorSummary from '@/components/Form/FormErrorSummary.vue';
 
 /**
  * Update the payload by using form values on multilingual or not