@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/named-filter/testing/named-filter.testing.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { NamedFilter, NamedFilterFilter } from '../named-filter.model';
+import { AbstractNamedFilterService, NamedFilterLoadOptions, NamedFilterWatchOptions } from '../named-filter.service';
+import {
+  AccountService,
+  EntitiesServiceLoadOptions,
+  EntitySaveOptions,
+  GraphqlService,
+  LoadResult,
+  PlatformService,
+  isNil,
+  isNotNilString,
+} from 'public_api';
+import { SortDirection } from '@angular/material/sort';
+
+@Injectable()
+export class DummyNamedFilterService extends AbstractNamedFilterService<
+  NamedFilter,
+  NamedFilterFilter,
+  NamedFilterWatchOptions,
+  NamedFilterLoadOptions
+> {
+  private _dummyData: {
+    id: number;
+    name: string;
+    entityName: string;
+    content: string;
+    recorderPersonId: number;
+    recorderDepartmentId: number;
+  }[] = [
+    {
+      id: 1,
+      name: 'Filter B',
+      entityName: 'DummyEntity',
+      content: '{"filterA": "","filterB": "B value", "filterC": ""}',
+      recorderPersonId: 1,
+      recorderDepartmentId: 1,
+    },
+  ];
+
+  constructor(
+    protected graphql: GraphqlService,
+    protected platform: PlatformService,
+    protected accountService: AccountService
+  ) {
+    super(graphql, platform, accountService, NamedFilter, NamedFilterFilter, { queries: null, mutations: null });
+  }
+
+  async load(id: number, opts?: EntitiesServiceLoadOptions): Promise<NamedFilter<NamedFilter<any>>> {
+    return NamedFilter.fromObject(this._dummyData.find((data) => data.id === id));
+  }
+
+  async loadAll(
+    offset: number,
+    size: number,
+    sortBy?: string,
+    sortDirection?: SortDirection,
+    filter?: Partial<NamedFilterFilter<NamedFilterFilter<any, any>, NamedFilter<any>>>,
+    opts?: EntitiesServiceLoadOptions & { debug?: boolean }
+  ): Promise<LoadResult<NamedFilter<NamedFilter<any>>>> {
+    const data = this._dummyData.map((data) => NamedFilter.fromObject(data));
+    const result = isNotNilString(filter?.searchText) ? data.filter((data) => data.name.startsWith(filter.searchText)) : data;
+    return {
+      data: result,
+      total: result.length,
+    };
+  }
+
+  async save(entity: NamedFilter<NamedFilter<any>>, opts?: EntitySaveOptions): Promise<NamedFilter<NamedFilter<any>>> {
+    if (isNil(entity?.id)) entity.id = this._computeNextId();
+    this._dummyData = [...this._dummyData.filter((data) => data.id !== entity.id), entity].sort((a, b) => a.id - b.id);
+    return entity;
+  }
+
+  async delete(entity: NamedFilter<NamedFilter<any>>, opts?: any): Promise<any> {
+    this._dummyData = this._dummyData.filter((data) => data.id !== entity.id);
+  }
+
+  private _computeNextId(): number {
+    const ids = this._dummyData.map((data) => data.id);
+    return Math.max(...ids) + 1;
+  }
+}

package/src/app/shared/observables.ts

@@ -0,0 +1,139 @@
+import { Observable, timer } from 'rxjs';
+import { filter, first, map, switchMap, takeUntil } from 'rxjs/operators';
+import { isNotNil } from './functions';
+import { Predicate } from '@angular/core';
+
+export declare interface FirstOptions {
+  timeout?: number;
+  stop?: Observable<any>;
+  stopError?: boolean | string | Error;
+}
+
+export declare interface WaitForOptions extends FirstOptions {
+  dueTime?: number;
+  checkPeriod?: number;
+}
+
+export function filterNotNil<T = any>(obs: Observable<T>): Observable<T> {
+  return obs.pipe(filter(isNotNil));
+}
+
+export function filterTrue(obs: Observable<boolean>): Observable<boolean> {
+  return obs.pipe(filter((v) => v === true));
+}
+export function filterFalse(obs: Observable<boolean>): Observable<boolean> {
+  return obs.pipe(filter((v) => v === false));
+}
+
+function decorateWithTakeUntil<T = any>(obs: Observable<T>, opts?: FirstOptions): Observable<T> {
+  // Set take until notifier
+  let takeUntil$: Observable<any> = opts?.stop || (opts?.timeout && timer(opts.timeout));
+
+  if (!takeUntil$) return obs; // Skip
+
+  // When stop, throw an error (useful when used with a toPromise())
+  if (opts.stopError) {
+    let error: Error;
+    if (opts.stopError === true) {
+      error = new Error(opts.timeout ? `Timeout ${opts.timeout}ms` : `stop`);
+    } else if (typeof opts.stopError === 'string') {
+      error = new Error(opts.stopError);
+    } else {
+      error = opts.stopError;
+    }
+    takeUntil$ = takeUntil$.pipe(
+      map(() => {
+        throw error;
+      })
+    );
+  }
+
+  return obs.pipe(takeUntil(takeUntil$));
+}
+
+export function firstNotNil<T = any>(obs: Observable<T>, opts?: FirstOptions): Observable<T> {
+  return decorateWithTakeUntil(obs.pipe(first(isNotNil)), opts);
+}
+export function firstTrue<T = void>(obs: Observable<boolean>, opts?: FirstOptions, result?: T): Observable<T> {
+  return decorateWithTakeUntil(
+    obs.pipe(
+      first((v) => v === true),
+      map((_) => result) // Convert to T
+    ),
+    opts
+  );
+}
+export function firstFalse<T = void>(obs: Observable<boolean>, opts?: FirstOptions, result?: T): Observable<T> {
+  return decorateWithTakeUntil(
+    obs.pipe(
+      first((v) => v === false),
+      map((_) => result as T) // Convert to void
+    ),
+    opts
+  );
+}
+export function firstTruePromise(obs: Observable<boolean>, opts?: FirstOptions): Promise<void> {
+  return firstTrue(obs, { stopError: true, ...opts }).toPromise();
+}
+export function firstFalsePromise(obs: Observable<boolean>, opts?: FirstOptions): Promise<void> {
+  return firstFalse(obs, { stopError: true, ...opts }).toPromise();
+}
+export function firstNotNilPromise<T = any>(obs: Observable<T>, opts?: FirstOptions): Promise<T> {
+  return firstNotNil(obs, { stopError: true, ...opts }).toPromise();
+}
+export function chainPromises<T = any>(defers: (() => Promise<any>)[]): Promise<T[]> {
+  return (defers || []).reduce((previous: Promise<any> | null, defer) => {
+    // First job
+    if (!previous) {
+      return (
+        defer()
+          // Init the final result array, with the first result
+          .then((jobRes) => [jobRes])
+      );
+    }
+    // Other jobs
+    return previous.then((finalResult) =>
+      defer()
+        // Add job result to final result array
+        .then((jobRes) => finalResult.concat(jobRes))
+    );
+  }, null);
+}
+
+/**
+ * Wait form a predicate return true. This need to implement AppFormUtils.waitWhilePending(), AppFormUtils.waitIdle()
+ *
+ * @param predicate
+ * @param opts
+ */
+export async function waitFor(predicate: Predicate<void>, opts?: WaitForOptions): Promise<void> {
+  if (predicate()) return Promise.resolve();
+
+  const period = (opts && opts.checkPeriod) || 300;
+  const dueTime = (opts && opts.dueTime) || period;
+  const wait$: Observable<boolean> = timer(dueTime, period).pipe(
+    // For DEBUG :
+    //tap(() => console.debug("Waiting form idle...", form)),
+    filter((_) => predicate()),
+    map((_) => true)
+  );
+
+  await firstNotNilPromise(wait$, opts);
+}
+
+export function waitForTrue(observable: Observable<boolean>, opts?: WaitForOptions): Promise<void> {
+  opts = { stopError: true, ...opts };
+  // dueTime (without timeout)
+  if (opts && opts.dueTime > 0) {
+    observable = timer(opts.dueTime).pipe(switchMap(() => observable));
+  }
+  return firstTrue(observable, opts).toPromise();
+}
+
+export function waitForFalse(observable: Observable<boolean>, opts?: WaitForOptions): Promise<void> {
+  return waitForTrue(
+    // Inverse the logic
+    observable.pipe(map((v) => v === false)),
+    opts
+  );
+}

package/src/app/shared/pipes/arrays.pipe.ts

@@ -0,0 +1,153 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { getPropertyByPath, isNotNil, removeDuplicatesFromArray, splitArrayInChunks } from '../functions';
+
+@Pipe({
+  name: 'isNotEmptyArray',
+})
+export class NotEmptyArrayPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[]): boolean {
+    if (!Array.isArray(val)) return false;
+    return val.length > 0;
+  }
+}
+
+@Pipe({
+  name: 'isEmptyArray',
+})
+export class EmptyArrayPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[]): boolean {
+    if (!Array.isArray(val)) return true;
+    return val.length === 0;
+  }
+}
+
+@Pipe({
+  name: 'isArrayLength',
+})
+export class ArrayLengthPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], args?: { greaterThan?: number; equals?: number; lessThan?: number }): boolean {
+    args = args || {};
+    const size = !Array.isArray(val) ? 0 : val.length;
+    if (isNotNil(args.lessThan)) {
+      return size < args.lessThan;
+    }
+    if (isNotNil(args.greaterThan)) {
+      return size > args.greaterThan;
+    }
+    if (isNotNil(args.equals)) {
+      return size === args.equals;
+    }
+    return false;
+  }
+}
+
+@Pipe({
+  name: 'arrayFirst',
+})
+export class ArrayFirstPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[]): T | null {
+    if (!Array.isArray(val)) return null;
+    return val.length > 0 ? val[0] : null;
+  }
+}
+
+@Pipe({
+  name: 'arrayLast',
+})
+export class ArrayLastPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[]): T | null {
+    if (!Array.isArray(val)) return null;
+    return val.length > 0 ? val[val.length - 1] : null;
+  }
+}
+
+@Pipe({
+  name: 'arrayPluck',
+})
+export class ArrayPluckPipe implements PipeTransform {
+  /**
+   *
+   * @param val
+   * @param opts property to get, or options
+   */
+  transform<T = any>(val: unknown | T[], opts: string | string[] | { property: string | string[]; omitNil?: boolean }): any[] {
+    if (!Array.isArray(val) || !opts) return null;
+    const property = typeof opts === 'string' || Array.isArray(opts) ? (opts as string | string[]) : opts.property;
+    return opts['omitNil'] !== true
+      ? val.map((value) => getPropertyByPath(value, property))
+      : val.map((value) => getPropertyByPath(value, property)).filter(isNotNil);
+  }
+}
+
+@Pipe({
+  name: 'arrayIncludes',
+})
+export class ArrayIncludesPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], searchElement: T, fromIndex?: number): boolean {
+    if (!Array.isArray(val)) return false;
+    return (val && val.includes(searchElement, fromIndex)) || false;
+  }
+}
+
+@Pipe({
+  name: 'arrayFilter',
+})
+export class ArrayFilterPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], filterFn: (T) => boolean): T[] | null {
+    if (!Array.isArray(val)) return null;
+    return val.filter(filterFn);
+  }
+}
+
+@Pipe({
+  name: 'arraySort',
+})
+export class ArraySortPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], sortFn: (a: T, b: T) => number): T[] | null {
+    if (!Array.isArray(val)) return null;
+    return val.sort(sortFn);
+  }
+}
+
+@Pipe({
+  name: 'arrayFindByProperty',
+})
+export class ArrayFindByPropertyPipe implements PipeTransform {
+  transform<T = any>(items: unknown | T[], property: string | Array<string | number>, findValue: any): T | null {
+    if (!Array.isArray(items)) return null;
+
+    return items.find((item) => {
+      return getPropertyByPath(item, property) == findValue;
+    });
+  }
+}
+
+@Pipe({
+  name: 'arrayJoin',
+})
+export class ArrayJoinPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], separator: string): string {
+    if (!Array.isArray(val)) return '';
+    return val.join(separator) || '';
+  }
+}
+
+@Pipe({
+  name: 'arrayDistinct',
+})
+export class ArrayDistinctPipe implements PipeTransform {
+  transform<T = any>(val: unknown | T[], opts?: string | { property: string; omitNil?: boolean }): any[] {
+    if (!Array.isArray(val)) return null;
+    const property = typeof opts === 'string' ? (opts as string) : opts?.property;
+    return opts?.['omitNil'] !== true ? removeDuplicatesFromArray(val, property) : removeDuplicatesFromArray(val, property).filter(isNotNil);
+  }
+}
+
+@Pipe({
+  name: 'splitArrayInChunks',
+})
+export class SplitArrayInChunksPipe implements PipeTransform {
+  transform<T = any>(value: T[], chunkSize: number): T[][] {
+    return splitArrayInChunks<T>(value, chunkSize);
+  }
+}

package/src/app/shared/pipes/badge.pipes.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { isNotNilOrNaN } from '../functions';
+
+@Pipe({
+  name: 'badgeNumber',
+})
+export class BadgeNumberPipe implements PipeTransform {
+  transform(val: number, max = 99): string {
+    if (isNotNilOrNaN(val)) {
+      if (val > max) {
+        return max.toFixed(0) + '+';
+      }
+      return val.toFixed(0);
+    } else {
+      return '';
+    }
+  }
+}

package/src/app/shared/pipes/colors.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { AppColors } from '../types';
+import { ThemePalette } from '@angular/material/core';
+
+@Pipe({
+  name: 'matColor',
+})
+export class MatColorPipe implements PipeTransform {
+  transform(color: AppColors): ThemePalette | undefined {
+    if (!color) return undefined;
+    switch (color) {
+      // Redirect 'secondary' and 'tertiary' to primary (not exists in material theme)
+      case 'secondary':
+      case 'tertiary':
+        return 'primary';
+      case 'warning':
+        return 'warn';
+      case 'medium':
+        return undefined; // Use default
+      default:
+        return color as ThemePalette;
+    }
+  }
+}

package/src/app/shared/pipes/date-diff-duration.pipe.ts

@@ -0,0 +1,53 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { Moment } from 'moment';
+import { DateAdapter } from '@angular/material/core';
+import { DATE_ISO_PATTERN } from '../constants';
+import { TranslateService } from '@ngx-translate/core';
+import { DateUtils } from '../dates';
+import { unitOfTime } from 'moment/moment';
+
+@Pipe({
+  name: 'dateDiffDuration',
+})
+@Injectable({ providedIn: 'root' })
+export class DateDiffDurationPipe implements PipeTransform {
+  protected dayUnit: string;
+
+  constructor(
+    private dateAdapter: DateAdapter<Moment>,
+    translate: TranslateService
+  ) {
+    this.dayUnit = translate.instant('COMMON.DAY_UNIT');
+    translate.get('COMMON.DAY_UNIT').subscribe((dayUnit) => (this.dayUnit = dayUnit));
+  }
+
+  transform(
+    value: { startValue: string | Moment; endValue: string | Moment },
+    opts?: { seconds?: boolean; unit?: unitOfTime.Base }
+  ): string | Promise<string> {
+    if (!value.startValue || !value.endValue) return '';
+
+    const startDate = this.dateAdapter.parse(value.startValue, DATE_ISO_PATTERN);
+    const endDate = this.dateAdapter.parse(value.endValue, DATE_ISO_PATTERN);
+
+    return this.format(startDate, endDate, opts);
+  }
+
+  format(startDate: Moment, endDate: Moment, opts: { seconds?: boolean; unit?: unitOfTime.Base }): string {
+    const duration = DateUtils.moment.duration(endDate.diff(startDate));
+
+    // Convert to the expected unit, if any
+    if (opts?.unit) return '' + duration.as(opts.unit);
+
+    const withSeconds = opts?.seconds;
+    if (!withSeconds && duration.asMinutes() < 0) return '';
+
+    const timeDuration = DateUtils.moment(0).hour(duration.hours()).minute(duration.minutes());
+    if (withSeconds) {
+      timeDuration.second(duration.seconds());
+    }
+
+    const days = Math.floor(duration.asDays());
+    return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format(withSeconds ? 'HH:mm:ss' : 'HH:mm');
+  }
+}

package/src/app/shared/pipes/date-format.pipe.ts

@@ -0,0 +1,73 @@
+import { Injectable, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { isMoment, Moment } from 'moment';
+import { DATE_ISO_PATTERN } from '../constants';
+import { TranslateService } from '@ngx-translate/core';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { Subscription } from 'rxjs';
+
+abstract class AbstractDateFormat {
+  private datePattern: string;
+  private dateTimePattern: string;
+  private dateTimeSecondsPattern: string;
+
+  protected constructor(
+    protected dateAdapter: MomentDateAdapter,
+    protected translate: TranslateService
+  ) {
+    const translations = translate.instant(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN']);
+    this._updateTranslations(translations);
+  }
+
+  transform(value: string | Moment | Date, args?: { pattern?: string; time?: boolean; seconds?: boolean }): string {
+    const pattern =
+      (args && args.pattern) || (args && args.time ? (args.seconds ? this.dateTimeSecondsPattern : this.dateTimePattern) : this.datePattern);
+    // Keep original moment object, if possible (to avoid a conversion)
+    const date: Moment = isMoment(value) ? value : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
+    return (date && this.dateAdapter.format(date, pattern)) || '';
+  }
+
+  protected _updateTranslations(translations: any) {
+    this.datePattern = this._getTranslationValue(translations, 'COMMON.DATE_PATTERN', 'DD/MM/YYYY');
+    this.dateTimePattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_PATTERN', 'DD/MM/YYYY HH:mm');
+    this.dateTimeSecondsPattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_SECONDS_PATTERN', 'DD/MM/YYYY HH:mm:ss');
+  }
+
+  protected _getTranslationValue(translations: any, key: string, defaultValue: string): string {
+    return translations[key] !== key ? translations[key] : defaultValue;
+  }
+}
+
+@Pipe({
+  name: 'dateFormat',
+})
+export class DateFormatPipe extends AbstractDateFormat implements PipeTransform {
+  constructor(dateAdapter: MomentDateAdapter, translate: TranslateService) {
+    super(dateAdapter, translate);
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class DateFormatService extends AbstractDateFormat implements OnDestroy {
+  private _subscription: Subscription;
+
+  constructor(dateAdapter: MomentDateAdapter, translate: TranslateService) {
+    super(dateAdapter, translate);
+
+    // Subscribe to changes (e.g. when platform not ready yet)
+    this._subscription = translate
+      .get(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN'])
+      .subscribe((translations) => this._updateTranslations(translations));
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  format(date: Moment, pattern: any): string {
+    return this.dateAdapter.format(date, pattern);
+  }
+
+  parse(value: string, parseFormat: any): Moment {
+    return isMoment(value) ? value : this.dateAdapter.parse(value, parseFormat || DATE_ISO_PATTERN);
+  }
+}

package/src/app/shared/pipes/date-from-now.pipe.ts

@@ -0,0 +1,17 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { isMoment, Moment } from 'moment';
+import { DATE_ISO_PATTERN } from '../constants';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+
+@Pipe({
+  name: 'dateFromNow',
+})
+@Injectable({ providedIn: 'root' })
+export class DateFromNowPipe implements PipeTransform {
+  constructor(private dateAdapter: MomentDateAdapter) {}
+
+  transform(value: string | Moment, args?: any): string | Promise<string> {
+    const date: Moment = isMoment(value) ? (value as Moment) : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
+    return date ? date.fromNow(args && args.withoutSuffix) : '';
+  }
+}

package/src/app/shared/pipes/dates.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Moment } from 'moment';
+import { DateUtils, fromDateISOString } from '../dates';
+
+@Pipe({
+  name: 'isValidDate',
+})
+export class IsValidDatePipe implements PipeTransform {
+  transform(value: string | Moment, opts?: { requiredTime?: boolean }): boolean {
+    const date = fromDateISOString(value);
+    return date?.isValid() && (!opts?.requiredTime || !DateUtils.isNoTime(date));
+  }
+}

package/src/app/shared/pipes/display-with.pipe.ts

@@ -0,0 +1,13 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { isNil } from '../functions';
+
+@Pipe({
+  name: 'displayWith',
+})
+@Injectable({ providedIn: 'root' })
+export class DisplayWithPipe implements PipeTransform {
+  transform(value: any, displayFn: (any) => string): string {
+    if (isNil(value) || !displayFn) return '';
+    return displayFn(value);
+  }
+}

package/src/app/shared/pipes/duration.pipe.spec.ts

@@ -0,0 +1,41 @@
+import { DurationPipe } from './duration.pipe';
+import { TestBed } from '@angular/core/testing';
+import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateModule } from '@ngx-translate/core';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+describe('DurationPipe', () => {
+  let pipe: DurationPipe;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+    teardown: { destroyAfterEach: false },
+    imports: [TranslateModule.forRoot({
+            missingTranslationHandler: { provide: MissingTranslationHandler, useClass: DummyMissingTranslationHandler },
+        })],
+    providers: [DurationPipe, provideHttpClient(withInterceptorsFromDi())]
+});
+    pipe = TestBed.inject(DurationPipe);
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('transform some values', () => {
+    expect(pipe.transform(1)).not.toBe('1:00');
+    expect(pipe.transform(1)).toBe('01:00');
+    expect(pipe.transform(10)).toBe('10:00');
+    expect(pipe.transform(1.5)).toBe('01:30');
+    expect(pipe.transform(2.9)).toBe('02:54');
+    expect(pipe.transform(24)).toBe('1DUMMY 00:00');
+    expect(pipe.transform(25.25)).toBe('1DUMMY 01:15');
+  });
+});
+
+@Injectable()
+class DummyMissingTranslationHandler implements MissingTranslationHandler {
+  handle(params: MissingTranslationHandlerParams): any {
+    return 'DUMMY';
+  }
+}

package/src/app/shared/pipes/duration.pipe.ts

@@ -0,0 +1,28 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { DateUtils } from '../dates';
+import { unitOfTime } from 'moment';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+  name: 'duration',
+})
+@Injectable({ providedIn: 'root' })
+export class DurationPipe implements PipeTransform {
+  protected dayUnit: string;
+
+  constructor(translate: TranslateService) {
+    this.dayUnit = translate.instant('COMMON.DAY_UNIT');
+  }
+
+  /**
+   * Format a diff between two dates.
+   *
+   * @param value
+   * @param opts
+   * @param opts.unit allow to convert into a particular unit. If not defined, result will be like `x days HH:MM`
+   * @param opts.seconds Should display or ignore the seconds ?
+   **/
+  transform(value: number, opts?: unitOfTime.DurationConstructor | { unit?: unitOfTime.DurationConstructor; seconds?: boolean } | any): string {
+    return DateUtils.durationToString(value, this.dayUnit, opts);
+  }
+}