feat(pipes): added formatDuration pipes

Added two new pipes: `dfnsFormatDuration` and `dfnsFormatDurationPure`

BREAKING CHANGE: This version requires date-fns >= v2.16.0

#351

package.json

@@ -34,7 +34,7 @@
     "build:app": "ng build --namedChunks=true --sourceMap=true --prod",
     "analyze": "source-map-explorer dist/ngx-date-fns-app/main-es5.*.js",
     "prettier": "prettier --write src/app/**/*.ts && prettier --write projects/ngx-date-fns/src/lib/**/*.ts",
-    "precommit": "npm run lint && npm run test -- --watch=false",
+    "precommit": "npm run lint && npm run test",
     "e2e": "ng e2e",
     "cm": "git-cz",
     "cm-retry": "git-cz --retry",
@@ -60,7 +60,7 @@
     "@angular/platform-browser": "~11.2.1",
     "@angular/platform-browser-dynamic": "~11.2.1",
     "@angular/router": "~11.2.1",
-    "date-fns": "^2.0.1",
+    "date-fns": "^2.19.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

projects/ngx-date-fns/src/index.ts

@@ -130,6 +130,8 @@ export * from './lib/start-of-week-year.pure.pipe';
 export * from './lib/last-day-of-week.pure.pipe';
 export * from './lib/parse.pure.pipe';
 export * from './lib/parse-iso.pipe';
+export * from './lib/format-duration.pure.pipe';
+export * from './lib/format-duration.pipe';
 
 // Other stuff
 export * from './lib/types';

projects/ngx-date-fns/src/lib/date-fns.module.ts

@@ -133,6 +133,8 @@ import { StartOfWeekYearPurePipeModule } from './start-of-week-year.pure.pipe';
 import { LastDayOfWeekPurePipeModule } from './last-day-of-week.pure.pipe';
 import { ParsePurePipeModule } from './parse.pure.pipe';
 import { ParseIsoPipeModule } from './parse-iso.pipe';
+import { FormatDurationPipeModule } from './format-duration.pipe';
+import { FormatDurationPurePipeModule } from './format-duration.pure.pipe';
 
 const PIPES = [
   AddBusinessDaysPipeModule,
@@ -265,7 +267,9 @@ const PIPES = [
   StartOfWeekYearPurePipeModule,
   LastDayOfWeekPurePipeModule,
   ParsePurePipeModule,
-  ParseIsoPipeModule
+  ParseIsoPipeModule,
+  FormatDurationPipeModule,
+  FormatDurationPurePipeModule
 ];
 
 @NgModule({

projects/ngx-date-fns/src/lib/format-duration.pipe.spec.ts

@@ -0,0 +1,162 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DateFnsConfigurationService } from './date-fns-configuration.service';
+import { FormatDurationPipe } from './format-duration.pipe';
+import { es } from 'date-fns/locale';
+import { FormatDurationPurePipe } from './format-duration.pure.pipe';
+
+describe('FormatDurationPipe', () => {
+  let pipe: FormatDurationPipe;
+
+  const createPipe = () => {
+    const MyChangeDetector = class extends ChangeDetectorRef {
+      markForCheck(): void {
+        throw new Error('Method not implemented.');
+      }
+      detach(): void {
+        throw new Error('Method not implemented.');
+      }
+      detectChanges(): void {
+        throw new Error('Method not implemented.');
+      }
+      checkNoChanges(): void {
+        throw new Error('Method not implemented.');
+      }
+      reattach(): void {
+        throw new Error('Method not implemented.');
+      }
+    };
+    return new FormatDurationPipe(
+      new DateFnsConfigurationService(),
+      new MyChangeDetector()
+    );
+  };
+
+  beforeEach(() => {
+    pipe = createPipe();
+  });
+
+  it('should format full durations', () => {
+    expect(
+      pipe.transform({
+        years: 2,
+        months: 9,
+        weeks: 1,
+        days: 7,
+        hours: 5,
+        minutes: 9,
+        seconds: 30
+      })
+    ).toBe('2 years 9 months 1 week 7 days 5 hours 9 minutes 30 seconds');
+  });
+
+  it('should format partial durations', () => {
+    expect(pipe.transform({ months: 9, days: 2 })).toBe('9 months 2 days');
+  });
+
+  it('should customize the format', () => {
+    expect(
+      pipe.transform(
+        {
+          years: 2,
+          months: 9,
+          weeks: 1,
+          days: 7,
+          hours: 5,
+          minutes: 9,
+          seconds: 30
+        },
+        { format: ['months', 'weeks'] }
+      )
+    ).toBe('9 months 1 week');
+  });
+
+  it('should customize the zeroes presence', () => {
+    expect(pipe.transform({ years: 0, months: 9 }, { zero: true })).toBe(
+      '0 years 9 months'
+    );
+  });
+
+  it('should customize the delimiter', () => {
+    expect(
+      pipe.transform({ years: 2, months: 9, weeks: 3 }, { delimiter: ', ' })
+    ).toBe('2 years, 9 months, 3 weeks');
+  });
+
+  it('should customize the locale', () => {
+    expect(
+      pipe.transform({ years: 2, months: 9, weeks: 3 }, { locale: es })
+    ).toBe('2 años 9 meses 3 semanas');
+  });
+});
+
+describe('FormatDurationPipe Pure', () => {
+  const createPipe = () =>
+    new FormatDurationPurePipe(new DateFnsConfigurationService());
+
+  it('should format full durations', () => {
+    expect(
+      createPipe().transform({
+        years: 2,
+        months: 9,
+        weeks: 1,
+        days: 7,
+        hours: 5,
+        minutes: 9,
+        seconds: 30
+      })
+    ).toBe('2 years 9 months 1 week 7 days 5 hours 9 minutes 30 seconds');
+  });
+
+  it('should format partial durations', () => {
+    expect(createPipe().transform({ months: 9, days: 2 })).toBe(
+      '9 months 2 days'
+    );
+  });
+
+  it('should customize the format', () => {
+    expect(
+      createPipe().transform(
+        {
+          years: 2,
+          months: 9,
+          weeks: 1,
+          days: 7,
+          hours: 5,
+          minutes: 9,
+          seconds: 30
+        },
+        { format: ['months', 'weeks'] }
+      )
+    ).toBe('9 months 1 week');
+  });
+
+  it('should customize the zeroes presence', () => {
+    expect(
+      createPipe().transform({ years: 0, months: 9 }, { zero: true })
+    ).toBe('0 years 9 months');
+  });
+
+  it('should customize the delimiter', () => {
+    expect(
+      createPipe().transform(
+        { years: 2, months: 9, weeks: 3 },
+        { delimiter: ', ' }
+      )
+    ).toBe('2 years, 9 months, 3 weeks');
+  });
+
+  it('should customize the locale', () => {
+    expect(
+      createPipe().transform({ years: 2, months: 9, weeks: 3 }, { locale: es })
+    ).toBe('2 años 9 meses 3 semanas');
+  });
+
+  it('should customize the locale provided via config', () => {
+    const conf = new DateFnsConfigurationService();
+    conf.setLocale(es);
+    const pipe = new FormatDurationPurePipe(conf);
+    expect(pipe.transform({ years: 2, months: 9, weeks: 3 })).toBe(
+      '2 años 9 meses 3 semanas'
+    );
+  });
+});

projects/ngx-date-fns/src/lib/format-duration.pipe.ts

@@ -0,0 +1,50 @@
+import {
+  Pipe,
+  PipeTransform,
+  ChangeDetectorRef,
+  OnDestroy,
+  NgModule
+} from '@angular/core';
+import {
+  DateFnsConfigurationService,
+  calculateLocale
+} from './date-fns-configuration.service';
+import { Subscription } from 'rxjs';
+import { Locale } from 'date-fns';
+import formatDuration from 'date-fns/formatDuration';
+
+@Pipe({ name: 'dfnsFormatDuration', pure: false })
+export class FormatDurationPipe implements PipeTransform, OnDestroy {
+  private localeChanged$: Subscription;
+
+  constructor(
+    public config: DateFnsConfigurationService,
+    public cd: ChangeDetectorRef
+  ) {
+    this.localeChanged$ = this.config.localeChanged.subscribe(_ =>
+      this.cd.markForCheck()
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.localeChanged$.unsubscribe();
+  }
+
+  transform(
+    duration: Duration,
+    options?: {
+      format?: string[];
+      zero?: boolean;
+      delimiter?: string;
+      locale?: Locale;
+    }
+  ): string {
+    return formatDuration(duration, calculateLocale(options, this.config));
+  }
+}
+
+@NgModule({
+  declarations: [FormatDurationPipe],
+  exports: [FormatDurationPipe]
+})
+export class FormatDurationPipeModule {}

projects/ngx-date-fns/src/lib/format-duration.pure.pipe.ts

@@ -0,0 +1,30 @@
+import { NgModule, Pipe, PipeTransform } from '@angular/core';
+import { Locale } from 'date-fns';
+import formatDuration from 'date-fns/formatDuration';
+import {
+  calculateLocale,
+  DateFnsConfigurationService
+} from './date-fns-configuration.service';
+
+@Pipe({ name: 'dfnsFormatDurationPure' })
+export class FormatDurationPurePipe implements PipeTransform {
+  constructor(public config: DateFnsConfigurationService) {}
+
+  transform(
+    duration: Duration,
+    options?: {
+      format?: string[];
+      zero?: boolean;
+      delimiter?: string;
+      locale?: Locale;
+    }
+  ): string {
+    return formatDuration(duration, calculateLocale(options, this.config));
+  }
+}
+
+@NgModule({
+  declarations: [FormatDurationPurePipe],
+  exports: [FormatDurationPurePipe]
+})
+export class FormatDurationPurePipeModule {}