TT 12 on reports page show total hours of filtered data

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

@@ -54,4 +54,5 @@
             </tr>
         </tbody>
     </table>
-</div>
+</div>
+<div class="alert alert-dark mt-3">Total: {{this.resultSum.hours}} hours, {{this.resultSum.minutes}} minutes</div>

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

@@ -6,6 +6,7 @@ import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/s
 import { getReportDataSource } from 'src/app/modules/time-clock/store/entry.selectors';
 import { EntryState } from '../../../time-clock/store/entry.reducer';
 import { TimeEntriesTableComponent } from './time-entries-table.component';
+import { TotalHours } from '../../models/total-hours-report';
 
 describe('Reports Page', () => {
   describe('TimeEntriesTableComponent', () => {
@@ -29,6 +30,31 @@ describe('Reports Page', () => {
       project_name: 'Time-Tracker',
     };
 
+    const timeEntryList: Entry[] = [
+      {
+        id: '123',
+        start_date: new Date('2022-04-24T11:30:00Z'),
+        end_date: new Date('2022-04-24T14:30:00Z'),
+        activity_id: '123',
+        technologies: ['react', 'redux'],
+        description: 'any comment',
+        uri: 'custom uri',
+        project_id: '123',
+        project_name: 'Time-Tracker',
+      },
+      {
+        id: '456',
+        start_date: new Date('2022-04-25T12:40:00Z'),
+        end_date: new Date('2022-04-25T13:00:00Z'),
+        activity_id: '123',
+        technologies: ['react', 'redux'],
+        description: 'any comment',
+        uri: 'custom uri',
+        project_id: '123',
+        project_name: 'Time-Tracker',
+      }
+    ];
+
     const state: EntryState = {
       active: timeEntry,
       isLoading: false,
@@ -123,18 +149,18 @@ describe('Reports Page', () => {
       const column = 3;
       expect(component.bodyExportOptions(durationTime, row, column, node)).toMatch(decimalValidator);
     });
-
+    
     it('The data should not be displayed as a multiple of hour when column is different of 3', () => {
       const column = 4;
       expect(component.bodyExportOptions(durationTime, row, column, node)).toBe(durationTime.toString());
     });
-
+    
     it('The link Ticket must not contain the ticket URL enclosed with < > when export a file csv, excel or PDF', () => {
       const entry = '<a _ngcontent-vlm-c151="" class="is-url">https://TT-392-uri</a>';
       const column = 0;
       expect(component.bodyExportOptions(entry, row, column, node)).toBe('https://TT-392-uri');
     });
-
+    
     it('when the rerenderDataTable method is called and dtElement and dtInstance are defined, the destroy and next methods are called ',
     () => {
       component.dtElement = {
@@ -146,6 +172,11 @@ describe('Reports Page', () => {
       component.ngAfterViewInit();
       expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
     });
+
+    it('The sum of the data dates is equal to {"hours": 3, "minutes":20,"seconds":0}', () => {
+      let {hours,minutes,seconds}: TotalHours = component.sumDates(timeEntryList);
+      expect({hours, minutes, seconds}).toEqual({hours:3,minutes:20,seconds:0});
+    });
 
     afterEach(() => {
       fixture.destroy();

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

@@ -8,6 +8,7 @@ import { Entry } from 'src/app/modules/shared/models';
 import { DataSource } from 'src/app/modules/shared/models/data-source.model';
 import { EntryState } from '../../../time-clock/store/entry.reducer';
 import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
+import { TotalHours } from '../../models/total-hours-report';
 import { ParseDateTimeOffset } from '../../../shared/formatters/parse-date-time-offset/parse-date-time-offset';
 
 @Component({
@@ -61,6 +62,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   isLoading$: Observable<boolean>;
   reportDataSource$: Observable<DataSource<Entry>>;
   rerenderTableSubscription: Subscription;
+  resultSum: TotalHours;
   dateTimeOffset: ParseDateTimeOffset;
 
   constructor(private store: Store<EntryState>) {
@@ -70,6 +72,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
 
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
+      this.sumDates(ds.data);
       this.rerenderDataTable();
     });
   }
@@ -108,5 +111,25 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     const durationColumnIndex = 3;
     return column === durationColumnIndex ? moment.duration(dataFormated).asHours().toFixed(2) : dataFormated;
   }
+
+  sumDates(arrayData: Entry[]): TotalHours{
+    this.resultSum = new TotalHours();
+    let arrayDurations= new Array();
+    arrayData.forEach(entry =>{
+      let start = moment(entry.end_date).diff(moment(entry.start_date));
+      arrayDurations.push(moment.utc(start).format("HH:mm:ss"));
+    });
+
+    let totalDurations = arrayDurations.slice(1)
+    .reduce((prev, cur) => {
+      return prev.add(cur);
+    },
+    moment.duration(arrayDurations[0]));
+    let daysInHours = totalDurations.days() >= 1 ? totalDurations.days() * 24 :  0;
+    this.resultSum.hours=totalDurations.hours() + daysInHours;
+    this.resultSum.minutes = totalDurations.minutes();
+    this.resultSum.seconds = totalDurations.seconds();
+    return this.resultSum;
+  }
 }
 

src/app/modules/reports/models/total-hours-report.ts

@@ -0,0 +1,12 @@
+export class TotalHours {
+
+    hours: number;
+    minutes: number;
+    seconds: number;
+
+    constructor() {
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+    }
+}