feat: TT-18 Allow users navigate with keyboard arrows between the technologies list

Author: jcalarcon98

angular.json

@@ -31,7 +31,8 @@
               "src/styles.scss",
               "node_modules/ngx-toastr/toastr.css",
               "./node_modules/ngx-ui-switch/ui-switch.component.css",
-              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
+              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
+              "node_modules/@ng-select/ng-select/themes/default.theme.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",

package-lock.json

@@ -27,6 +27,7 @@
     "@angular/router": "10.2.2",
     "@azure/app-configuration": "1.1.0",
     "@azure/identity": "1.1.0",
+    "@ng-select/ng-select": "7.2.0",
     "@ngrx/effects": "10.0.1",
     "@ngrx/store": "10.0.1",
     "@ngrx/store-devtools": "10.0.1",

package.json

@@ -85,6 +85,7 @@ import { TechnologyReportTableComponent } from './modules/technology-report/comp
 import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
 import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -181,6 +182,7 @@ const maskConfig: Partial<IConfig> = {
       provide: DateAdapter,
       useFactory: adapterFactory,
     }),
+    NgSelectModule
   ],
   providers: [
     {

src/app/app.module.ts

@@ -157,9 +157,9 @@
       </div>
 
       <app-technologies
-        (technologyAdded)="onTechnologiesUpdated($event)"
-        (technologyRemoved)="onTechnologiesUpdated($event)"
+        (technologyUpdated)="onTechnologiesUpdated($event)"
         [selectedTechnologies]="selectedTechnologies"
+        [isDisabled]="isTechnologiesDisabled"
         #technologies
       >
       </app-technologies>

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

@@ -51,6 +51,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   activities$: Observable<Activity[]>;
   goingToWorkOnThis = false;
   shouldRestartEntry = false;
+  isTechnologiesDisabled = true;
   projectKeyForLocalStorage = PROJECTS_KEY_FOR_LOCAL_STORAGE;
 
   constructor(
@@ -121,13 +122,15 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   onClearedComponent(event) {
+    this.isTechnologiesDisabled = true;
     this.entryForm.patchValue({
       project_id: '',
       project_name: '',
     });
   }
 
   onSelectedProject(item) {
+    this.isTechnologiesDisabled = false;
     this.projectSelected.emit({ projectId: item.id });
     this.entryForm.patchValue({
       project_id: item.id,
@@ -155,6 +158,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     this.shouldRestartEntry = false;
 
     if (this.entryToEdit) {
+      this.isTechnologiesDisabled = false;
       this.selectedTechnologies = this.entryToEdit.technologies;
       const projectFound = this.listProjects.find((project) => project.id === this.entryToEdit.project_id);
       this.entryForm.setValue({
@@ -185,13 +189,13 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       );
     } else {
       this.cleanForm();
+      this.isTechnologiesDisabled = true;
       this.activities$ = this.selectActiveActivities();
     }
   }
 
   cleanForm(skipProject: boolean = false): void {
     this.selectedTechnologies = [];
-    this.technologies.query = '';
     const projectNameField = this.project_name.value;
     const projectName = get(projectNameField, 'search_field', projectNameField);
     this.entryForm.reset({

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

@@ -1,39 +1,24 @@
 <div class="form-group">
   <label>Technology:</label>
-  <input
-    autocomplete="off"
-    (keyup)="queryTechnologies($event)"
-    id="technologies"
-    type="text"
-    class="form-control"
-    [(ngModel)]="query"
-  />
 
-  <div *ngIf="isLoading">
-    <img src="assets/img/spinner.gif" />
-  </div>
+  <ng-select
+    bindLabel="name"
+    bindValue="name"
+    ngDefaultControl
+    [items]="technologies"
+    [loading]="isLoading"
+    [disabled]='isDisabled'
+    [searchable]="ALLOW_SEARCH"
+    [multiple]="ALLOW_SELECT_MULTIPLE"
+    [placeholder]="TECHNOLOGIES_PLACEHOLDER"
+    [notFoundText]="NO_RESULTS_MESSAGE"
+    [maxSelectedItems]='MAX_NUM_TECHNOLOGIES'
+    [minTermLength]="MIN_SEARCH_TERM_LENGTH"
+    [typeToSearchText]="TYPE_TO_SEARCH_TEXT"
+    [typeahead]="technologiesInput$"
+    [(ngModel)]="selectedTechnologies"
+    (change)="updateTechnologies()">
 
-  <div #technologiesDropdown *ngIf="technology && showList" class="form-group technologies-dropdown-container">
-    <div
-      *ngFor="let item of technology.items"
-      (click)="addTechnology(item.name)"
-      class="technologies-dropdown-item">
-      {{ item.name }}
-    </div>
-  </div>
-</div>
-<div class="form-group">
-  <div class="form-group selected-technologies-container" *ngIf="selectedTechnologies?.length">
-    <div *ngFor="let technology of selectedTechnologies; let tagIndex = index" class="selected-technology">
-      <i class="fas fa-times text-white" (click)="removeTechnology(tagIndex)"></i>
-      <span style="padding-left: 0.5rem">{{ technology }}</span>
-    </div>
-  </div>
-  <div class="form-group" *ngIf="selectedTechnologies === null || selectedTechnologies.length === 0">
-    <!-- empty-space -->
-  </div>
+  </ng-select>
 
 </div>
-
-
-

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

@@ -40,49 +40,34 @@ describe('Technologies component', () => {
     expect(component).toBeTruthy();
   });
 
-  it('when a new technology is added, it should be added to the selectedTechnologies list', () => {
-    const name = 'ngrx';
-    component.selectedTechnologies = ['java', 'javascript'];
-    component.selectedTechnologies.indexOf(name);
-    length = component.selectedTechnologies.length;
-    component.addTechnology(name);
-    expect(component.selectedTechnologies.length).toBe(3);
-  });
+  it('When technologies are updated, technolgyUpdated should emit an event with new Technologies', () => {
+    const selectedTechnologies = ['java', 'angular'];
+    const technologyUpdatedSpy = spyOn(component.technologyUpdated, 'emit');
+    component.selectedTechnologies = selectedTechnologies;
 
-  it('when the max number of technologies is reached, then adding technologies is not allowed', () => {
-    const name = 'ngrx';
-    component.selectedTechnologies = [
-      'java',
-      'javascript',
-      'angular',
-      'angular-ui',
-      'typescript',
-      'scss',
-      'bootstrap',
-      'jasmine',
-      'karma',
-      'github',
-    ];
-    length = component.selectedTechnologies.length;
-    component.addTechnology(name);
-    expect(component.selectedTechnologies.length).toBe(10);
-  });
+    component.updateTechnologies();
 
-  it('when a technology is removed, then it should be removed from the technologies list', () => {
-    const index = 1;
-    component.selectedTechnologies = ['java', 'angular'];
-    component.removeTechnology(index);
-    expect(component.selectedTechnologies.length).toBe(1);
+    expect(technologyUpdatedSpy).toHaveBeenCalled();
+    expect(technologyUpdatedSpy).toHaveBeenCalledWith(selectedTechnologies);
+    expect(component.technologies).toEqual([]);
   });
 
   it('when querying technologies, then a FindTechnology action should be dispatched', () => {
     const query = 'react';
-    const target = {value: query};
-    const event = new InputEvent('input');
-    spyOnProperty(event, 'target').and.returnValue(target);
     spyOn(store, 'dispatch');
-    component.queryTechnologies(event);
+    component.searchTechnologies(query);
 
     expect(store.dispatch).toHaveBeenCalledWith(new actions.FindTechnology(query));
   });
+
+  it('calls unsubscribe on ngDestroy', () => {
+
+    const technologyInputSpy = spyOn(component.technologiesInputSubscription, 'unsubscribe');
+    const technologiesSpy = spyOn(component.technologiesSubscription, 'unsubscribe');
+
+    component.ngOnDestroy();
+
+    expect(technologyInputSpy).toHaveBeenCalled();
+    expect(technologiesSpy).toHaveBeenCalled();
+  });
 });