notification center has doneeeeeee

src/packages/notification/component/badge/notification.component.html

@@ -1,7 +1,7 @@
 <div class="toolbar-notification-container">
   <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
     <mat-icon>notifications_none</mat-icon>
-    <span class="badge" *ngIf="notifications && notifications?.length !== 0">{{ notifications?.length }}</span>
+    <span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
   </button>
 
   <div class="dropdown mat-elevation-z4" [class.open]="isOpen">

src/packages/notification/component/badge/notification.component.ts

@@ -21,6 +21,7 @@ export class NotificationBadgeComponent implements OnInit, AfterContentInit {
   mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
   isOpen = false;
   notifications: Notification[] = null;
+  badgeCount = 0;
 
   constructor(
     private router: Router,
@@ -33,6 +34,7 @@ export class NotificationBadgeComponent implements OnInit, AfterContentInit {
       (page: Page) => {
         if (page !== null) {
           this.notifications = page.content;
+          this.getUnconfirmedCount(this.notifications);
         }
       },
       (error: RPCError) => {
@@ -72,6 +74,16 @@ export class NotificationBadgeComponent implements OnInit, AfterContentInit {
     );
   }
 
+  getUnconfirmedCount(notifications: Notification[]) {
+    let totalCnt = 0;
+    notifications.map( function(v, i) {
+      if (v.confirmDate === null) {
+        totalCnt += 1;
+      }
+    });
+    this.badgeCount = totalCnt;
+  }
+
 
   mark(notification: Notification, e: Event) {
     this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));

src/packages/notification/component/notification/notification.component.ts

@@ -4,7 +4,8 @@ import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCError } from 'packages/core/rpc/error';
 import { Notification } from '../../model';
-import * as NotificationStore from '../../store/list';
+import * as DetailStore from '../../store/detail';
+import * as ListStore from '../../store/list';
 import { ReadAllByMemberSelector } from '../../store';
 import { AuthSelector } from 'packages/member/store';
 import { Member } from '../../../member/model';
@@ -17,7 +18,7 @@ import { PageParams, Page } from 'app/commons/model';
 })
 export class NotificationComponent implements OnInit, AfterContentInit {
 
-  notification$ = this.store.pipe(select(ReadAllByMemberSelector.select('page')));
+  notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
 
   displayedColumns = ['id', 'title', 'message', 'member'];
   dataSource: MatTableDataSource<Notification>;
@@ -26,7 +27,8 @@ export class NotificationComponent implements OnInit, AfterContentInit {
 
   constructor(
     private router: Router,
-    private store: Store<NotificationStore.State>
+    private listStore: Store<ListStore.State>,
+    private detailStore: Store<DetailStore.State>
   ) { }
 
   ngOnInit() {
@@ -48,7 +50,7 @@ export class NotificationComponent implements OnInit, AfterContentInit {
   }
 
   getNotifications(pageIndex: number) {
-    this.store.select(AuthSelector.select('member')).subscribe(
+    this.listStore.select(AuthSelector.select('member')).subscribe(
       (member: Member) => {
         const pageParams: PageParams = {
           pageNo: pageIndex + '',
@@ -56,7 +58,7 @@ export class NotificationComponent implements OnInit, AfterContentInit {
           sortCol: 'id',
           sortDirection: 'descending'
         };
-        this.store.dispatch(new NotificationStore.ReadAllByMember({ member, pageParams }));
+        this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
       },
       (error) => {
         console.log(error);
@@ -64,8 +66,9 @@ export class NotificationComponent implements OnInit, AfterContentInit {
     );
   }
 
-  handleRowClick(n: Notification) {
+  handleRowClick(notification: Notification) {
-    alert('Will redirect to ' + n.url);
+    this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
+    alert('Will redirect to ' + notification.url);
     // this.router.navigate([n.url]);
   }