Merge pull request #442 from ioet/436-fix-technologies-component

fix: #436 fix technologies component

Author: enriquezrene

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

@@ -3,7 +3,8 @@
     <span class="input-group-text span-width">Technology</span>
   </div>
   <input
-    (input)="queryTechnologies($event)"
+    autocomplete="off"
+    (keyup)="queryTechnologies($event)"
     id="technologies"
     type="text"
     class="form-control"
@@ -12,8 +13,9 @@
     [(ngModel)]="query"
   />
 </div>
-
-<div *ngIf="isLoading">LOADING...</div>
+<div style="text-align: center;" *ngIf="isLoading">
+  <img src="assets/img/spinner.gif"/>
+</div>
 <div #technologiesDropdown *ngIf="technology && showList" class="d-flex flex-column technologies-dropdown-container">
   <div
     *ngFor="let item of technology.items"

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

@@ -1,6 +1,6 @@
 import {Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild} from '@angular/core';
 import * as actions from '../../store/technology.actions';
-import {select, Store} from '@ngrx/store';
+import { select, Store } from '@ngrx/store';
 import {TechnologyState} from '../../store/technology.reducers';
 import {allTechnologies} from '../../store/technology.selectors';
 import {Technology} from '../../models';
@@ -48,8 +48,12 @@ export class TechnologiesComponent implements OnInit {
     const technologies$ = this.store.pipe(select(allTechnologies));
     technologies$.subscribe((response) => {
       this.isLoading = response.isLoading;
-      const filteredItems = response.technologyList.items.filter(item => !this.selectedTechnologies.includes(item.name));
-      this.technology = {items: filteredItems};
+      if ( response.technologyList.items ) {
+        const filteredItems = response.technologyList.items.filter(item => !this.selectedTechnologies.includes(item.name));
+        this.technology = {items: filteredItems};
+      } else {
+        this.technology = {items: []};
+      }
     });
   }
 

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

@@ -1,4 +1,3 @@
-import { ToastrService } from 'ngx-toastr';
 import { Injectable } from '@angular/core';
 import { ofType, Actions, Effect } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
@@ -10,7 +9,7 @@ import * as actions from './technology.actions';
 @Injectable()
 export class TechnologyEffects {
 
-  constructor(private toastrService: ToastrService, private actions$: Actions, private technologyService: TechnologyService) { }
+  constructor(private actions$: Actions, private technologyService: TechnologyService) { }
 
   @Effect()
   findTechnology$: Observable<Action> = this.actions$.pipe(
@@ -22,7 +21,6 @@ export class TechnologyEffects {
           return new actions.FindTechnologySuccess(technology);
         }),
         catchError((error) => {
-          this.toastrService.error(error.error.message);
           return of(new actions.FindTechnologyFail(error));
         })
       )