notification center
This commit is contained in:
parent
951f7f5207
commit
a79ebe711a
|
@ -7,7 +7,7 @@
|
||||||
</button>
|
</button>
|
||||||
<span class="spacer"></span>
|
<span class="spacer"></span>
|
||||||
|
|
||||||
<of-notification-badge [notifications]="toolbarHelpers?.notifications"></of-notification-badge>
|
<of-notification-badge></of-notification-badge>
|
||||||
<div class="menu-section">
|
<div class="menu-section">
|
||||||
<button mat-icon-button [matMenuTriggerFor]="countryMenu" aria-label="Open x-positioned menu">
|
<button mat-icon-button [matMenuTriggerFor]="countryMenu" aria-label="Open x-positioned menu">
|
||||||
<mat-icon>translate</mat-icon>
|
<mat-icon>translate</mat-icon>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
|
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
|
||||||
import { ToolbarHelpers } from './toolbar.helpers';
|
|
||||||
import { Title } from '@angular/platform-browser';
|
import { Title } from '@angular/platform-browser';
|
||||||
import { Direction } from '@angular/cdk/bidi';
|
import { Direction } from '@angular/cdk/bidi';
|
||||||
|
|
||||||
|
@ -25,7 +24,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
@Input() matDrawerShow;
|
@Input() matDrawerShow;
|
||||||
|
|
||||||
searchOpen = false;
|
searchOpen = false;
|
||||||
toolbarHelpers = ToolbarHelpers;
|
|
||||||
|
|
||||||
dir: Direction;
|
dir: Direction;
|
||||||
|
|
||||||
|
|
|
@ -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'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
|
@ -30,16 +30,17 @@
|
||||||
|
|
||||||
<ng-template #thenBlock>
|
<ng-template #thenBlock>
|
||||||
<perfect-scrollbar class="content">
|
<perfect-scrollbar class="content">
|
||||||
<div *ngFor="let notification of notifications; last as isLast">
|
<div *ngFor="let notification of notifications;">
|
||||||
<div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
|
<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.title }}</div>
|
<div class="name">{{ notification.message }}</div>
|
||||||
<div class="time">{{ notification.lastTime }}</div>
|
<div class="time">{{ notification.member.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<span fxFlex></span>
|
<span fxFlex></span>
|
||||||
<button type="button" mat-icon-button (click)="delete(notification)">
|
<button type="button" mat-icon-button (click)="mark(notification, $event)">
|
||||||
<mat-icon class="close">close</mat-icon>
|
<mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider" *ngIf="!isLast"></div>
|
<div class="divider" *ngIf="!isLast"></div>
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
$prefix: 'notification';
|
$prefix: 'notification';
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: #039be5
|
||||||
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -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 { 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({
|
@Component({
|
||||||
selector: 'of-notification-badge',
|
selector: 'of-notification-badge',
|
||||||
templateUrl: './notification.component.html',
|
templateUrl: './notification.component.html',
|
||||||
styleUrls: ['./notification.component.scss']
|
styleUrls: ['./notification.component.scss']
|
||||||
})
|
})
|
||||||
export class NotificationBadgeComponent implements OnInit {
|
export class NotificationBadgeComponent implements OnInit, AfterContentInit {
|
||||||
|
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
|
||||||
cssPrefix = 'toolbar-notification';
|
mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
|
||||||
isOpen = false;
|
isOpen = false;
|
||||||
@Input() notifications = [];
|
notifications: Notification[] = null;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router
|
private router: Router,
|
||||||
|
private listStore: Store<ListStore.State>,
|
||||||
|
private detailStore: Store<DetailStore.State>
|
||||||
) { }
|
) { }
|
||||||
|
|
||||||
ngOnInit() {
|
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() {
|
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() {
|
handleViewAll() {
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
<mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
|
<mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
|
||||||
</ng-container>
|
</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-table>
|
||||||
|
|
||||||
<mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
|
<mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
|
||||||
|
|
|
@ -1,165 +1,3 @@
|
||||||
$prefix: 'notification';
|
.highlight {
|
||||||
|
background: #039be5
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -4,7 +4,7 @@ import { Router } from '@angular/router';
|
||||||
import { Store, select } from '@ngrx/store';
|
import { Store, select } from '@ngrx/store';
|
||||||
import { RPCError } from 'packages/core/rpc/error';
|
import { RPCError } from 'packages/core/rpc/error';
|
||||||
import { Notification } from '../../model';
|
import { Notification } from '../../model';
|
||||||
import * as NotificationStore from '../../store/notification';
|
import * as NotificationStore from '../../store/list';
|
||||||
import { ReadAllByMemberSelector } 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';
|
||||||
|
@ -65,7 +65,8 @@ export class NotificationComponent implements OnInit, AfterContentInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRowClick(n: Notification) {
|
handleRowClick(n: Notification) {
|
||||||
this.router.navigate([n.url]);
|
alert('Will redirect to ' + n.url);
|
||||||
|
// this.router.navigate([n.url]);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePaging(e: PageEvent) {
|
handlePaging(e: PageEvent) {
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { RPCClient } from 'packages/core/rpc/client/RPCClient';
|
||||||
|
|
||||||
import { Notification } from '../model';
|
import { Notification } from '../model';
|
||||||
import { Member } from '../../member/model';
|
import { Member } from '../../member/model';
|
||||||
import { PageParams } from 'app/commons/model';
|
import { PageParams, Page } from 'app/commons/model';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class NotificationService {
|
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);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
;
|
|
@ -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));
|
||||||
|
});
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
14
src/packages/notification/store/detail/notification.state.ts
Normal file
14
src/packages/notification/store/detail/notification.state.ts
Normal 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,
|
||||||
|
};
|
|
@ -8,23 +8,31 @@ import {
|
||||||
|
|
||||||
import { MODULE } from '../notification.constant';
|
import { MODULE } from '../notification.constant';
|
||||||
|
|
||||||
import * as NotificationStore from './notification';
|
import * as ListStore from './list';
|
||||||
|
import * as DetailStore from './detail';
|
||||||
|
|
||||||
export interface State {
|
export interface State {
|
||||||
notifications: NotificationStore.State;
|
notifications: ListStore.State;
|
||||||
|
notification: DetailStore.State;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const REDUCERS = {
|
export const REDUCERS = {
|
||||||
notifications: NotificationStore.reducer,
|
notifications: ListStore.reducer,
|
||||||
|
notification: DetailStore.reducer,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const EFFECTS = [
|
export const EFFECTS = [
|
||||||
NotificationStore.Effects,
|
ListStore.Effects,
|
||||||
|
DetailStore.Effects,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
|
export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
|
||||||
|
|
||||||
export const ReadAllByMemberSelector = new StateSelector<NotificationStore.State>(createSelector(
|
export const ReadAllByMemberSelector = new StateSelector<ListStore.State>(createSelector(
|
||||||
selectNotificationState,
|
selectNotificationState,
|
||||||
(state: State) => state.notifications
|
(state: State) => state.notifications
|
||||||
));
|
));
|
||||||
|
export const ReadSelector = new StateSelector<DetailStore.State>(createSelector(
|
||||||
|
selectNotificationState,
|
||||||
|
(state: State) => state.notification
|
||||||
|
));
|
||||||
|
|
4
src/packages/notification/store/list/index.ts
Normal file
4
src/packages/notification/store/list/index.ts
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
export * from './notification.action';
|
||||||
|
export * from './notification.effect';
|
||||||
|
export * from './notification.reducer';
|
||||||
|
export * from './notification.state';
|
|
@ -9,6 +9,9 @@ export enum ActionType {
|
||||||
ReadAllByMember = '[Notification.notification] ReadAllByMember',
|
ReadAllByMember = '[Notification.notification] ReadAllByMember',
|
||||||
ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
|
ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
|
||||||
ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
|
ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
|
||||||
|
MarkAllAsRead = '[Notification.notification] MarkAllAsRead',
|
||||||
|
MarkAllAsReadSuccess = '[Notification.notification] MarkAllAsReadSuccess',
|
||||||
|
MarkAllAsReadFailure = '[Notification.notification] MarkAllAsReadFailure',
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ReadAllByMember implements Action {
|
export class ReadAllByMember implements Action {
|
||||||
|
@ -20,7 +23,7 @@ export class ReadAllByMember implements Action {
|
||||||
export class ReadAllByMemberSuccess implements Action {
|
export class ReadAllByMemberSuccess implements Action {
|
||||||
readonly type = ActionType.ReadAllByMemberSuccess;
|
readonly type = ActionType.ReadAllByMemberSuccess;
|
||||||
|
|
||||||
constructor(public payload: any) {}
|
constructor(public payload: Page) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ReadAllByMemberFailure implements Action {
|
export class ReadAllByMemberFailure implements Action {
|
||||||
|
@ -29,8 +32,30 @@ export class ReadAllByMemberFailure implements Action {
|
||||||
constructor(public payload: RPCError) {}
|
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 =
|
export type Actions =
|
||||||
| ReadAllByMember
|
| ReadAllByMember
|
||||||
| ReadAllByMemberSuccess
|
| ReadAllByMemberSuccess
|
||||||
| ReadAllByMemberFailure
|
| ReadAllByMemberFailure
|
||||||
|
| MarkAllAsRead
|
||||||
|
| MarkAllAsReadSuccess
|
||||||
|
| MarkAllAsReadFailure
|
||||||
;
|
;
|
|
@ -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();
|
||||||
|
}));
|
||||||
|
});
|
|
@ -23,6 +23,9 @@ import {
|
||||||
ReadAllByMemberSuccess,
|
ReadAllByMemberSuccess,
|
||||||
ReadAllByMemberFailure,
|
ReadAllByMemberFailure,
|
||||||
ActionType,
|
ActionType,
|
||||||
|
MarkAllAsRead,
|
||||||
|
MarkAllAsReadSuccess,
|
||||||
|
MarkAllAsReadFailure,
|
||||||
} from './notification.action';
|
} from './notification.action';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
|
@ -36,14 +39,6 @@ export class Effects {
|
||||||
|
|
||||||
@Effect()
|
@Effect()
|
||||||
readAllByMember$: Observable<Action> = this.actions$
|
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)
|
.ofType(ActionType.ReadAllByMember)
|
||||||
.map((action: ReadAllByMember) => action.payload)
|
.map((action: ReadAllByMember) => action.payload)
|
||||||
.switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
|
.switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
|
||||||
|
@ -54,4 +49,16 @@ export class Effects {
|
||||||
return of(new ReadAllByMemberFailure(error));
|
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));
|
||||||
|
});
|
||||||
}
|
}
|
69
src/packages/notification/store/list/notification.reducer.ts
Normal file
69
src/packages/notification/store/list/notification.reducer.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,18 +1,14 @@
|
||||||
import { RPCError } from 'packages/core/rpc/error';
|
import { RPCError } from 'packages/core/rpc/error';
|
||||||
|
|
||||||
import { Notification } from '../../model';
|
|
||||||
import { Page } from 'app/commons/model';
|
import { Page } from 'app/commons/model';
|
||||||
|
|
||||||
export interface State {
|
export interface State {
|
||||||
error: RPCError | null;
|
error: RPCError | null;
|
||||||
pending: boolean;
|
pending: boolean;
|
||||||
page: Page;
|
page: Page;
|
||||||
// notifications: Notification[] | null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const initialState: State = {
|
export const initialState: State = {
|
||||||
error: null,
|
error: null,
|
||||||
pending: false,
|
pending: false,
|
||||||
page: null,
|
page: null,
|
||||||
// notifications: null,
|
|
||||||
};
|
};
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user