test
This commit is contained in:
insanity
parent
98c166ebcb
commit
68e3115d60
|
|
@ -1,24 +1,31 @@
|
|||
<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 pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:9em">Date</th>
|
||||
<th style="width:12em">Title</th>
|
||||
<th pResizableColumn>Message</th>
|
||||
<th style="width:8em">User</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
|
||||
<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>
|
||||
<th style="width:12em">Title</th>
|
||||
<th pResizableColumn>Message</th>
|
||||
<th style="width:8em">User</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator #paginator [rows]="notificationPage.size" [totalRecords]="notificationPage.totalElements"
|
||||
(onPageChange)="onPaginate($event)" [first]="2"></p-paginator>
|
||||
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
6
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const routes: Routes = [
|
|||
{
|
||||
path: '',
|
||||
component: NotificationPageComponent,
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 } });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user