Merge pull request #262 from ioet/260-replace-autocomplete-by-select

fix: #260 convert autocomplete into select, removing flaky test on cl…

Author: enriquezrene

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

@@ -154,7 +154,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
 
   closeEntryModal() {
     this.entryForm.reset();
-    this.closeModal.nativeElement.click();
+    this.closeModal?.nativeElement.click();
   }
 
   onSubmit() {

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

@@ -1,39 +1,10 @@
-<div class="ng-autocomplete">
-  <ng-autocomplete
-    *ngIf="nameActiveProject; else notActiveProject"
-    class="autocomplete"
-    (selected)="showButton = ''"
-    [initialValue]="nameActiveProject"
-    [data]="listProjects && listProjects"
-    [searchKeyword]="keyword"
-    [itemTemplate]="itemTemplate"
-    [notFoundTemplate]="notFoundTemplate"
-  >
-  </ng-autocomplete>
-  <ng-template #notActiveProject>
-    <ng-autocomplete
-      class="autocomplete"
-      (selected)="showButton = ''"
-      [data]="listProjects && listProjects"
-      [searchKeyword]="keyword"
-      [itemTemplate]="itemTemplate"
-      [notFoundTemplate]="notFoundTemplate"
-    >
-    </ng-autocomplete>
-  </ng-template>
-  <ng-template #itemTemplate let-item>
-    <div class="d-flex">
-      <div
-        [innerHTML]="item.name"
-        (mouseenter)="showButton = item.name"
-        (mouseleave)="showButton = ''"
-        (click)="clockIn(item.id)"
-        class="text-left w-100 py-2 px-3"
-      ></div>
-      <span *ngIf="showButton === item.name" class="badge badge-light d-flex align-items-center m-2">Clock In</span>
-    </div>
-  </ng-template>
-  <ng-template #notFoundTemplate let-notFound>
-    <div [innerHTML]="notFound"></div>
-  </ng-template>
-</div>
+<form [formGroup]="projectsForm" (ngSubmit)="clockIn()">
+  <div class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+    <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
+  </div>
+    <select (change)="clockIn()" formControlName="project_id" class="form-control">
+      <option *ngFor="let project of listProjects" value="{{project.id}}">{{ project.name }}</option>
+    </select>
+  </div>
+</form>

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

@@ -1,38 +1,7 @@
 @import '../../../../../styles/colors.scss';
 
-.content-projects {
-  max-height: 10rem;
-  overflow-x: auto;
-
-  li {
-    display: flex;
-    cursor: pointer;
-    font-size: 0.8rem;
-    padding: 0.5rem 0.8rem;
-  }
-}
-
-.button-clockIn {
-  font-size: 0.7rem;
-  padding: 0 0.3rem;
-}
-
-.ng-autocomplete {
-  width: 100%;
-}
-
-.autocomplete::ng-deep .autocomplete-container {
-  border: 1px solid #ced4da;
-  border-radius: 0 0.25rem 0.25rem 0;
-  box-shadow: none;
-  height: 2rem;
-
-  .input-container {
-    height: 100%;
-
-    input {
-      border-radius: 0.25rem;
-      height: 100%;
-    }
-  }
+.span-width {
+  width: 6rem;
+  background-image: $background-pantone;
+  color: white;
 }

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

@@ -1,3 +1,4 @@
+import { FormBuilder } from '@angular/forms';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -24,7 +25,7 @@ describe('ProjectListHoverComponent', () => {
     },
     entries: {
       active: {
-        project_id: '2b87372b-3d0d-4dc0-832b-ae5863cd39e5',
+        project_id: 'p-1',
         start_date: '2020-04-23T16:11:06.455000+00:00',
         technologies: ['java', 'typescript'],
       },
@@ -37,7 +38,7 @@ describe('ProjectListHoverComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectListHoverComponent, FilterProjectPipe],
-      providers: [provideMockStore({ initialState: state })],
+      providers: [FormBuilder, provideMockStore({ initialState: state })],
       imports: [HttpClientTestingModule],
     }).compileComponents();
     store = TestBed.inject(MockStore);
@@ -54,35 +55,22 @@ describe('ProjectListHoverComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('clock-in dispatchs a CreateEntry action', () => {
-    const entry = {
-      project_id: '2b87372b-3d0d-4dc0-832b-ae5863cd39e5',
-      start_date: new Date().toISOString(),
-    };
-
+  it('dispatchs a CreateEntry action when activeEntry is null', () => {
     component.activeEntry = null;
     spyOn(store, 'dispatch');
 
-    component.clockIn('2b87372b-3d0d-4dc0-832b-ae5863cd39e5');
+    component.clockIn();
 
-    expect(store.dispatch).toHaveBeenCalledWith(new CreateEntry(entry));
+    expect(store.dispatch).toHaveBeenCalledWith(jasmine.any(CreateEntry));
   });
 
-  it('clock-in dispatchs a UpdateActiveEntry action', () => {
-    const entry = {
-      id: '123',
-      project_id: '2b87372b-3d0d-4dc0-832b-ae5863cd39e5',
-      start_date: new Date().toISOString(),
-    };
-    const updatedEntry = {
-      id: '123',
-      project_id: '123372b-3d0d-4dc0-832b-ae5863cd39e5',
-    };
-
+  it('dispatchs a UpdateEntry action when activeEntry is not null', () => {
+    const entry = { id: '123', project_id: 'p1', start_date: new Date().toISOString() };
+    const updatedEntry = { id: '123', project_id: 'p-1' };
     component.activeEntry = entry;
     spyOn(store, 'dispatch');
 
-    component.clockIn('123372b-3d0d-4dc0-832b-ae5863cd39e5');
+    component.clockIn();
 
     expect(store.dispatch).toHaveBeenCalledWith(new UpdateActiveEntry(updatedEntry));
   });

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

@@ -1,3 +1,4 @@
+import { FormGroup, FormBuilder } from '@angular/forms';
 import { getProjects } from './../../../customer-management/components/projects/components/store/project.selectors';
 import { Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
@@ -14,22 +15,24 @@ import * as entryActions from '../../store/entry.actions';
   styleUrls: ['./project-list-hover.component.scss'],
 })
 export class ProjectListHoverComponent implements OnInit {
+
   listProjects: Project[] = [];
-  showButton = '';
-  keyword = 'name';
-  nameActiveProject: string;
   activeEntry;
+  projectsForm: FormGroup;
 
-  constructor(private store: Store<ProjectState>) {}
+  constructor(private formBuilder: FormBuilder, private store: Store<ProjectState>) {
+    this.projectsForm = this.formBuilder.group({
+      project_id: '',
+    });
+  }
 
   ngOnInit(): void {
     this.store.dispatch(new actions.LoadProjects());
     const projects$ = this.store.pipe(select(getProjects));
-
     projects$.subscribe((projects) => {
       this.listProjects = projects;
-      this.loadActiveTimeEntry();
     });
+    this.loadActiveTimeEntry();
   }
 
   private loadActiveTimeEntry() {
@@ -38,24 +41,20 @@ export class ProjectListHoverComponent implements OnInit {
     activeEntry$.subscribe((activeEntry) => {
       this.activeEntry = activeEntry;
       if (activeEntry) {
-        for (const project of this.listProjects) {
-          if (project.id === activeEntry.project_id) {
-            this.nameActiveProject = project.name;
-            break;
-          }
-        }
-      } else {
-        this.nameActiveProject = null;
+        this.projectsForm.setValue({
+          project_id: activeEntry.project_id,
+        });
       }
     });
   }
 
-  clockIn(id: string) {
+  clockIn() {
+    const selectedProject = this.projectsForm.get('project_id').value;
     if (this.activeEntry) {
-      const entry = { id: this.activeEntry.id, project_id: id };
+      const entry = { id: this.activeEntry.id, project_id: selectedProject };
       this.store.dispatch(new entryActions.UpdateActiveEntry(entry));
     } else {
-      const newEntry = { project_id: id, start_date: new Date().toISOString() };
+      const newEntry = { project_id: selectedProject, start_date: new Date().toISOString() };
       this.store.dispatch(new entryActions.CreateEntry(newEntry));
     }
   }

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

@@ -12,14 +12,8 @@
         Hi <strong>{{ username }}</strong>, please select a project to clock-in.
       </p>
     </div>
-
-  </div>
-  <div class="input-group input-group-sm mb-3 flex-nowrap">
-    <div class="input-group-prepend">
-      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
-    </div>
-    <app-project-list-hover class="w-100"></app-project-list-hover>
   </div>
+  <app-project-list-hover></app-project-list-hover>
   <div *ngIf="areFieldsVisible">
     <app-entry-fields></app-entry-fields>
   </div>

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -1,3 +1,4 @@
+import { FormBuilder } from '@angular/forms';
 import { StopTimeEntryRunning } from './../store/entry.actions';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -42,6 +43,7 @@ describe('TimeClockComponent', () => {
       imports: [HttpClientTestingModule],
       declarations: [TimeClockComponent, ProjectListHoverComponent, FilterProjectPipe],
       providers: [
+        FormBuilder,
         AzureAdB2CService,
         provideMockStore({ initialState: state }),
       ],