fix: TT-208 display the required activities when clicking on time entry with inactive activity

Author: thegreatyamori

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

@@ -55,7 +55,7 @@
             formControlName="activity_id"
           >
             <option value="" selected="selected"></option>
-            <option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
+            <option *ngFor="let activity of activities$ | async" value="{{ activity.id }}">{{ activity.name }}</option>
           </select>
         </div>
         <div
@@ -141,7 +141,7 @@
             id="end_hour"
             class="timepicker-input"
             [class.timepicker-input--disabled]="!(project_id.value && project_name.value)"
-            ></ngx-timepicker-field>
+          ></ngx-timepicker-field>
         </div>
       </div>
 
@@ -161,26 +161,18 @@
         (technologyRemoved)="onTechnologiesUpdated($event)"
         [selectedTechnologies]="selectedTechnologies"
         #technologies
-        >
+      >
       </app-technologies>
 
       <div class="form-group text-left">
         <label for="NotesTextarea">Description:</label>
-        <textarea
-        maxlength="1500"
-        formControlName="description"
-        class="form-control"
-        id="NotesTextarea"
-        rows="3"
-        >
+        <textarea maxlength="1500" formControlName="description" class="form-control" id="NotesTextarea" rows="3">
         </textarea>
       </div>
     </fieldset>
   </div>
   <div class="modal-footer">
     <button type="submit" class="btn btn-primary">Save</button>
-    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
-      Close
-    </button>
+    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
 </form>

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

@@ -53,7 +53,10 @@ describe('DetailsFieldsComponent', () => {
       isLoading: false,
     },
     activities: {
-      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc', status: 'active' }],
+      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc', status: 'active' },
+      { id: 'fc5fab41-a21e-4155-9d05-511b956ebd07', tenant_id: 'ioet_1', deleted: null, name: 'def', status: 'active' },
+      { id: 'fc5fab41-a21e-4155-9d05-511b956ebd08', tenant_id: 'ioet_2', deleted: null, name: 'ghi', status: 'inactive' },
+      { id: 'fc5fab41-a21e-4155-9d05-511b956ebd09', tenant_id: 'ioet_3', deleted: null, name: 'jkl', status: 'active' }],
       isLoading: false,
       message: 'Data fetch successfully!',
       activityIdToEdit: '',
@@ -193,6 +196,7 @@ describe('DetailsFieldsComponent', () => {
     component.ngOnChanges();
     expect(component.shouldRestartEntry).toBeFalse();
     expect(component.entryForm.value).toEqual(initialData);
+    expect(component.activities$).toBe(undefined);
   });
 
   it('should emit ngOnChange with new data', () => {
@@ -215,6 +219,24 @@ describe('DetailsFieldsComponent', () => {
     expect(component.entryForm.value).toEqual(formValue);
   });
 
+  const activitiesParams = [
+    { select_activity_id: 'fc5fab41-a21e-4155-9d05-511b956ebd07', expected_size_activities: 3, title: 'active' },
+    { select_activity_id: 'fc5fab41-a21e-4155-9d05-511b956ebd08', expected_size_activities: 4, title: 'inactive' }
+  ];
+  activitiesParams.map(param => {
+    it(`should emit ngOnChange to set ${param.expected_size_activities} activities for select (${param.title} time entry clicked)`, () => {
+      component.entryToEdit = { ...entryToEdit, activity_id: param.select_activity_id };
+      spyOn(component.entryForm, 'patchValue');
+      component.ngOnChanges();
+
+      component.activities$.subscribe(items => {
+        console.log(items);
+
+        expect(items.length).toBe(param.expected_size_activities);
+      });
+    });
+  });
+
   it('should call createError ', () => {
     const childComponent = jasmine.createSpyObj('ChildComponent', ['closeModal']);
     component.closeModal = childComponent;
@@ -544,6 +566,16 @@ describe('DetailsFieldsComponent', () => {
     });
   });
 
+  it('should find an activity with given id & status: inactive', () => {
+
+    const expectedActivity = { id: 'fc5fab41-a21e-4155-9d05-511b956ebd08', tenant_id: 'ioet_2', deleted: null, name: 'ghi', status: 'inactive' };
+
+    component.entryToEdit = { ...entryToEdit, activity_id: 'fc5fab41-a21e-4155-9d05-511b956ebd08' };
+    spyOn(component.entryForm, 'patchValue');
+
+    const foundActivity = component.findInactiveActivity(state.activities.data);
+    expect(foundActivity).toEqual(expectedActivity);
+  });
   /*
    TODO As part of https://github.com/ioet/time-tracker-ui/issues/424 a new parameter was added to the details-field-component,
    and now these couple of tests are failing. A solution to this error might be generate a Test Wrapper Component. More details here:

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

@@ -4,9 +4,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import * as moment from 'moment';
 import { ToastrService } from 'ngx-toastr';
-import { filter } from 'rxjs/operators';
+import { filter, map, mergeMap } from 'rxjs/operators';
 import { getCreateError, getUpdateError } from 'src/app/modules/time-clock/store/entry.selectors';
-import { ActivityState, allActiveActivities, LoadActivities } from '../../../activities-management/store';
+import { ActivityState, allActiveActivities, allActivities, 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';
@@ -21,6 +21,7 @@ import { get } from 'lodash';
 import { DATE_FORMAT, DATE_FORMAT_YEAR } from 'src/environments/environment';
 import { TechnologiesComponent } from '../technologies/technologies.component';
 import { MatDatepicker } from '@angular/material/datepicker';
+import { Observable } from 'rxjs';
 
 type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
 @Component({
@@ -40,7 +41,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   selectedTechnologies: string[] = [];
   isLoading = false;
   listProjects: Project[] = [];
-  activities: Activity[] = [];
+  activities$: Observable<Activity[]>;
   goingToWorkOnThis = false;
   shouldRestartEntry = false;
 
@@ -79,10 +80,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     });
 
     this.store.dispatch(new LoadActivities());
-    const activities$ = this.store.pipe(select(allActiveActivities));
-    activities$.subscribe((response) => {
-      this.activities = response;
-    });
 
     const updateError$ = this.store.pipe(select(getUpdateError));
     updateError$.subscribe((updateError) => {
@@ -145,6 +142,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   ngOnChanges(): void {
     this.goingToWorkOnThis = this.entryToEdit ? this.entryToEdit.running : false;
     this.shouldRestartEntry = false;
+
     if (this.entryToEdit) {
       this.selectedTechnologies = this.entryToEdit.technologies;
       const projectFound = this.listProjects.find((project) => project.id === this.entryToEdit.project_id);
@@ -160,6 +158,17 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         uri: this.entryToEdit.uri,
         technology: '',
       });
+
+      this.activities$ = this.store.pipe(
+        select(allActiveActivities),
+        mergeMap(activeActivities => this.store.pipe(
+          select(allActivities),
+          map(activities => this.findInactiveActivity(activities) !== undefined
+            ? [...activeActivities, this.findInactiveActivity(activities)]
+            : activeActivities
+          )
+        ))
+      );
     } else {
       this.cleanForm();
     }
@@ -188,6 +197,12 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     this.cleanForm(true);
   }
 
+  findInactiveActivity(activities) {
+    return activities.find(activity => activity.status === 'inactive' &&
+      activity.id === this.entryToEdit.activity_id
+    );
+  }
+
   onTechnologiesUpdated($event: string[]) {
     this.selectedTechnologies = $event;
   }

src/app/modules/time-entries/pages/time-entries.component.html

@@ -12,11 +12,11 @@
       </button>
     </div>
   </div>
-  <div style="height: 15px;"></div>
+  <div style="height: 15px"></div>
   <app-month-picker (dateSelected)="dateSelected($event)"></app-month-picker>
-  <div style="height: 15px;"></div>
+  <div style="height: 15px"></div>
 
-  <table class="table table-sm table-striped mb-0" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
+  <table class="table table-sm table-striped mb-0" *ngIf="timeEntriesDataSource$ | async as dataSource">
     <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col">Date</th>
@@ -73,7 +73,7 @@ <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
           [entryToEdit]="entry"
           (saveEntry)="saveEntry($event)"
           (projectSelected)="projectSelected($event)"
-          [canMarkEntryAsWIP]='canMarkEntryAsWIP'
+          [canMarkEntryAsWIP]="canMarkEntryAsWIP"
           #detailsFields
         >
         </app-details-fields>