notification center
This commit is contained in:
parent
951f7f5207
commit
a79ebe711a
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
$prefix: 'notification';
|
||||
|
||||
.highlight {
|
||||
background: #039be5
|
||||
}
|
||||
|
||||
.badge {
|
||||
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 { 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() {
|
||||
|
|
|
@ -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)">
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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 * 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
|
||||
));
|
||||
|
|
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',
|
||||
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
|
||||
;
|
|
@ -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,
|
||||
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));
|
||||
});
|
||||
}
|
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 { 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,
|
||||
};
|
|
@ -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