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

@@ -133,32 +133,34 @@ export const WithErrorSummary = {
 		components: {PkpForm: Form, FormErrorSummary},
 		setup() {
 			const {get, set, components} = useContainerStateManager();
-			const 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.',
-				],
-			};
-			set('errorSummary', {
+			set('example', {
 				...FormUser,
 				...args,
-				errors,
+				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, errors, get, set, components};
+
+			return {args, get, set, components};
 		},
 		template: `
-			<FormErrorSummary :errors="errors"/>
-			<PkpForm v-bind="components.errorSummary" @set="set" />
+			<FormErrorSummary :errors="components.example.errors"/>
+			<PkpForm v-bind="components.example" @set="set" />
 		`,
 	}),
 

src/components/Form/FormErrorSummary.vue

@@ -15,6 +15,9 @@
 <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: {
@@ -26,7 +29,10 @@ const props = defineProps({
 const errorsCount = computed(() => Object.keys(props.errors).length);
 
 const message = computed(() => {
-	const error = errorsCount.value > 1 ? 'errors' : 'error';
-	return `${errorsCount.value} ${error} detected! Please correct the following ${error} before proceeding.`;
+	const count = errorsCount.value;
+	if (count > 1) {
+		return t('form.errorSummaryMany', {count});
+	}
+	return t('form.errorSummaryOne');
 });
 </script>