TT-593 On Reports page, add filter by user name

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

@@ -147,6 +147,14 @@ describe('Reports Page', () => {
       expect(component.dtElement.dtInstance.then).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();
+
+    });
+
     afterEach(() => {
       fixture.destroy();
     });

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>

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

@@ -0,0 +1,9 @@
+label {
+  width: 225px;
+}
+.selectUser {
+  display: inline-block;
+  width: 350px;
+  padding: 0 12px 15px 12px;
+}
+

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-search-user',
+  templateUrl: './search-user.component.html',
+  styleUrls: ['./search-user.component.scss'],
+})
+
+export class SearchUserComponent {
+
+  readonly ALLOW_SELECT_MULTIPLE = true;
+  selectedUser: string;
+
+  @Input() users: string[] = [];
+
+  @Output() selectedUserId = new EventEmitter<string>();
+
+  updateUser() {
+    this.selectedUserId.emit(this.selectedUser || '*');
+  }
+}
+

src/app/modules/users/components/users-list/users-list.component.ts

@@ -47,7 +47,7 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
       });
 
     this.switchGroupsSubscription = this.filterUserGroup().subscribe((action) => {
-      this.store.dispatch(new LoadUsers());
+    this.store.dispatch(new LoadUsers());
     });
   }