pkp/pkp-lib#9453 rename useTranslation to useLocalize and add getMome…

…ntLocale and localizeSubmission to useLocalize

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() {

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();
 

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,
+	};
+}

src/composables/useTranslation.mdx → src/composables/useLocalize.mdx

@@ -1,8 +1,8 @@
 import {Meta} from '@storybook/blocks';
 
-<Meta title="Composables/useTranslation" />
+<Meta title="Composables/useLocalize" />
 
-# useTranslation
+# useLocalize
 
 ## t - translation
 
@@ -19,9 +19,9 @@ Get translation from the 'po' files, based on currently selected language.
 
 <script setup>
 	import {computed} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
-	const {t} = useTranslation();
+	const {t} = useLocalize();
 
 	   const start = ref(5);
 	   const end = ref(15);
@@ -53,7 +53,7 @@ This method mimics the DataObject::getLocalizedData() method from the PHP backen
 
 <script setup>
 	import {defineProps} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
 	defineProps({
 		publication: {
@@ -62,7 +62,7 @@ This method mimics the DataObject::getLocalizedData() method from the PHP backen
 		},
 	});
 
-	const {localize} = useTranslation();
+	const {localize} = useLocalize();
 </script>
 ```
 
@@ -73,7 +73,7 @@ When working with submissions, a component should use the localizeSubmission mix
 ```html
 <script setup>
 	import {defineProps, computed} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
 	const props = defineProps({
 		submission: {
@@ -86,14 +86,26 @@ When working with submissions, a component should use the localizeSubmission mix
 		},
 	});
 
-	const {localizeSubmission} = useTranslation();
+	const {localizeSubmission} = useLocalize();
 
 	const title = computed(() =>
 		localizeSubmission(props.publication.title, props.submission.locale),
 	);
 </script>
 ```
 
-```
+## getMomentLocale
+
+When using moment, you should always use this method to localize the date.
 
+```html
+<script setup>
+	import {useLocalize} from '@/composables/useLocalize';
+
+	const {getMomentLocale} = useLocalize();
+
+	const timeSince = moment(timestamp)
+		.locale(getMomentLocale($.pkp.app.currentLocale))
+		.fromNow();
+</script>
 ```

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,
 	};
 }

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.
 

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.
 

src/mixins/localizeMoment.mdx

@@ -2,7 +2,7 @@ import {Meta} from '@storybook/blocks';
 
 <Meta title="Mixins/localizeMoment" />
 
-**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.
 

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 */
 

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;
+}