overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
insanity 2018-05-25 16:29:06 +09:00
parent 98c166ebcb
commit 68e3115d60
8 changed files with 106 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
@overflow/notification/component/list/list.component.html
View File

@ -1,9 +1,13 @@
<h1>Notifications</h1>
<div class="ui-g-12" dir="rtl">
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
<div *ngIf="!notificationPage; else content">
No data
</div>
<p-table [value]="notificationPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
<ng-template #content>
<div class="ui-g-12" dir="rtl">
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
</div>
<div>왜 이 div가 없으면 위에 버튼이 안눌릴까요 ㅠㅠ 한참 헤맸자농ㅠㅠ </div>
<p-table [value]="notificationPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
<ng-template pTemplate="header">
<tr>
<th style="width:9em">Date</th>
@ -20,5 +24,8 @@
<td>{{notification.member.name}}</td>
</tr>
</ng-template>
</p-table>
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
</p-table>
<p-paginator #paginator [rows]="notificationPage.size" [totalRecords]="notificationPage.totalElements"
(onPageChange)="onPaginate($event)" [first]="2"></p-paginator>
</ng-template>

112
@overflow/notification/component/list/list.component.ts
View File

@ -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<Notification>;
@Output() pageChange = new EventEmitter<number>();
@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();
}
}

6
@overflow/notification/container/list/list-container.component.html
View File

@ -1 +1,5 @@
<of-notification-list [notificationPage]="notificationPage$ | async"></of-notification-list>
<of-notification-list [notificationPage]="notificationPage$ | async"
(pageChange)="onPageChange($event)"
(markAll)="markAllasRead($event)"
(select)="notificationSelected($event)"
></of-notification-list>

42
@overflow/notification/container/list/list-container.component.ts
View File

@ -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<Page<Notification>>;
@Output() pageChange = new EventEmitter<number>();
pageNo: number;
constructor(
private store: Store<ListStore.State>,
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);
}
}

6
package-lock.json generated
View File

@ -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",

2
src/app/pages/notification/notification-page-routing.module.ts
View File

@ -6,7 +6,7 @@ const routes: Routes = [
{
path: '',
component: NotificationPageComponent,
}
},
];
@NgModule({

2
src/app/pages/notification/notification-page.component.html
View File

@ -2,7 +2,7 @@
<div class="ui-g">
<div class="ui-g-12">
<div class="card no-margin">
<of-notification-container></of-notification-container>
<of-notification-container (pageChange)="onPageChange($event)"></of-notification-container>
</div>
</div>
</div>

8
src/app/pages/notification/notification-page.component.ts
View File

@ -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 } });
}
}