From 377092d9ecf28dcf578053abea0edbad47b4a510 Mon Sep 17 00:00:00 2001
From: mustafahlvc <mustafahlvc@gmail.com>
Date: Thu, 14 Dec 2017 11:10:35 +0300
Subject: [PATCH] (Mail-ngrx) unread, selected class added for mail list item

---
 .../mail-ngrx/mail-details/mail-details.component.ts  | 11 +++++++++++
 .../mail-list-item/mail-list-item.component.scss      |  1 +
 .../mail-list-item/mail-list-item.component.ts        |  2 ++
 .../apps/mail-ngrx/mail-list/mail-list.component.ts   |  2 +-
 .../main/content/apps/mail-ngrx/mail.component.html   |  2 +-
 src/app/main/content/apps/mail-ngrx/mail.model.ts     | 10 ++++++++++
 6 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
index f8bbe42e..9376298b 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
@@ -33,6 +33,17 @@ export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChange
     ngOnChanges()
     {
         this.updateModel(this.mailInput);
+        this.markAsRead();
+    }
+
+    markAsRead()
+    {
+        if ( this.mail && !this.mail.read )
+        {
+            this.mail.markRead();
+            this.updateMail();
+        }
+
     }
 
     toggleStar(event)
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
index 45676aff..7d33476a 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
@@ -6,6 +6,7 @@
     padding: 16px 24px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     cursor: pointer;
+    background: #FAFAFA;
 
     &.unread {
         background: #FFFFFF;
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
index d4a592bc..d92d83c8 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
@@ -15,6 +15,7 @@ export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
 {
     @Input() mail: Mail;
     @HostBinding('class.selected') selected: boolean;
+    @HostBinding('class.unread') unread: boolean;
     labels$: Observable<any>;
     selectedMailIds$: Observable<any>;
 
@@ -33,6 +34,7 @@ export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
     {
         // Set the initial values
         this.mail = new Mail(this.mail);
+        this.unread = !this.mail.read;
 
         this.selectedMailIds$.subscribe((selectedMailIds) => {
             this.selected = selectedMailIds.length > 0 && selectedMailIds.find(id => id === this.mail.id) !== undefined;
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
index a4baa16e..fd9b3987 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
@@ -12,7 +12,7 @@ import { MailNgrxService } from '../mail.service';
 export class FuseMailNgrxListComponent implements OnInit, OnDestroy
 {
     @Input() mails: Mail[];
-    currentMail: Mail;
+    @Input() currentMail: Mail[];
 
     constructor(
         private route: ActivatedRoute,
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.html b/src/app/main/content/apps/mail-ngrx/mail.component.html
index 94c74e97..eb7dbb66 100644
--- a/src/app/main/content/apps/mail-ngrx/mail.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.html
@@ -98,7 +98,7 @@
                 <!-- CONTENT -->
                 <div class="content" fxLayoutAlign="row">
 
-                    <fuse-mail-list fusePerfectScrollbar fxFlex [mails]="mails$ | async"></fuse-mail-list>
+                    <fuse-mail-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></fuse-mail-list>
 
                     <fuse-mail-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></fuse-mail-details>
 
diff --git a/src/app/main/content/apps/mail-ngrx/mail.model.ts b/src/app/main/content/apps/mail-ngrx/mail.model.ts
index 42ff6cf5..725bc915 100644
--- a/src/app/main/content/apps/mail-ngrx/mail.model.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail.model.ts
@@ -53,4 +53,14 @@ export class Mail
     {
         this.important = !this.important;
     }
+
+    markRead()
+    {
+        this.read = true;
+    }
+
+    markUnRead()
+    {
+        this.read = false;
+    }
 }