fix: TT 649 Display last 5 10 projects below Project Selection input box

Author: wilc0519

src/app/modules/customer-management/components/projects/components/store/project.actions.ts

@@ -8,6 +8,7 @@ export enum ProjectActionTypes {
   LOAD_CUSTOMER_PROJECTS = '[Projects] LOAD_CUSTOMER_PROJECTS',
   LOAD_CUSTOMER_PROJECTS_SUCCESS = '[Projects] LOAD_CUSTOMER_PROJECTS_SUCCESS',
   LOAD_CUSTOMER_PROJECTS_FAIL = '[Projects] LOAD_CUSTOMER_PROJECTS_FAIL',
+  LOAD_RECENT_PROJECTS = '[Projects] LOAD_RECENT_PROJECTS',
   LOAD_RECENT_PROJECTS_SUCCESS = '[Projects] LOAD_RECENT_PROJECTS_SUCCESS',
   LOAD_RECENT_PROJECTS_FAIL = '[Projects] LOAD_RECENT_PROJECTS_FAIL',
   CREATE_PROJECT = '[Projects] CREATE_PROJECT',
@@ -63,6 +64,11 @@ export class LoadCustomerProjectsFail implements Action {
   constructor(public error: string) {}
 }
 
+export class LoadRecentProjects implements Action {
+  public readonly type = ProjectActionTypes.LOAD_RECENT_PROJECTS;
+  constructor() {}
+}
+
 export class LoadRecentProjectsSuccess implements Action {
   readonly type = ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS;
   constructor(readonly payload: Project[]) {}
@@ -168,6 +174,7 @@ export type ProjectActions =
   | LoadCustomerProjectsSuccess
   | LoadCustomerProjectsFail
   | LoadRecentProjectsSuccess
+  | LoadRecentProjects
   | LoadRecentProjectsFail
   | CreateProject
   | CreateProjectSuccess

src/app/modules/customer-management/components/projects/components/store/project.effects.spec.ts

@@ -56,7 +56,7 @@ describe('ProjectEffects', () => {
   });
 
   it('action type is LOAD_RECENT_PROJECTS_SUCCESS when service is executed sucessfully', async () => {
-    actions$ = of({ type: ProjectActionTypes.LOAD_PROJECTS });
+    actions$ = of({ type: ProjectActionTypes.LOAD_RECENT_PROJECTS });
     const serviceSpy = spyOn(service, 'getRecentProjects');
     serviceSpy.and.returnValue(of(projects));
 
@@ -66,7 +66,7 @@ describe('ProjectEffects', () => {
   });
 
   it('action type is LOAD_RECENT_PROJECTS_FAIL when service fail in execution', async () => {
-    actions$ = of({ type: ProjectActionTypes.LOAD_PROJECTS });
+    actions$ = of({ type: ProjectActionTypes.LOAD_RECENT_PROJECTS });
     const serviceSpy = spyOn(service, 'getRecentProjects');
     serviceSpy.and.returnValue(throwError({ error: { message: 'fail!' } }));
     spyOn(toastrService, 'error');

src/app/modules/customer-management/components/projects/components/store/project.effects.ts

@@ -51,7 +51,7 @@ export class ProjectEffects {
 
   @Effect()
   loadRecentProjects$: Observable<Action> = this.actions$.pipe(
-    ofType(actions.ProjectActionTypes.LOAD_PROJECTS),
+    ofType(actions.ProjectActionTypes.LOAD_RECENT_PROJECTS),
     mergeMap(() =>
       this.projectService.getRecentProjects().pipe(
         map((projects) => {

src/app/modules/customer-management/components/projects/components/store/project.reducer.spec.ts

@@ -60,6 +60,12 @@ describe('projectReducer', () => {
     expect(state.customerProjects).toEqual([]);
   });
 
+  it('on LoadRecentProjects, isLoading is true', () => {
+    const action = new actions.LoadRecentProjects();
+    const state = projectReducer(initialState, action);
+    expect(state.isLoading).toEqual(true);
+  });
+
   it('on LoadRecentProjectsSuccess, projectsFound are saved in the store', () => {
     const projectsFound: Project[] = [{ id: '1', name: 'abc', description: 'xxx', status: 'active' }];
     const newState = initialState;

src/app/modules/customer-management/components/projects/components/store/project.reducer.ts

@@ -32,7 +32,7 @@ export const projectReducer = (state: ProjectState = initialState, action: Proje
       return {
         ...state,
         projects: action.payload,
-        isLoading: false
+        isLoading: false,
       };
 
     case ProjectActionTypes.LOAD_PROJECTS_FAIL: {
@@ -67,11 +67,17 @@ export const projectReducer = (state: ProjectState = initialState, action: Proje
       };
     }
 
+    case ProjectActionTypes.LOAD_RECENT_PROJECTS:
+      return {
+        ...state,
+        isLoading: true,
+      };
+
     case ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS:
       return {
         ...state,
         recentProjects: action.payload,
-        isLoading: false
+        isLoading: false,
       };
 
     case ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL: {

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html

@@ -1,3 +1,4 @@
+
 <form [formGroup]="projectsForm">
   <div class="form-group">
     <label>Project:</label>
@@ -11,7 +12,7 @@
         (search)="onSearch($event)"
         (change)="onSelect($event)"
         (close)="loadActiveTimeEntry()">
-        
+
         <ng-template ng-option-tmp let-item="item">
           <div class="flex flex-wrap flex-row justify-between">
             <div class="p-2 text-xs">
@@ -42,3 +43,46 @@
     </div>
   </div>
 </form>
+
+<div class="table-responsive">
+  <table class="table table-sm table-striped table-bordered mb-0">
+    <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col md-col">Latest projects you worked on</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="d-flex" *ngFor="let item of listRecentProjects" >
+        <td class="col md-col">
+          <div class="flex flex-wrap flex-row justify-between">
+            <div class="p-2 text-xs">
+              <span>{{item.customer.name}}</span> -
+              <strong><span>{{item.name}}</span></strong>
+            </div>
+            <div class="p-1 pr-2">
+              <button
+                *ngIf="showClockIn"
+                class="btn btn-sm btn-primary btn-select"
+                (click)="clockIn(item.id, item.customer.name, item.name)"
+              >
+                Clock In
+              </button>
+              <button
+                *ngIf="!showClockIn"
+                class="btn btn-sm btn-primary btn-select"
+                (click)="switch(item.id, item.customer.name, item.name)"
+              >
+                Switch</button
+              >&nbsp;
+              <button *ngIf="!showClockIn" class="btn btn-sm btn-update btn-select" (click)="updateProject(item.id)">
+                Update project
+              </button>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+
+  </table>
+  <br>
+</div>

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -68,14 +68,10 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
       this.activities = response;
     });
 
-    this.store.dispatch(new actions.LoadProjects());
+    this.store.dispatch(new actions.LoadRecentProjects());
     const recentProjects$ = this.store.pipe(select(getRecentProjects));
     this.recentProjectsSubscription = recentProjects$.subscribe((projects) => {
-      if (projects?.length > 0) {
-        this.listRecentProjects = projects;
-      }else{
-        this.listRecentProjects = this.listProjects;
-      }
+      this.listRecentProjects = projects;
       this.listProjectsShowed = this.listRecentProjects;
     });
 
@@ -119,19 +115,26 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
     };
     this.store.dispatch(new entryActions.ClockIn(entry));
     this.projectsForm.setValue({ project_id: `${customerName} - ${name}` });
+    setTimeout(() => {
+      this.store.dispatch(new actions.LoadRecentProjects());
+    }, 2000);
   }
 
   updateProject(selectedProject) {
     const entry = { id: this.activeEntry.id, project_id: selectedProject };
     this.store.dispatch(new entryActions.UpdateEntryRunning(entry));
     this.store.dispatch(new entryActions.LoadActiveEntry());
+    this.store.dispatch(new actions.LoadRecentProjects());
   }
 
   switch(selectedProject, customerName, name) {
     if (this.activeEntry.activity_id === null) {
       this.toastrService.error('Before switching, please select an activity');
     } else {
       this.store.dispatch(new entryActions.SwitchTimeEntry(this.activeEntry.id, selectedProject));
+      setTimeout(() => {
+        this.store.dispatch(new actions.LoadRecentProjects());
+      }, 2000);
       this.projectsForm.setValue({ project_id: `${customerName} - ${name}` });
     }
   }