pkp/pkp-lib#9733 Move from moment to luxon, connect with date formats… (#553)

* pkp/pkp-lib#9733 Move from moment to luxon, connect with date formats configured for journal

* pkp/pkp-lib#9733 Clean up

* pkp/pkp-lib#9733 add jsdocs

* pkp/pkp-lib#9733 Typo

* pkp/pkp-lib#9733 Add luxon, and update pkp.context for storybook

* pkp/pkp-lib#9733 Review & Improve the conversion function

Author: jardakotesovec

package-lock.json

@@ -28,6 +28,7 @@
     "floating-vue": "^2.0.0",
     "highlight.js": "^11.11.1",
     "html-entities": "^1.4.0",
+    "luxon": "^3.5.0",
     "marked": "^4.3.0",
     "moment": "^2.30.1",
     "ofetch": "^1.4.1",

package.json

@@ -27,6 +27,14 @@ window.pkp = {
 	context: {
 		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
 		pageBaseUrl: 'https://mock/index.php/publicknowledge/',
+		currentLocale: 'en',
+		primaryLocale: 'en',
+		timeZone: 'UTC',
+		dateFormatShort: 'm/d/Y',
+		dateFormatLong: 'F j, Y',
+		datetimeFormatShort: 'm/d/Y h:i A',
+		datetimeFormatLong: 'F j, Y - h:i A',
+		timeFormat: 'h:i A',
 	},
 	/**
 	 * Dummy constants required by components
@@ -898,10 +906,10 @@ window.pkp = {
 			"Once the user is enabled, they will regain access to OJS, and you'll be able to invite them to roles as needed.",
 		'grid.user.grid.user.disableReasonDescription':
 			"Please note that once a user is disabled, you won't be able to add them to any roles until they are enabled again.",
-		'user.url':'Homepage URL',
-		'user.workingLanguages':'Working Languages',
-		'user.bioStatement':'Bio Statement',
-		'common.viewMoreDetails':'View more details',
+		'user.url': 'Homepage URL',
+		'user.workingLanguages': 'Working Languages',
+		'user.bioStatement': 'Bio Statement',
+		'common.viewMoreDetails': 'View more details',
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

public/globals.js

@@ -10,10 +10,9 @@ import SubmissionFilesListPanel from '../ListPanel/submissionFiles/SubmissionFil
 import ajaxError from '@/mixins/ajaxError';
 import autosave from '@/mixins/autosave';
 import dialog from '@/mixins/dialog';
-import localizeMoment from '@/mixins/localizeMoment';
 import localizeSubmission from '@/mixins/localizeSubmission';
 import localStorage from '@/mixins/localStorage';
-import moment from 'moment';
+import {useDate} from '@/composables/useDate';
 import {useModal} from '@/composables/useModal';
 
 export default {
@@ -26,14 +25,7 @@ export default {
 		SubmissionFilesListPanel,
 	},
 	extends: Page,
-	mixins: [
-		ajaxError,
-		autosave,
-		dialog,
-		localizeMoment,
-		localizeSubmission,
-		localStorage,
-	],
+	mixins: [ajaxError, autosave, dialog, localizeSubmission, localStorage],
 	data() {
 		return {
 			/** A unique string. See autosave mixin below. */
@@ -588,11 +580,11 @@ export default {
 				this.lastAutosavedMessage = '';
 				return;
 			}
+
+			const {relativeStringTimeFromNow} = useDate();
 			this.lastAutosavedMessage = this.i18nLastAutosaved.replace(
 				'{$when}',
-				moment(this.lastSavedTimestamp)
-					.locale(this.getMomentLocale($.pkp.app.currentLocale))
-					.fromNow(),
+				relativeStringTimeFromNow(this.lastSavedTimestamp),
 			);
 		},
 
@@ -799,7 +791,7 @@ export default {
 		/**
 		 * Cancel a submission.
 		 */
-		cancelSubmission(){
+		cancelSubmission() {
 			this.openDialog({
 				name: 'SubmissionCancel',
 				title: this.t('submission.wizard.submissionCancel'),
@@ -840,7 +832,7 @@ export default {
 				],
 				modalStyle: 'negative',
 			});
-		}
+		},
 	},
 };
 </script>

src/components/Container/SubmissionWizardPage.vue

@@ -1,12 +1,11 @@
 <script>
 import PkpForm from '../Form.vue';
 import moment from 'moment';
-import localizeMoment from '@/mixins/localizeMoment.js';
+import {getLuxonLocale} from '@/utils/dateUtils';
 
 export default {
 	name: 'DateTimeForm',
 	extends: PkpForm,
-	mixins: [localizeMoment],
 	data() {
 		return {
 			// holds initial value of the field that emitted set event
@@ -48,7 +47,7 @@ export default {
 			let dateTime = moment();
 			this.fields.forEach((field) => {
 				this.availableLocales.forEach((locale) => {
-					dateTime.locale(this.getMomentLocale(locale.key));
+					dateTime.locale(getLuxonLocale(locale.key));
 					field.options[locale.key].forEach((option) => {
 						const formatString = this.convertDateFormat(option.label);
 						if (formatString) {
@@ -198,8 +197,8 @@ export default {
 						name === 'dateFormatLong'
 							? this.fieldBeforeSetEvent.value + ' - ' + longDateTime.value.time
 							: longDateTime.value.date +
-							  ' - ' +
-							  this.fieldBeforeSetEvent.value;
+								' - ' +
+								this.fieldBeforeSetEvent.value;
 
 					if (suggestedOldValue === field.value[localeKey]) {
 						field.value[localeKey] =

src/components/Form/context/DateTimeForm.vue

@@ -1,37 +1,17 @@
-import moment from 'moment';
-
-function convertUTCStringDateToDate(stringDate) {
-	return new Date(
-		stringDate.includes(' ')
-			? stringDate.replace(' ', 'T') + 'Z' // "2025-02-07 05:37:07" -> "2025-02-07T05:37:07Z"
-			: stringDate + 'T00:00:00Z', // "2025-02-07" -> "2025-02-07T00:00:00Z"
-	);
-}
+import {
+	formatShortDate,
+	formatShortDateTime,
+	calculateDaysBetweenDates,
+	getDateCurrentLocale,
+	relativeStringTimeFromNow,
+} from '@/utils/dateUtils';
 
 export function useDate() {
-	function calculateDaysBetweenDates(startDate, endDate) {
-		const oneDay = 1000 * 60 * 60 * 24; // milliseconds in one day
-		const start =
-			startDate instanceof Date
-				? startDate
-				: convertUTCStringDateToDate(startDate);
-
-		const end =
-			endDate instanceof Date ? endDate : convertUTCStringDateToDate(endDate);
-
-		start.setUTCHours(0, 0, 0, 0);
-		end.setUTCHours(0, 0, 0, 0);
-		const difference = end - start; // difference in milliseconds
-		return Math.round(difference / oneDay);
-	}
-
-	function formatShortDate(dateString) {
-		return moment(dateString).format('DD-MM-YYYY');
-	}
-
-	function formatDateAndTime(dateString) {
-		return moment(dateString).format('YYYY-MM-DD hh:mm A');
-	}
-
-	return {calculateDaysBetweenDates, formatShortDate, formatDateAndTime};
+	return {
+		calculateDaysBetweenDates,
+		formatShortDate,
+		formatShortDateTime,
+		getDateCurrentLocale,
+		relativeStringTimeFromNow,
+	};
 }

src/composables/useDate.js

@@ -1,5 +1,10 @@
 import {describe, test, expect} from 'vitest';
 import {useDate} from './useDate';
+global.pkp = {
+	context: {
+		timeZone: 'UTC',
+	},
+};
 
 describe('calculateDaysFromNow', () => {
 	const {calculateDaysBetweenDates} = useDate();
@@ -18,17 +23,13 @@ describe('calculateDaysFromNow', () => {
 		).toBe(1);
 
 		expect(
-			calculateDaysBetweenDates('2025-02-19 23:10:27', '2025-02-20 11:00:00'),
+			calculateDaysBetweenDates('2025-02-19 23:10:27', '2025-02-20 23:12:00'),
 		).toBe(1);
 	});
 
 	test('yesterday should always result in -1 day', () => {
 		expect(
-			calculateDaysBetweenDates('2025-02-21 08:10:27', '2025-02-20 11:00:00'),
-		).toBe(-1);
-
-		expect(
-			calculateDaysBetweenDates('2025-02-21 23:10:27', '2025-02-20 11:00:00'),
+			calculateDaysBetweenDates('2025-02-21 08:10:27', '2025-02-20 07:00:00'),
 		).toBe(-1);
 	});
 });

src/composables/useDate.test.js

@@ -1,9 +1,4 @@
-import {
-	t,
-	localize,
-	localizeSubmission,
-	getMomentLocale,
-} from '@/utils/i18n.js';
+import {t, localize, localizeSubmission} from '@/utils/i18n.js';
 
 function tk(translationKey) {
 	return translationKey;
@@ -15,6 +10,5 @@ export function useLocalize() {
 		tk,
 		localize,
 		localizeSubmission,
-		getMomentLocale,
 	};
 }

src/composables/useLocalize.js

@@ -118,19 +118,3 @@ When working with submissions, a component should use the localizeSubmission mix
 	);
 </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/useLocalize.mdx

@@ -11,11 +11,9 @@
  * @see https://vuejs.org/v2/guide/mixins.html
  */
 import dialog from './dialog';
-import localizeMoment from './localizeMoment';
 import localStorage from './localStorage';
-import moment from 'moment';
 import {v4 as uuidv4} from 'uuid';
-
+import {useDate} from '@/composables/useDate';
 /**
  * The timer (setInterval) that calls _runAutosaveJobs
  */
@@ -38,7 +36,7 @@ let connectionTimerInterval = 4000;
 let isAutosaveRequestPending = false;
 
 export default {
-	mixins: [dialog, localizeMoment, localStorage],
+	mixins: [dialog, localStorage],
 	data() {
 		return {
 			/**
@@ -130,14 +128,13 @@ export default {
 			}
 
 			this.$nextTick(() => {
+				const {relativeStringTimeFromNow} = useDate();
 				this.openDialog({
 					name: 'loadAutosave',
 					title: this.i18nUnsavedChanges,
 					message: this.i18nUnsavedChangesMessage.replace(
 						'{$when}',
-						moment(storedAutosaves[0].timestamp)
-							.locale(this.getMomentLocale($.pkp.app.currentLocale))
-							.fromNow(),
+						relativeStringTimeFromNow(storedAutosaves[0].timestamp),
 					),
 					actions: [
 						{

src/composables/useTranslation.js

@@ -7,7 +7,7 @@
  *
  * @see https://vuejs.org/v2/guide/mixins.html
  */
-import moment from 'moment';
+import {DateTime} from 'luxon';
 import {replaceLocaleParams, t, localize} from '../utils/i18n';
 export default {
 	methods: {
@@ -35,7 +35,7 @@ export default {
 		 * @param {String} dateString
 		 */
 		getBrowserSafeDate(dateString) {
-			return moment.utc(dateString).toDate();
+			return DateTime.fromISO(dateString, {zone: 'utc'}).toJSDate();
 		},
 
 		/**