Basic support for multilingual fields in FormDisplay component

src/components/FormDisplay/FieldTextDisplay.vue

@@ -2,7 +2,7 @@
 	<FormDisplayItemBasic
 		:heading-element="headingElement"
 		:heading="field.label"
-		:value="field.value"
+		:value="displayLocale ? field.value[displayLocale] : field.value"
 	/>
 </template>
 
@@ -12,5 +12,6 @@ import FormDisplayItemBasic from './FormDisplayItemBasic.vue';
 defineProps({
 	field: {type: Object, required: true},
 	headingElement: {required: true, type: String},
+	displayLocale: {required: true, type: String, default: ''},
 });
 </script>

src/components/FormDisplay/FormDisplay.stories.js

@@ -12,7 +12,7 @@ export default {
 				givenName: 'Jarda',
 				familyName: 'Kotesovec',
 				affiliation: 'PKP',
-				country: 'CA',
+				country: 'AI',
 			});
 			connectWithPayload(payload);
 			return {args};
@@ -22,6 +22,21 @@ export default {
 };
 
 export const Base = {
+	render: (args) => ({
+		components: {FormDisplay},
+		setup() {
+			const {connectWithPayload} = useForm(args.form);
+			const payload = ref({
+				givenName: 'Jarda',
+				familyName: 'Kotesovec',
+				affiliation: 'PKP',
+				country: 'AI',
+			});
+			connectWithPayload(payload);
+			return {args};
+		},
+		template: '<FormDisplay v-bind="args.form"></FormDisplay>',
+	}),
 	args: {
 		form: {
 			id: 'userDetails',
@@ -130,133 +145,178 @@ export const Base = {
 							value: 'AG',
 							label: 'Antigua and Barbuda',
 						},
+					],
+					size: 'large',
+					prefix: '',
+				},
+			],
+			groups: [
+				{
+					id: 'default',
+					pageId: 'default',
+				},
+			],
+			hiddenFields: {},
+			pages: [
+				{
+					id: 'default',
+					submitButton: {
+						label: 'Save',
+					},
+				},
+			],
+			primaryLocale: 'en',
+			visibleLocales: ['en'],
+			supportedFormLocales: [
+				{
+					key: 'en',
+					label: 'English',
+				},
+				{
+					key: 'fr_CA',
+					label: 'French',
+				},
+			],
+			errors: {},
+		},
+	},
+};
+
+export const Multilingual = {
+	render: (args) => ({
+		components: {FormDisplay},
+		setup() {
+			const {connectWithPayload} = useForm(args.form);
+			const payload = ref({
+				givenName: {en: 'Jarda', fr_CA: 'Jardous'},
+				familyName: {en: 'Kotesovec', fr_CA: ''},
+				affiliation: {en: 'PKP', fr_CA: 'PKP fr'},
+				country: 'AI',
+			});
+			connectWithPayload(payload);
+			return {args};
+		},
+		template: '<FormDisplay v-bind="args.form"></FormDisplay>',
+	}),
+	args: {
+		form: {
+			id: 'userDetails',
+			method: 'POST',
+			action: 'http://localhost/ojs/index.php/publicknowledge/api/v1/users',
+			fields: [
+				{
+					name: 'givenName',
+					component: 'field-text',
+					label: 'Given Name',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: true,
+					description:
+						'Also known as a forename or the first name, it is tha part of a personal name that identifies a preson',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'familyName',
+					component: 'field-text',
+					label: 'Family Name',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: true,
+					description:
+						"A surname, family name, or last name is the mostly  hereditary portion of one's personal name that indicates one's family",
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'affiliation',
+					component: 'field-text',
+					label: 'Affiliation',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: true,
+					description: 'This is the institute you are affiliated with',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'country',
+					component: 'field-select',
+					label: 'County of affiliation',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: false,
+					description:
+						'This is a country in which the institute you are affiliated with is situated',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					options: [
 						{
-							value: 'AR',
-							label: 'Argentina',
-						},
-						{
-							value: 'AM',
-							label: 'Armenia',
-						},
-						{
-							value: 'AW',
-							label: 'Aruba',
-						},
-						{
-							value: 'AU',
-							label: 'Australia',
-						},
-						{
-							value: 'AT',
-							label: 'Austria',
-						},
-						{
-							value: 'AZ',
-							label: 'Azerbaijan',
-						},
-						{
-							value: 'BS',
-							label: 'Bahamas',
-						},
-						{
-							value: 'BH',
-							label: 'Bahrain',
-						},
-						{
-							value: 'BD',
-							label: 'Bangladesh',
-						},
-						{
-							value: 'BB',
-							label: 'Barbados',
-						},
-						{
-							value: 'BY',
-							label: 'Belarus',
-						},
-						{
-							value: 'BE',
-							label: 'Belgium',
-						},
-						{
-							value: 'BZ',
-							label: 'Belize',
-						},
-						{
-							value: 'BJ',
-							label: 'Benin',
-						},
-						{
-							value: 'BM',
-							label: 'Bermuda',
-						},
-						{
-							value: 'BT',
-							label: 'Bhutan',
-						},
-						{
-							value: 'BO',
-							label: 'Bolivia, Plurinational State of',
-						},
-						{
-							value: 'BQ',
-							label: 'Bonaire, Sint Eustatius and Saba',
-						},
-						{
-							value: 'BA',
-							label: 'Bosnia and Herzegovina',
-						},
-						{
-							value: 'BW',
-							label: 'Botswana',
+							value: '',
+							label: 'Select a country',
+							disabled: true,
 						},
 						{
-							value: 'BV',
-							label: 'Bouvet Island',
+							value: 'AF',
+							label: 'Afghanistan',
 						},
 						{
-							value: 'BR',
-							label: 'Brazil',
+							value: 'AL',
+							label: 'Albania',
 						},
 						{
-							value: 'IO',
-							label: 'British Indian Ocean Territory',
+							value: 'DZ',
+							label: 'Algeria',
 						},
 						{
-							value: 'BN',
-							label: 'Brunei Darussalam',
+							value: 'AS',
+							label: 'American Samoa',
 						},
 						{
-							value: 'BG',
-							label: 'Bulgaria',
+							value: 'AD',
+							label: 'Andorra',
 						},
 						{
-							value: 'BF',
-							label: 'Burkina Faso',
+							value: 'AO',
+							label: 'Angola',
 						},
 						{
-							value: 'BI',
-							label: 'Burundi',
+							value: 'AI',
+							label: 'Anguilla',
 						},
 						{
-							value: 'CV',
-							label: 'Cabo Verde',
+							value: 'AQ',
+							label: 'Antarctica',
 						},
 						{
-							value: 'KH',
-							label: 'Cambodia',
+							value: 'AG',
+							label: 'Antigua and Barbuda',
 						},
 						{
-							value: 'CM',
-							label: 'Cameroon',
+							value: 'AR',
+							label: 'Argentina',
 						},
 						{
-							value: 'CA',
-							label: 'Canada',
+							value: 'AM',
+							label: 'Armenia',
 						},
 						{
-							value: '...',
-							label: '...',
+							value: 'AW',
+							label: 'Aruba',
 						},
 					],
 					size: 'large',

src/components/FormDisplay/FormDisplay.vue

@@ -1,16 +1,45 @@
 <template>
-	<div class="gap flex flex-col gap-y-10">
-		<div v-for="field in fields" :key="field.name">
+	<div>
+		<div v-if="hasMultilingualFields">
+			<div
+				v-for="locale in availableLocales"
+				:key="locale.key"
+				class="mt-8 first:mt-0"
+			>
+				<component :is="localeHeadingElement" class="xl-bold mb-3 text-heading">
+					{{ locale.label }}
+				</component>
+				<div class="flex flex-col gap-y-4">
+					<div v-for="field in fields" :key="field.name">
+						<component
+							:is="
+								FieldComponents[field.component] || `${field.component}-display`
+							"
+							:field="field"
+							:heading-element="fieldHeadingElement"
+							:display-locale="field.isMultilingual ? locale.key : ''"
+						></component>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			v-for="field in fields"
+			v-else
+			:key="field.name"
+			class="flex flex-col gap-y-10"
+		>
 			<component
 				:is="FieldComponents[field.component] || `${field.component}-display`"
 				:field="field"
-				:heading-element="headingElement"
+				:heading-element="fieldHeadingElement"
 			></component>
 		</div>
 	</div>
 </template>
 
 <script setup>
+import {computed} from 'vue';
 import FieldTextDisplay from './FieldTextDisplay.vue';
 import FieldSelectDisplay from './FieldSelectDisplay.vue';
 
@@ -19,8 +48,18 @@ const FieldComponents = {
 	'field-select': FieldSelectDisplay,
 };
 
-defineProps({
+const props = defineProps({
 	fields: {type: Array, required: true},
-	headingElement: {required: false, default: 'h4', type: String},
+	supportedFormLocales: {type: Array, required: true, default: () => []},
+	localeHeadingElement: {required: false, default: 'h3', type: String},
+	fieldHeadingElement: {required: false, default: 'h4', type: String},
+});
+
+const availableLocales = computed(() => {
+	return hasMultilingualFields.value ? props.supportedFormLocales : [];
+});
+
+const hasMultilingualFields = computed(() => {
+	return !!props.fields.find((field) => field.isMultilingual);
 });
 </script>