refactor: TTA-196 display hours as float

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -39,7 +39,7 @@
           {{ entry.start_date | date: 'MM/dd/yyyy' }}
         </td>
         <td class="col sm-col">
-          {{ entry.end_date | substractDate: entry.start_date }}
+          {{ entry.end_date | substractDateDisplayAsFloat: entry.start_date }}
         </td>
         <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date, entry.timezone_offset) }}</td>
         <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.end_date, entry.timezone_offset) }}</td>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts

@@ -4,6 +4,7 @@ import { DataTablesModule } from 'angular-datatables';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { Entry } from 'src/app/modules/shared/models';
 import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/substract-date.pipe';
+import { SubstractDatePipeDisplayAsFloat } from 'src/app/modules/shared/pipes/substract-date-return-float/substract-date-return-float.pipe';
 import { getReportDataSource, getResultSumEntriesSelected } from 'src/app/modules/time-clock/store/entry.selectors';
 import { EntryState } from '../../../time-clock/store/entry.reducer';
 import { TimeEntriesTableComponent } from './time-entries-table.component';
@@ -80,7 +81,7 @@ describe('Reports Page', () => {
       waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [NgxPaginationModule, DataTablesModule],
-          declarations: [TimeEntriesTableComponent, SubstractDatePipe],
+          declarations: [TimeEntriesTableComponent, SubstractDatePipe, SubstractDatePipeDisplayAsFloat],
           providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
         }).compileComponents();
 

src/app/modules/shared/pipes/substract-date-return-float/substract-date-return-float.pipe.spec.ts

@@ -0,0 +1,45 @@
+import { SubstractDatePipeDisplayAsFloat } from './substract-date-return-float.pipe';
+
+describe('SubstractDatePipeDisplayAsFloat', () => {
+  it('create an instance', () => {
+    const pipe = new SubstractDatePipeDisplayAsFloat();
+    expect(pipe).toBeTruthy();
+  });
+
+  it('returns the date diff as float hours (xx.x)', () => {
+    [
+      { endDate: '2021-04-11T10:20:00Z', startDate: '2021-04-11T08:00:00Z', expectedDiff: '2.3' },
+      { endDate: '2021-04-11T17:40:00Z', startDate: '2021-04-11T17:10:00Z', expectedDiff: '0.5' },
+      { endDate: '2021-04-11T18:18:00Z', startDate: '2021-04-11T18:00:00Z', expectedDiff: '0.3' },
+      { endDate: '2021-04-12T12:18:00Z', startDate: '2021-04-11T10:00:00Z', expectedDiff: '26.3' },
+      { endDate: '2021-04-12T10:01:00Z', startDate: '2021-04-12T10:00:00Z', expectedDiff: '0.0' },
+      { endDate: '2021-04-11T11:27:00Z', startDate: '2021-04-11T10:03:45Z', expectedDiff: '1.4' },
+    ].forEach(({ startDate, endDate, expectedDiff }) => {
+      const fromDate = new Date(endDate);
+      const substractDate = new Date(startDate);
+
+      const diff = new SubstractDatePipeDisplayAsFloat().transform(fromDate, substractDate);
+
+      expect(diff).toBe(expectedDiff);
+    });
+  });
+
+  it('returns -.- if fromDate is null', () => {
+    const fromDate = null;
+    const substractDate = new Date('2011-04-11T08:00:30Z');
+
+    const diff = new SubstractDatePipeDisplayAsFloat().transform(fromDate, substractDate);
+
+    expect(diff).toBe('-.-');
+  });
+
+  it('returns -.- if substractDate is null', () => {
+    const fromDate = new Date('2011-04-11T08:00:30Z');
+    const substractDate = null;
+
+    const diff = new SubstractDatePipeDisplayAsFloat().transform(fromDate, substractDate);
+
+    expect(diff).toBe('-.-');
+  });
+
+});

src/app/modules/shared/pipes/substract-date-return-float/substract-date-return-float.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+@Pipe({
+  name: 'substractDateDisplayAsFloat'
+})
+export class SubstractDatePipeDisplayAsFloat implements PipeTransform {
+
+  transform(fromDate: Date, substractDate: Date): string {
+
+    if (fromDate === null || substractDate === null) {
+      return '-.-';
+    }
+
+    const startDate = moment(substractDate);
+    const endDate = moment(fromDate);
+    const duration = this.getTimeDifference(startDate, endDate);
+    return duration.asHours().toFixed(1).toString()
+  }
+
+  getTimeDifference(substractDate: moment.Moment, fromDate: moment.Moment): moment.Duration {
+    return moment.duration(fromDate.diff(substractDate));
+  }
+
+}

src/app/modules/shared/pipes/substract-date/substract-date.pipe.ts

@@ -35,8 +35,7 @@ export class SubstractDatePipe implements PipeTransform {
     const hours = this.formatTime(duration.hours() + daysInHours);
     const minutes = this.formatTime(duration.minutes());
     const seconds = lessThanMinute ? `:${this.formatTime(duration.seconds())}` : '';
-    const duration_hours = duration.asHours() 
-    return duration_hours.toString();
+    return `${hours}:${minutes}${seconds}`;
   }
 
   formatTime(time: number): string {