feat: TTL-910 add activity and project filters

Author: Santiago220991

src/app/app.module.ts

@@ -102,6 +102,7 @@ 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';
+import { SearchActivityComponent } from './modules/shared/components/search-activity/search-activity.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -144,6 +145,7 @@ const maskConfig: Partial<IConfig> = {
     TechnologiesComponent,
     SearchUserComponent,
     SearchProjectComponent,
+    SearchActivityComponent,
     TimeEntriesSummaryComponent,
     TimeDetailsPipe,
     InputLabelComponent,

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

@@ -1,6 +1,7 @@
 <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>
+  <app-search-activity [activities]="activities" (selectedActivityId)="activity($event)"></app-search-activity>
   <table
     class="table table-striped mb-0"
     datatable

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

@@ -5,15 +5,19 @@ import { DataTableDirective } from 'angular-datatables';
 import * as moment from 'moment';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { Entry, Project } from 'src/app/modules/shared/models';
+import { Activity, 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';
+import {
+  LoadProjects,
+  ProjectActionTypes,
+} from 'src/app/modules/customer-management/components/projects/components/store/project.actions';
+import { ActivityManagementActionTypes, LoadActivities } from 'src/app/modules/activities-management/store';
 
 @Component({
   selector: 'app-time-entries-table',
@@ -23,12 +27,14 @@ import { LoadProjects, ProjectActionTypes } from 'src/app/modules/customer-manag
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output() selectedUserId = new EventEmitter<string>();
   @Output() selectedProjectId = new EventEmitter<string>();
+  @Output() selectedActivityId = new EventEmitter<string>();
 
   selectOptionValues = [15, 30, 50, 100, -1];
   selectOptionNames = [15, 30, 50, 100, 'All'];
   totalTimeSelected: moment.Duration;
   users: User[] = [];
   projects: Project[] = [];
+  activities: Activity[] = [];
   removeFirstColumn = 'th:not(:first)';
 
   dtOptions: any = {
@@ -40,7 +46,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       {
         text: 'Column Visibility' + ' ▼',
         extend: 'colvis',
-        columns: ':not(.hidden-col)'
+        columns: ':not(.hidden-col)',
       },
       {
         extend: 'print',
@@ -52,27 +58,34 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
         extend: 'excel',
         exportOptions: {
           format: {
-            body: this.bodyExportOptions
+            body: this.bodyExportOptions,
           },
           columns: this.removeFirstColumn,
         },
         text: 'Excel',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
       },
       {
         extend: 'csv',
         exportOptions: {
           format: {
-            body: this.bodyExportOptions
+            body: this.bodyExportOptions,
           },
           columns: this.removeFirstColumn,
         },
         text: 'CSV',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
       },
     ],
-    columnDefs: [{ type: 'date', targets: 3}, {orderable: false, targets: [0]}],
-    order: [[1, 'asc'], [2, 'desc'], [4, 'desc']]
+    columnDefs: [
+      { type: 'date', targets: 3 },
+      { orderable: false, targets: [0] },
+    ],
+    order: [
+      [1, 'asc'],
+      [2, 'desc'],
+      [4, 'desc'],
+    ],
   };
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
@@ -87,15 +100,17 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   dateTimeOffset: ParseDateTimeOffset;
   listProjects: Project[] = [];
 
-  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();
-      this.resultSumEntriesSelected = new TotalHours();
+  constructor(
+    private store: Store<EntryState>,
+    private actionsSubject$: ActionsSubject,
+    private storeUser: Store<User>,
+    private storeProject: Store<Project>,
+    private storeActivity: Store<Activity>
+  ) {
+    this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
+    this.resultSumEntriesSelected$ = this.store.pipe(select(getResultSumEntriesSelected));
+    this.dateTimeOffset = new ParseDateTimeOffset();
+    this.resultSumEntriesSelected = new TotalHours();
   }
 
   uploadUsers(): void {
@@ -117,7 +132,18 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
         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 = this.projects.filter((project) => project.status === 'active');
+        this.projects.sort((a, b) => {
+          const x = a.customer.name.toLowerCase();
+          const y = b.customer.name.toLowerCase();
+          if (x > y) {
+            return 1;
+          }
+          if (x < y) {
+            return -1;
+          }
+          return 0;
+        });
         this.projects.forEach((project) => {
           const projectWithSearchField = { ...project };
           projectWithSearchField.search_field = `${project.customer.name} - ${project.name}`;
@@ -126,17 +152,29 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       });
   }
 
+  uploadActivities(): void {
+    this.storeActivity.dispatch(new LoadActivities());
+    this.actionsSubject$
+      .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS))
+      .subscribe((action) => {
+        const sortActivities = [...action.payload];
+        sortActivities.sort((a, b) => a.name.localeCompare(b.name));
+        this.activities = sortActivities;
+      });
+  }
+
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
       this.totalHoursSubscription = this.resultSumEntriesSelected$.subscribe((actTotalHours) => {
-            this.resultSumEntriesSelected = actTotalHours;
-            this.totalTimeSelected = moment.duration(0);
-          });
+        this.resultSumEntriesSelected = actTotalHours;
+        this.totalTimeSelected = moment.duration(0);
+      });
       this.sumDates(ds.data);
       this.rerenderDataTable();
     });
     this.uploadUsers();
     this.uploadProjects();
+    this.uploadActivities();
   }
 
   ngAfterViewInit(): void {
@@ -172,20 +210,17 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     return data.toString().replace(/<((.|\n){0,200}?)>/gi, '') || '';
   }
 
-
   sumDates(arrayData: Entry[]): TotalHours {
     this.resultSum = new TotalHours();
     const arrayDurations = new Array();
-    arrayData.forEach(entry => {
+    arrayData.forEach((entry) => {
       const start = moment(entry.end_date).diff(moment(entry.start_date));
       arrayDurations.push(moment.utc(start).format('HH:mm:ss'));
     });
 
-    const totalDurations = arrayDurations.slice(1)
-      .reduce((prev, cur) => {
-        return prev.add(cur);
-      },
-        moment.duration(arrayDurations[0]));
+    const totalDurations = arrayDurations.slice(1).reduce((prev, cur) => {
+      return prev.add(cur);
+    }, moment.duration(arrayDurations[0]));
     const daysInHours = totalDurations.days() * 24;
     this.resultSum.hours = totalDurations.hours() + daysInHours;
     this.resultSum.minutes = totalDurations.minutes();
@@ -201,7 +236,11 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     this.selectedProjectId.emit(projectId);
   }
 
-  sumHoursEntriesSelected(entry: Entry, checked: boolean){
+  activity(activityId: string) {
+    this.selectedActivityId.emit(activityId);
+  }
+
+  sumHoursEntriesSelected(entry: Entry, checked: boolean) {
     this.resultSumEntriesSelected = new TotalHours();
     const duration = moment.duration(moment(entry.end_date).diff(moment(entry.start_date)));
     this.totalTimeSelected = checked ? this.totalTimeSelected.add(duration) : this.totalTimeSelected.subtract(duration);

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

@@ -25,6 +25,8 @@ import { TimeRangeHeaderComponent } from './time-range-header/time-range-header.
 })
 export class TimeRangeCustomComponent implements OnInit, OnChanges {
   @Input() userId: string;
+  @Input() projectId: string;
+  @Input() activityId: string;
   customHeader = TimeRangeHeaderComponent;
   range = new FormGroup({
     start: new FormControl(null),
@@ -42,6 +44,12 @@ export class TimeRangeCustomComponent implements OnInit, OnChanges {
     if (!changes.userId.firstChange){
       this.onSubmit();
     }
+    if (!changes.projectId.firstChange){
+      this.onSubmit();
+    }
+    if (!changes.activityId.firstChange){
+      this.onSubmit();
+    }
   }
 
   setInitialDataOnScreen() {
@@ -62,7 +70,7 @@ export class TimeRangeCustomComponent implements OnInit, OnChanges {
       this.store.dispatch(new entryActions.LoadEntriesByTimeRange({
         start_date: moment(this.range.getRawValue().start).startOf('day'),
         end_date: moment(this.range.getRawValue().end).endOf('day'),
-      }, this.userId));
+      }, this.userId, this.projectId, this.activityId));
     }
   }
 

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

@@ -16,6 +16,8 @@ import { DateAdapter } from '@angular/material/core';
 export class TimeRangeFormComponent implements OnInit, OnChanges {
 
   @Input() userId: string;
+  @Input() projectId: string;
+  @Input() activityId: string;
 
   public reportForm: FormGroup;
   private startDate = new FormControl('');
@@ -37,6 +39,12 @@ export class TimeRangeFormComponent implements OnInit, OnChanges {
     if (!changes.userId.firstChange){
       this.onSubmit();
     }
+    if (!changes.projectId.firstChange){
+      this.onSubmit();
+    }
+    if (!changes.activityId.firstChange){
+      this.onSubmit();
+    }
   }
 
   setInitialDataOnScreen() {
@@ -56,7 +64,7 @@ export class TimeRangeFormComponent implements OnInit, OnChanges {
       this.store.dispatch(new entryActions.LoadEntriesByTimeRange({
         start_date: moment(this.startDate.value).startOf('day'),
         end_date: moment(this.endDate.value).endOf('day'),
-      }, this.userId));
+      }, this.userId, this.projectId, this.activityId));
     }
   }
 }

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

@@ -1,2 +1,2 @@
-<app-time-range-custom [userId]="userId"></app-time-range-custom>
-<app-time-entries-table (selectedUserId)="user($event)"></app-time-entries-table>
+<app-time-range-custom [userId]="userId" [projectId]="projectId" [activityId]="activityId"></app-time-range-custom>
+<app-time-entries-table (selectedUserId)="user($event)" (selectedProjectId)="project($event)" (selectedActivityId)="activity($event)"></app-time-entries-table>

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

@@ -0,0 +1,8 @@
+<div class="form-group" >
+  <label>Activity: </label>
+
+  <ng-select [(ngModel)]="selectedActivity" [multiple]="false"  placeholder="Select activity" (change)="updateActivity()" class="selectActivity">
+    <ng-option  *ngFor="let activity of activities" value={{activity.id}}>{{activity.name}}</ng-option >
+  </ng-select>
+
+</div>

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

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

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-search-activity',
+  templateUrl: './search-activity.component.html',
+  styleUrls: ['./search-activity.component.scss'],
+})
+
+export class SearchActivityComponent {
+
+  readonly ALLOW_SELECT_MULTIPLE = false;
+  selectedActivity: string;
+
+  @Input() activities: string[] = [];
+
+  @Output() selectedActivityId = new EventEmitter<string>();
+
+  updateActivity() {
+    this.selectedActivityId.emit(this.selectedActivity || '*' );
+  }
+}
+

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

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