feat: TTL-910 add project dropdown

Author: mmaquina

src/app/app.module.ts

@@ -101,6 +101,7 @@ import { TimeRangeOptionsComponent } from './modules/reports/components/time-ran
 import { V2RedirectComponent } from './modules/v2-redirect/v2-redirect.component';
 import { SpinnerOverlayComponent } from './modules/shared/components/spinner-overlay/spinner-overlay.component';
 import { SpinnerInterceptor } from './modules/shared/interceptors/spinner.interceptor';
+import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -142,6 +143,7 @@ const maskConfig: Partial<IConfig> = {
     SubstractDatePipeDisplayAsFloat,
     TechnologiesComponent,
     SearchUserComponent,
+    SearchProjectComponent,
     TimeEntriesSummaryComponent,
     TimeDetailsPipe,
     InputLabelComponent,

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

@@ -1,6 +1,6 @@
 <div class="row scroll-table mt-5 ml-0">
   <app-search-user [users]="users" (selectedUserId)="user($event)"></app-search-user>
-
+  <app-search-project [projects]="listProjects" (selectedProjectId)="project($event)"></app-search-project>
   <table
     class="table table-striped mb-0"
     datatable

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

@@ -5,14 +5,15 @@ 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 { Entry, Project } 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, 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';
 import { ParseDateTimeOffset } from '../../../shared/formatters/parse-date-time-offset/parse-date-time-offset';
+import { LoadProjects, ProjectActionTypes } from 'src/app/modules/customer-management/components/projects/components/store/project.actions';
 
 @Component({
   selector: 'app-time-entries-table',
@@ -21,11 +22,13 @@ import { ParseDateTimeOffset } from '../../../shared/formatters/parse-date-time-
 })
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output() selectedUserId = new EventEmitter<string>();
+  @Output() selectedProjectId = new EventEmitter<string>();
 
   selectOptionValues = [15, 30, 50, 100, -1];
   selectOptionNames = [15, 30, 50, 100, 'All'];
   totalTimeSelected: moment.Duration;
   users: User[] = [];
+  projects: Project[] = [];
   removeFirstColumn = 'th:not(:first)';
 
   dtOptions: any = {
@@ -82,9 +85,13 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   resultSumEntriesSelected$: Observable<TotalHours>;
   totalHoursSubscription: Subscription;
   dateTimeOffset: ParseDateTimeOffset;
+  listProjects: Project[] = [];
 
-
-  constructor(private store: Store<EntryState>, private actionsSubject$: ActionsSubject, private storeUser: Store<User> ) {
+  constructor(private store: Store<EntryState>,
+              private actionsSubject$: ActionsSubject,
+              private storeUser: Store<User>,
+              private storeProject: Store<Project>
+    ) {
       this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
       this.resultSumEntriesSelected$ = this.store.pipe(select(getResultSumEntriesSelected));
       this.dateTimeOffset = new ParseDateTimeOffset();
@@ -102,6 +109,23 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       });
   }
 
+  uploadProjects(): void {
+    this.storeProject.dispatch(new LoadProjects());
+    this.actionsSubject$
+      .pipe(filter((action: any) => action.type === ProjectActionTypes.LOAD_PROJECTS_SUCCESS))
+      .subscribe((action) => {
+        const sortProjects = [...action.payload];
+        sortProjects.sort((a, b) => a.name.localeCompare(b.name));
+        this.projects = sortProjects;
+        this.projects = this.projects.filter(project => project.status === 'active');
+        this.projects.forEach((project) => {
+          const projectWithSearchField = { ...project };
+          projectWithSearchField.search_field = `${project.customer.name} - ${project.name}`;
+          this.listProjects.push(projectWithSearchField);
+        });
+      });
+  }
+
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
       this.totalHoursSubscription = this.resultSumEntriesSelected$.subscribe((actTotalHours) => {
@@ -112,6 +136,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       this.rerenderDataTable();
     });
     this.uploadUsers();
+    this.uploadProjects();
   }
 
   ngAfterViewInit(): void {
@@ -172,6 +197,10 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     this.selectedUserId.emit(userId);
   }
 
+  project(projectId: string) {
+    this.selectedProjectId.emit(projectId);
+  }
+
   sumHoursEntriesSelected(entry: Entry, checked: boolean){
     this.resultSumEntriesSelected = new TotalHours();
     const duration = moment.duration(moment(entry.end_date).diff(moment(entry.start_date)));

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

@@ -8,8 +8,16 @@ import { Component } from '@angular/core';
 export class ReportsComponent {
 
   userId: string;
+  projectId: string;
+  activityId: string;
 
   user(userId: string){
     this.userId = userId;
   }
+  activity(activityId: string){
+    this.activityId = activityId;
+  }
+  project(projectId: string){
+    this.projectId = projectId;
+  }
 }

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

@@ -0,0 +1,8 @@
+<div class="form-group" >
+  <label>Projects: </label>
+
+  <ng-select [(ngModel)]="selectedProject" [multiple]="false"  placeholder="Select project" (change)="updateProject()" class="selectProject">
+    <ng-option  *ngFor="let project of projects" value={{project.id}}> <strong>{{project.customer.name}}</strong> - {{project.name}}</ng-option >
+  </ng-select>
+
+</div>

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

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

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-search-project',
+  templateUrl: './search-project.component.html',
+  styleUrls: ['./search-project.component.scss'],
+})
+
+export class SearchProjectComponent {
+
+  readonly ALLOW_SELECT_MULTIPLE = false;
+  selectedProject: string[];
+
+  @Input() projects: string[] = [];
+
+  @Output() selectedProjectId = new EventEmitter<string[] | string>();
+
+  updateProject() {
+    this.selectedProjectId.emit(this.selectedProject.length === 0 ? '*' : this.selectedProject);
+  }
+}
+