feat: TT-208 show active activities in entry & details fields

Author: thegreatyamori

src/app/modules/activities-management/store/activity-management.reducers.spec.ts

@@ -127,11 +127,8 @@ describe('activityManagementReducer', () => {
     const currentState: ActivityState = { data: [activity], isLoading: false, message: '', activityIdToEdit: '1' };
     const activityEdited: Status = { id: '1', status: 'active' };
     const expectedActivity: Activity = { id: '1', name: 'Training', description: 'It is good for learning', status: 'active' };
-
     const action = new actions.UnarchiveActivitySuccess(activityEdited);
-
     const state = activityManagementReducer(currentState, action);
-    console.log(state.data);
 
     expect(state.data).toEqual([expectedActivity]);
     expect(state.isLoading).toBeFalse();

src/app/modules/activities-management/store/activity-management.selectors.spec.ts

@@ -10,20 +10,30 @@ describe('ActivityManagement Selectors', () => {
 
   it('returns the activity with id that matches from the list', () => {
     const activityId = 'id';
-    const activities = [{id: 'id', name: 'abc', description: 'xxx'},
-      {id: '2', name: 'xyz', description: 'yyy'}];
+    const activities = [{ id: 'id', name: 'abc', description: 'xxx' },
+    { id: '2', name: 'xyz', description: 'yyy' }];
     const activityFound = selectors.getActivityById.projector(activities, activityId);
     expect(activityFound).toEqual(activities[0]);
   });
 
   it('should return all the data in the state when the selector allActivities is called', () => {
-    const activities = [{id: 'id', name: 'abc', description: 'xxx'},
-      {id: '2', name: 'xyz', description: 'yyy'}];
-    const activityState = {data: activities};
+    const activities = [{ id: 'id', name: 'abc', description: 'xxx' },
+    { id: '2', name: 'xyz', description: 'yyy' }];
+    const activityState = { data: activities };
 
     expect(selectors.allActivities.projector(activityState)).toBe(activities);
   });
 
+  fit('should return all active data in the state when the selector allActiveActivities is called', () => {
+    const activities = [{ id: 'id', name: 'abc', description: 'xxx', status: 'active' },
+    { id: '2', name: 'xyz', description: 'yyy', status: 'inactive' },
+    { id: '3', name: 'xyzw', description: 'www', status: 'active' }];
+    const activityState = { data: activities };
+    const filteredActivities = activities.filter((item) => item.status === 'active');
+
+    expect(selectors.allActiveActivities.projector(activityState)).toEqual(filteredActivities);
+  });
+
   it('should select isLoading when the selector getIsLoading is called', () => {
     const isLoadingValue = true;
     const activityState = { isLoading: isLoadingValue };

src/app/modules/activities-management/store/activity-management.selectors.ts

@@ -5,13 +5,15 @@ const getActivityState = createFeatureSelector<ActivityState>('activities');
 
 export const allActivities = createSelector(getActivityState, (state: ActivityState) => state?.data);
 
+export const allActiveActivities = createSelector(getActivityState, (state: ActivityState) => {
+  return state?.data.filter((item) => item.status !== 'inactive');
+});
+
 export const activityIdToEdit = createSelector(getActivityState, (state: ActivityState) => state?.activityIdToEdit);
 
 export const getActivityById = createSelector(allActivities, activityIdToEdit, (activities, activityId) => {
   if (activities && activityId) {
-    return activities.find((activity) => {
-      return activity.id === activityId;
-    });
+    return activities.find((activity) => activity.id === activityId);
   }
 });
 

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -53,7 +53,7 @@ describe('DetailsFieldsComponent', () => {
       isLoading: false,
     },
     activities: {
-      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc' }],
+      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc', status: 'active' }],
       isLoading: false,
       message: 'Data fetch successfully!',
       activityIdToEdit: '',
@@ -138,9 +138,9 @@ describe('DetailsFieldsComponent', () => {
   it('onSelectedProject project id and name are set using event data', () => {
     spyOn(component.entryForm, 'patchValue');
 
-    component.onSelectedProject( {id: 'id', search_field: 'foo'} );
+    component.onSelectedProject({ id: 'id', search_field: 'foo' });
 
-    expect(component.entryForm.patchValue).toHaveBeenCalledWith( { project_id: 'id', project_name: 'foo', } );
+    expect(component.entryForm.patchValue).toHaveBeenCalledWith({ project_id: 'id', project_name: 'foo', });
   });
 
   it('if form is invalid then saveEntry is not emited', () => {
@@ -296,7 +296,7 @@ describe('DetailsFieldsComponent', () => {
 
     component.onGoingToWorkOnThisChange({ currentTarget: { checked: false } });
 
-    expect(component.entryForm.patchValue).toHaveBeenCalledWith( { end_date: '2020-12-30', end_hour: '09:45', } );
+    expect(component.entryForm.patchValue).toHaveBeenCalledWith({ end_date: '2020-12-30', end_hour: '09:45', });
   });
 
   it('when creating a new entry, then the new entry should be marked as not run', () => {
@@ -367,7 +367,7 @@ describe('DetailsFieldsComponent', () => {
     const startHour = moment().subtract(3, 'hours').format('HH:mm:ss');
     const expectedStartDate = new Date(`${currentDate}T${startHour.trim()}`);
 
-    component.entryToEdit = {...entryToEdit, start_date: expectedStartDate };
+    component.entryToEdit = { ...entryToEdit, start_date: expectedStartDate };
     fixture.componentInstance.ngOnChanges();
 
     component.entryForm.patchValue({ description: 'test' });
@@ -378,23 +378,23 @@ describe('DetailsFieldsComponent', () => {
   it('should modify the start_date when start_hour has been modified', () => {
     const startDate = new Date(mockCurrentDate);
 
-    component.entryToEdit = {...entryToEdit, start_date: startDate };
+    component.entryToEdit = { ...entryToEdit, start_date: startDate };
     fixture.componentInstance.ngOnChanges();
 
     const updatedStartDate = moment(startDate).subtract(1, 'hours');
-    const updatedStartHour =  updatedStartDate.format('HH:mm');
-    component.entryForm.patchValue({start_hour: updatedStartHour});
+    const updatedStartHour = updatedStartDate.format('HH:mm');
+    component.entryForm.patchValue({ start_hour: updatedStartHour });
 
     const expectedStartDate = moment(updatedStartDate).seconds(0).millisecond(0).toISOString();
     expect(component.dateToSubmit('start_date', 'start_hour')).toEqual(expectedStartDate);
-   });
+  });
 
   it('should not modify the end_date when end_hour has not been modified', () => {
     const currentDate = moment().format('YYYY-MM-DD');
     const endHour = moment().subtract(3, 'hours').format('HH:mm:ss');
     const expectedEndDate = new Date(`${currentDate}T${endHour.trim()}`);
 
-    component.entryToEdit = {...entryToEdit, end_date: expectedEndDate };
+    component.entryToEdit = { ...entryToEdit, end_date: expectedEndDate };
     fixture.componentInstance.ngOnChanges();
 
     component.entryForm.patchValue({ description: 'test' });
@@ -405,16 +405,16 @@ describe('DetailsFieldsComponent', () => {
   it('should modify the end_date when end_hour has been modified', () => {
     const endDate = new Date(mockCurrentDate);
 
-    component.entryToEdit = {...entryToEdit, end_date: endDate };
+    component.entryToEdit = { ...entryToEdit, end_date: endDate };
     fixture.componentInstance.ngOnChanges();
 
     const updatedEndDate = moment(endDate).subtract(1, 'hours');
-    const updatedEndHour =  updatedEndDate.format('HH:mm');
-    component.entryForm.patchValue({end_hour: updatedEndHour});
+    const updatedEndHour = updatedEndDate.format('HH:mm');
+    component.entryForm.patchValue({ end_hour: updatedEndHour });
 
     const expectedEndDate = moment(updatedEndDate).seconds(0).millisecond(0).toISOString();
     expect(component.dateToSubmit('end_date', 'end_hour')).toEqual(expectedEndDate);
-   });
+  });
 
   it('displays error message when the date selected is in the future', () => {
     spyOn(toastrServiceStub, 'error');
@@ -451,8 +451,8 @@ describe('DetailsFieldsComponent', () => {
   it('should emit projectSelected event', () => {
     spyOn(component.projectSelected, 'emit');
     const item = {
-      id : 'id',
-      search_field : 'TimeTracker'
+      id: 'id',
+      search_field: 'TimeTracker'
     };
     component.onSelectedProject(item);
 
@@ -495,13 +495,13 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('on the input with id #start_date we could get the id and max value', () => {
-   fixture.detectChanges();
-   const expectedDate = new Date().toISOString().split('T')[0];
-   const startDateInput: HTMLInputElement = fixture.debugElement.
-     nativeElement.querySelector(`input[id="start_date"],input[max="${component.getCurrentDate()}"]`);
+    fixture.detectChanges();
+    const expectedDate = new Date().toISOString().split('T')[0];
+    const startDateInput: HTMLInputElement = fixture.debugElement.
+      nativeElement.querySelector(`input[id="start_date"],input[max="${component.getCurrentDate()}"]`);
 
-   expect(startDateInput.id).toEqual('start_date');
-   expect(startDateInput.max).toEqual(expectedDate);
+    expect(startDateInput.id).toEqual('start_date');
+    expect(startDateInput.max).toEqual(expectedDate);
   });
 
   it('on the input with id #end_date we could get the current Date ', () => {

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -6,7 +6,7 @@ import * as moment from 'moment';
 import { ToastrService } from 'ngx-toastr';
 import { filter } from 'rxjs/operators';
 import { getCreateError, getUpdateError } from 'src/app/modules/time-clock/store/entry.selectors';
-import { ActivityState, allActivities, LoadActivities } from '../../../activities-management/store';
+import { ActivityState, allActiveActivities, LoadActivities } from '../../../activities-management/store';
 import * as projectActions from '../../../customer-management/components/projects/components/store/project.actions';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { getProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
@@ -78,7 +78,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     });
 
     this.store.dispatch(new LoadActivities());
-    const activities$ = this.store.pipe(select(allActivities));
+    const activities$ = this.store.pipe(select(allActiveActivities));
     activities$.subscribe((response) => {
       this.activities = response;
     });
@@ -149,7 +149,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         technology: '',
       });
     } else {
-        this.cleanForm();
+      this.cleanForm();
     }
   }
 
@@ -263,8 +263,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     this.saveEntry.emit({ entry, shouldRestartEntry: this.shouldRestartEntry });
   }
 
-  onclickFormAction(isProjectSelected: boolean){
-    if (isProjectSelected){
+  onclickFormAction(isProjectSelected: boolean) {
+    if (isProjectSelected) {
       this.toastrService.warning('Please, first select a project');
     }
   }