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

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,5 @@
 <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

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

@@ -1,22 +1,30 @@
 import { formatDate } from '@angular/common';
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, OnInit, ViewChild } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { select, Store } 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 { ActionsSubject } from '@ngrx/store';
+import { User } from 'src/app/modules/users/models/users';
+import { LoadUsers, UserActionTypes } from 'src/app/modules/users/store/user.actions';
 
 @Component({
   selector: 'app-time-entries-table',
   templateUrl: './time-entries-table.component.html',
   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',
@@ -61,14 +69,24 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   reportDataSource$: Observable<DataSource<Entry>>;
   rerenderTableSubscription: Subscription;
 
-  constructor(private store: Store<EntryState>) {
+  constructor(private store: Store<EntryState>, private actionsSubject$: ActionsSubject, private storeUser: Store<User> ) {
     this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
   }
 
+  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 {
@@ -83,11 +101,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();
     }
   }
 
@@ -100,10 +118,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,7 @@
 import { ToastrService } from 'ngx-toastr';
 import { formatDate } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
+import { 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';
@@ -13,6 +14,9 @@ import * as moment from 'moment';
   templateUrl: './time-range-form.component.html',
 })
 export class TimeRangeFormComponent implements OnInit {
+
+  @Input() userId: string;
+
   public reportForm: FormGroup;
   private startDate = new FormControl('');
   private endDate = new FormControl('');
@@ -27,6 +31,12 @@ export class TimeRangeFormComponent implements OnInit {
     this.setInitialDataOnScreen();
   }
 
+  OnChanges(changes: SimpleChanges){
+    if (!changes.userId.firstChange){
+      this.onSubmit();
+    }
+  }
+
   setInitialDataOnScreen() {
     this.reportForm.setValue({
       startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'),
@@ -43,7 +53,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/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.ts

@@ -1,9 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-reports',
   templateUrl: './reports.component.html',
   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,11 @@
+@import '../../../../../styles/colors.scss';
+
+label {
+  width: 225px;
+}
+.selectUser {
+  display: inline-block;
+  width: 350px;
+  padding: 0 12px 20px 12px;
+}
+

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { UsersService } from 'src/app/modules/users/services/users.service';
+@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());
     });
   }