{{ notification.message }}
@@ -48,6 +47,6 @@
-
-
\ No newline at end of file
diff --git a/src/packages/notification/component/index.ts b/src/packages/notification/component/index.ts
index 683c4c1..7b18dbb 100644
--- a/src/packages/notification/component/index.ts
+++ b/src/packages/notification/component/index.ts
@@ -1,7 +1,7 @@
-// import { NotificationComponent } from './notification/notification.component';
-// import { NotificationBadgeComponent } from './badge/notification.component';
+import { NotificationComponent } from './notification/notification.component';
+import { NotificationBadgeComponent } from './badge/notification.component';
-// export const COMPONENTS = [
-// NotificationComponent,
-// NotificationBadgeComponent,
-// ];
+export const COMPONENTS = [
+ NotificationComponent,
+ NotificationBadgeComponent,
+];
diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html
index 2e236d5..ce875db 100644
--- a/src/packages/notification/component/notification/notification.component.html
+++ b/src/packages/notification/component/notification/notification.component.html
@@ -1,29 +1,12 @@
-
-
-
-
- Name
- {{element.id}}
-
-
-
- Title
- {{element.title}}
-
-
-
- Message
- {{element.message}}
-
-
-
- Member
- {{element.member.name}}
-
-
-
-
-
-
-
-
\ No newline at end of file
+
Notifications
+
+
+
+ | {{notification.createDate | date: 'dd/MM/yyyy'}} |
+ {{notification.title}} |
+ {{notification.message}} |
+ {{notification.member.name}} |
+
+
+
+
diff --git a/src/packages/notification/component/notification/notification.component.scss b/src/packages/notification/component/notification/notification.component.scss
deleted file mode 100644
index ea8f92b..0000000
--- a/src/packages/notification/component/notification/notification.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.highlight {
- background: #039be5
-}
diff --git a/src/packages/notification/component/notification/notification.component.ts b/src/packages/notification/component/notification/notification.component.ts
index 21e45bf..9f3e7a6 100644
--- a/src/packages/notification/component/notification/notification.component.ts
+++ b/src/packages/notification/component/notification/notification.component.ts
@@ -1,78 +1,98 @@
-// import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
-// import { MatTableDataSource, MatSort, PageEvent } from '@angular/material';
-// import { Router } from '@angular/router';
-// import { Store, select } from '@ngrx/store';
-// import { RPCClientError } from '@loafer/ng-rpc/protocol';
-// import { Notification } from '../../model';
-// 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';
-// import { PageParams, Page } from 'app/commons/model';
+import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Notification } from '../../model';
+import * as DetailStore from '../../store/detail';
+import * as ListStore from '../../store/list';
+import { ReadAllByMemberSelector, ReadSelector } from '../../store';
+import { AuthSelector } from 'packages/member/store';
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
-// @Component({
-// selector: 'of-notification',
-// templateUrl: './notification.component.html',
-// styleUrls: ['./notification.component.scss']
-// })
-// export class NotificationComponent implements OnInit, AfterContentInit {
+@Component({
+ selector: 'of-notification',
+ templateUrl: './notification.component.html',
+})
+export class NotificationComponent implements OnInit, AfterContentInit {
-// notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+ notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+ notifications: Notification[];
+ readSuccess$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
-// displayedColumns = ['id', 'title', 'message', 'member'];
-// dataSource: MatTableDataSource
;
-// PAGE_SIZE = '10';
-// totalLength = 0;
+ pageSize = '12';
+ totalLength = 0;
-// constructor(
-// private router: Router,
-// private listStore: Store,
-// private detailStore: Store
-// ) { }
+ constructor(
+ private router: Router,
+ private listStore: Store,
+ private detailStore: Store
+ ) { }
-// ngOnInit() {
-// this.notification$.subscribe(
-// (page: Page) => {
-// if (page !== null) {
-// this.totalLength = page.totalElements;
-// this.dataSource = new MatTableDataSource(page.content);
-// }
-// },
-// (error: RPCClientError) => {
-// console.log(error.response.message);
-// }
-// );
-// }
+ ngOnInit() {
+ this.notification$.subscribe(
+ (page: Page) => {
+ if (page !== null) {
+ this.notifications = page.content;
+ this.totalLength = page.totalElements;
+ }
+ },
+ (error: RPCClientError) => {
+ console.log(error.response.message);
+ }
+ );
-// ngAfterContentInit() {
-// this.getNotifications(0);
-// }
+ this.readSuccess$.subscribe(
+ (noti: Notification) => {
+ if (noti) {
+ this.updateData(noti);
+ }
+ },
+ (error: RPCClientError) => {
+ console.log(error.response.message);
+ }
+ );
+ }
-// getNotifications(pageIndex: number) {
-// this.listStore.select(AuthSelector.select('member')).subscribe(
-// (member: Member) => {
-// const pageParams: PageParams = {
-// pageNo: pageIndex + '',
-// countPerPage: this.PAGE_SIZE,
-// sortCol: 'id',
-// sortDirection: 'descending'
-// };
-// this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
-// },
-// (error) => {
-// console.log(error);
-// }
-// );
-// }
+ ngAfterContentInit() {
+ this.getNotifications(0);
+ }
-// handleRowClick(notification: Notification) {
-// this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
-// alert('Will redirect to ' + notification.url);
-// // this.router.navigate([n.url]);
-// }
+ updateData(noti: Notification) {
+ for (let i = 0; i < this.notifications.length; i++) {
+ const exist = this.notifications[i];
+ if (exist.id === noti.id) {
+ this.notifications[i] = noti;
+ return;
+ }
+ }
-// handlePaging(e: PageEvent) {
-// this.getNotifications(e.pageIndex);
-// }
-// }
+ }
+
+ getNotifications(pageIndex: number) {
+ this.listStore.select(AuthSelector.select('member')).subscribe(
+ (member: Member) => {
+ const pageParams: PageParams = {
+ pageNo: pageIndex + '',
+ countPerPage: this.pageSize,
+ sortCol: 'id',
+ sortDirection: 'descending'
+ };
+ this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ }
+
+ onRowSelect(event) {
+ this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
+ alert('Will redirect to ' + event.data.url);
+ // this.router.navigate([n.url]);
+ }
+
+ onPaging(e) {
+ this.getNotifications(e.page);
+ }
+}
diff --git a/src/packages/notification/notification.module.ts b/src/packages/notification/notification.module.ts
index da258bd..f2051cd 100644
--- a/src/packages/notification/notification.module.ts
+++ b/src/packages/notification/notification.module.ts
@@ -1,24 +1,26 @@
-// import { NgModule } from '@angular/core';
-// import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
-// import { COMPONENTS } from './component';
-// import { SERVICES } from './service';
+import { COMPONENTS } from './component';
+import { SERVICES } from './service';
-// import { NotificationStoreModule } from './notification-store.module';
+import { NotificationStoreModule } from './notification-store.module';
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
-// @NgModule({
-// imports: [
-// CommonModule,
-// NotificationStoreModule
-// ],
-// declarations: [
-// COMPONENTS,
-// ],
-// exports: [
-// COMPONENTS,
-// ],
-// providers: [
-// SERVICES,
-// ],
-// })
-// export class NotificationModule { }
+@NgModule({
+ imports: [
+ CommonModule,
+ NotificationStoreModule,
+ PrimeNGModules
+ ],
+ declarations: [
+ COMPONENTS,
+ ],
+ exports: [
+ COMPONENTS,
+ ],
+ providers: [
+ SERVICES,
+ ],
+})
+export class NotificationModule { }