fix: #247 replacing technnologies component in time-entries page

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

@@ -98,37 +98,11 @@
       aria-describedby="inputGroup-sizing-sm"
     />
   </div>
-  <div class="input-group input-group-sm">
-    <div class="input-group-prepend">
-      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
-    </div>
-    <input
-      (keypress)="getTechnologies($event.target.value)"
-      type="text"
-      class="form-control"
-      aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm"
-      formControlName="technology"
-    />
-  </div>
 
-  <div *ngIf="isLoading">LOADING...</div>
-  <div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
-    <div
-      *ngFor="let item of technology.items"
-      (click)="setTechnology(item.name)"
-      class="technology-list"
-      [ngClass]="{ active: selectedTechnology.includes(item.name) }"
-    >
-      {{ item.name }}
-    </div>
-  </div>
-  <div class="tags-content d-flex flex-wrap">
-    <div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
-      <span class="mr-3">{{ technology }}</span>
-      <i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
-    </div>
-  </div>
+  <app-technologies (technologyAdded)="onTechnologiesUpdated($event)"
+                    (technologyRemoved)="onTechnologiesUpdated($event)"
+                    [selectedTechnologies]="selectedTechnologies">
+  </app-technologies>
 
   <div class="form-group text-left">
     <label for="NotesTextarea">Description</label>

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

@@ -176,51 +176,6 @@ describe('DetailsFieldsComponent', () => {
     expect(store.dispatch).not.toHaveBeenCalledWith(new actions.FindTechnology(value));
   });
 
-  it('should add a new tag #setTechnology', () => {
-    const name = 'ngrx';
-    component.selectedTechnology = ['java', 'javascript'];
-    component.selectedTechnology.indexOf(name);
-    length = component.selectedTechnology.length;
-    component.setTechnology(name);
-    expect(component.selectedTechnology.length).toBe(3);
-  });
-
-  it('should NOT add a new tag #setTechnology', () => {
-    const name = 'ngrx';
-    component.selectedTechnology = [
-      'java',
-      'javascript',
-      'angular',
-      'angular-ui',
-      'typescript',
-      'scss',
-      'bootstrap',
-      'jasmine',
-      'karme',
-      'github',
-    ];
-    component.selectedTechnology.indexOf(name);
-    length = component.selectedTechnology.length;
-    component.setTechnology(name);
-    expect(component.selectedTechnology.length).toBe(10);
-  });
-
-  it('should call the removeTag function #setTechnology', () => {
-    const name = 'java';
-    component.selectedTechnology = ['java', 'javascript'];
-    const index = component.selectedTechnology.indexOf(name);
-    spyOn(component, 'removeTag');
-    component.setTechnology(name);
-    expect(component.removeTag).toHaveBeenCalledWith(index);
-  });
-
-  it('should call the removeTag() function #removeTag', () => {
-    const index = 1;
-    component.selectedTechnology = ['java', 'angular'];
-    component.removeTag(index);
-    expect(component.selectedTechnology.length).toBe(1);
-  });
-
   it('should call createError ', () => {
     mockEntriesUpdateErrorSelector = store.overrideSelector(getCreateError, false);
     spyOn(store, 'dispatch');

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

@@ -41,7 +41,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   @ViewChild('list') list: ElementRef;
   entryForm: FormGroup;
   technology: Technology;
-  selectedTechnology: string[] = [];
+  selectedTechnologies: string[] = [];
   isLoading = false;
   listProjects: Project[] = [];
   activities: Activity[] = [];
@@ -106,7 +106,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   ngOnChanges(): void {
     this.hoursValidation = false;
     if (this.entryToEdit) {
-      this.selectedTechnology = this.entryToEdit.technologies;
+      this.selectedTechnologies = this.entryToEdit.technologies;
       const project = this.listProjects.find((p) => p.id === this.entryToEdit.project_id);
       const activity = this.activities.find((a) => a.id === this.entryToEdit.activity_id);
       this.entryForm.setValue({
@@ -121,7 +121,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         technology: '',
       });
     } else {
-      this.selectedTechnology = [];
+      this.selectedTechnologies = [];
       this.entryForm.setValue({
         project: '',
         activity: '',
@@ -143,19 +143,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     }
   }
 
-  setTechnology(name: string) {
-    const index = this.selectedTechnology.indexOf(name);
-    if (index > -1) {
-      this.removeTag(index);
-    } else if (this.selectedTechnology.length < 10) {
-      this.selectedTechnology = [...this.selectedTechnology, name];
-    }
-    this.showlist = false;
-    this.entryForm.get('technology').reset();
-  }
-
-  removeTag(index) {
-    this.selectedTechnology.splice(index, 1);
+  onTechnologiesUpdated($event: string[]) {
+    this.selectedTechnologies = $event;
   }
 
   get project() {
@@ -192,7 +181,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     const entry = {
       project_id: project ? project.id : null,
       activity_id: activity ? activity.id : null,
-      technologies: this.selectedTechnology,
+      technologies: this.selectedTechnologies,
       description: this.entryForm.value.description,
       start_date: `${this.entryForm.value.start_date}T${this.entryForm.value.start_hour}`,
       end_date: `${this.entryForm.value.end_date}T${this.entryForm.value.end_hour}`,