fix: #151 clock out

src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -1,8 +1,9 @@
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { allActivities } from './../../store/activity-management.selectors';
 import { ActivityState } from './../../store/activity-management.reducers';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeleteActivity, SetActivityToEdit } from './../../store/activity-management.actions';
 import { ActivityListComponent } from './activity-list.component';
 
 describe('ActivityListComponent', () => {
@@ -47,6 +48,22 @@ describe('ActivityListComponent', () => {
     expect(store.dispatch).toHaveBeenCalled();
   });
 
+  it('deleteActivity, dispatchs DeleteActivity action', () => {
+    spyOn(store, 'dispatch');
+
+    component.deleteActivity('id');
+
+    expect(store.dispatch).toHaveBeenCalledWith(new DeleteActivity('id'));
+  });
+
+  it('updateActivity, dispatchs SetActivityToEdit action', () => {
+    spyOn(store, 'dispatch');
+
+    component.updateActivity('id');
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetActivityToEdit('id'));
+  });
+
   it('onInit, activities field is populated with data from store', () => {
     component.ngOnInit();
 

src/app/modules/shared/components/modal/modal.component.html

@@ -7,11 +7,11 @@ <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
       </button>
     </div>
     <div class="modal-body">
-      Are you sure you want to delete <b>{{ list.name || list.project }}</b> entry?
+      Are you sure you want to delete <b>{{ list.name }}</b> entry?
     </div>
     <div class="modal-footer">
       <button #cancelDeleteModal type="button" class="btn cancel-button-style" data-dismiss="modal">Cancel</button>
-      <button (click)="removeListById(list.id)" type="button" class="btn delete-button-style">Delete</button>
+      <button type="button" class="btn delete-button-style">Delete</button>
     </div>
   </div>
 </div>

src/app/modules/shared/components/modal/modal.component.spec.ts

@@ -22,25 +22,4 @@ describe('ModalComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should emit removeProject event #removedProject', () => {
-    const merged = {
-      id: '1',
-      name: 'app 4',
-      description: 'It is a good app',
-      project_type_id: '123',
-      completed: true,
-      project: 'ErnstYoung',
-      startDate: '2020-02-05T15:36:15.887Z',
-      endDate: '2020-02-05T18:36:15.887Z',
-      activity: 'development',
-      technologies: ['Angular', 'TypeScript'],
-    };
-
-    spyOn(component.removeList, 'emit');
-    component.list = merged;
-    fixture.detectChanges();
-    component.removeListById(merged.id);
-    expect(component.removeList.emit).toHaveBeenCalled();
-    component.cancelDeleteModal.nativeElement.click();
-  });
 });

src/app/modules/shared/components/modal/modal.component.ts

@@ -24,9 +24,4 @@ export class ModalComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void { }
-
-  removeListById(projectId: string) {
-    this.removeList.emit(projectId);
-    this.cancelDeleteModal.nativeElement.click();
-  }
 }

src/app/modules/shared/models/entry.model.ts

@@ -1,12 +1,12 @@
 export interface Entry {
   id: string;
-  project: string;
-  startDate: string;
-  endDate: string;
+  start_date: Date;
+  end_date: Date;
   activity: string;
   technologies: string[];
   comments?: string;
   uri?: string;
+  project_id?: string;
 }
 
 export interface NewEntry {

src/app/modules/shared/store/technology.effects.ts

@@ -15,7 +15,7 @@ export class TechnologyEffects {
     ofType(actions.TechnologyActionTypes.FIND_TECHNOLOGIES),
     map((action: actions.FindTechnology) => action.payload),
     mergeMap((value) =>
-      this.technologyService.getTechnologies(value).pipe(
+      this.technologyService.getTechnologies(value.toLowerCase()).pipe(
         map((technology) => {
           return new actions.FindTechnologySuccess(technology);
         }),

src/app/modules/time-clock/components/entry-fields/entry-fields.component.html

@@ -38,21 +38,25 @@
       {{ item.name }}
     </div>
   </div>
-  <div class="tags-content d-flex flex-wrap">
+  <div class="tags-content d-flex flex-wrap" *ngIf="selectedTechnology.length">
     <div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
       <span class="mr-3">{{ technology }}</span>
       <i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
     </div>
   </div>
 
+  <div class="form-group" *ngIf="selectedTechnology.length === 0">
+    <!-- empty-space -->
+  </div>
+
   <div class="form-group text-left">
     <label for="NotesTextarea">Description</label>
     <textarea
       (blur)="onSubmit()"
       formControlName="description"
       class="form-control"
       id="NotesTextarea"
-      rows="3"
-    ></textarea>
+      rows="3">
+    </textarea>
   </div>
 </form>

src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts

@@ -7,7 +7,6 @@ import { allTechnologies } from '../../../shared/store/technology.selectors';
 import { EntryFieldsComponent } from './entry-fields.component';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { allProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
-import { allEntries } from '../../store/entry.selectors';
 import * as actions from '../../../shared/store/technology.actions';
 import * as entryActions from '../../store/entry.actions';
 
@@ -18,7 +17,6 @@ describe('EntryFieldsComponent', () => {
   let store: MockStore<Merged>;
   let mockTechnologySelector;
   let mockProjectsSelector;
-  let mockEntrySelector;
   let length;
 
   const state = {
@@ -68,7 +66,6 @@ describe('EntryFieldsComponent', () => {
     store = TestBed.inject(MockStore);
     mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);
     mockProjectsSelector = store.overrideSelector(allProjects, state.projects);
-    mockEntrySelector = store.overrideSelector(allEntries, state.entries);
   }));
 
   beforeEach(() => {

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { getActiveTimeEntry } from './../../store/entry.selectors';
+import { Component, OnInit, ViewChild, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
@@ -10,7 +11,6 @@ import { ProjectState } from '../../../customer-management/components/projects/c
 import { TechnologyState } from '../../../shared/store/technology.reducers';
 import { LoadActivities, ActivityState, allActivities } from '../../../activities-management/store';
 
-import { allEntries } from '../../store/entry.selectors';
 import * as entryActions from '../../store/entry.actions';
 
 type Merged = TechnologyState & ProjectState & ActivityState;
@@ -21,6 +21,7 @@ type Merged = TechnologyState & ProjectState & ActivityState;
   styleUrls: ['./entry-fields.component.scss'],
 })
 export class EntryFieldsComponent implements OnInit {
+
   @ViewChild('list') list: ElementRef;
   entryForm: FormGroup;
   technology: Technology;
@@ -57,15 +58,17 @@ export class EntryFieldsComponent implements OnInit {
       this.activities = response;
     });
 
-    const activeEntry$ = this.store.pipe(select(allEntries));
+    const activeEntry$ = this.store.pipe(select(getActiveTimeEntry));
     activeEntry$.subscribe((response) => {
-      this.activeEntry = response.active;
-      this.setDataToUpdate(this.activeEntry);
-      this.newData = {
-        id: this.activeEntry.id,
-        project_id: this.activeEntry.project_id,
-        uri: this.activeEntry.uri,
-      };
+      if (response) {
+        this.activeEntry = response;
+        this.setDataToUpdate(this.activeEntry);
+        this.newData = {
+          id: this.activeEntry.id,
+          project_id: this.activeEntry.project_id,
+          uri: this.activeEntry.uri,
+        };
+      }
     });
   }
 
@@ -92,7 +95,6 @@ export class EntryFieldsComponent implements OnInit {
 
   setTechnology(name: string) {
     const index = this.selectedTechnology.indexOf(name);
-
     if (index > -1) {
       this.removeTag(index);
     } else if (this.selectedTechnology.length < 10) {
@@ -111,4 +113,5 @@ export class EntryFieldsComponent implements OnInit {
   onSubmit() {
     this.store.dispatch(new entryActions.UpdateActiveEntry({ ...this.newData, ...this.entryForm.value }));
   }
+
 }

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

@@ -6,7 +6,6 @@ import { ProjectListHoverComponent } from './project-list-hover.component';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { allProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
 import { FilterProjectPipe } from '../../../shared/pipes';
-import { NewEntry } from '../../../shared/models';
 import * as action from '../../store/entry.actions';
 
 describe('ProjectListHoverComponent', () => {
@@ -54,22 +53,11 @@ describe('ProjectListHoverComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should set selectedId with Id and dispatch CreateEntry action', () => {
+  it('clock-in dispatchs a new action', () => {
     spyOn(store, 'dispatch');
-    const id = 'P1';
-    const entryData: NewEntry = {
-      project_id: id,
-      start_date: new Date().toISOString(),
-    };
-    component.clockIn(id);
 
-    expect(store.dispatch).toHaveBeenCalledWith(new action.CreateEntry(entryData));
-    expect(component.selectedId).toBe(id);
-  });
+    component.clockIn('id');
 
-  it('should emit showFields event', () => {
-    const id = 'P1';
-    component.showFields.subscribe((showFields: boolean) => expect(showFields).toEqual(true));
-    component.clockIn(id);
+    expect(store.dispatch).toHaveBeenCalledWith(new action.CreateEntry({project_id: 'id', start_date: new Date().toISOString() }));
   });
 });

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

@@ -1,20 +1,19 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
+
+import { getActiveTimeEntry } from './../../store/entry.selectors';
 import { Project } from 'src/app/modules/shared/models';
 import { allProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import * as actions from '../../../customer-management/components/projects/components/store/project.actions';
 import * as entryActions from '../../store/entry.actions';
 
-import { selectActiveEntry } from '../../store/entry.selectors';
-
 @Component({
   selector: 'app-project-list-hover',
   templateUrl: './project-list-hover.component.html',
   styleUrls: ['./project-list-hover.component.scss'],
 })
 export class ProjectListHoverComponent implements OnInit {
-  @Output() showFields = new EventEmitter<boolean>();
 
   selectedId: string;
   listProjects: Project[] = [];
@@ -24,7 +23,7 @@ export class ProjectListHoverComponent implements OnInit {
   keyword = 'name';
   nameActiveProject: string;
 
-  constructor(private store: Store<ProjectState>) {}
+  constructor(private store: Store<ProjectState>) { }
 
   ngOnInit(): void {
     this.store.dispatch(new actions.LoadProjects());
@@ -33,22 +32,30 @@ export class ProjectListHoverComponent implements OnInit {
     projects$.subscribe((response) => {
       this.isLoading = response.isLoading;
       this.listProjects = response.projectList;
+      this.loadActiveTimeEntry();
     });
 
-    this.store.dispatch(new entryActions.LoadActiveEntry());
-    const activeEntry$ = this.store.pipe(select(selectActiveEntry));
+  }
 
-    activeEntry$.subscribe((response) => {
-      if (response) {
-        this.nameActiveProject = response.name;
-        this.showFields.emit(true);
+  private loadActiveTimeEntry() {
+    this.store.dispatch(new entryActions.LoadActiveEntry());
+    const activeEntry$ = this.store.pipe(select(getActiveTimeEntry));
+    activeEntry$.subscribe((activeEntry) => {
+      if (activeEntry) {
+        for (const project of this.listProjects) {
+          if (project.id === activeEntry.project_id) {
+            this.nameActiveProject = project.name;
+            break;
+          }
+        }
+      } else {
+        this.nameActiveProject = null;
       }
     });
   }
 
   clockIn(id: string) {
     const newEntry = { project_id: id, start_date: new Date().toISOString() };
     this.store.dispatch(new entryActions.CreateEntry(newEntry));
-    this.selectedId = id;
   }
 }