pkp/pkp-lib#3594 Allow showing two language inputs at once

src/components/Form/Form.vue

@@ -9,7 +9,12 @@
 			:currentPage="currentPage"
 			@setPage="setCurrentPage"
 		/>
-		<div class="pkpFormPages">
+		<div class="pkpFormPages" :class="classes">
+			<form-locales v-if="availableLocales.length"
+				:locales="availableLocales"
+				:active="activeLocales"
+				@updateLocales="setActiveLocales"
+			/>
 			<form-page v-for="page in pages"
 				:key="page.id"
 				v-bind="page"
@@ -20,7 +25,6 @@
 				:activeLocales="activeLocales"
 				:availableLocales="availableLocales"
 				:i18n="i18n"
-				@setLocales="setActiveLocales"
 				@change="fieldChanged"
 				@pageSubmitted="submitPage"
 				@previousPage="setCurrentPage(false)"
@@ -30,14 +34,20 @@
 </template>
 
 <script>
+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';
 
 export default {
 	name: 'Form',
 	components: {
+		FormLocales,
 		FormPage,
 		FormPageList,
+		PkpButton,
+		Icon,
 	},
 	data: function () {
 		return {
@@ -54,6 +64,19 @@ export default {
 		};
 	},
 	computed: {
+		/**
+		 * Classes to add to wrapper element
+		 *
+		 * @return array
+		 */
+		classes: function () {
+			let classes = [];
+			if (this.activeLocales.length > 1) {
+				classes.push('pkpForm--hasManyActiveLocales');
+			}
+			return classes;
+		},
+
 		/**
 		 * Available form locales
 		 *
@@ -97,15 +120,6 @@ export default {
 			console.log('Submit form');
 		},
 
-		/**
-		 * Change the visible locale(s)
-		 *
-		 * @param array localeKeys ["en_US"]
-		 */
-		setActiveLocales: function (localeKeys) {
-			this.activeLocales = localeKeys;
-		},
-
 		/**
 		 * Update values when a field has changed
 		 *
@@ -144,12 +158,21 @@ export default {
 				offset: -50,
 			});
 		},
+
+		/**
+		 * Update active locales
+		 *
+		 * @param array locales New array of active locales
+		 */
+		setActiveLocales: function (locales) {
+			this.activeLocales = locales;
+		},
 	},
 	mounted: function () {
 
 		// Set the current locale
 		if (!this.activeLocales.length) {
-			this.activeLocales = [this.availableLocales[0].key];
+			this.activeLocales = [$.pkp.app.primaryLocale];
 		}
 
 		// Set the current page

src/components/Form/FormGroup.vue

@@ -8,7 +8,7 @@
 			<template v-for="field in fieldsInGroup">
 				<template v-if="field.isMultilingual">
 					<div class="pkpFormGroup__localeGroup -pkpClearfix">
-						<div v-for="locale in availableLocales" class="pkpFormGroup__locale" :class="{'-isActive': activeLocales.includes(locale.key)}">
+						<div v-for="locale in availableLocales" class="pkpFormGroup__locale" :class="{'pkpFormGroup__locale--isActive': activeLocales.includes(locale.key)}">
 							<component
 								:is="field.component"
 								v-bind="field"
@@ -142,7 +142,36 @@ export default {
 	display: none;
 }
 
-.pkpFormGroup__locale.-isActive {
+.pkpFormGroup__locale--isActive {
 	display: block;
 }
+
+// When multiple locales are being displayed at once
+.pkpForm--hasManyActiveLocales {
+
+	.pkpFormGroup__heading {
+		float: none;
+		padding-right: 0;
+		margin-bottom: @double;
+		width: 100%;
+		max-width: 35em;
+
+		+ .pkpFormGroup__fields {
+			float: none;
+			width: 100%;
+			padding-left: 0;
+		}
+	}
+
+	.pkpFormGroup__locale--isActive {
+		float: left;
+		width: 50%;
+		padding-right: @base + @half;
+
+		~ .pkpFormGroup__locale--isActive {
+			padding-right: 0;
+			padding-left: @base + @half;
+		}
+	}
+}
 </style>

src/components/Form/FormLocales.vue

@@ -0,0 +1,81 @@
+<template>
+	<div v-if="locales.length" class="pkpFormLocales">
+		<pkp-button v-for="locale in locales"
+			:key="locale.key"
+			:label="locale.label"
+			:isLink="primaryLocale !== locale.key && !active.includes(locale.key)"
+			:isActive="primaryLocale === locale.key || active.includes(locale.key)"
+			@click="toggleLocale(locale.key)"
+		/>
+	</div>
+</template>
+
+<script>
+import PkpButton from '@/components/Button/Button.vue';
+
+export default {
+	name: 'FormLocales',
+	components: {
+		PkpButton,
+	},
+	props: {
+		locales: {
+			type: Array,
+			required: true,
+		},
+		active: {
+			type: Array,
+			required: true,
+		},
+	},
+	data: function () {
+		return {
+			primaryLocale: $.pkp.app.primaryLocale,
+		};
+	},
+	methods: {
+		/**
+		 * Toggle the active locale when clicked
+		 *
+		 * If a locale is already selected, it will be removed from teh active locales. If a locale is not
+		 * already selected, it will be displayed with the primary locale and any other active locale
+		 * will be removed. The primary locale is always visible.
+		 *
+		 * @param string localeKey "en_US"
+		 */
+		toggleLocale: function (localeKey) {
+			// Don't allow the primary locale to be disabled
+			if (localeKey === $.pkp.app.primaryLocale) {
+				return;
+			}
+			let selected = [this.primaryLocale];
+			if (!this.active.includes(localeKey)) {
+				selected.push(localeKey);
+			}
+			this.updateLocales(selected);
+		},
+
+		/**
+		 * Emit an event with updated locales
+		 *
+		 * @param array selected Selected locales which should be new active array
+		 */
+		updateLocales: function (selected) {
+			this.$emit('updateLocales', selected);
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.pkpFormLocales {
+	padding: @half @base;
+	border-bottom: @bg-border-light;
+
+	.pkpButton + .pkpButton {
+		margin-left: @half;
+	}
+}
+</style>

src/components/Form/FormPage.vue

@@ -1,13 +1,5 @@
 <template>
 	<div class="pkpFormPage" :class="{'pkpFormPage--current': isCurrentPage}">
-		<div v-if="availableLocales.length" class="pkpFormPage__locales">
-			<pkp-button v-for="locale in availableLocales"
-				:key="locale.key"
-				:label="locale.label"
-				:isActive="activeLocales.includes(locale.key)"
-				@click="setLocale(locale.key)"
-			/>
-		</div>
 		<form-group v-for="group in groupsInPage"
 			:key="group.id"
 			v-bind="group"
@@ -90,15 +82,6 @@ export default {
 			this.$emit('change', data);
 		},
 
-		/**
-		 * Emit an event when the active locale is changed
-		 *
-		 * @param string localeKey (eg - "en_US")
-		 */
-		setLocale: function (localeKey) {
-			this.$emit('setLocales', [localeKey]);
-		},
-
 		/**
 		 * Submit the form page
 		 */
@@ -119,15 +102,6 @@ export default {
 <style lang="less">
 @import '../../styles/_import';
 
-.pkpFormPage__locales {
-	padding: @base;
-	border-bottom: @bg-border-light;
-
-	.pkpButton + .pkpButton {
-		margin-left: @half;
-	}
-}
-
 .pkpFormPage__buttons {
 	border-top: @bg-border-light;
 	padding: @base;

src/components/Form/fields/FieldBase.vue

@@ -1,7 +1,7 @@
 <script>
 import FormFieldLabel from '../FormFieldLabel';
-import HelpButton from '../../HelpButton/HelpButton';
-import Tooltip from '../../Tooltip/Tooltip';
+import HelpButton from '@/components/HelpButton/HelpButton';
+import Tooltip from '@/components/Tooltip/Tooltip';
 
 export default {
 	name: 'FieldBase',

src/docs/examples/Form/implementations/helpers/field-text-affiliation.js

@@ -5,6 +5,7 @@ export default {
 	label: {
 		en_US: 'Affiliation',
 		fr_CA: 'Affiliation',
+		ar_AR: 'الانتماء',
 	},
 	groupId: 'identity',
 	isMultilingual: true,

src/docs/examples/Form/implementations/helpers/field-textarea-bio.js

@@ -4,11 +4,13 @@ export default {
 	label: {
 		en_US: 'Bio Statement',
 		fr_CA: 'Note biographique',
+		ar_AR: 'بيان حيوي',
 	},
 	groupId: 'profile',
 	tooltip: {
 		en_US: 'Your biographical statement will usually include your department and rank, and may include research interests or key publications.',
 		fr_CA: 'Votre relevé biographique comprend généralement votre département et votre grade, et peut inclure des intérêts de recherche ou des publications clés.',
+		ar_AR: 'يتضمن بيان السيرة الذاتية عادةً قسمك ورتبتك ، وقد يشمل اهتمامات بحثية أو منشورات رئيسية',
 	},
 	value: {
 		en_US: '',

src/main.js

@@ -75,6 +75,10 @@ window.$.pkp = {
 				key: 'fr_CA',
 				label: 'Français (Canada)',
 			},
+			{
+				key: 'ar_AR',
+				label: 'عربى',
+			},
 		],
 	},
 };