120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
|
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';
|
||
|
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, AfterContentInit {
|
||
|
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
|
||
|
mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
|
||
|
isOpen = false;
|
||
|
notifications: Notification[] = null;
|
||
|
badgeCount = 0;
|
||
|
|
||
|
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']);
|
||
|
}
|
||
|
}
|