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

notifications

Browse Source
This commit is contained in:
insanity 2018-04-19 21:24:45 +09:00
parent 931daa3cda
commit 3eafb4dbc5
8 changed files with 136 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<h1>Notification page</h1> <of-notification></of-notification>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
import { NotificationPageComponent } from './notification-page.component'; import { NotificationPageComponent } from './notification-page.component';
import { NotificationPageRoutingModule } from './notification-page-routing.module'; import { NotificationPageRoutingModule } from './notification-page-routing.module';
import { NotificationModule } from 'packages/notification/notification.module';
@NgModule({ @NgModule({
@ -11,6 +12,7 @@ import { NotificationPageRoutingModule } from './notification-page-routing.modul
CommonModule, CommonModule,
FormsModule, FormsModule,
NotificationPageRoutingModule, NotificationPageRoutingModule,
NotificationModule
], ],
declarations: [ declarations: [
NotificationPageComponent, NotificationPageComponent,

7
src/packages/notification/component/badge/notification.component.html
View File

@ -1,4 +1,4 @@
<div class="toolbar-notification-container"> <!-- <div class="toolbar-notification-container">
<button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen"> <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
<mat-icon>notifications_none</mat-icon> <mat-icon>notifications_none</mat-icon>
<span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span> <span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
@ -32,7 +32,6 @@
<perfect-scrollbar class="content"> <perfect-scrollbar class="content">
<div *ngFor="let notification of notifications;"> <div *ngFor="let notification of notifications;">
<div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" > <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" >
<!-- [ngClass]="{'highlight': row.confirmDate === null}" -->
<mat-icon class="icon">notifications</mat-icon> <mat-icon class="icon">notifications</mat-icon>
<div class="title" fxLayout="column"> <div class="title" fxLayout="column">
<div class="name">{{ notification.message }}</div> <div class="name">{{ notification.message }}</div>
@ -48,6 +47,6 @@
</perfect-scrollbar> </perfect-scrollbar>
</ng-template> </ng-template>
<!-- <ng-template #elseBlock> --> <ng-template #elseBlock>
<!-- <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div> <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
</ng-template> --> </ng-template> -->

12
src/packages/notification/component/index.ts
View File

@ -1,7 +1,7 @@
// import { NotificationComponent } from './notification/notification.component'; import { NotificationComponent } from './notification/notification.component';
// import { NotificationBadgeComponent } from './badge/notification.component'; import { NotificationBadgeComponent } from './badge/notification.component';
// export const COMPONENTS = [ export const COMPONENTS = [
// NotificationComponent, NotificationComponent,
// NotificationBadgeComponent, NotificationBadgeComponent,
// ]; ];

41
src/packages/notification/component/notification/notification.component.html
View File

@ -1,29 +1,12 @@
<div class="example-container mat-elevation-z8"> <h1>Notifications</h1>
<mat-table #table [dataSource]="dataSource" matSort> <p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
<ng-container matColumnDef="id"> <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell> <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell> <td>{{notification.title}}</td>
</ng-container> <td>{{notification.message}}</td>
<td>{{notification.member.name}}</td>
<ng-container matColumnDef="title"> </tr>
<mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell> </ng-template>
<mat-cell *matCellDef="let element"> {{element.title}} </mat-cell> </p-table>
</ng-container> <p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
<ng-container matColumnDef="message">
<mat-header-cell *matHeaderCellDef mat-sort-header> Message </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.message}} </mat-cell>
</ng-container>
<ng-container matColumnDef="member">
<mat-header-cell *matHeaderCellDef mat-sort-header> Member </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)" [ngClass]="{'highlight': row.confirmDate === null}"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
</mat-paginator>
</div>

3
src/packages/notification/component/notification/notification.component.scss
View File

@ -1,3 +0,0 @@
.highlight {
background: #039be5
}

158
src/packages/notification/component/notification/notification.component.ts
View File

@ -1,78 +1,98 @@
// import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core'; import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
// import { MatTableDataSource, MatSort, PageEvent } from '@angular/material'; import { Router } from '@angular/router';
// import { Router } from '@angular/router'; import { Store, select } from '@ngrx/store';
// import { Store, select } from '@ngrx/store'; import { RPCClientError } from '@loafer/ng-rpc/protocol';
// import { RPCClientError } from '@loafer/ng-rpc/protocol'; import { Notification } from '../../model';
// import { Notification } from '../../model'; import * as DetailStore from '../../store/detail';
// import * as DetailStore from '../../store/detail'; import * as ListStore from '../../store/list';
// import * as ListStore from '../../store/list'; import { ReadAllByMemberSelector, ReadSelector } from '../../store';
// import { ReadAllByMemberSelector } from '../../store'; import { AuthSelector } from 'packages/member/store';
// import { AuthSelector } from 'packages/member/store'; import { Member } from '../../../member/model';
// import { Member } from '../../../member/model'; import { PageParams, Page } from 'app/commons/model';
// import { PageParams, Page } from 'app/commons/model';
// @Component({ @Component({
// selector: 'of-notification', selector: 'of-notification',
// templateUrl: './notification.component.html', templateUrl: './notification.component.html',
// styleUrls: ['./notification.component.scss'] })
// }) export class NotificationComponent implements OnInit, AfterContentInit {
// 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']; pageSize = '12';
// dataSource: MatTableDataSource<Notification>; totalLength = 0;
// PAGE_SIZE = '10';
// totalLength = 0;
// constructor( constructor(
// private router: Router, private router: Router,
// private listStore: Store<ListStore.State>, private listStore: Store<ListStore.State>,
// private detailStore: Store<DetailStore.State> private detailStore: Store<DetailStore.State>
// ) { } ) { }
// ngOnInit() { ngOnInit() {
// this.notification$.subscribe( this.notification$.subscribe(
// (page: Page) => { (page: Page) => {
// if (page !== null) { if (page !== null) {
// this.totalLength = page.totalElements; this.notifications = page.content;
// this.dataSource = new MatTableDataSource(page.content); this.totalLength = page.totalElements;
// } }
// }, },
// (error: RPCClientError) => { (error: RPCClientError) => {
// console.log(error.response.message); console.log(error.response.message);
// } }
// ); );
// }
// ngAfterContentInit() { this.readSuccess$.subscribe(
// this.getNotifications(0); (noti: Notification) => {
// } if (noti) {
this.updateData(noti);
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
// getNotifications(pageIndex: number) { ngAfterContentInit() {
// this.listStore.select(AuthSelector.select('member')).subscribe( this.getNotifications(0);
// (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);
// }
// );
// }
// handleRowClick(notification: Notification) { updateData(noti: Notification) {
// this.detailStore.dispatch(new DetailStore.MarkAsRead(notification)); for (let i = 0; i < this.notifications.length; i++) {
// alert('Will redirect to ' + notification.url); const exist = this.notifications[i];
// // this.router.navigate([n.url]); 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);
}
}

44
src/packages/notification/notification.module.ts
View File

@ -1,24 +1,26 @@
// import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
// import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
// import { SERVICES } from './service'; 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({ @NgModule({
// imports: [ imports: [
// CommonModule, CommonModule,
// NotificationStoreModule NotificationStoreModule,
// ], PrimeNGModules
// declarations: [ ],
// COMPONENTS, declarations: [
// ], COMPONENTS,
// exports: [ ],
// COMPONENTS, exports: [
// ], COMPONENTS,
// providers: [ ],
// SERVICES, providers: [
// ], SERVICES,
// }) ],
// export class NotificationModule { } })
export class NotificationModule { }