fix: #137 Fix the technology list

Author: jorgecod

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

@@ -59,7 +59,7 @@
   </div>
 
   <div *ngIf="isLoading">LOADING...</div>
-  <div *ngIf="technology" class="d-flex flex-column technology-content">
+  <div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
     <div
       *ngFor="let item of technology.items"
       (click)="setTechnology(item.name)"

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

@@ -82,6 +82,7 @@ describe('DetailsFieldsComponent', () => {
     length = value.length;
     component.getTechnologies(value);
 
+    expect(component.showlist).toBe(true);
     expect(store.dispatch).toHaveBeenCalledWith(new actions.FindTechnology(value));
   });
 

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

@@ -1,4 +1,14 @@
-import { Component, OnChanges, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import {
+  Component,
+  OnChanges,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  ElementRef,
+  Renderer2,
+} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 import * as actions from '../../store/technology.actions';
@@ -23,14 +33,21 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   @Input() formType: string;
   @Output() saveEntry = new EventEmitter();
   @ViewChild('closeModal') closeModal: ElementRef;
+  @ViewChild('list') list: ElementRef;
   entryForm: FormGroup;
   technology: Technology;
   selectedTechnology: string[] = [];
   isLoading = false;
   listProjects: Project[] = [];
   keyword = 'name';
+  showlist: boolean;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<Merged>) {
+  constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private renderer: Renderer2) {
+    this.renderer.listen('window', 'click', (e: Event) => {
+      if (this.showlist && !this.list.nativeElement.contains(e.target)) {
+        this.showlist = false;
+      }
+    });
     this.entryForm = this.formBuilder.group({
       project: '',
       activity: '',
@@ -68,6 +85,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
 
   getTechnologies(value) {
     if (value.length >= 2) {
+      this.showlist = true;
       this.store.dispatch(new actions.FindTechnology(value));
     }
   }