Angular Pipe to Convert TimeSpan Duration to 7.5 Hour Business Days

How do you calculate business days of 7.5 hours from a timespan duration in Angular using Typescript/JavaScript?

I was recently working on an Angular based project tracking tool. A user requirement came up to display the total duration for a project in business days instead of hours.

As an example, timespan of "15:35:00" should be displayed as 2d 1h 35m, where 1 day = 7.5 hours.

In this example, .NET Core Web API returns the timespan value. The conversion we’re about to implement can also be done in the API with C#. However, implementing this conversion on the client makes the API more flexible.

We will implement a custom pipe in Angular to perform the calculation with javascript.

A pipe allows us to use the code in an Angular component template like below, where total time is a string-based timespan variable.

{{totalTime | workDay}}

Generate a new pipe using the CLI:

ng generate pipe WorkDay

Add the following code in the generated pipe. Ensure your project imports moment library from npm.

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
  name: 'workDay'
})
export class WorkDayPipe implements PipeTransform {

  transform(value: string): string {
    // Parse given value to moment duration
    let totalMinutes = moment.duration(value).asMinutes();

    let days = Math.floor(totalMinutes / 450);
    let hours = 0;
    let minutes = 0;

    const dayRem = totalMinutes % 450;

    if (dayRem > 0) {
      hours = Math.floor(dayRem / 60);
      minutes = Math.floor(dayRem % 60);
    }

    return `${days}d ${hours}h ${minutes}m`;
  }
}

Here are some tests for the pipe:

import { WorkDayPipe } from './work-day.pipe';

describe('WorkDayPipe', () => {
  it('create an instance', () => {
    const pipe = new WorkDayPipe();
    expect(pipe).toBeTruthy();
  });

  it('returns formatted value for 00:00:00', () => {
    const pipe = new WorkDayPipe();
    const result = pipe.transform('00:00:00');
    expect(result).toBe('0d 0h 0m');
  });

  it('returns formatted value for 02:00:00', () => {
    const pipe = new WorkDayPipe();
    const result = pipe.transform('02:00:00');
    expect(result).toBe('0d 2h 0m');
  });

  it('returns formatted value for 02:30:00', () => {
    const pipe = new WorkDayPipe();
    const result = pipe.transform('02:30:00');
    expect(result).toBe('0d 2h 30m');
  });

  it('returns formatted value for 2.02:35:00', () => {
    const pipe = new WorkDayPipe();
    const result = pipe.transform('2.02:35:00');
    expect(result).toBe('6d 5h 35m');
  });

  it('returns formatted value for 13.23:20:00', () => {
    const pipe = new WorkDayPipe();
    const result = pipe.transform('13.23:20:00');
    expect(result).toBe('44d 5h 20m');
  });
});

Umut Esen

Umut is an enthusiastic software developer, latest web and mobile technology adapter and primary author of onthecode.

Leave a Reply

Close Menu