fix: TTA-29 Selecting multiple time entries and show total of hours of selected entries

Author: wilc0519

.dev.env

@@ -11,6 +11,7 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -149,6 +150,7 @@ const maskConfig: Partial<IConfig> = {
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
+    MatCheckboxModule,
     MatInputModule,
     MatDatepickerModule,
     MatMomentDateModule,

src/app/app.module.ts

@@ -4,6 +4,7 @@
     <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(reportDataSource$ | async) as dataSource">
         <thead class="thead-blue">
             <tr class="d-flex">
+              <th class="col md-col">Selected</th>
                 <th class="hidden-col">ID</th>
                 <th class="col md-col">User email</th>
                 <th class="col sm-col">Date</th>
@@ -23,6 +24,8 @@
         <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
         <tbody *ngIf="!dataSource.isLoading">
             <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
+                <td class="col md-col"><mat-checkbox
+                  (change)="sumHoursEntriesSelected(entry, $event.checked)"></mat-checkbox></td>
                 <td class="hidden-col">{{ entry.id }}</td>
                 <td class="col md-col">{{ entry.owner_email }}</td>
                 <td class="col sm-col">
@@ -57,4 +60,5 @@
         </tbody>
     </table>
 </div>
-<div class="alert alert-dark mt-3">Total: {{this.resultSum.hours}} hours, {{this.resultSum.minutes}} minutes</div>
+<div class="alert alert-dark mt-3">Total: {{this.resultSum.hours}} hours, {{this.resultSum.minutes}} minutes,
+  <br/>   Total hours entries selected: {{resultSumEntriesSelected.hours}} hours, {{resultSumEntriesSelected.minutes}} minutes</div>

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

@@ -4,7 +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 { getReportDataSource } from 'src/app/modules/time-clock/store/entry.selectors';
+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';
 import { TotalHours } from '../../models/total-hours-report';
@@ -17,6 +17,7 @@ describe('Reports Page', () => {
     let fixture: ComponentFixture<TimeEntriesTableComponent>;
     let store: MockStore<EntryState>;
     let getReportDataSourceSelectorMock;
+    let getResultSumEntriesSelectedMock;
     let durationTime: number;
     let row: number;
     let node: number;
@@ -61,6 +62,7 @@ describe('Reports Page', () => {
     const state: EntryState = {
       active: timeEntry,
       isLoading: false,
+      resultSumEntriesSelected:  new TotalHours(),
       message: '',
       createError: false,
       updateError: false,
@@ -95,6 +97,7 @@ describe('Reports Page', () => {
         store = TestBed.inject(MockStore);
         store.setState(state);
         getReportDataSourceSelectorMock = store.overrideSelector(getReportDataSource, state.reportDataSource);
+        getResultSumEntriesSelectedMock = store.overrideSelector(getResultSumEntriesSelected, state.resultSumEntriesSelected);
         fixture.detectChanges();
       }
     );
@@ -207,6 +210,14 @@ describe('Reports Page', () => {
       expect({hours, minutes, seconds}).toEqual({hours:3,minutes:20,seconds:0});
     });
 
+    it('the sume of hours of entries selected is equal to {hours:0, minutes:0, seconds:0}', () => {
+      let checked = true;
+      let{hours, minutes, seconds}:TotalHours = component.sumHoursEntriesSelected(timeEntryList[0], checked);
+      checked = false;
+      ({hours, minutes,seconds} = component.sumHoursEntriesSelected(timeEntryList[0], checked));
+      expect({hours, minutes, seconds}).toEqual({hours:0, minutes:0, seconds:0});
+    });
+
     afterEach(() => {
       fixture.destroy();
     });

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

@@ -8,7 +8,7 @@ import { filter } from 'rxjs/operators';
 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 { getReportDataSource, getResultSumEntriesSelected } 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';
@@ -24,7 +24,9 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
 
   selectOptionValues = [15, 30, 50, 100, -1];
   selectOptionNames = [15, 30, 50, 100, 'All'];
+  totalTimeSelected: moment.Duration;
   users: User[] = [];
+
   dtOptions: any = {
     scrollY: '590px',
     dom: '<"d-flex justify-content-between"B<"d-flex"<"mr-5"l>f>>rtip',
@@ -60,7 +62,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
         filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
       },
     ],
-    columnDefs: [{ type: 'date', targets: 2}],
+    columnDefs: [{ type: 'date', targets: 2}, {orderable: false, targets: [0]}],
     order: [[1,'asc'],[2,'desc'],[4,'desc']]
   };
   dtTrigger: Subject<any> = new Subject();
@@ -70,11 +72,17 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   reportDataSource$: Observable<DataSource<Entry>>;
   rerenderTableSubscription: Subscription;
   resultSum: TotalHours;
+  resultSumEntriesSelected: TotalHours;
+  resultSumEntriesSelected$:Observable<TotalHours>;
+  totalHoursSubscription: Subscription;
   dateTimeOffset: ParseDateTimeOffset;
 
+
   constructor(private store: Store<EntryState>, private actionsSubject$: ActionsSubject, private storeUser: Store<User> ) {
-    this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
-    this.dateTimeOffset = new ParseDateTimeOffset();
+      this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
+      this.resultSumEntriesSelected$ = this.store.pipe(select(getResultSumEntriesSelected));
+      this.dateTimeOffset = new ParseDateTimeOffset();
+      this.resultSumEntriesSelected = new TotalHours();
   }
 
   uploadUsers(): void {
@@ -88,6 +96,10 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
 
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
+      this.totalHoursSubscription = this.resultSumEntriesSelected$.subscribe((actTotalHours) => {
+            this.resultSumEntriesSelected = actTotalHours ;
+            this.totalTimeSelected = moment.duration(0);
+          });
       this.sumDates(ds.data);
       this.rerenderDataTable();
     });
@@ -128,15 +140,15 @@ 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);
@@ -153,5 +165,20 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     this.selectedUserId.emit(userId);
   }
 
+  sumHoursEntriesSelected(entry: Entry, checked: boolean){
+    this.resultSumEntriesSelected = new TotalHours();
+    const duration = moment.duration(moment(entry.end_date).diff(moment(entry.start_date)));
+    if(checked){
+      this.totalTimeSelected = this.totalTimeSelected.add(duration);
+    }
+    else{
+      this.totalTimeSelected = this.totalTimeSelected.subtract(duration);
+    }
+    let daysTotalInHours = this.totalTimeSelected.days() * 24;
+    this.resultSumEntriesSelected.hours = this.totalTimeSelected.hours() + daysTotalInHours;
+    this.resultSumEntriesSelected.minutes = this.totalTimeSelected.minutes();
+    this.resultSumEntriesSelected.seconds = this.totalTimeSelected.seconds();
+    return this.resultSumEntriesSelected;
+  }
 }
 

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

@@ -715,6 +715,20 @@ describe('DetailsFieldsComponent', () => {
     expect(component.entryForm.value.project_name).toBe('name');
   });
 
+  it('it calls the close method if opened equals true', () => {
+    const datepicker: any = { opened : true, open : () => ({}), close : () => ({}) };
+    spyOn(datepicker, 'close');
+    component.openOrCloseDatePicker(datepicker);
+    expect(datepicker.close).toHaveBeenCalled();
+  });
+
+  it('it calls the open method if opened equals false', () => {
+    const datepicker: any = { opened : false, open : () => ({}), close : () => ({}) };
+    spyOn(datepicker, 'open');
+    component.openOrCloseDatePicker(datepicker);
+    expect(datepicker.open).toHaveBeenCalled();
+  });
+
   /*
    TODO As part of https://github.com/ioet/time-tracker-ui/issues/424 a new parameter was added to the details-field-component,
    and now these couple of tests are failing. A solution to this error might be generate a Test Wrapper Component. More details here:

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -2,6 +2,7 @@ import { waitForAsync, ComponentFixture, discardPeriodicTasks, fakeAsync, TestBe
 import { ActionsSubject } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { interval } from 'rxjs';
+import { TotalHours } from 'src/app/modules/reports/models/total-hours-report';
 import { Entry } from 'src/app/modules/shared/models/entry.model';
 import { TimeDetails, TimeEntriesSummary } from './../../models/time.entry.summary';
 import { TimeDetailsPipe } from './../../pipes/time-details.pipe';
@@ -36,6 +37,7 @@ describe('TimeEntriesSummaryComponent', () => {
   const state: EntryState = {
     active: timeEntry,
     isLoading: false,
+    resultSumEntriesSelected: new TotalHours(),
     message: '',
     createError: false,
     updateError: false,

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.spec.ts

@@ -1,3 +1,4 @@
+import { TotalHours } from '../../reports/models/total-hours-report';
 import { TimeDetails, TimeEntriesSummary } from '../models/time.entry.summary';
 import { Entry, NewEntry } from './../../shared/models';
 import * as actions from './entry.actions';
@@ -15,6 +16,7 @@ describe('entryReducer', () => {
     message: '',
     createError: null,
     updateError: null,
+    resultSumEntriesSelected: new TotalHours(),
     timeEntriesSummary: emptyTimeEntriesSummary,
     timeEntriesDataSource: {
       data: [],

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -2,10 +2,12 @@ import { Entry } from '../../shared/models';
 import { DataSource } from '../../shared/models/data-source.model';
 import { TimeDetails, TimeEntriesSummary } from '../models/time.entry.summary';
 import { EntryActions, EntryActionTypes } from './entry.actions';
+import { TotalHours } from '../../reports/models/total-hours-report';
 
 export interface EntryState {
   active: Entry;
   isLoading: boolean;
+  resultSumEntriesSelected: TotalHours;
   message: string;
   createError: boolean;
   updateError: boolean;
@@ -20,6 +22,7 @@ const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, wee
 export const initialState = {
   active: null,
   isLoading: false,
+  resultSumEntriesSelected: new TotalHours(),
   message: '',
   createError: null,
   updateError: null,
@@ -263,6 +266,7 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       return {
         ...state,
         isLoading: true,
+        resultSumEntriesSelected:{hours:0, minutes:0, seconds:0},
         reportDataSource: {
           data: [],
           isLoading: true

src/app/modules/time-clock/store/entry.reducer.ts

@@ -1,3 +1,4 @@
+import { TotalHours } from '../../reports/models/total-hours-report';
 import { Entry } from '../../shared/models';
 import { TimeDetails, TimeEntriesSummary } from '../models/time.entry.summary';
 import * as selectors from './entry.selectors';
@@ -52,4 +53,11 @@ describe('Entry selectors', () => {
 
     expect(selectors.getUpdateError.projector(entryState)).toEqual(error);
   });
+
+  it('should select resultSumEntriesSelected', () => {
+    const resultSumEntriesSelected:TotalHours = { hours:0, minutes:0, seconds:0 };
+    const entryState = { resultSumEntriesSelected };
+
+    expect(selectors.getResultSumEntriesSelected.projector(entryState)).toEqual(resultSumEntriesSelected);
+  });
 });