120 lines
3.4 KiB
TypeScript
120 lines
3.4 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';
|
|
import { Notification } from '@overflow/commons-typescript/model/notification';
|
|
import * as ListStore from '../../store/list';
|
|
import * as DetailStore from '../../store/detail';
|
|
import { ReadAllByMemberSelector, ReadSelector } from '../../store';
|
|
import { AuthSelector } from '@overflow/member/store';
|
|
import { Member } from '@overflow/commons-typescript/model/member';
|
|
// 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;
|
|
|
|
|
|
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']);
|
|
}
|
|
}
|