TT-593 On Reports page, add filter by user name (#839)

* feat: TT-593 add filter for searching a specific user

* Created user-search component
* Loaded all users to the select
* sent the user.id to the api reports

* feat: TT-593 added the ngOnChanges event

* style: TT-593 added the length of the search button

* fix: TT-593 resolved keys

* fix: TT-593 added the time-tracker-ui CD-prod file

* fix: TT-593 added the time-tracker-ui-cd-prod file

* fix: TT-593 fixed the CI-time-tracker-ui.yml file

* fix: TT-593 refactor

* fix: TT-593 refactor

* fix: TT-593 unit test

* fix: TT-593 refactor unit tets

* fix: TT-593 unit test coverage

* fix: TT-593 coverage time-entries-table

* fix: TT-593 coverage time-entries-table

Co-authored-by: wilc0519 <[email protected]>

Author: codigodehoy

src/app/app.module.ts

@@ -89,6 +89,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { DarkModeComponent } from './modules/shared/components/dark-mode/dark-mode.component';
 import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
 import { GoogleLoginProvider } from 'angularx-social-login';
+import { SearchUserComponent } from './modules/shared/components/search-user/search-user.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -128,6 +129,7 @@ const maskConfig: Partial<IConfig> = {
     EntryFieldsComponent,
     SubstractDatePipe,
     TechnologiesComponent,
+    SearchUserComponent,
     TimeEntriesSummaryComponent,
     TimeDetailsPipe,
     InputLabelComponent,

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

@@ -1,4 +1,6 @@
 <div class="row scroll-table mt-5 ml-0">
+  <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">
             <tr class="d-flex">
@@ -54,4 +56,4 @@
             </tr>
         </tbody>
     </table>
-</div>
+</div>

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

@@ -1,11 +1,14 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { DataTableDirective } from 'angular-datatables';
+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 { EntryState } from '../../../time-clock/store/entry.reducer';
 import { TimeEntriesTableComponent } from './time-entries-table.component';
+import { ActionsSubject } from '@ngrx/store';
+import { UserActionTypes } from 'src/app/modules/users/store';
 
 describe('Reports Page', () => {
   describe('TimeEntriesTableComponent', () => {
@@ -46,25 +49,28 @@ describe('Reports Page', () => {
       },
     };
 
+    const actionSub: ActionsSubject = new ActionsSubject();
+
     beforeEach(
       waitForAsync(() => {
         TestBed.configureTestingModule({
-          imports: [],
+          imports: [NgxPaginationModule, DataTablesModule],
           declarations: [TimeEntriesTableComponent, SubstractDatePipe],
-          providers: [provideMockStore({ initialState: state })],
+          providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
         }).compileComponents();
-        store = TestBed.inject(MockStore);
+
       })
     );
 
     beforeEach(
-      waitForAsync(() => {
+      () => {
         fixture = TestBed.createComponent(TimeEntriesTableComponent);
         component = fixture.componentInstance;
+        store = TestBed.inject(MockStore);
         store.setState(state);
         getReportDataSourceSelectorMock = store.overrideSelector(getReportDataSource, state.reportDataSource);
         fixture.detectChanges();
-      })
+      }
     );
 
     beforeEach(() => {
@@ -85,7 +91,9 @@ describe('Reports Page', () => {
     });
 
     it('after the component is initialized it should initialize the table', () => {
+      component.dtElement = null;
       spyOn(component.dtTrigger, 'next');
+
       component.ngAfterViewInit();
 
       expect(component.dtTrigger.next).toHaveBeenCalled();
@@ -137,14 +145,35 @@ describe('Reports Page', () => {
 
     it('when the rerenderDataTable method is called and dtElement and dtInstance are defined, the destroy and next methods are called ',
     () => {
-      component.dtElement = {
-        dtInstance: {
-          then : (dtInstance: DataTables.Api) => { dtInstance.destroy(); }
-        }
-      } as unknown as DataTableDirective;
-      spyOn(component.dtElement.dtInstance, 'then');
+      spyOn(component.dtTrigger, 'next');
+
       component.ngAfterViewInit();
-      expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
+
+      component.dtElement.dtInstance.then( (dtInstance) => {
+        expect(component.dtTrigger.next).toHaveBeenCalled();
+      });
+    });
+
+    it(`When the user method is called, the emit method is called`, () => {
+      const userId = 'abc123';
+      spyOn(component.selectedUserId, 'emit');
+      component.user(userId);
+      expect(component.selectedUserId.emit).toHaveBeenCalled();
+
+    });
+
+    it('Should populate the users with the payload from the action executed', () => {
+      const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
+      const usersArray = []
+      const action = {
+        type: UserActionTypes.LOAD_USERS_SUCCESS,
+        payload: usersArray
+      };
+
+      actionSubject.next(action);
+
+
+      expect(component.users).toEqual(usersArray);
     });
 
     afterEach(() => {

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

@@ -1,13 +1,16 @@
 import { formatDate } from '@angular/common';
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, OnInit, ViewChild } from '@angular/core';
+import { select, Store, ActionsSubject } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
 import * as moment from 'moment';
 import { Observable, Subject, Subscription } from 'rxjs';
+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 { 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';
 
 @Component({
@@ -16,8 +19,11 @@ import { ParseDateTimeOffset } from '../../../shared/formatters/parse-date-time-
   styleUrls: ['./time-entries-table.component.scss'],
 })
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
+  @Output() selectedUserId = new EventEmitter<string>();
+
   selectOptionValues = [15, 30, 50, 100, -1];
   selectOptionNames = [15, 30, 50, 100, 'All'];
+  users: User[] = [];
   dtOptions: any = {
     scrollY: '590px',
     dom: '<"d-flex justify-content-between"B<"d-flex"<"mr-5"l>f>>rtip',
@@ -63,15 +69,25 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   rerenderTableSubscription: Subscription;
   dateTimeOffset: ParseDateTimeOffset;
 
-  constructor(private store: Store<EntryState>) {
+  constructor(private store: Store<EntryState>, private actionsSubject$: ActionsSubject, private storeUser: Store<User> ) {
     this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
     this.dateTimeOffset = new ParseDateTimeOffset();
   }
 
+  uploadUsers(): void {
+    this.storeUser.dispatch(new LoadUsers());
+    this.actionsSubject$
+      .pipe(filter((action: any) => action.type === UserActionTypes.LOAD_USERS_SUCCESS))
+      .subscribe((action) => {
+        this.users = action.payload;
+      });
+  }
+
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
       this.rerenderDataTable();
     });
+    this.uploadUsers();
   }
 
   ngAfterViewInit(): void {
@@ -86,11 +102,11 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   private rerenderDataTable(): void {
     if (this.dtElement && this.dtElement.dtInstance) {
       this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
-          dtInstance.destroy();
-          this.dtTrigger.next();
+        dtInstance.destroy();
+        this.dtTrigger.next();
       });
     } else {
-        this.dtTrigger.next();
+      this.dtTrigger.next();
     }
   }
 
@@ -103,10 +119,15 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     return regex.test(uri);
   }
 
-  bodyExportOptions(data, row, column, node){
+  bodyExportOptions(data, row, column, node) {
     const dataFormated = data.toString().replace(/<((.|\n){0,200}?)>/gi, '');
     const durationColumnIndex = 3;
     return column === durationColumnIndex ? moment.duration(dataFormated).asHours().toFixed(2) : dataFormated;
   }
+
+  user(userId: string){
+    this.selectedUserId.emit(userId);
+  }
+
 }
 

src/app/modules/reports/components/time-range-form/time-range-form.component.ts

@@ -1,6 +1,6 @@
 import { ToastrService } from 'ngx-toastr';
 import { formatDate } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { OnChanges, SimpleChanges, Component, Input, OnInit  } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { DATE_FORMAT } from 'src/environments/environment';
 import * as entryActions from '../../../time-clock/store/entry.actions';
@@ -12,7 +12,10 @@ import * as moment from 'moment';
   selector: 'app-time-range-form',
   templateUrl: './time-range-form.component.html',
 })
-export class TimeRangeFormComponent implements OnInit {
+export class TimeRangeFormComponent implements OnInit, OnChanges {
+
+  @Input() userId: string;
+
   public reportForm: FormGroup;
   private startDate = new FormControl('');
   private endDate = new FormControl('');
@@ -27,6 +30,12 @@ export class TimeRangeFormComponent implements OnInit {
     this.setInitialDataOnScreen();
   }
 
+  ngOnChanges(changes: SimpleChanges){
+    if (!changes.userId.firstChange){
+      this.onSubmit();
+    }
+  }
+
   setInitialDataOnScreen() {
     this.reportForm.setValue({
       startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'),
@@ -43,7 +52,7 @@ export class TimeRangeFormComponent implements OnInit {
       this.store.dispatch(new entryActions.LoadEntriesByTimeRange({
         start_date: moment(this.startDate.value).startOf('day'),
         end_date: moment(this.endDate.value).endOf('day'),
-      }));
+      }, this.userId));
     }
   }
 }

src/app/modules/reports/components/time-range-form/time-range.component.spec.ts

@@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { InputDateComponent } from '../../../shared/components/input-date/input-date.component';
 import * as entryActions from '../../../time-clock/store/entry.actions';
 import * as moment from 'moment';
+import { SimpleChange } from '@angular/core';
 
 describe('Reports Page', () => {
   describe('TimeRangeFormComponent', () => {
@@ -114,6 +115,15 @@ describe('Reports Page', () => {
       expect(component.onSubmit).toHaveBeenCalled();
     });
 
+    it('When the ngOnChanges method is called, the onSubmit method is called', () => {
+      const userId = 'abcd';
+      spyOn(component, 'onSubmit');
+
+      component.ngOnChanges({userId: new SimpleChange(null, userId, false)});
+
+      expect(component.onSubmit).toHaveBeenCalled();
+    });
+
     afterEach(() => {
       fixture.destroy();
     });

src/app/modules/reports/pages/reports.component.html

@@ -1,3 +1,2 @@
-<app-time-range-form></app-time-range-form>
-<app-time-entries-table></app-time-entries-table>
-
+<app-time-range-form [userId]="userId"></app-time-range-form>
+<app-time-entries-table (selectedUserId)="user($event)"></app-time-entries-table>

src/app/modules/reports/pages/reports.component.spec.ts

@@ -32,4 +32,10 @@ describe('ReportsComponent', () => {
     expect(reportForm).toBeTruthy();
     expect(reportDataTable).toBeTruthy();
   }));
+
+  it(`Given the id of the user 'abc123' this is assigned to the variable userId`, () => {
+    const userId = 'abc123';
+    component.user(userId);
+    expect(component.userId).toEqual('abc123');
+  });
 });

src/app/modules/reports/pages/reports.component.ts

@@ -6,4 +6,10 @@ import { Component } from '@angular/core';
   styleUrls: ['./reports.component.scss']
 })
 export class ReportsComponent {
+
+  userId: string;
+
+  user(userId: string){
+    this.userId = userId;
+  }
 }

src/app/modules/shared/components/search-user/search-user.component.html

@@ -0,0 +1,8 @@
+<div class="form-group" >
+  <label>Users: </label>
+
+  <ng-select [(ngModel)]="selectedUser" placeholder="Select user" (change)="updateUser()" class="selectUser">
+    <ng-option  *ngFor="let user of users" value={{user.id}}>👤{{user.name}}📨{{ user.email}}</ng-option >
+  </ng-select>
+
+</div>