Angular Pipe to Convert TimeSpan Duration to 7.5 Hour Business Days
Convert Timespan to Business Days using Angular Pipe

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