notification center

This commit is contained in:
insanity 2018-03-14 20:18:37 +09:00
parent 951f7f5207
commit a79ebe711a
24 changed files with 430 additions and 286 deletions

View File

@ -7,7 +7,7 @@
</button>
<span class="spacer"></span>
<of-notification-badge [notifications]="toolbarHelpers?.notifications"></of-notification-badge>
<of-notification-badge></of-notification-badge>
<div class="menu-section">
<button mat-icon-button [matMenuTriggerFor]="countryMenu" aria-label="Open x-positioned menu">
<mat-icon>translate</mat-icon>

View File

@ -1,5 +1,4 @@
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { ToolbarHelpers } from './toolbar.helpers';
import { Title } from '@angular/platform-browser';
import { Direction } from '@angular/cdk/bidi';
@ -25,7 +24,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
@Input() matDrawerShow;
searchOpen = false;
toolbarHelpers = ToolbarHelpers;
dir: Direction;

View File

@ -1,22 +0,0 @@
export const ToolbarHelpers = {
notifications: [
{
id: 'id',
title: 'Mail 5',
lastTime: '23 Minutes ago',
state: 'state'
},
{
id: 'id',
title: 'Mail 5',
lastTime: '23 Minutes ago',
state: 'state'
},
{
id: 'id',
title: 'Mail 5',
lastTime: '23 Minutes ago',
state: 'state'
},
],
};

View File

@ -30,16 +30,17 @@
<ng-template #thenBlock>
<perfect-scrollbar class="content">
<div *ngFor="let notification of notifications; last as isLast">
<div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
<div *ngFor="let notification of notifications;">
<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>
<div class="title" fxLayout="column">
<div class="name">{{ notification.title }}</div>
<div class="time">{{ notification.lastTime }}</div>
<div class="name">{{ notification.message }}</div>
<div class="time">{{ notification.member.name }}</div>
</div>
<span fxFlex></span>
<button type="button" mat-icon-button (click)="delete(notification)">
<mat-icon class="close">close</mat-icon>
<button type="button" mat-icon-button (click)="mark(notification, $event)">
<mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
</button>
</div>
<div class="divider" *ngIf="!isLast"></div>

View File

@ -1,5 +1,8 @@
$prefix: 'notification';
.highlight {
background: #039be5
}
.badge {
position: absolute;

View File

@ -1,34 +1,103 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { RPCError } from 'packages/core/rpc/error';
import { Notification } from '../../model';
import * as ListStore from '../../store/list';
import * as DetailStore from '../../store/detail';
import { ReadAllByMemberSelector, ReadSelector } from '../../store';
import { AuthSelector } from 'packages/member/store';
import { Member } from '../../../member/model';
import { PageParams, Page } from 'app/commons/model';
import { MarkAsRead } from '../../store/detail';
@Component({
selector: 'of-notification-badge',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationBadgeComponent implements OnInit {
cssPrefix = 'toolbar-notification';
export class NotificationBadgeComponent implements OnInit, AfterContentInit {
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
isOpen = false;
@Input() notifications = [];
notifications: Notification[] = null;
constructor(
private router: Router
private router: Router,
private listStore: Store<ListStore.State>,
private detailStore: Store<DetailStore.State>
) { }
ngOnInit() {
this.notification$.subscribe(
(page: Page) => {
if (page !== null) {
this.notifications = page.content;
}
},
(error: RPCError) => {
console.log(error.message);
}
);
this.mark$.subscribe(
(n: Notification) => {
if (n !== null && n.confirmDate !== null) {
this.getNotifications(0);
}
},
(error: RPCError) => {
console.log(error.message);
}
);
}
select() {
ngAfterContentInit() {
this.getNotifications(0);
}
delete(notification) {
getNotifications(pageIndex: number) {
this.listStore.select(AuthSelector.select('member')).subscribe(
(member: Member) => {
const pageParams: PageParams = {
pageNo: '0',
countPerPage: '10',
sortCol: 'id',
sortDirection: 'descending'
};
this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
},
(error) => {
console.log(error);
}
);
}
mark(notification: Notification, e: Event) {
this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
e.stopPropagation();
}
handleClick(n: Notification) {
alert('Will redirect to ' + n.url);
}
handleMarkAllAsRead() {
console.log('Mark All');
this.listStore.select(AuthSelector.select('member')).subscribe(
(member: Member) => {
const pageParams: PageParams = {
pageNo: '0',
countPerPage: '10',
sortCol: 'id',
sortDirection: 'descending'
};
this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
},
(error) => {
console.log(error);
}
);
}
handleViewAll() {

View File

@ -21,7 +21,7 @@
<mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
<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)">

View File

@ -1,165 +1,3 @@
$prefix: 'notification';
.badge {
position: absolute;
top: 0;
left: 50%;
font-weight: 700;
line-height: 13px;
height: 13px;
padding: 5px;
border-radius: 26%;
width: 30%;
background-color: #f44336;
color: #fff;
border-color:#f44336
}
.#{$prefix} {
&-container {
position: relative;
display: flex;
align-items: center;
}
&-btn {
display: flex;
justify-content: center;
margin-right: 10px;
}
}
.dropdown {
background: white;
position: absolute;
top: 42px;
right: 28px;
min-width: 350px;
z-index: 2;
transform: translateY(0) scale(0);
transform-origin: top right;
visibility: hidden;
transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
@media screen and (max-width: 599px) {
min-width: 50vw;
right: 5px;
transform: translateY(0);
visibility: hidden;
transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
}
&.open {
transform: translateY(0) scale(1);
visibility: visible;
}
.card {
.header {
background: #EEEEEE;
min-height: 54px;
padding-left: 16px;
padding-right: 8px;
color: #555;
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
border-bottom: 1px solid #e0e0e0;
.extra {
font-size: 12px;
color: #888;
}
}
}
.content {
overflow: hidden;
max-height: 256px;
.notification {
min-height: 64px;
padding: 0 16px 0 14px;
position: relative;
color: #666;
cursor: pointer;
.icon {
height: 28px;
width: 28px;
line-height: 28px;
font-size: 18px;
margin-right: 13px;
text-align: center;
border-radius: 50%;
background: #FFF;
color: #888;
border: 1px solid #EEE;
}
.title {
font-weight: 500;
font-size: 14px;
}
.time {
font-size: 12px;
}
.close {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
}
&.primary {
.icon {
background: #ccc;
color: #ddd;
}
}
&.accent {
.icon {
background: #aaa;
color: #bbb;
}
}
&.warn {
.icon {
background: #eee;
color: #ddd;
}
}
&.read {
color: #999;
.name {
font-weight: normal;
}
}
}
}
.footer {
min-height: 42px;
border-top: 1px solid #EEE;
.action {
cursor: pointer;
color: #AAA;
text-align: center;
font-size: 13px;
}
}
.divider {
width: calc(100% - 30px);
height: 1px;
background: #EEE;
margin: 0 16px 0 14px;
}
.highlight {
background: #039be5
}

View File

@ -4,7 +4,7 @@ import { Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { RPCError } from 'packages/core/rpc/error';
import { Notification } from '../../model';
import * as NotificationStore from '../../store/notification';
import * as NotificationStore from '../../store/list';
import { ReadAllByMemberSelector } from '../../store';
import { AuthSelector } from 'packages/member/store';
import { Member } from '../../../member/model';
@ -65,7 +65,8 @@ export class NotificationComponent implements OnInit, AfterContentInit {
}
handleRowClick(n: Notification) {
this.router.navigate([n.url]);
alert('Will redirect to ' + n.url);
// this.router.navigate([n.url]);
}
handlePaging(e: PageEvent) {

View File

@ -7,7 +7,7 @@ import { RPCClient } from 'packages/core/rpc/client/RPCClient';
import { Notification } from '../model';
import { Member } from '../../member/model';
import { PageParams } from 'app/commons/model';
import { PageParams, Page } from 'app/commons/model';
@Injectable()
export class NotificationService {
@ -18,10 +18,16 @@ export class NotificationService {
}
public readAllByMember(member: Member, pageParams: PageParams): Observable<Notification[]> {
public readAllByMember(member: Member, pageParams: PageParams): Observable<Page> {
return this.rpcClient.call('NotificationService.readAllByMember', member, pageParams);
}
public markAllAsRead(member: Member, pageParams: PageParams): Observable<Page> {
return this.rpcClient.call('NotificationService.markAllAsRead', member, pageParams);
}
public markAsRead(notification: Notification): Observable<Notification> {
return this.rpcClient.call('NotificationService.markAsRead', notification);
}
}

View File

@ -0,0 +1,61 @@
import { Action } from '@ngrx/store';
import { RPCError } from 'packages/core/rpc/error';
import { Member } from '../../../member/model';
import { PageParams, Page } from 'app/commons/model';
import { Notification } from '../../model';
export enum ActionType {
MarkAsRead = '[Notification.notification] MarkAsRead',
MarkAsReadSuccess = '[Notification.notification] MarkAsReadSuccess',
MarkAsReadFailure = '[Notification.notification] MarkAsReadFailure',
// ReadUnconfirmedCount = '[Notification.notification] ReadUnconfirmedCount',
// ReadUnconfirmedCountSuccess = '[Notification.notification] ReadUnconfirmedCountSuccess',
// ReadUnconfirmedCountFailure = '[Notification.notification] ReadUnconfirmedCountFailure',
}
export class MarkAsRead implements Action {
readonly type = ActionType.MarkAsRead;
constructor(public payload: Notification ) {}
}
export class MarkAsReadSuccess implements Action {
readonly type = ActionType.MarkAsReadSuccess;
constructor(public payload: Notification) {}
}
export class MarkAsReadFailure implements Action {
readonly type = ActionType.MarkAsReadFailure;
constructor(public payload: RPCError) {}
}
// export class ReadUnconfirmedCount implements Action {
// readonly type = ActionType.ReadUnconfirmedCount;
// constructor(public payload: Member) {}
// }
// export class ReadUnconfirmedCountSuccess implements Action {
// readonly type = ActionType.ReadUnconfirmedCountSuccess;
// constructor(public payload: number) {}
// }
// export class ReadUnconfirmedCountFailure implements Action {
// readonly type = ActionType.ReadUnconfirmedCountFailure;
// constructor(public payload: RPCError) {}
// }
export type Actions =
| MarkAsRead
| MarkAsReadSuccess
| MarkAsReadFailure
// | ReadUnconfirmedCount
// | ReadUnconfirmedCountSuccess
// | ReadUnconfirmedCountFailure
;

View File

@ -0,0 +1,50 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCError } from 'packages/core/rpc/error';
import { Notification } from '../../model';
import { NotificationService } from '../../service/notification.service';
import {
MarkAsRead,
MarkAsReadSuccess,
MarkAsReadFailure,
ActionType,
} from './notification.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private notificationService: NotificationService,
private router: Router
) { }
@Effect()
markAsRead$: Observable<Action> = this.actions$
.ofType(ActionType.MarkAsRead)
.map((action: MarkAsRead) => action.payload)
.switchMap(payload => this.notificationService.markAsRead(payload))
.map(notification => {
return new MarkAsReadSuccess(notification);
})
.catch((error: RPCError) => {
console.log(error.message);
return of(new MarkAsReadFailure(error));
});
}

View File

@ -0,0 +1,44 @@
import {
Actions,
ActionType,
} from './notification.action';
import {
State,
initialState,
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.MarkAsRead: {
return {
...state,
error: null,
pending: true,
};
}
case ActionType.MarkAsReadSuccess: {
return {
...state,
error: null,
pending: false,
notification: action.payload,
};
}
case ActionType.MarkAsReadFailure: {
return {
...state,
error: action.payload,
pending: false,
notification: null,
};
}
default: {
return state;
}
}
}

View File

@ -0,0 +1,14 @@
import { RPCError } from 'packages/core/rpc/error';
import { Notification } from '../../model';
export interface State {
error: RPCError | null;
pending: boolean;
notification: Notification;
}
export const initialState: State = {
error: null,
pending: false,
notification: null,
};

View File

@ -8,23 +8,31 @@ import {
import { MODULE } from '../notification.constant';
import * as NotificationStore from './notification';
import * as ListStore from './list';
import * as DetailStore from './detail';
export interface State {
notifications: NotificationStore.State;
notifications: ListStore.State;
notification: DetailStore.State;
}
export const REDUCERS = {
notifications: NotificationStore.reducer,
notifications: ListStore.reducer,
notification: DetailStore.reducer,
};
export const EFFECTS = [
NotificationStore.Effects,
ListStore.Effects,
DetailStore.Effects,
];
export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
export const ReadAllByMemberSelector = new StateSelector<NotificationStore.State>(createSelector(
export const ReadAllByMemberSelector = new StateSelector<ListStore.State>(createSelector(
selectNotificationState,
(state: State) => state.notifications
));
export const ReadSelector = new StateSelector<DetailStore.State>(createSelector(
selectNotificationState,
(state: State) => state.notification
));

View File

@ -0,0 +1,4 @@
export * from './notification.action';
export * from './notification.effect';
export * from './notification.reducer';
export * from './notification.state';

View File

@ -9,6 +9,9 @@ export enum ActionType {
ReadAllByMember = '[Notification.notification] ReadAllByMember',
ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
MarkAllAsRead = '[Notification.notification] MarkAllAsRead',
MarkAllAsReadSuccess = '[Notification.notification] MarkAllAsReadSuccess',
MarkAllAsReadFailure = '[Notification.notification] MarkAllAsReadFailure',
}
export class ReadAllByMember implements Action {
@ -20,7 +23,7 @@ export class ReadAllByMember implements Action {
export class ReadAllByMemberSuccess implements Action {
readonly type = ActionType.ReadAllByMemberSuccess;
constructor(public payload: any) {}
constructor(public payload: Page) {}
}
export class ReadAllByMemberFailure implements Action {
@ -29,8 +32,30 @@ export class ReadAllByMemberFailure implements Action {
constructor(public payload: RPCError) {}
}
export class MarkAllAsRead implements Action {
readonly type = ActionType.MarkAllAsRead;
constructor(public payload: { member: Member, pageParams: PageParams }) {}
}
export class MarkAllAsReadSuccess implements Action {
readonly type = ActionType.MarkAllAsReadSuccess;
constructor(public payload: Page) {}
}
export class MarkAllAsReadFailure implements Action {
readonly type = ActionType.MarkAllAsReadFailure;
constructor(public payload: RPCError) {}
}
export type Actions =
| ReadAllByMember
| ReadAllByMemberSuccess
| ReadAllByMemberFailure
| MarkAllAsRead
| MarkAllAsReadSuccess
| MarkAllAsReadFailure
;

View File

@ -0,0 +1,15 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './notification.effect';
describe('Notification.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -23,6 +23,9 @@ import {
ReadAllByMemberSuccess,
ReadAllByMemberFailure,
ActionType,
MarkAllAsRead,
MarkAllAsReadSuccess,
MarkAllAsReadFailure,
} from './notification.action';
@Injectable()
@ -36,14 +39,6 @@ export class Effects {
@Effect()
readAllByMember$: Observable<Action> = this.actions$
// .ofType(ActionType.ReadAllByMember)
// .map((action: ReadAllByMember) => action.payload)
// .exhaustMap(member =>
// this.notificationService
// .readAllByMember(member)
// .map(notificationList => new ReadAllByMemberSuccess(notificationList))
// .catch(error => of(new ReadAllByMemberFailure(error)))
// );
.ofType(ActionType.ReadAllByMember)
.map((action: ReadAllByMember) => action.payload)
.switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
@ -54,4 +49,16 @@ export class Effects {
return of(new ReadAllByMemberFailure(error));
});
@Effect()
markAllAsRead$: Observable<Action> = this.actions$
.ofType(ActionType.MarkAllAsRead)
.map((action: MarkAllAsRead) => action.payload)
.switchMap(payload => this.notificationService.markAllAsRead(payload.member, payload.pageParams))
.map(page => {
return new MarkAllAsReadSuccess(page);
})
.catch((error: RPCError) => {
console.log('errrrrrrrrrrrrrr : ' + error.message);
return of(new MarkAllAsReadFailure(error));
});
}

View File

@ -0,0 +1,69 @@
import {
Actions,
ActionType,
} from './notification.action';
import {
State,
initialState,
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByMember: {
return {
...state,
error: null,
pending: true,
};
}
case ActionType.ReadAllByMemberSuccess: {
return {
...state,
error: null,
pending: false,
page: action.payload,
};
}
case ActionType.ReadAllByMemberFailure: {
return {
...state,
error: action.payload,
pending: false,
page: null,
};
}
case ActionType.MarkAllAsRead: {
return {
...state,
error: null,
pending: true,
};
}
case ActionType.MarkAllAsReadSuccess: {
return {
...state,
error: null,
pending: false,
page: action.payload,
};
}
case ActionType.MarkAllAsReadFailure: {
return {
...state,
error: action.payload,
pending: false,
page: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,18 +1,14 @@
import { RPCError } from 'packages/core/rpc/error';
import { Notification } from '../../model';
import { Page } from 'app/commons/model';
export interface State {
error: RPCError | null;
pending: boolean;
page: Page;
// notifications: Notification[] | null;
}
export const initialState: State = {
error: null,
pending: false,
page: null,
// notifications: null,
};

View File

@ -1,43 +0,0 @@
import {
Actions,
ActionType,
} from './notification.action';
import {
State,
initialState,
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByMember: {
return {
...state,
error: null,
pending: true,
};
}
case ActionType.ReadAllByMemberSuccess: {
return {
...state,
error: null,
pending: false,
page: action.payload,
};
}
case ActionType.ReadAllByMemberFailure: {
return {
...state,
error: action.payload,
pending: false,
page: null,
};
}
default: {
return state;
}
}
}