From 62d4bf6ff53c8311d58ff1ec9bdc044135c29cf3 Mon Sep 17 00:00:00 2001
From: Alexander Kotov <alexanderko@interlink-ua.com>
Date: Wed, 20 Sep 2017 15:44:31 +0300
Subject: [PATCH] add favorite contacts

---
 src/app/app.component.html                     |  9 ++++++++-
 src/app/app.component.ts                       | 18 ++++++++++++++----
 .../contact-detail.component.html              |  3 +++
 .../contact-detail.component.scss              |  3 +++
 .../contact-list/contact-list.component.html   |  2 +-
 .../contact-list/contact-list.component.scss   |  5 +++++
 .../contact-list/contact-list.component.ts     |  1 +
 src/app/contact/contact.model.ts               |  4 ++++
 8 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/app/contact/contact.model.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f8a221b..818c92b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,7 +6,14 @@
 
 <aside>
   <contact-list
-    [contacts]="contacts"
+    title="Favorites"
+    [contacts]="starredContacts()"
+    (select)="selectContact($event)">
+  </contact-list>
+
+  <contact-list
+    title="Contacts"
+    [contacts]="otherContacts()"
     (select)="selectContact($event)">
   </contact-list>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 485a307..8d243b1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,25 +1,27 @@
 import { Component } from '@angular/core';
 
+import { Contact } from './contact/contact.model';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  selectedContact: { name: string };
+  selectedContact: Contact;
 
   title = 'Angular on Fire Chat';
 
   contactName = '';
 
-  contacts = [
+  contacts: Contact[] = [
     { name: 'Rob' },
     { name: 'Ed' },
     { name: 'Jon' }
-  ];
+  ] as Contact[];
 
   addContact() {
-    this.contacts.push({ name: this.contactName });
+    this.contacts.push({ name: this.contactName } as Contact);
     this.contactName = '';
   }
 
@@ -27,4 +29,12 @@ export class AppComponent {
     this.selectedContact = contact;
   }
 
+  starredContacts(): Contact[] {
+    return this.contacts.filter(c => c.starred);
+  }
+
+  otherContacts(): Contact[] {
+    return this.contacts.filter(c => !c.starred);
+  }
+
 }
diff --git a/src/app/contact/contact-detail/contact-detail.component.html b/src/app/contact/contact-detail/contact-detail.component.html
index 73a812d..a7ef32c 100644
--- a/src/app/contact/contact-detail/contact-detail.component.html
+++ b/src/app/contact/contact-detail/contact-detail.component.html
@@ -1,2 +1,5 @@
 <h2>{{contact.name}}</h2>
 <input type="text" [(ngModel)]="contact.name">
+<label>
+  <input type="checkbox" name="star" [(ngModel)]="contact.starred"> Favorite
+</label>
diff --git a/src/app/contact/contact-detail/contact-detail.component.scss b/src/app/contact/contact-detail/contact-detail.component.scss
index e69de29..a74cc51 100644
--- a/src/app/contact/contact-detail/contact-detail.component.scss
+++ b/src/app/contact/contact-detail/contact-detail.component.scss
@@ -0,0 +1,3 @@
+label {
+  cursor: pointer;
+}
diff --git a/src/app/contact/contact-list/contact-list.component.html b/src/app/contact/contact-list/contact-list.component.html
index 8c791f5..875b585 100644
--- a/src/app/contact/contact-list/contact-list.component.html
+++ b/src/app/contact/contact-list/contact-list.component.html
@@ -1,4 +1,4 @@
-<h2>Contacts</h2>
+<h2>{{title}} <span>({{contacts.length}})</span></h2>
 <ul>
   <li
     *ngFor="let contact of contacts"
diff --git a/src/app/contact/contact-list/contact-list.component.scss b/src/app/contact/contact-list/contact-list.component.scss
index b6a859e..20d9c33 100644
--- a/src/app/contact/contact-list/contact-list.component.scss
+++ b/src/app/contact/contact-list/contact-list.component.scss
@@ -1,5 +1,10 @@
 @import '../../../styles';
 
+h2 span {
+  font-size: 75%;
+  color: lightgray;
+}
+
 ul {
   @extend .list-group;
 }
diff --git a/src/app/contact/contact-list/contact-list.component.ts b/src/app/contact/contact-list/contact-list.component.ts
index cc6c605..b440280 100644
--- a/src/app/contact/contact-list/contact-list.component.ts
+++ b/src/app/contact/contact-list/contact-list.component.ts
@@ -9,6 +9,7 @@ export class ContactListComponent {
   selectedContact: any;
   @Input() contacts;
   @Output() select = new EventEmitter();
+  @Input() title: string;
 
   selectContact(contact) {
     this.selectedContact = contact;
diff --git a/src/app/contact/contact.model.ts b/src/app/contact/contact.model.ts
new file mode 100644
index 0000000..f16be43
--- /dev/null
+++ b/src/app/contact/contact.model.ts
@@ -0,0 +1,4 @@
+export interface Contact {
+  name: string;
+  starred?: boolean;
+}
-- 
GitLab