From cdff37b38f016d1a0b23ca3d7079831128744e20 Mon Sep 17 00:00:00 2001 From: jyhein <124268211+jyhein@users.noreply.github.com> Date: Mon, 16 Sep 2024 11:50:12 +0300 Subject: [PATCH] Change submission language --- src/components/Container/WorkflowPage.vue | 32 ++++++ src/components/Form/Form.vue | 7 +- src/components/Form/formHelpers.js | 3 + .../workflow/ChangeSubmissionLanguage.vue | 52 +++++++++ .../workflow/changeSubmissionLanguageStore.js | 102 ++++++++++++++++++ 5 files changed, 190 insertions(+), 6 deletions(-) create mode 100644 src/pages/workflow/ChangeSubmissionLanguage.vue create mode 100644 src/pages/workflow/changeSubmissionLanguageStore.js diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue index 738e5a101..965a02a7a 100644 --- a/src/components/Container/WorkflowPage.vue +++ b/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 { diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue index c2492f6af..8946a24f2 100644 --- a/src/components/Form/Form.vue +++ b/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; diff --git a/src/components/Form/formHelpers.js b/src/components/Form/formHelpers.js index 5f27683e3..2790a96e6 100644 --- a/src/components/Form/formHelpers.js +++ b/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]; } diff --git a/src/pages/workflow/ChangeSubmissionLanguage.vue b/src/pages/workflow/ChangeSubmissionLanguage.vue new file mode 100644 index 000000000..dfc8396b5 --- /dev/null +++ b/src/pages/workflow/ChangeSubmissionLanguage.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/pages/workflow/changeSubmissionLanguageStore.js b/src/pages/workflow/changeSubmissionLanguageStore.js new file mode 100644 index 000000000..7c0aaba64 --- /dev/null +++ b/src/pages/workflow/changeSubmissionLanguageStore.js @@ -0,0 +1,102 @@ +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 cloneDeep from 'clone-deep'; + +export const useChangeSubmissionLanguageStore = defineComponentStore( + 'changeSubmissionLanguage', + (props) => { + /** + * Variables and init data + */ + + 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 = field.description.replace( + getLocaleName(oldLocale), + 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[0].options.find(({value}) => value === locale).label; + } + }, +);