-
+
+ No data
-
-
-
-
- | Date |
- Title |
- Message |
- User |
-
-
-
-
- | {{notification.createDate | date: 'dd/MM/yyyy'}} |
- {{notification.title}} |
- {{notification.message}} |
- {{notification.member.name}} |
-
-
-
-
+
+
+
+
+ 왜 이 div가 없으면 위에 버튼이 안눌릴까요 ㅠㅠ 한참 헤맸자농ㅠㅠ
+
+
+
+ | Date |
+ Title |
+ Message |
+ User |
+
+
+
+
+ | {{notification.createDate | date: 'dd/MM/yyyy'}} |
+ {{notification.title}} |
+ {{notification.message}} |
+ {{notification.member.name}} |
+
+
+
+
+
+
diff --git a/@overflow/notification/component/list/list.component.ts b/@overflow/notification/component/list/list.component.ts
index 117cbc1..ffa957b 100644
--- a/@overflow/notification/component/list/list.component.ts
+++ b/@overflow/notification/component/list/list.component.ts
@@ -1,105 +1,35 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Paginator } from 'primeng/primeng';
@Component({
selector: 'of-notification-list',
templateUrl: './list.component.html',
})
-export class NotificationListComponent {
+export class NotificationListComponent implements OnChanges {
@Input() notificationPage: Page
;
+ @Output() pageChange = new EventEmitter();
+ @Output() markAll = new EventEmitter();
+ @Output() select = new EventEmitter();
+ @ViewChild('paginator') paginator: Paginator;
- constructor(
- ) { }
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['notificationPage']) {
+ this.paginator.changePage(this.notificationPage.number);
+ }
+ }
- // ngOnInit() {
- // // this.notificationSubscription$ = this.notification$.subscribe(
- // // (page: Page) => {
- // // if (page !== null) {
- // // this.notifications = page.content;
- // // this.totalLength = page.totalElements;
- // // }
- // // },
- // // (error: RPCClientError) => {
- // // console.log(error.response.message);
- // // }
- // // );
+ onPaginate(e) {
+ this.pageChange.emit(e.page);
+ }
- // this.readSuccess$.subscribe(
- // (noti: Notification) => {
- // if (noti) {
- // this.getNotifications(this.currPage);
- // }
- // },
- // (error: RPCClientError) => {
- // console.log(error.response.message);
- // }
- // );
- // }
+ onRowSelect(e) {
+ this.select.emit(e.data);
+ }
- // ngAfterContentInit() {
- // this.getNotifications(this.currPage);
- // }
-
- // ngOnDestroy() {
- // if (this.notificationSubscription$) {
- // this.notificationSubscription$.unsubscribe();
- // }
- // }
-
- // // 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;
- // // }
- // // }
- // // }
-
- // 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 }));
- // // this.currPage = pageIndex;
- // // },
- // // (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);
- // }
-
- // onMarkAllAsRead() {
- // // this.listStore.select(AuthSelector.select('member')).subscribe(
- // // (member: Member) => {
- // // const pageParams: PageParams = {
- // // pageNo: this.currPage + '',
- // // countPerPage: this.pageSize,
- // // sortCol: 'id',
- // // sortDirection: 'descending'
- // // };
- // // this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
- // // },
- // // (error) => {
- // // console.log(error);
- // // }
- // // );
- // }
+ onMarkAllAsRead() {
+ this.markAll.emit();
+ }
}
diff --git a/@overflow/notification/container/list/list-container.component.html b/@overflow/notification/container/list/list-container.component.html
index cc147e0..5cd25d6 100644
--- a/@overflow/notification/container/list/list-container.component.html
+++ b/@overflow/notification/container/list/list-container.component.html
@@ -1 +1,5 @@
-
+
diff --git a/@overflow/notification/container/list/list-container.component.ts b/@overflow/notification/container/list/list-container.component.ts
index 5a149d6..949f18c 100644
--- a/@overflow/notification/container/list/list-container.component.ts
+++ b/@overflow/notification/container/list/list-container.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
@@ -10,6 +10,7 @@ import { Member } from '@overflow/commons-typescript/model/member';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { Notification } from '@overflow/commons-typescript/model/notification';
+import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'of-notification-container',
@@ -17,23 +18,37 @@ import { Notification } from '@overflow/commons-typescript/model/notification';
})
export class NotificationListContainerComponent implements OnInit {
notificationPage$: Observable>;
+ @Output() pageChange = new EventEmitter();
+ pageNo: number;
constructor(
private store: Store,
+ private route: ActivatedRoute
) {
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
}
ngOnInit() {
+ this.route.queryParams.subscribe(queryParams => {
+ this.pageNo = queryParams['page'] || 0;
+ this.getNotifications();
+ });
+ }
+
+ onPageChange(pageNo: number) {
+ this.pageChange.emit(pageNo);
+ }
+
+ getNotifications() {
this.store.select(AuthSelector.select('member')).subscribe(
(member: Member) => {
const pageParams: PageParams = {
- pageNo: 0,
+ pageNo: this.pageNo,
countPerPage: 10,
sortCol: 'id',
sortDirection: 'descending',
};
- this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams}));
+ this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
},
(error) => {
console.log(error);
@@ -41,4 +56,25 @@ export class NotificationListContainerComponent implements OnInit {
);
}
+ markAllasRead() {
+ this.store.select(AuthSelector.select('member')).subscribe(
+ (member: Member) => {
+ const pageParams: PageParams = {
+ pageNo: this.pageNo,
+ countPerPage: 10,
+ sortCol: 'id',
+ sortDirection: 'descending'
+ };
+ this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ }
+
+ notificationSelected(notification: Notification) {
+ // this.router.navigate([notification.url]);
+ alert('redirect to ' + notification.url);
+ }
}
diff --git a/package-lock.json b/package-lock.json
index 16caa42..294b2b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -445,9 +445,9 @@
}
},
"@overflow/commons-typescript": {
- "version": "0.0.6",
- "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.6.tgz",
- "integrity": "sha512-XQ7FPsvaAU7xMoTqdXCZTzFy6myBoacAfUU0uNSHTbR8pgAIIg1loyKVw9q6rbgFhQ+ePInxqgjKWkh3GKIAKw=="
+ "version": "0.0.7",
+ "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.7.tgz",
+ "integrity": "sha512-qbrNlHEZjUfmuExcHEQ1Bf+PNQfkAZsbinDSGU4ndD4H8hNg/Cv2i4TWaLSWVqXrbIEZkKmv4AZJC9WQTUcFPA=="
},
"@schematics/angular": {
"version": "0.6.3",
diff --git a/src/app/pages/notification/notification-page-routing.module.ts b/src/app/pages/notification/notification-page-routing.module.ts
index bd9560b..3d422c4 100644
--- a/src/app/pages/notification/notification-page-routing.module.ts
+++ b/src/app/pages/notification/notification-page-routing.module.ts
@@ -6,7 +6,7 @@ const routes: Routes = [
{
path: '',
component: NotificationPageComponent,
- }
+ },
];
@NgModule({
diff --git a/src/app/pages/notification/notification-page.component.html b/src/app/pages/notification/notification-page.component.html
index 3025bd7..d6b08eb 100644
--- a/src/app/pages/notification/notification-page.component.html
+++ b/src/app/pages/notification/notification-page.component.html
@@ -2,7 +2,7 @@
diff --git a/src/app/pages/notification/notification-page.component.ts b/src/app/pages/notification/notification-page.component.ts
index 9dc21bc..1a1e33f 100644
--- a/src/app/pages/notification/notification-page.component.ts
+++ b/src/app/pages/notification/notification-page.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
+import { Router } from '@angular/router';
@Component({
@@ -9,7 +10,8 @@ import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
export class NotificationPageComponent implements OnInit {
constructor(
- private breadcrumbService: BreadcrumbService
+ private breadcrumbService: BreadcrumbService,
+ private router: Router
) {
breadcrumbService.setItems([
{ label: 'Notifications', routerLink: ['/notification'] },
@@ -19,4 +21,8 @@ export class NotificationPageComponent implements OnInit {
ngOnInit() {
}
+ onPageChange(pageNo: number) {
+ this.router.navigate(['/notification'], { queryParams: { page: pageNo } });
+ }
+
}