pkp/pkp-lib#5502 Migrate change language functionality to new workflo…

…w page

src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue

@@ -46,7 +46,7 @@
 				v-if="summaryStore.publicationControlsLeft?.length"
 				#publication-controls-left
 			>
-				<div class="flex gap-x-3" data-cy="workflow-controls-left">
+				<div class="flex flex-col gap-y-2" data-cy="workflow-controls-left">
 					<component
 						:is="Components[item.component] || item.component"
 						v-bind="item.props"
@@ -132,6 +132,8 @@ import WorkflowPaymentDropdown from './actionItems/WorkflowPaymentDropdown.vue';
 import PublicationForm from './primaryItems/PublicationForm.vue';
 import PublicationJats from './primaryItems/PublicationJats.vue';
 import PublicationVersionControl from './publicationControls/PublicationVersionControl.vue';
+import WorkflowChangeSubmissionLanguage from './publicationControls/WorkflowChangeSubmissionLanguage.vue';
+
 import ActionButton from './actionItems/ActionButton.vue';
 import WorkflowRecommendOnlyControls from './actionItems/WorkflowRecommendOnlyControls.vue';
 import WorkflowRecommendOnlyListingRecommendations from './components/WorkflowRecommendOnlyListingRecommendations.vue';
@@ -167,6 +169,7 @@ const Components = {
 	PublicationForm,
 	PublicationJats,
 	PublicationVersionControl,
+	WorkflowChangeSubmissionLanguage,
 	SubmissionStatus,
 	PublicationEditDisabled,
 };

src/pages/dashboard/SubmissionSummaryModal/composables/useWorkflowAuthorConfig.js

@@ -31,6 +31,17 @@ function getHeaderItems({
 
 export const WorkflowConfig = {
 	common: {
+		getPrimaryItems: ({submission, permissions}) => {
+			return [
+				{
+					component: 'WorkflowChangeSubmissionLanguage',
+					props: {
+						submission,
+						canChangeSubmissionLanguage: false,
+					},
+				},
+			];
+		},
 		getSecondaryItems: ({submission, selectedReviewRound, selectedStageId}) => {
 			const items = [];
 			return items;

src/pages/dashboard/SubmissionSummaryModal/composables/useWorkflowEditorialConfig.js

@@ -58,6 +58,19 @@ function getHeaderItems({
 }
 
 export const WorkflowConfig = {
+	common: {
+		getPrimaryItems: ({submission, permissions}) => {
+			return [
+				{
+					component: 'WorkflowChangeSubmissionLanguage',
+					props: {
+						submission,
+						canChangeSubmissionLanguage: false,
+					},
+				},
+			];
+		},
+	},
 	[pkp.const.WORKFLOW_STAGE_ID_SUBMISSION]: {
 		getPrimaryItems: ({submission, selectedStageId, selectedReviewRound}) => {
 			const items = [];
@@ -539,9 +552,24 @@ export const PublicationConfig = {
 			submission,
 			selectedPublicationId,
 			selectedPublication,
+			permissions,
 		}) => {
 			const items = [];
 
+			if (
+				submission.status !== pkp.const.STATUS_PUBLISHED &&
+				submission.publications.length < 2
+			) {
+				items.push({
+					component: 'WorkflowChangeSubmissionLanguage',
+					props: {
+						submission,
+						canChangeSubmissionLanguage:
+							permissions.canChangeSubmissionLanguage,
+					},
+				});
+			}
+
 			items.push({
 				component: 'PublicationVersionControl',
 				props: {

src/pages/dashboard/SubmissionSummaryModal/publicationControls/WorkflowChangeSubmissionLanguage.vue

@@ -0,0 +1,39 @@
+<template>
+	<div>
+		<span class="text-lg-normal">
+			{{ t('submission.list.changeSubmissionLanguage.currentLanguage') }}
+		</span>
+		<span class="text-lg-bold">{{ languageLabel }}</span>
+		<PkpButton
+			v-if="canChangeSubmissionLanguage"
+			is-link
+			@click="handleChangeLanguage"
+		>
+			{{ t('submission.list.changeSubmissionLanguage.buttonLabel') }}
+		</PkpButton>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import {useSubmissionSummaryStore} from '../submissionSummaryStore';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	submission: {type: Object, required: true},
+	canChangeSubmissionLanguage: {type: Boolean, required: true},
+});
+
+const languageLabel = computed(
+	() => props.submission.metadataLocales[props.submission.locale],
+);
+
+const store = useSubmissionSummaryStore();
+
+function handleChangeLanguage() {
+	store.workflowChangeSubmissionLanguage();
+}
+</script>

src/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js

@@ -120,6 +120,8 @@ export const useSubmissionSummaryStore = defineComponentStore(
 			let canPublish = false;
 			// Access to activity log
 			let canAccessEditorialHistory = false;
+			// Changing submission language
+			let canChangeSubmissionLanguage = false;
 
 			let accessibleStages = [];
 
@@ -204,12 +206,17 @@ export const useSubmissionSummaryStore = defineComponentStore(
 				canAccessEditorialHistory = true;
 			}
 
+			if (canPublish || canEditPublication) {
+				canChangeSubmissionLanguage = true;
+			}
+
 			return {
 				canAccessPublication,
 				canAccessProduction,
 				canEditPublication,
 				canPublish,
 				canAccessEditorialHistory,
+				canChangeSubmissionLanguage,
 				accessibleStages,
 			};
 		});

src/pages/dashboard/composables/useWorkflowActions.js

@@ -5,6 +5,7 @@ import {useUrl} from '@/composables/useUrl';
 import {useForm} from '@/composables/useForm';
 import {useFetch} from '@/composables/useFetch';
 import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
+import ChangeSubmissionLanguage from '@/pages/workflow/ChangeSubmissionLanguage.vue';
 
 import SelectRevisionFormModal from '../components/SelectRevisionFormModal.vue';
 
@@ -24,6 +25,7 @@ export const Actions = {
 	WORKFLOW_UNSCHEDULE_PUBLICATION: 'workflowUnschedulePublication',
 	WORKFLOW_UNPUBLISH_PUBLICATION: 'workflowUnpublishPublication',
 	WORKFLOW_CREATE_NEW_VERSION: 'workflowCreateNewVersion',
+	WORKFLOW_CHANGE_SUBMISSION_LANGUAGE: 'workflowChangeSubmissionLanguage',
 };
 
 export function useWorkflowActions({
@@ -298,6 +300,14 @@ export function useWorkflowActions({
 		redirectToPage();
 	}
 
+	function workflowChangeSubmissionLanguage({submission}) {
+		const {openSideModal} = useModal();
+		openSideModal(ChangeSubmissionLanguage, {
+			publicationId: submission.currentPublicationId,
+			submissionId: submission.id,
+		});
+	}
+
 	return {
 		workflowViewPublishedSubmission,
 		workflowAssignToIssue,
@@ -311,5 +321,6 @@ export function useWorkflowActions({
 		workflowUnpublishPublication,
 		workflowCreateNewVersion,
 		workflowPreviewPublication,
+		workflowChangeSubmissionLanguage,
 	};
 }

src/pages/workflow/ChangeSubmissionLanguage.vue

@@ -13,6 +13,7 @@
 			<div class="bg-secondary p-4">
 				<div id="changeSubmissionLanguage">
 					<PkpForm
+						v-if="store.form"
 						v-bind="store.form"
 						@set="store.setCustom"
 						@success="store.success"
@@ -31,10 +32,6 @@ 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,

src/pages/workflow/changeSubmissionLanguageStore.js

@@ -1,10 +1,9 @@
-import {inject, ref} from 'vue';
+import {inject, ref, computed, watch} from 'vue';
 import {defineComponentStore} from '@/utils/defineComponentStore';
-import {useApiUrl} from '@/composables/useApiUrl';
+import {useUrl} from '@/composables/useUrl';
 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',
@@ -26,21 +25,39 @@ export const useChangeSubmissionLanguageStore = defineComponentStore(
 
 		const {
 			apiUrl: {value: publicationApiUrl},
-		} = useApiUrl(
+		} = useUrl(
 			`submissions/${props.submissionId}/publications/${props.publicationId}`,
 		);
 
-		const {
-			form: {value: form},
-			getValue,
-			set,
-			setValue,
-		} = useForm(cloneDeep(props.form));
+		/**
+		 * Form for changing language
+		 */
+
+		const relativeUrl = computed(() => {
+			// this form is not related only to submission, not publication
+			return `submissions/${props.submissionId}/publications/${props.publicationId}/_components/changeLanguageMetadata`;
+		});
+		const {apiUrl: publicationFormUrl} = useUrl(relativeUrl);
+		const {data: changeSubmissionForm, fetch: fetchForm} =
+			useFetch(publicationFormUrl);
+
+		watch(
+			publicationFormUrl,
+			(newRelativeUrl, prevRelativeUrl) => {
+				if (newRelativeUrl !== prevRelativeUrl) {
+					fetchForm();
+				}
+			},
+			{immediate: true},
+		);
+
+		const {form, getValue, set, setValue} = useForm(changeSubmissionForm);
 		// Set action api url
 		form.action = publicationApiUrl + '/changeLocale';
 
 		// Set initial value
-		const publicationTitle = ref(getValue('title'));
+
+		const publicationTitle = ref('');
 
 		const publicationProps = {};
 		// Get publication props
@@ -61,12 +78,12 @@ export const useChangeSubmissionLanguageStore = defineComponentStore(
 		 */
 		const setCustom = (_, data) => {
 			set(_, data);
-			const oldLocale = form.primaryLocale;
+			const oldLocale = form.value.primaryLocale;
 			const newLocale = getValue('locale');
 			// Set fields when changing language
 			if (newLocale !== oldLocale) {
-				form.primaryLocale = newLocale;
-				form.fields.forEach((field) => {
+				form.value.primaryLocale = newLocale;
+				form.value.fields.forEach((field) => {
 					if (publicationProps[field.name]) {
 						setValue(
 							field.name,
@@ -95,19 +112,23 @@ export const useChangeSubmissionLanguageStore = defineComponentStore(
 		 */
 
 		async function getData() {
-			const {data, fetch} = useFetch(publicationApiUrl, {
-				method: 'GET',
-			});
-			await fetch();
-
-			Object.assign(publicationProps, data.value ?? {});
+			const {data: publication, fetch: fetchPublication} = useFetch(
+				publicationApiUrl,
+				{
+					method: 'GET',
+				},
+			);
+			await fetchPublication();
+
+			Object.assign(publicationProps, publication.value ?? {});
 			delete publicationProps['locale'];
 
-			publicationTitle.value = data.value.title[props.form.primaryLocale];
+			publicationTitle.value =
+				publication.value.fullTitle[publication.value.locale];
 		}
 
 		function getLocaleName(locale) {
-			return form.fields
+			return form.value.fields
 				.find(({name}) => name === 'locale')
 				.options.find(({value}) => value === locale).label;
 		}