From f3780bc0f9e3803f23444f64056c2d153bd12f18 Mon Sep 17 00:00:00 2001
From: jyhein <124268211+jyhein@users.noreply.github.com>
Date: Thu, 23 May 2024 13:25:50 +0300
Subject: [PATCH] Change submission language

---
 .../Container/ChangeSubmissionLanguage.vue    | 237 ++++++++++++++++++
 src/components/Container/WorkflowPage.vue     |  94 +++++++
 src/components/Container/WorkflowPageOMP.vue  |   4 +
 src/components/Form/Form.vue                  |   7 +-
 src/components/Form/FormPage.vue              |   3 +
 5 files changed, 339 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Container/ChangeSubmissionLanguage.vue

diff --git a/src/components/Container/ChangeSubmissionLanguage.vue b/src/components/Container/ChangeSubmissionLanguage.vue
new file mode 100644
index 000000000..948ac5575
--- /dev/null
+++ b/src/components/Container/ChangeSubmissionLanguage.vue
@@ -0,0 +1,237 @@
+<template>
+	<SideModalBody>
+		<template #pre-title>
+			{{ submission.id }}
+		</template>
+		<template #title>
+			{{ t('submission.list.changeSubmissionLanguage.title') }}
+		</template>
+		<template #description>
+			{{ publicationTitle }}
+		</template>
+		<div class="p-4">
+			<div class="bg-secondary p-4">
+				<div id="changeSubmissionLanguage" aria-live="polite">
+					<pkp-form
+						v-bind="state.form"
+						@set="updateFormData"
+						@success="changeLanguage"
+					></pkp-form>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script type="text/javascript">
+import {inject, reactive} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import dialog from '@/mixins/dialog.js';
+import {t} from '@/utils/i18n.js';
+import cloneDeep from 'clone-deep';
+
+export default {
+	name: 'ChangeSubmissionLanguage',
+	components: {
+		PkpForm,
+		SideModalBody,
+	},
+	mixins: [dialog],
+	props: {
+		contributors: {
+			type: Array,
+			required: true,
+		},
+		contributorsApiUrl: {
+			type: String,
+			required: true,
+		},
+		cslmform: {
+			type: Object,
+			required: true,
+		},
+		publicationTitle: {
+			type: String,
+			required: true,
+		},
+		submissionApiUrl: {
+			type: String,
+			required: true,
+		},
+		submission: {
+			type: Object,
+			required: true,
+		},
+	},
+	emits: ['set', 'updated:contributors', 'updated:submission-locale'],
+	setup(props, {emit}) {
+		/**
+		 * Variables
+		 */
+
+		const state = reactive({
+			form: cloneDeep(props.cslmform),
+		});
+		const contributorPropsToUpdate = [
+			'givenName',
+			'familyName',
+			'preferredPublicName',
+		];
+		let isSubmit = false;
+
+		/**
+		 * Functions
+		 */
+
+		const closeModal = inject('closeModal');
+
+		/**
+		 * Change submission language and update contributor props
+		 */
+		const changeLanguage = async () => {
+			const oldLocale = props.submission.locale;
+			const newLocale = state.form.primaryLocale;
+			if (newLocale === oldLocale) {
+				return Promise.resolve();
+			}
+			isSubmit = true;
+			return editContributors().then(
+				submitLang().then(async () => {
+					isSubmit = false;
+					updateForm();
+					closeModal();
+					return Promise.resolve();
+				}, $.noop),
+				$.noop,
+			);
+
+			async function editContributors() {
+				const editedContributorProps = props.contributors
+					.map((c) => ({id: c.id, editedProps: edit(c)}))
+					.filter(({editedProps}) => !!Object.keys(editedProps).length);
+				if (editedContributorProps.length) {
+					return $.when(
+						...editedContributorProps.map(({id, editedProps}) => {
+							return send(`${props.contributorsApiUrl}/${id}`, editedProps);
+						}),
+					).then(() => {
+						emit(
+							'updated:contributors',
+							props.contributors.map((c) =>
+								Object.assign(
+									c,
+									editedContributorProps.find(({id}) => id === c.id)
+										?.editedProps ?? {},
+								),
+							),
+						);
+					});
+				}
+				return Promise.resolve();
+
+				function edit(contributor) {
+					// Only edit if given name empty
+					if (contributor['givenName'][newLocale] !== '') return {};
+					return contributorPropsToUpdate.reduce((editedProps, prop) => {
+						if (contributor[prop][newLocale] === '') {
+							editedProps[prop] = {[newLocale]: contributor[prop][oldLocale]};
+						}
+						return editedProps;
+					}, {});
+				}
+			}
+
+			async function submitLang() {
+				return send(props.submissionApiUrl, {locale: newLocale}, (_) =>
+					emit('updated:submission-locale', newLocale),
+				);
+			}
+
+			async function send(url, data, successCallback = $.noop) {
+				return $.ajax({
+					url: url,
+					method: 'POST',
+					headers: {
+						'X-Csrf-Token': pkp.currentUser.csrfToken,
+						'X-Http-Method-Override': 'PUT',
+					},
+					data: data,
+					success(r) {
+						successCallback(r);
+					},
+					error(r) {
+						// ajaxError does not work with vue3 (this.t)
+						// Temporary solution
+						if (r?.status) {
+							dialog.methods.openDialog({
+								name: 'ajaxError',
+								title: t('common.error'),
+								message: r.responseJSON
+									? Object.values(r.responseJSON).join(' ')
+									: t('common.unknownError'),
+								actions: [
+									{label: t('common.ok'), callback: (close) => close()},
+								],
+							});
+						}
+					},
+				});
+			}
+
+			function updateForm() {
+				const form = cloneDeep(state.form);
+				const locale = form.primaryLocale;
+				const showWhen = form.supportedFormLocales
+					.filter(({key}) => key !== locale)
+					.map(({key}) => key);
+				form.groups.forEach((g) => {
+					if (typeof g.showWhen !== 'undefined') g.showWhen[1] = showWhen;
+				});
+				form.fields[0].value = locale;
+				state.form = form;
+				pkp.eventBus.$emit('updated:change-submission-language:form', form);
+			}
+		};
+
+		/**
+		 * Update form data
+		 */
+		const updateFormData = (_, data) => {
+			Object.keys(data).forEach(function (key) {
+				state.form[key] = data[key];
+				const oldLocale = state.form.primaryLocale;
+				const newLocale = data.fields?.[0].value ?? oldLocale;
+				if (newLocale !== oldLocale && !isSubmit) {
+					state.form.primaryLocale = newLocale;
+					state.form.visibleLocales = [newLocale];
+					state.form.fields.forEach((f) => {
+						if (f.groupId === 'metadata') {
+							// i18n.js t doesn't seem to support variable as tranlation key
+							// (i18nExtractKeys.vite.js: uiLocaleKeysBackend.json), using str.replace for now.
+							const oldLanguage = state.form.supportedFormLocales.find(
+								({key}) => key === oldLocale,
+							).label;
+							const newLanguage = state.form.supportedFormLocales.find(
+								({key}) => key === newLocale,
+							).label;
+							f.description = f.description.replace(oldLanguage, newLanguage);
+						}
+					});
+				}
+			});
+		};
+
+		return {changeLanguage, state, updateFormData};
+	},
+};
+</script>
+
+<style lang="less">
+// Hide formlocales of change language metadata form
+#changeSubmissionLanguage form {
+	.pkpFormLocales {
+		display: none;
+	}
+}
+</style>
diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue
index 528890d7e..a4e058955 100644
--- a/src/components/Container/WorkflowPage.vue
+++ b/src/components/Container/WorkflowPage.vue
@@ -1,11 +1,13 @@
 <script type="text/javascript">
 import Page from './Page.vue';
+import ChangeSubmissionLanguage from '@/components/Container/ChangeSubmissionLanguage.vue';
 import ContributorsListPanel from '@/components/ListPanel/contributors/ContributorsListPanel.vue';
 import PublicationSectionJats from '@/pages/workflow/PublicationSectionJats.vue';
 import Composer from '@/components/Composer/Composer.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import Modal from '@/components/Modal/Modal.vue';
 import PkpHeader from '@/components/Header/Header.vue';
+import {useModal} from '@/composables/useModal';
 import LocalizeSubmission from '@/mixins/localizeSubmission.js';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
@@ -13,6 +15,7 @@ import dialog from '@/mixins/dialog.js';
 export default {
 	name: 'WorkflowPage',
 	components: {
+		ChangeSubmissionLanguage,
 		ContributorsListPanel,
 		Composer,
 		Dropdown,
@@ -26,6 +29,8 @@ export default {
 		return {
 			activityLogLabel: '',
 			canAccessPublication: false,
+			canChangeSubmissionLanguage: false,
+			currentSubmissionLanguageLabel: '',
 			canEditPublication: false,
 			currentPublication: null,
 			decisionUrl: '',
@@ -57,6 +62,7 @@ export default {
 			workingPublication: null,
 			isModalOpenedSelectRevisionDecision: false,
 			isModalOpenedSelectRevisionRecommendation: false,
+			openSideModal: null,
 		};
 	},
 	computed: {
@@ -157,10 +163,24 @@ export default {
 			this.isModalOpenedSelectRevisionRecommendation = true;
 		});
 
+		/**
+		 * Update change submission languange form and contributors
+		 */
+		pkp.eventBus.$on(
+			'updated:change-submission-language:form',
+			this.updateChangesSubmissionLanguage,
+		);
+
 		/**
 		 * Load forms
 		 */
 		this.setPublicationForms(this.workingPublication);
+
+		/**
+		 * ModalStore
+		 */
+		const {openSideModal} = useModal();
+		this.openSideModal = openSideModal;
 	},
 	mounted() {
 		/**
@@ -177,6 +197,7 @@ export default {
 		pkp.eventBus.$off('unpublish:publication');
 		pkp.eventBus.$off('decision:revisions');
 		pkp.eventBus.$off('recommendation:revisions');
+		pkp.eventBus.$off('change-submission-language:form');
 	},
 	methods: {
 		/**
@@ -299,6 +320,21 @@ export default {
 			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
 		},
 
+		/**
+		 * Open a modal displaying the change submission language form
+		 */
+		openChangeSubmissionLanguageModal() {
+			this.openSideModal(ChangeSubmissionLanguage, {
+				contributors: this.workingPublication.authors,
+				contributorsApiUrl: `${this.submissionApiUrl}/publications/${this.workingPublication.id}/contributors`,
+				cslmform:
+					this.components[pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA],
+				publicationTitle: this.workingPublication.title[this.submission.locale],
+				submissionApiUrl: this.submissionApiUrl,
+				submission: this.submission,
+			});
+		},
+
 		/**
 		 * Open a modal to prompt the user to confirm creation of
 		 * a new version
@@ -471,6 +507,17 @@ export default {
 				form.fields = form.fields.map((field) => {
 					if (Object.keys(publication).includes(field.name)) {
 						field.value = publication[field.name];
+						if (field.selected) {
+							field.selected = field.isMultilingual
+								? Object.entries(field.value).reduce(
+										(selected, [l, values]) => {
+											selected[l] = values.map((v) => ({value: v, label: v}));
+											return selected;
+										},
+										{},
+									)
+								: field.value.map((v) => ({value: v, label: v}));
+						}
 					}
 					return field;
 				});
@@ -601,6 +648,39 @@ export default {
 		setContributors(contributors) {
 			this.workingPublication.authors = [...contributors];
 		},
+
+		/**
+		 * Change submission language:
+		 * Update change submission locale form
+		 * Update new primary locale to forms
+		 * Update submission locale
+		 * Update working publication
+		 * Update label
+		 *
+		 * @param {Object} form
+		 */
+		updateChangesSubmissionLanguage(form) {
+			this.components[pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA] =
+				form;
+			const locale = form.primaryLocale;
+			Object.keys(this.components).forEach((formId) => {
+				if (typeof this.components[formId].primaryLocale !== 'undefined') {
+					this.set(formId, {primaryLocale: locale, visibleLocales: [locale]});
+				} else if (
+					typeof this.components[formId].form?.primaryLocale !== 'undefined'
+				) {
+					this.components[formId].form.primaryLocale = locale;
+					this.components[formId].form.visibleLocales = [locale];
+				}
+			});
+
+			this.submission.locale = locale;
+			this.setWorkingPublicationById(this.workingPublication.id);
+
+			this.currentSubmissionLanguageLabel = this.components[
+				pkp.const.FORM_CHANGE_SUBMISSION_LANGUAGE_METADATA
+			].supportedFormLocales.find(({key}) => key === locale).label;
+		},
 	},
 };
 </script>
@@ -722,6 +802,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 {
diff --git a/src/components/Container/WorkflowPageOMP.vue b/src/components/Container/WorkflowPageOMP.vue
index a7c24da38..4196ee3cc 100644
--- a/src/components/Container/WorkflowPageOMP.vue
+++ b/src/components/Container/WorkflowPageOMP.vue
@@ -72,9 +72,13 @@ export default {
 
 		/**
 		 * Update the work type to be an edited volume
+		 * Update authors' isVolumeEditor to bool if null
 		 */
 		setAsEditedVolume() {
 			this.updateWorkType(this.getConstant('WORK_TYPE_EDITED_VOLUME'));
+			this.workingPublication.authors.forEach(
+				(author) => (author.isVolumeEditor = !!author.isVolumeEditor),
+			);
 		},
 
 		/**
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 52d5e0070..aa874f36d 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -348,14 +348,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;
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 66dd656b8..e59e0e334 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -207,6 +207,9 @@ export default {
 			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];
 		},