fix: #450 autocomplete on time-entries page

Author: Rene Enriquez

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

@@ -7,17 +7,37 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width">Project</span>
     </div>
-    <select
-      [class.is-invalid]="project_id.invalid"
-      required
-      id="project_id"
-      class="custom-select"
-      formControlName="project_id"
-    >
-      <option value="" selected="selected"></option>
-      <option *ngFor="let project of listProjects" value="{{ project.id }}">{{ project.customer_name }}
-        - {{ project.name }}</option>
-    </select>
+
+    <div class="form-control autocomplete">
+      <ng-autocomplete
+        (selected)='onSelectedProject($event)'
+        (inputCleared)='onClearedComponent($event)'
+        formControlName="project_name"
+        [data]="listProjects"
+        [searchKeyword]="keyword"
+        historyIdentifier="projectsSelected"
+        notFoundText="No projects found"
+        placeHolder="Enter the project name"
+        [itemTemplate]="itemTemplate"
+        [notFoundTemplate]="notFoundTemplate">
+      </ng-autocomplete>
+
+      <ng-template #itemTemplate let-item>
+        <div class="d-flex container">
+          <div class="mr-auto p-2">
+            <span [innerHTML]="item.customer_name"></span> -
+            <strong><span [innerHTML]="item.name"></span></strong>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #notFoundTemplate let-notFound>
+        <div [innerHTML]="notFound"></div>
+      </ng-template>
+      <!-- <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar> -->
+    </div>
+
+
   </div>
 
   <div class="input-group input-group-sm mb-3">

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

@@ -107,3 +107,17 @@ input[type="date"]::-webkit-inner-spin-button {
 input[type="date"]::-webkit-clear-button {
   display: none;
 }
+
+.container {
+  font-size: small;
+  cursor: text;
+}
+
+.autocomplete {
+  width: 80%;
+  display: block;
+  background-clip: padding-box;
+  border: none;
+  margin: 0em;
+  padding: 0em;
+}

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

@@ -1,3 +1,4 @@
+import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { formatDate } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -29,7 +30,8 @@ describe('DetailsFieldsComponent', () => {
   let formValues;
   const actionSub: ActionsSubject = new ActionsSubject();
   const toastrServiceStub = {
-    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
+    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
+    warning: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
   };
 
   const state = {
@@ -58,6 +60,7 @@ describe('DetailsFieldsComponent', () => {
 
   const initialData = {
     project_id: '',
+    project_name: '',
     activity_id: '',
     uri: '',
     entry_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
@@ -75,7 +78,7 @@ describe('DetailsFieldsComponent', () => {
         { provide: ActionsSubject, useValue: actionSub },
         { provide: ToastrService, useValue: toastrServiceStub }
       ],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, AutocompleteLibModule],
     }).compileComponents();
     store = TestBed.inject(MockStore);
     mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);
@@ -88,7 +91,7 @@ describe('DetailsFieldsComponent', () => {
     fixture = TestBed.createComponent(DetailsFieldsComponent);
     component = fixture.componentInstance;
     entryToEdit = {
-      project_id: '',
+      project_id: 'id',
       activity_id: '',
       uri: 'ticketUri',
       start_date: null,
@@ -98,7 +101,8 @@ describe('DetailsFieldsComponent', () => {
       id: 'xyz'
     };
     formValues = {
-      project_id: 'p1',
+      project_id: 'id',
+      project_name: 'name',
       activity_id: 'a1',
       uri: 'ticketUri',
       entry_date: '',
@@ -114,6 +118,21 @@ describe('DetailsFieldsComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('onClearedComponent project id and name it is set to empty', () => {
+    component.onClearedComponent(null);
+
+    expect(component.project_id.value).toBe('');
+    expect(component.project_name.value).toBe('');
+  });
+
+  it('onSelectedProject project id and name it is set using event data', () => {
+    spyOn(component.entryForm, 'patchValue');
+
+    component.onSelectedProject( {id: 'id', search_field: 'foo'} );
+
+    expect(component.entryForm.patchValue).toHaveBeenCalledWith( { project_id: 'id', project_name: 'foo', } );
+  });
+
   it('if form is invalid then no save is emited', () => {
     spyOn(component.saveEntry, 'emit');
 
@@ -151,6 +170,7 @@ describe('DetailsFieldsComponent', () => {
     component.closeModal = childComponent;
     const formValue = {
       project_id: '',
+      project_name: '',
       activity_id: '',
       uri: '',
       entry_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
@@ -186,6 +206,7 @@ describe('DetailsFieldsComponent', () => {
     spyOn(component.saveEntry, 'emit');
     component.entryForm.setValue({
       project_id: 'p1',
+      project_name: 'p-name',
       activity_id: 'a1',
       uri: '',
       entry_date: '2020-02-05',
@@ -269,7 +290,7 @@ describe('DetailsFieldsComponent', () => {
 
     const data: SaveEntryEvent = {
       entry: {
-        project_id: 'p1',
+        project_id: 'id',
         activity_id: 'a1',
         technologies: [],
         description: '',

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

@@ -23,6 +23,8 @@ type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
   styleUrls: ['./details-fields.component.scss'],
 })
 export class DetailsFieldsComponent implements OnChanges, OnInit {
+
+  keyword = 'search_field';
   @Input() entryToEdit: Entry;
   @Input() canMarkEntryAsWIP: boolean;
   @Output() saveEntry = new EventEmitter<SaveEntryEvent>();
@@ -39,6 +41,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
               private actionsSubject$: ActionsSubject, private toastrService: ToastrService) {
     this.entryForm = this.formBuilder.group({
       project_id: ['', Validators.required],
+      project_name: ['', Validators.required],
       activity_id: ['', Validators.required],
       description: '',
       entry_date: '',
@@ -52,8 +55,16 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   ngOnInit(): void {
     this.store.dispatch(new projectActions.LoadProjects());
     const projects$ = this.store.pipe(select(getProjects));
-    projects$.subscribe((response) => {
-      this.listProjects = response;
+    projects$.subscribe((projects) => {
+      if (projects) {
+        this.listProjects = [];
+        projects.forEach((project) => {
+            const projectWithSearchField = {...project};
+            projectWithSearchField.search_field = `${project.customer_name} - ${project.name}`;
+            this.listProjects.push(projectWithSearchField);
+          }
+        );
+      }
     });
 
     this.store.dispatch(new LoadActivities());
@@ -87,11 +98,29 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     });
   }
 
+  onClearedComponent(event) {
+    this.entryForm.patchValue(
+      {
+        project_id: '',
+        project_name: '',
+      });
+  }
+
+  onSelectedProject(item) {
+    this.entryForm.patchValue(
+      {
+        project_id: item.id,
+        project_name: item.search_field,
+      });
+  }
+
   ngOnChanges(): void {
     this.goingToWorkOnThis = this.entryToEdit ? this.entryToEdit.running : false;
     if (this.entryToEdit) {
       this.selectedTechnologies = this.entryToEdit.technologies;
+      const projectFound = this.listProjects.find((project) => project.id === this.entryToEdit.project_id);
       this.entryForm.setValue({
+        project_name: projectFound ? projectFound.search_field : '',
         project_id: this.entryToEdit.project_id,
         activity_id: this.entryToEdit.activity_id,
         description: this.entryToEdit.description,
@@ -109,6 +138,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   cleanForm() {
     this.selectedTechnologies = [];
     this.entryForm.setValue({
+      project_name: '',
       project_id: '',
       activity_id: '',
       description: '',
@@ -128,6 +158,10 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     return this.entryForm.get('project_id');
   }
 
+  get project_name() {
+    return this.entryForm.get('project_name');
+  }
+
   get activity_id() {
     return this.entryForm.get('activity_id');
   }
@@ -151,6 +185,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
 
   onSubmit() {
     if (this.entryForm.invalid) {
+      this.toastrService.warning('Make sure to select a project and activity');
       return;
     }
     // start&end date same for now

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

@@ -1,3 +1,4 @@
+import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
@@ -46,7 +47,7 @@ describe('TimeEntriesComponent', () => {
       providers: [provideMockStore({ initialState: state }),
       { provide: ToastrService, useValue: toastrService },
       ],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, AutocompleteLibModule],
     }).compileComponents();
     store = TestBed.inject(MockStore);
     entry = {