[WIP] Migrate from moment to Luxon

Author: myabc

frontend/src/app/core/config/configuration.service.ts

@@ -27,7 +27,7 @@
 //++
 
 import { Injectable } from '@angular/core';
-import moment from 'moment';
+import { Settings } from 'luxon';
 
 import { ConfigurationResource } from 'core-app/features/hal/resources/configuration-resource';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
@@ -139,7 +139,7 @@ export class ConfigurationService {
     if (this.startOfWeekPresent()) {
       return this.systemPreference('startOfWeek');
     }
-    return moment.localeData(I18n.locale).firstDayOfWeek();
+    return Settings.defaultWeekSettings?.firstDay || 0;
   }
 
   public get hostName():string {

frontend/src/app/core/datetime/timezone.service.spec.ts

@@ -68,13 +68,13 @@ describe('TimezoneService', () => {
     describe('#parseDatetime', () => {
       it('is UTC', () => {
         const time = timezoneService.parseDatetime(TIME);
-        expect(time.utcOffset()).toEqual(0);
-        expect(time.format('HH:mm')).toEqual('09:30');
+        expect(time.offset).toEqual(0);
+        expect(time.toFormat('HH:mm')).toEqual('09:30');
       });
 
       it('has no time information', () => {
         const time = timezoneService.parseDate(DATE);
-        expect(time.format('HH:mm')).toEqual('00:00');
+        expect(time.toFormat('HH:mm')).toEqual('00:00');
       });
     });
   });
@@ -87,7 +87,7 @@ describe('TimezoneService', () => {
     describe('Non-UTC timezone', () => {
       it('is in the given timezone', () => {
         const date = timezoneService.parseDatetime(TIME);
-        expect(date.format('HH:mm')).toEqual('01:30');
+        expect(date.toFormat('HH:mm')).toEqual('01:30');
       });
 
       it('has local time zone', () => {

frontend/src/app/core/datetime/timezone.service.ts

@@ -29,8 +29,9 @@
 import { Injectable } from '@angular/core';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import moment, { Moment } from 'moment-timezone';
+import { DateTime, Duration, DurationUnit, Settings } from 'luxon';
 import { outputChronicDuration } from '../../shared/helpers/chronic_duration';
+import { toDateTime } from 'core-app/shared/helpers/date-time-helpers';
 
 @Injectable({ providedIn: 'root' })
 export class TimezoneService {
@@ -43,21 +44,19 @@ export class TimezoneService {
    * Returns the user's configured timezone or guesses it through moment
    */
   public userTimezone():string {
-    return this.configurationService.isTimezoneSet() ? this.configurationService.timezone() : moment.tz.guess();
+    return this.configurationService.isTimezoneSet() ? this.configurationService.timezone() : Settings.defaultZone.name;
   }
 
   /**
    * Takes a utc date time string and turns it into
    * a local date time moment object.
    */
-  public parseDatetime(datetime:string, format?:string):Moment {
-    return moment
-      .utc(datetime, format)
-      .tz(this.userTimezone());
+  public parseDatetime(datetime:string):DateTime {
+    return DateTime.fromISO(datetime).setZone(this.userTimezone());
   }
 
-  public parseDate(date:Date|string, format?:string):Moment {
-    return moment(date, format);
+  public parseDate(date:DateTime|Date|string):DateTime {
+    return toDateTime(date);
   }
 
   /**
@@ -66,19 +65,18 @@ export class TimezoneService {
    * This will effectfully transform the [server] provided datetime object to the user's configured local timezone.
    *
    * @param {String} datetime in 'YYYY-MM-DDTHH:mm:ssZ' format
-   * @returns {Moment}
+   * @returns {DateTime}
    */
-  public parseISODatetime(datetime:string):Moment {
-    return this.parseDatetime(datetime, 'YYYY-MM-DDTHH:mm:ssZ');
+  public parseISODatetime(datetime:string):DateTime {
+    return this.parseDatetime(datetime);
   }
 
-  public parseISODate(date:string):Moment {
-    return this.parseDate(date, 'YYYY-MM-DD');
+  public parseISODate(date:string):DateTime {
+    return DateTime.fromISO(date);
   }
 
   public formattedDate(date:string, format = this.getDateFormat()):string {
-    const d = this.parseDate(date);
-    return d.format(format);
+    return DateTime.fromISO(date).toLocaleString(format);
   }
 
   /**
@@ -87,14 +85,14 @@ export class TimezoneService {
    * @param dateString
    */
   public daysFromToday(dateString:string):number {
-    const date = this.parseDate(dateString);
-    const today = moment().startOf('day');
+    const dt = DateTime.fromISO(dateString);
+    const today = DateTime.now().startOf('day');
 
-    return date.diff(today, 'days');
+    return dt.diff(today, 'days').days;
   }
 
-  public formattedTime(datetimeString:string, format?:string):string {
-    return this.parseDatetime(datetimeString).format(format || this.getTimeFormat());
+  public formattedTime(datetimeString:string, format = this.getTimeFormat()):string {
+    return this.parseDatetime(datetimeString).toLocaleString(format);
   }
 
   public formattedDatetime(datetimeString:string):string {
@@ -103,40 +101,40 @@ export class TimezoneService {
   }
 
   public formattedRelativeDateTime(datetimeString:string):string {
-    const d = this.parseDatetime(datetimeString);
-    return d.fromNow();
+    const dt = this.parseDatetime(datetimeString);
+    return dt.toRelative() || '';
   }
 
-  public formattedDatetimeComponents(datetimeString:string):string[] {
-    const d = this.parseDatetime(datetimeString);
+  public formattedDatetimeComponents(datetimeString:string):[string, string] {
+    const dt = this.parseDatetime(datetimeString);
     return [
-      d.format(this.getDateFormat()),
-      d.format(this.getTimeFormat()),
+      dt.toLocaleString(this.getDateFormat()),
+      dt.toLocaleString(this.getTimeFormat()),
     ];
   }
 
   public toSeconds(durationString:string):number {
-    return Number(moment.duration(durationString).asSeconds().toFixed(2));
+    return Number(Duration.fromISO(durationString).seconds.toFixed(2));
   }
 
   public toHours(durationString:string):number {
-    return Number(moment.duration(durationString).asHours().toFixed(2));
+    return Number(Duration.fromISO(durationString).hours.toFixed(2));
   }
 
   public toDays(durationString:string):number {
-    return Number(moment.duration(durationString).asDays().toFixed(2));
+    return Number(Duration.fromISO(durationString).days.toFixed(2));
   }
 
-  public toISODuration(input:string|number, unit:'hours'|'days'):string {
-    return moment.duration(input, unit).toISOString();
+  public toISODuration(input:string|number, unit:DurationUnit):string {
+    return Duration.fromObject({ [unit]: input }).toISO();
   }
 
   public utcDateToLocalDate(date:Date):Date {
     return new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
   }
 
   public utcDateToISODateString(date:Date):string {
-    return moment.utc(date).format('YYYY-MM-DD');
+    return DateTime.fromJSDate(date).toUTC().toISODate() || '';
   }
 
   public utcDatesToISODateStrings(dates:Date[]):string[] {
@@ -170,32 +168,29 @@ export class TimezoneService {
     return outputChronicDuration(seconds, opts) || '0h';
   }
 
-  public formattedISODate(date:any):string {
-    return this.parseDate(date).format('YYYY-MM-DD');
+  public formattedISODate(date:DateTime|Date|string):string {
+    return this.parseDate(date).toISODate() || '';
   }
 
-  public formattedISODateTime(datetime:any):string {
-    return datetime.format();
+  public formattedISODateTime(datetime:DateTime):string {
+    return datetime.toISO() || '';
   }
 
-  public isValidISODate(date:any):boolean {
-    return this.isValid(date, 'YYYY-MM-DD');
+  public isValidISODate(date:string):boolean {
+    return DateTime.fromISO(date).isValid;
   }
 
   public isValidISODateTime(dateTime:string):boolean {
-    return this.isValid(dateTime, 'YYYY-MM-DDTHH:mm:ssZ');
+    return DateTime.fromISO(dateTime).isValid;
   }
 
-  public isValid(date:string, dateFormat:string):boolean {
-    const format = dateFormat || this.getDateFormat();
-    return moment(date, [format], true).isValid();
+  public getDateFormat():Intl.DateTimeFormatOptions {
+    //return this.configurationService.dateFormatPresent() ? this.configurationService.dateFormat() :
+    return DateTime.DATE_SHORT;
   }
 
-  public getDateFormat():string {
-    return this.configurationService.dateFormatPresent() ? this.configurationService.dateFormat() : 'L';
-  }
-
-  public getTimeFormat():string {
-    return this.configurationService.timeFormatPresent() ? this.configurationService.timeFormat() : 'LT';
+  public getTimeFormat():Intl.DateTimeFormatOptions {
+    //return this.configurationService.timeFormatPresent() ? this.configurationService.timeFormat() :
+    return DateTime.TIME_SIMPLE;
   }
 }

frontend/src/app/core/days/weekday.service.ts

@@ -30,7 +30,7 @@ import {
   Injectable,
   Injector,
 } from '@angular/core';
-import moment, { Moment } from 'moment';
+import { DateTime } from 'luxon';
 import {
   take,
   tap,
@@ -57,8 +57,13 @@ export class WeekdayService {
    * @param date The iso day number (1-7) or a date instance
    * @return {boolean} whether the given iso day is working or not
    */
-  public isNonWorkingDay(date:Moment|Date|number):boolean {
-    const isoDayOfWeek = (typeof date === 'number') ? date : moment(date).isoWeekday();
+  public isNonWorkingDay(date:DateTime|Date|number):boolean {
+    const isoDayOfWeek = (typeof date === 'number')
+      ? date
+      : (date instanceof DateTime)
+        ? date.weekday
+        : DateTime.fromJSDate(date).weekday;
+
     return !!(this.weekdays || []).find((wd) => wd.day === isoDayOfWeek && !wd.working);
   }
 

frontend/src/app/core/setup/init-locale.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import moment from 'moment';
+import { Settings } from 'luxon';
 import { I18n } from 'i18n-js';
 
 export function initializeLocale() {
@@ -43,22 +43,7 @@ export function initializeLocale() {
 
   window.I18n = i18n;
 
-  moment.locale(userLocale);
-
-  // Remove Postformatting numbers in dates, this will ensure we are always using
-  // Arabic numbers in dates and durations, regardless of the chosen locale.
-  // Using moment.locale() ensures locale like "zh-CN" falls back to "zh-cn"
-  moment.updateLocale(moment.locale(), { postformat: (string:string) => string });
-
-  if (!Number.isNaN(firstDayOfWeek) && !Number.isNaN(firstWeekOfYear)) {
-    // ensure locale like "zh-CN" falls back to "zh-cn"
-    moment.updateLocale(moment.locale(), {
-      week: {
-        dow: firstDayOfWeek,
-        doy: 7 + firstDayOfWeek - firstWeekOfYear,
-      },
-    });
-  }
+  Settings.defaultLocale = userLocale;
 
   // Override the default pluralization function to allow
   // "other" to be used as a fallback for "one" in languages where one is not set

frontend/src/app/core/setup/init-moment-locales.ts

@@ -44,14 +44,10 @@ import 'jquery-ujs';
 // import 'jquery-ui/ui/widgets/tooltip';
 import 'core-vendor/jquery-ui-1.14.1/jquery-ui';
 
-import moment from 'moment';
-import './init-moment-locales';
-
 import 'jquery.caret';
 // Text highlight for autocompleter
 import 'mark.js/dist/jquery.mark.min';
 
-import 'moment-timezone/builds/moment-timezone-with-data.min';
 // eslint-disable-next-line import/extensions,import/no-extraneous-dependencies
 import '@openproject/primer-view-components/app/assets/javascripts/primer_view_components.js';
 
@@ -65,5 +61,4 @@ declare global {
 }
 
 window._ = lodash;
-window.moment = moment;
 window.URI = URI;