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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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