From 2e91a4bbc993d252558ad0045b7ad3c916dddaf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= Date: Thu, 8 Feb 2024 15:22:09 +0100 Subject: [PATCH] pkp/pkp-lib#9453 rename useTranslation to useLocalize and add getMomentLocale and localizeSubmission to useLocalize --- .../ActionPanel/ActionPanel.stories.js | 4 +-- src/components/Modal/SideModalBody.vue | 4 +-- src/composables/useLocalize.js | 15 ++++++++++ .../{useTranslation.mdx => useLocalize.mdx} | 30 +++++++++++++------ src/composables/useTranslation.js | 10 ++++++- src/docs/guide/Translation/Translation.mdx | 4 +-- src/mixins/localStorage.mdx | 2 +- src/mixins/localizeMoment.mdx | 2 +- src/pages/submissions/submissionsPageStore.js | 4 +-- src/utils/i18n.js | 18 +++++++++++ 10 files changed, 73 insertions(+), 20 deletions(-) create mode 100644 src/composables/useLocalize.js rename src/composables/{useTranslation.mdx => useLocalize.mdx} (74%) diff --git a/src/components/ActionPanel/ActionPanel.stories.js b/src/components/ActionPanel/ActionPanel.stories.js index 94a2df294..49452b332 100644 --- a/src/components/ActionPanel/ActionPanel.stories.js +++ b/src/components/ActionPanel/ActionPanel.stories.js @@ -1,6 +1,6 @@ import ActionPanel from './ActionPanel.vue'; import './ActionPanelStories.less'; -import {useTranslation} from '@/composables/useTranslation'; +import {useLocalize} from '@/composables/useLocalize'; import {useModalStore} from '@/stores/modalStore'; export default { title: 'Components/ActionPanel', @@ -11,7 +11,7 @@ export const Default = { render: (args) => ({ components: {ActionPanel}, setup() { - const {t} = useTranslation(); + const {t} = useLocalize(); const modalStore = useModalStore(); function openDeleteDialog() { diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue index 7d5f96589..be3bf45a3 100644 --- a/src/components/Modal/SideModalBody.vue +++ b/src/components/Modal/SideModalBody.vue @@ -67,10 +67,10 @@ import {DialogPanel, DialogTitle, DialogDescription} from '@headlessui/vue'; import Icon from '@/components/Icon/Icon.vue'; import PkpDialog from '@/components/Modal/Dialog.vue'; -import {useTranslation} from '@/composables/useTranslation'; +import {useLocalize} from '@/composables/useLocalize'; import {useModalStore} from '@/stores/modalStore'; -const {t} = useTranslation(); +const {t} = useLocalize(); const modalStore = useModalStore(); diff --git a/src/composables/useLocalize.js b/src/composables/useLocalize.js new file mode 100644 index 000000000..b5c355fa9 --- /dev/null +++ b/src/composables/useLocalize.js @@ -0,0 +1,15 @@ +import { + t, + localize, + localizeSubmission, + getMomentLocale, +} from '@/utils/i18n.js'; +/** Check detailed documentation in @/utils/i18n.js */ +export function useLocalize() { + return { + t, + localize, + localizeSubmission, + getMomentLocale, + }; +} diff --git a/src/composables/useTranslation.mdx b/src/composables/useLocalize.mdx similarity index 74% rename from src/composables/useTranslation.mdx rename to src/composables/useLocalize.mdx index b2909b307..5c428a60a 100644 --- a/src/composables/useTranslation.mdx +++ b/src/composables/useLocalize.mdx @@ -1,8 +1,8 @@ import {Meta} from '@storybook/blocks'; - + -# useTranslation +# useLocalize ## t - translation @@ -19,9 +19,9 @@ Get translation from the 'po' files, based on currently selected language. ``` @@ -73,7 +73,7 @@ When working with submissions, a component should use the localizeSubmission mix ```html ``` -``` +## getMomentLocale + +When using moment, you should always use this method to localize the date. +```html + ``` diff --git a/src/composables/useTranslation.js b/src/composables/useTranslation.js index f0e9dd770..4345325ba 100644 --- a/src/composables/useTranslation.js +++ b/src/composables/useTranslation.js @@ -1,9 +1,17 @@ -import {t, localize} from '@/utils/i18n.js'; +// TODO: Its renamed to useLocalize, remove this once code base is migrated to useLocalize +import { + t, + localize, + localizeSubmission, + getMomentLocale, +} from '@/utils/i18n.js'; /** Check detailed documentation in @/utils/i18n.js */ export function useTranslation() { return { t, localize, + localizeSubmission, + getMomentLocale, }; } diff --git a/src/docs/guide/Translation/Translation.mdx b/src/docs/guide/Translation/Translation.mdx index 8bad3f5dc..b89679a90 100644 --- a/src/docs/guide/Translation/Translation.mdx +++ b/src/docs/guide/Translation/Translation.mdx @@ -6,7 +6,7 @@ import {Meta} from '@storybook/blocks'; ## Usage -Check [useTranslation](../?path=/docs/composables-usetranslation--docs) composable for example, how to display translated string. +Check [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for example, how to display translated string. ## Development workflow @@ -38,7 +38,7 @@ When page is being loaded, translations are fetched separately from the `/index. ## Usage -Check [useTranslation](../?path=/docs/composables-usetranslation--docs) composable for example. +Check [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for example. Multilingual data is usually provided as a JSON object. Each key holds the locale code. The following response shows the name property of a journal in English and Canadian French. diff --git a/src/mixins/localStorage.mdx b/src/mixins/localStorage.mdx index 0320db8f4..b5f5502f6 100644 --- a/src/mixins/localStorage.mdx +++ b/src/mixins/localStorage.mdx @@ -4,7 +4,7 @@ import {Meta} from '@storybook/blocks'; # localStorage -**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for autosave its yet to be introduced when needed.** +**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for localStorage its yet to be introduced when needed.** This mixin provides helper functions to read and write to the browser's [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Check whether the local storage is enabled in the browser before you read or write to it. diff --git a/src/mixins/localizeMoment.mdx b/src/mixins/localizeMoment.mdx index 643e06361..5c4aaf72b 100644 --- a/src/mixins/localizeMoment.mdx +++ b/src/mixins/localizeMoment.mdx @@ -2,7 +2,7 @@ import {Meta} from '@storybook/blocks'; -**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for autosave its yet to be introduced when needed.** +**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables. Use [useLocalize](../?path=/docs/composables-useLocalize--docs#getmomentlocale) composable, which provides equivalent function.** This mixin provides a single helper function to map PKP's application locale codes to those used in [moment.js](https://momentjs.com/). When using moment, you should always use this method to localize the date. diff --git a/src/pages/submissions/submissionsPageStore.js b/src/pages/submissions/submissionsPageStore.js index f25476849..e75944f16 100644 --- a/src/pages/submissions/submissionsPageStore.js +++ b/src/pages/submissions/submissionsPageStore.js @@ -2,7 +2,7 @@ import {computed, ref, watch} from 'vue'; import {useFetchPaginated} from '@/composables/useFetchPaginated'; import {useFiltersForm} from '@/composables/useFiltersForm'; import {useSorting} from '@/composables/useSorting'; -import {useTranslation} from '@/composables/useTranslation'; +import {useLocalize} from '@/composables/useLocalize'; import {useAnnouncer} from '@/composables/useAnnouncer'; import {useUrlSearchParams} from '@vueuse/core'; import {defineComponentStore} from '@/utils/defineComponentStore'; @@ -14,7 +14,7 @@ export const useSubmissionsPageStore = defineComponentStore( * Translation */ - const {t} = useTranslation(); + const {t} = useLocalize(); /** Announcer */ diff --git a/src/utils/i18n.js b/src/utils/i18n.js index 4b22cfcd7..0a9ae5dc2 100644 --- a/src/utils/i18n.js +++ b/src/utils/i18n.js @@ -163,3 +163,21 @@ export function localizeSubmission(localizedString, submissionLocale) { return ''; } + +/** + * Get the Moment.js locale for a PKP locale + * + * This only maps the locales that need to be translated. + * Most PKP locales work fine in Moment.js. + * + * @param {String} locale The PKP locale, eg - `sr_RS@cyrillic` + */ +export function getMomentLocale(locale) { + const map = { + 'sr_RS@latin': 'sr', + 'sr_RS@cyrillic': 'sr-cyrl', + 'uz_UZ@latin': 'uz-latn', + }; + + return map[locale] ?? locale; +}