TT 12 on reports page show total hours of filtered data

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

@@ -1,5 +1,5 @@
 <div class="row scroll-table mt-5 ml-0">
-  <app-search-user [users]="users" (selectedUserId)="user($event)"></app-search-user>
+    <app-search-user [users]="users" (selectedUserId)="user($event)"></app-search-user>
 
     <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(reportDataSource$ | async) as dataSource">
         <thead class="thead-blue">
@@ -57,3 +57,4 @@
         </tbody>
     </table>
 </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

@@ -7,6 +7,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';
 import { ActionsSubject } from '@ngrx/store';
 import { UserActionTypes } from 'src/app/modules/users/store';
 
@@ -32,6 +33,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,
@@ -175,6 +201,11 @@ describe('Reports Page', () => {
 
       expect(component.users).toEqual(usersArray);
     });
+
+    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

@@ -9,6 +9,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 { User } from 'src/app/modules/users/models/users';
 import { LoadUsers, UserActionTypes } from 'src/app/modules/users/store/user.actions';
 import { ParseDateTimeOffset } from '../../../shared/formatters/parse-date-time-offset/parse-date-time-offset';
@@ -67,6 +68,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>, private actionsSubject$: ActionsSubject, private storeUser: Store<User> ) {
@@ -85,6 +87,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
 
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
+      this.sumDates(ds.data);
       this.rerenderDataTable();
     });
     this.uploadUsers();
@@ -124,6 +127,26 @@ 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() * 24;
+    this.resultSum.hours=totalDurations.hours() + daysInHours;
+    this.resultSum.minutes = totalDurations.minutes();
+    this.resultSum.seconds = totalDurations.seconds();
+    return this.resultSum;
+  }
 
   user(userId: string){
     this.selectedUserId.emit(userId);

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;
+    }
+}