-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
339 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.