member_webapp/src/packages/notification/component/badge/notification.component.ts

120 lines
3.3 KiB
TypeScript
Raw Normal View History

2018-04-06 11:02:18 +00:00
import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
2018-05-02 08:09:39 +00:00
import { Notification } from '@overflow/commons-typescript/model/notification';
2018-04-06 11:02:18 +00:00
import * as ListStore from '../../store/list';
import * as DetailStore from '../../store/detail';
import { ReadAllByMemberSelector, ReadSelector } from '../../store';
import { AuthSelector } from 'packages/member/store';
2018-05-02 08:09:39 +00:00
import { Member } from '@overflow/commons-typescript/model/member';
2018-04-06 11:02:18 +00:00
import { PageParams, Page } from 'app/commons/model';
import { MarkAsRead } from '../../store/detail';
@Component({
selector: 'of-notification-badge',
templateUrl: './notification.component.html',
})
export class NotificationBadgeComponent implements OnInit, AfterContentInit {
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
isOpen = false;
notifications: Notification[] = null;
badgeCount = 0;
2018-04-20 09:49:20 +00:00
2018-04-06 11:02:18 +00:00
constructor(
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;
this.getUnconfirmedCount(this.notifications);
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
this.mark$.subscribe(
(n: Notification) => {
if (n !== null && n.confirmDate !== null) {
this.getNotifications(0);
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
ngAfterContentInit() {
this.getNotifications(0);
}
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);
}
);
}
getUnconfirmedCount(notifications: Notification[]) {
let totalCnt = 0;
notifications.map( function(v, i) {
if (v.confirmDate === null) {
totalCnt += 1;
}
});
this.badgeCount = totalCnt;
}
mark(notification: Notification, e: Event) {
this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
e.stopPropagation();
}
handleClick(n: Notification) {
alert('Will redirect to ' + n.url);
}
handleMarkAllAsRead() {
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() {
this.isOpen = false;
this.router.navigate(['notification']);
}
}