PR for Task1 and Task2

src/app/core/components/contact-details/contact-details-container.component.html

@@ -7,9 +7,9 @@
  Contact
  </div>
  <div class="card-body">
- <p>Name: <span class="badge badge-primary">{{contact.name}}</span></p>
+ <p>Name: <span class="badge badge-primary">{{contact.first_name}} {{contact.last_name}}</span></p>
  <p>Email: <span class="badge badge-primary">{{contact.email}}</span></p>
- <p>Phone: <span class="badge badge-primary">{{contact.phone}}</span></p>
+ <p>Avatar: <span class="badge badge-primary"> <img [src]="contact.avatar"> </span></p>
  </div>
  <div class="card-footer text-muted">
  <span class="float-md-right ">

src/app/core/components/contact-form/contact-form.component.html

@@ -1,8 +1,13 @@
 <form (submit)="submit()" class="form" [formGroup]="form">
 
  <div class="form-group">
- <label for="name-input">Name:</label>
- <input id="name-input" type="text" class="form-control" formControlName="name">
+ <label for="first-name-input">First Name:</label>
+ <input id="first-name-input" type="text" class="form-control" formControlName="firstName">
+ </div>
+
+ <div class="form-group">
+ <label for="last-name-input">Last Name:</label>
+ <input id="last-name-input" type="text" class="form-control" formControlName="lastName">
  </div>
 
  <div class="form-group">
@@ -13,8 +18,8 @@
 
 
  <div class="form-group">
- <label for="phone-input">Phone:</label>
- <input id="phone-input" type="tel" class="form-control" formControlName="phone">
+ <label for="phone-input"> avatar:</label>
+ <input id="phone-input" type="tel" class="form-control" formControlName="avatar">
  </div>
 
 
@@ -27,4 +32,4 @@
  </button>
  </div>
 
-</form>
+</form>

src/app/core/components/contact-form/contact-form.component.ts

@@ -12,10 +12,11 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class ContactFormComponent implements OnInit, OnChanges {
 
  @Input() contact: Contact = {
- id: undefined,
- name: '',
+ id: null,
+ first_name: '',
+ last_name: '',
  email: '',
- phone: ''
+ avatar: ''
  };
 
  @Output() save = new EventEmitter<Contact>();
@@ -25,9 +26,10 @@ export class ContactFormComponent implements OnInit, OnChanges {
  constructor(public formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
  id: [this.contact.id],
- name: [this.contact.name, Validators.required],
+ firstName: [this.contact.first_name, Validators.required],
+ lastName: [this.contact.last_name],
  email: [this.contact.email, Validators.required],
- phone: [this.contact.phone]
+ avatar: [this.contact.avatar]
  });
  }
 
@@ -37,7 +39,15 @@ export class ContactFormComponent implements OnInit, OnChanges {
 
  ngOnChanges() {
  if (this.contact) {
- this.form.patchValue({...this.contact});
+ this.form.patchValue(
+ {
+ id: this.contact.id,
+ firstName: this.contact.first_name,
+ lastName: this.contact.last_name,
+ email: this.contact.email,
+ avatar: this.contact.avatar
+ }
+ );
  }
  }
 

src/app/core/components/contact-list/contact-list.component.html

@@ -4,16 +4,23 @@
  <th>#</th>
  <th>Name</th>
  <th>Email</th>
- <th>Phone</th>
+ <th>Avatar</th>
  <th></th>
  </tr>
  </thead>
  <tbody>
  <tr class="contact-row" *ngFor="let c of contacts; trackBy: contactsTrackByFn">
  <th scope="row">{{c.id}}</th>
- <td>{{c.name}}</td>
- <td>{{c.email}}</td>
- <td>{{c.phone}}</td>
+ <td>
+ <span [innerHtml]="c.first_name | highLightText:keyword"></span>
+ <span>&nbsp; </span>
+ <span [innerHtml]="c.last_name | highLightText:keyword"> </span>
+ </td>
+
+
+ <td [innerHtml]="c.email | highLightText:keyword">
+ </td>
+ <td class="avatar"><img [src]="c.avatar"></td>
  <td>
 
  <span class="float-right">

src/app/core/components/contact-list/contact-list.component.sass

@@ -3,3 +3,9 @@
 
 .header
  width: 100%
+
+.avatar img
+ display: block
+ height: 30px
+ width: 30px
+

src/app/core/components/contact-list/contact-list.component.ts

@@ -15,6 +15,8 @@ export class ContactListComponent implements OnInit {
  @Output() show = new EventEmitter<Contact>();
  @Output() remove = new EventEmitter<Contact>();
 
+ @Input() keyword = '';
+
  contactsTrackByFn = (index: number, contact: Contact) => contact.id;
 
  constructor() {}

src/app/core/models/contact.ts

@@ -1,6 +1,27 @@
+
+
 export interface Contact {
  id?: number;
- name: string;
+ first_name: string;
+ last_name?: string;
  email: string;
- phone?: string;
+ avatar?: string;
 }
+
+export interface SupportUrl {
+ url: string;
+ text: string;
+}
+
+
+export interface ContactPage {
+ data: Contact[];
+ page: number;
+ per_page: number;
+ supportUrl: SupportUrl;
+ total: number;
+ total_pages: number;
+}
+
+
+

src/app/core/modules/shared.module.ts

@@ -7,6 +7,7 @@ import {CommonModule} from '@angular/common';
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {FooterComponent} from '@app/core/components/footer/footer.component';
+import {HighLightTextPipe} from "@app/core/pipes/high-light-text.pipe";
 
 @NgModule({
  imports: [
@@ -19,14 +20,16 @@ import {FooterComponent} from '@app/core/components/footer/footer.component';
  ContactDetailsContainerComponent,
  ContactFormComponent,
  ToolbarComponent,
- FooterComponent
+ FooterComponent,
+ HighLightTextPipe
  ],
  exports: [
  ContactListComponent,
  ContactDetailsContainerComponent,
  ContactFormComponent,
  ToolbarComponent,
- FooterComponent
+ FooterComponent,
+ HighLightTextPipe
  ]
 })
 export class SharedModule { }

src/app/core/pipes/high-light-text.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { HighLightTextPipe } from './high-light-text.pipe';
+
+describe('HighLightTextPipe', () => {
+ it('create an instance', () => {
+ const pipe = new HighLightTextPipe();
+ expect(pipe).toBeTruthy();
+ });
+});

src/app/core/pipes/high-light-text.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'highLightText'
+})
+export class HighLightTextPipe implements PipeTransform {
+
+ transform(value: any, args: any): unknown {
+ if(!args) return value;
+ const re = new RegExp(args, 'igm');
+ value= value.replace(re, '<strong >$&</strong>');
+
+ return value;
+ }
+}

src/app/views/contacts/contact-search/contact-search.component.html

@@ -0,0 +1,4 @@
+<div [formGroup]="searchFormGroup" class="form-group">
+<input class="form-control" type="text" formControlName="search">
+ <span *ngIf="searchKeyword$ | async as searchKeyword"> {{searchKeyword}} </span>
+</div>

src/app/views/contacts/contact-search/contact-search.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactSearchComponent } from './contact-search.component';
+
+describe('ContactSearchComponent', () => {
+ let component: ContactSearchComponent;
+ let fixture: ComponentFixture<ContactSearchComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ContactSearchComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ContactSearchComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/views/contacts/contact-search/contact-search.component.ts

@@ -0,0 +1,45 @@
+import {Component, OnInit, ChangeDetectionStrategy, Output, EventEmitter} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {Observable, of} from 'rxjs';
+import {debounceTime, filter, map, switchMap, tap} from 'rxjs/operators';
+
+
+@Component({
+ selector: 'app-contact-search',
+ templateUrl: './contact-search.component.html',
+ styleUrls: ['./contact-search.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContactSearchComponent implements OnInit {
+
+ @Output() searchText = new EventEmitter<string>();
+
+ constructor() {
+ }
+
+ searchKeyword$: Observable<string>;
+ search = new FormControl();
+
+ searchFormGroup = new FormGroup({
+ search: this.search
+ });
+
+ ngOnInit(): void {
+ this.searchKeyword();
+ }
+
+
+ searchKeyword(): void {
+ this.searchKeyword$ = this.search.valueChanges.pipe(
+ debounceTime(500),
+ filter(num => num.length >= 2 || num.length === 0 ),
+ tap( word => {
+ console.log(word);
+ this.searchText.emit(word);
+ } ),
+ );
+ }
+
+
+
+}

src/app/views/contacts/contacts-index/contacts-index.component.html

@@ -1,10 +1,13 @@
-<h1> Contact list</h1>
+<h3>Search Contact</h3>
+<app-contact-search (searchText)="filterContact($event)"></app-contact-search>
 
-
-
-
-<app-contact-list [contacts]="contacts$ | async"
+<h3>Contact list</h3>
+<app-contact-list [contacts]="newContacts$ | async"
+ [keyword] ="hightLightText"
  (show)="showContact($event)"
  (remove)="deleteContact($event)"
  (edit)="editContact($event)"
 ></app-contact-list>
+
+
+

src/app/views/contacts/contacts-index/contacts-index.component.ts

@@ -1,7 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Contact } from '@app/core/models';
-import { Router } from '@angular/router';
-import { ContactsStoreFacade } from '@app/contacts-store/contacts.store-facade';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Contact} from '@app/core/models';
+import {Router} from '@angular/router';
+import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade';
+import {Observable, of} from 'rxjs';
+import {catchError, map, shareReplay, tap} from 'rxjs/operators';
 
 
 @Component({
@@ -12,11 +14,46 @@ import { ContactsStoreFacade } from '@app/contacts-store/contacts.store-facade';
 })
 export class ContactsIndexComponent implements OnInit {
 
+ hightLightText: string = null;
  contacts$ = this.contactsFacade.contacts$;
+ newContacts$: Observable<Contact[]>;
 
- constructor(private contactsFacade: ContactsStoreFacade, private router: Router) { }
+ constructor(private contactsFacade: ContactsStoreFacade, private router: Router) {
+ }
+
+ ngOnInit() {
+ this.filterContact(null);
+ }
+
+
+ //filter contact logic
+ filterContact(keyword: string): void {
+ if (!keyword) {
+ this.hightLightText = '';
+ this.newContacts$ = this.contacts$.pipe(
+ map(results => {
+ results.pop();
+ return results;
+ } )
+ );
+ return;
+ }
+
+ this.hightLightText = keyword;
+ const keywordFormatted = keyword.toLowerCase();
+ this.newContacts$ = this.contacts$.pipe(
+ map(results => results.filter(
+ item => item.first_name.toLowerCase().includes(keywordFormatted)
+ || item.last_name.toLowerCase().includes(keywordFormatted)
+ || item.email.toLowerCase().includes(keywordFormatted)
+ )),
+ catchError(e => {
+ return of([]);
+ })
+ );
+
+ }
 
- ngOnInit() {}
 
  editContact(contact: Contact) {
  this.router.navigate(['/contacts', contact.id, 'edit']);