Change submission language

src/components/Container/WorkflowPage.vue

@@ -9,12 +9,14 @@ import PkpHeader from '@/components/Header/Header.vue';
 import LocalizeSubmission from '@/mixins/localizeSubmission.js';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
+import ChangeSubmissionLanguage from '@/pages/workflow/ChangeSubmissionLanguage.vue';
 import SelectRevisionDecisionModal from '@/pages/workflow/SelectRevisionDecisionModal.vue';
 import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'WorkflowPage',
 	components: {
+		ChangeSubmissionLanguage,
 		ContributorsListPanel,
 		Composer,
 		Dropdown,
@@ -28,6 +30,8 @@ export default {
 		return {
 			activityLogLabel: '',
 			canAccessPublication: false,
+			canChangeSubmissionLanguage: false,
+			currentSubmissionLanguageLabel: '',
 			canEditPublication: false,
 			currentPublication: null,
 			decisionUrl: '',
@@ -311,6 +315,20 @@ export default {
 			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
 		},
 
+		/**
+		 * Open a modal displaying the change submission language form
+		 */
+		openChangeSubmissionLanguageModal() {
+			const {openSideModal} = useModal();
+			openSideModal(ChangeSubmissionLanguage, {
+				form: this.components[
+					pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA
+				],
+				publicationId: this.workingPublication.id,
+				submissionId: this.submission.id,
+			});
+		},
+
 		/**
 		 * Open a modal to prompt the user to confirm creation of
 		 * a new version
@@ -734,6 +752,20 @@ export default {
 	}
 }
 
+.pkpSubmission__localeNotSupported {
+	margin: 0 -2rem;
+	padding: 1rem;
+	background: @primary;
+	font-size: @font-sml;
+	color: #fff;
+	text-align: center;
+}
+
+.pkpPublication__changeSubmissionLanguage {
+	display: block;
+	padding-bottom: 0.25rem;
+}
+
 // Integrate the grids in the publication tab
 .pkpWorkflow__contributors,
 #representations-grid {

src/components/Form/Form.vue

@@ -369,14 +369,9 @@ export default {
 						missingValue = !value;
 						break;
 					case 'string':
-					case 'array':
-						if (!value.length) {
-							missingValue = true;
-						}
-						break;
 					case 'object':
 						// null values are stored as objects
-						if (!value) {
+						if (!value || (Array.isArray(value) && !value.length)) {
 							missingValue = true;
 						}
 						break;

src/components/Form/formHelpers.js

@@ -38,6 +38,9 @@ export function shouldShowGroup(group, fields) {
 	if (typeof group.showWhen === 'string') {
 		return !!whenField.value;
 	}
+	if (Array.isArray(group.showWhen[1])) {
+		return group.showWhen[1].includes(whenField.value);
+	}
 	return whenField.value === group.showWhen[1];
 }
 

src/pages/workflow/ChangeSubmissionLanguage.vue

@@ -0,0 +1,52 @@
+<template>
+	<SideModalBody>
+		<template #pre-title>
+			{{ props.submissionId }}
+		</template>
+		<template #title>
+			{{ t('submission.list.changeSubmissionLanguage.title') }}
+		</template>
+		<template #description>
+			{{ store.publicationTitle }}
+		</template>
+		<div class="p-4">
+			<div class="bg-secondary p-4">
+				<div id="changeSubmissionLanguage">
+					<PkpForm
+						v-bind="store.form"
+						@set="store.setCustom"
+						@success="store.success"
+						@cancel="store.closeSideModal"
+					></PkpForm>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import {useChangeSubmissionLanguageStore} from '@/pages/workflow/changeSubmissionLanguageStore';
+
+const props = defineProps({
+	form: {
+		type: Object,
+		required: true,
+	},
+	publicationId: {
+		type: Number,
+		required: true,
+	},
+	submissionId: {
+		type: Number,
+		required: true,
+	},
+});
+const store = useChangeSubmissionLanguageStore({
+	form: props.form,
+	publicationId: props.publicationId,
+	submissionId: props.submissionId,
+});
+</script>

src/pages/workflow/changeSubmissionLanguageStore.js

@@ -0,0 +1,115 @@
+import {inject, ref} from 'vue';
+import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useApiUrl} from '@/composables/useApiUrl';
+import {useFetch} from '@/composables/useFetch';
+import {useForm} from '@/composables/useForm';
+import {useLocalize} from '@/composables/useLocalize';
+import cloneDeep from 'clone-deep';
+
+export const useChangeSubmissionLanguageStore = defineComponentStore(
+	'changeSubmissionLanguage',
+	(props) => {
+		/**
+		 * Variables and init data
+		 */
+
+		const {t, tk} = useLocalize();
+
+		const DescriptionLocaleKeys = {
+			title: tk(
+				'submission.list.changeSubmissionLanguage.metadataDescription.title',
+			),
+			abstract: tk(
+				'submission.list.changeSubmissionLanguage.metadataDescription.abstract',
+			),
+		};
+
+		const {
+			apiUrl: {value: publicationApiUrl},
+		} = useApiUrl(
+			`submissions/${props.submissionId}/publications/${props.publicationId}`,
+		);
+
+		const {
+			form: {value: form},
+			getValue,
+			set,
+			setValue,
+		} = useForm(cloneDeep(props.form));
+		// Set action api url
+		form.action = publicationApiUrl + '/changeLocale';
+
+		// Set initial value
+		const publicationTitle = ref(getValue('title'));
+
+		const publicationProps = {};
+		// Get publication props
+		getData();
+
+		const closeModal = inject('closeModal');
+
+		/**
+		 * Functions
+		 */
+
+		function closeSideModal() {
+			closeModal();
+		}
+
+		/**
+		 * Set form data
+		 */
+		const setCustom = (_, data) => {
+			set(_, data);
+			const oldLocale = form.primaryLocale;
+			const newLocale = getValue('locale');
+			// Set fields when changing language
+			if (newLocale !== oldLocale) {
+				form.primaryLocale = newLocale;
+				form.fields.forEach((field) => {
+					if (publicationProps[field.name]) {
+						setValue(
+							field.name,
+							publicationProps[field.name][newLocale] ??
+								publicationProps[field.name],
+						);
+						field.description = t(DescriptionLocaleKeys[field.name], {
+							language: getLocaleName(newLocale),
+						});
+					}
+				});
+			}
+		};
+
+		/**
+		 * Form success
+		 */
+		const success = () => {
+			window.location.reload();
+		};
+
+		return {closeSideModal, setCustom, success, form, publicationTitle};
+
+		/**
+		 * Aux functions
+		 */
+
+		async function getData() {
+			const {data, fetch} = useFetch(publicationApiUrl, {
+				method: 'GET',
+			});
+			await fetch();
+
+			Object.assign(publicationProps, data.value ?? {});
+			delete publicationProps['locale'];
+
+			publicationTitle.value = data.value.title[props.form.primaryLocale];
+		}
+
+		function getLocaleName(locale) {
+			return form.fields
+				.find(({name}) => name === 'locale')
+				.options.find(({value}) => value === locale).label;
+		}
+	},
+);