From 1547cce9c88b0ba4b8a55e5b0916695bc54e70f2 Mon Sep 17 00:00:00 2001 From: insanity Date: Fri, 20 Apr 2018 18:49:20 +0900 Subject: [PATCH] notification badge --- .../layout/menu/app.menu.component.ts | 2 +- .../app.notification.component.html | 11 +++ .../app.notification.component.ts | 81 +++++++++++++++++++ .../layout/topbar/app.topbar.component.html | 41 ++-------- .../layout/topbar/app.topbar.component.ts | 30 +++---- src/app/pages/pages.module.ts | 6 +- .../badge/notification.component.html | 1 + .../component/badge/notification.component.ts | 1 + src/packages/notification/component/index.ts | 2 - .../notification/notification.component.ts | 23 +++--- 10 files changed, 128 insertions(+), 70 deletions(-) create mode 100644 src/app/commons/component/layout/notification/app.notification.component.html create mode 100644 src/app/commons/component/layout/notification/app.notification.component.ts diff --git a/src/app/commons/component/layout/menu/app.menu.component.ts b/src/app/commons/component/layout/menu/app.menu.component.ts index 01c60a9..cdbd9f1 100644 --- a/src/app/commons/component/layout/menu/app.menu.component.ts +++ b/src/app/commons/component/layout/menu/app.menu.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { MenuItem } from 'primeng/primeng'; import { AppComponent } from 'app/app.component'; -import { PagesComponent } from '../../../../pages/pages.component'; +import { PagesComponent } from 'app/pages/pages.component'; @Component({ selector: 'of-menu', diff --git a/src/app/commons/component/layout/notification/app.notification.component.html b/src/app/commons/component/layout/notification/app.notification.component.html new file mode 100644 index 0000000..911c178 --- /dev/null +++ b/src/app/commons/component/layout/notification/app.notification.component.html @@ -0,0 +1,11 @@ +
  • + + {{noti.title}} + {{noti.message}} + +
    • +
  • + + View All + +
    • \ No newline at end of file diff --git a/src/app/commons/component/layout/notification/app.notification.component.ts b/src/app/commons/component/layout/notification/app.notification.component.ts new file mode 100644 index 0000000..7ce3c61 --- /dev/null +++ b/src/app/commons/component/layout/notification/app.notification.component.ts @@ -0,0 +1,81 @@ +import { Component, Injectable, OnInit, AfterContentInit, Output, EventEmitter } from '@angular/core'; +import * as ListStore from 'packages/notification/store/list'; +import * as DetailStore from 'packages/notification/store/detail'; +import { Store, select } from '@ngrx/store'; +import { ReadAllByMemberSelector, ReadSelector } from 'packages/notification/store'; +import { Page, PageParams } from '../../../model'; +import { RPCClientError } from '@loafer/ng-rpc/protocol'; +import { AuthSelector } from 'packages/member/store'; +import { Member } from 'packages/member/model'; +import { PagesComponent } from 'app/pages/pages.component'; +import { Notification } from 'packages/notification/model'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'of-notification-menu', + templateUrl: './app.notification.component.html' +}) + +export class AppNotificationComponent implements OnInit, AfterContentInit { + + notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page'))); + notifications: Notification[]; + + @Output() notificationLoaded = new EventEmitter(); + + constructor( + private router: Router, + private app: PagesComponent, + private listStore: Store, + private detailStore: Store, + ) { + } + + ngOnInit() { + this.notification$.subscribe( + (page: Page) => { + if (page !== null) { + this.notifications = page.content; + this.getUnconfirmedCount(); + } + }, + (error: RPCClientError) => { + console.log(error.response.message); + } + ); + } + + ngAfterContentInit() { + this.listStore.select(AuthSelector.select('member')).subscribe( + (member: Member) => { + const pageParams: PageParams = { + pageNo: '0', + countPerPage: '10', + sortCol: 'id', + sortDirection: 'descending' + }; + this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams })); + }, + (error) => { + console.log(error); + } + ); + } + + getUnconfirmedCount() { + let totalCnt = 0; + for (let i = 0; i < 5; i ++) { + if (!this.notifications[i].confirmDate) { + totalCnt += 1; + } + } + this.notificationLoaded.emit(totalCnt); + } + + onViewAllClick() { + this.router.navigate(['notification']); + } + + noNotiClick() { + } +} diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html index a2d510d..e7695f4 100644 --- a/src/app/commons/component/layout/topbar/app.topbar.component.html +++ b/src/app/commons/component/layout/topbar/app.topbar.component.html @@ -129,50 +129,21 @@
  • message - 5 + + {{notificationCount}} + Messages
    • -
  • +
  • diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.ts b/src/app/commons/component/layout/topbar/app.topbar.component.ts index 57e8a6c..38603e3 100644 --- a/src/app/commons/component/layout/topbar/app.topbar.component.ts +++ b/src/app/commons/component/layout/topbar/app.topbar.component.ts @@ -1,32 +1,24 @@ import { Component, OnInit } from '@angular/core'; import { AppComponent } from 'app/app.component'; -import { PagesComponent } from '../../../../pages/pages.component'; +import { PagesComponent } from 'app/pages/pages.component'; +import { AppNotificationComponent } from '../notification/app.notification.component'; @Component({ selector: 'of-topbar', - templateUrl: './app.topbar.component.html' + templateUrl: './app.topbar.component.html', }) export class AppTopbarComponent implements OnInit { - notis; - - constructor(public app: PagesComponent) { } + notificationCount; + constructor( + public app: PagesComponent, + ) { } ngOnInit() { - this.notis = [ - { - title: 'Notification 1', - content: 'Noti content11111111111111111111111111111111111111111111', - }, - { - title: 'Notification 2', - content: 'Noti content22222222222', - }, - { - title: 'Notification 3', - content: 'content3', - } - ]; } + onNotiLoaded(count) { + console.log('count changed'); + this.notificationCount = count; + } } diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 439840c..8397d21 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -19,6 +19,8 @@ import { PagesRoutingModule } from './pages-routing.module'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module'; import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module'; +import { AppNotificationComponent } from '../commons/component/layout/notification/app.notification.component'; +import { NotificationModule } from 'packages/notification/notification.module'; @NgModule({ imports: [ @@ -26,7 +28,8 @@ import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.mod PagesRoutingModule, LocalizationModule, PrimeNGModules, - TabbarModule + TabbarModule, + NotificationModule ], declarations: [ PagesComponent, @@ -37,6 +40,7 @@ import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.mod AppBreadcrumbComponent, AppRightpanelComponent, AppInlineProfileComponent, + AppNotificationComponent ], providers: [ { provide: LocationStrategy, useClass: HashLocationStrategy }, diff --git a/src/packages/notification/component/badge/notification.component.html b/src/packages/notification/component/badge/notification.component.html index 237d795..d103511 100644 --- a/src/packages/notification/component/badge/notification.component.html +++ b/src/packages/notification/component/badge/notification.component.html @@ -1,3 +1,4 @@ +