ing
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotificationBadgeComponent } from './notification.component';
|
||||
|
||||
describe('NotificationBadgeComponent', () => {
|
||||
let component: NotificationBadgeComponent;
|
||||
let fixture: ComponentFixture<NotificationBadgeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NotificationBadgeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NotificationBadgeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
119
@overflow/notification/component/badge/notification.component.ts
Normal file
119
@overflow/notification/component/badge/notification.component.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
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']);
|
||||
}
|
||||
}
|
||||
5
@overflow/notification/component/index.ts
Normal file
5
@overflow/notification/component/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { NotificationComponent } from './notification/notification.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
NotificationComponent,
|
||||
];
|
||||
@@ -0,0 +1,24 @@
|
||||
<h1>Notifications</h1>
|
||||
<div class="ui-g-12" dir="rtl">
|
||||
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
|
||||
</div>
|
||||
|
||||
<p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:9em">Date</th>
|
||||
<th style="width:12em">Title</th>
|
||||
<th pResizableColumn>Message</th>
|
||||
<th style="width:8em">User</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotificationComponent } from './notification.component';
|
||||
|
||||
describe('NotificationComponent', () => {
|
||||
let component: NotificationComponent;
|
||||
let fixture: ComponentFixture<NotificationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NotificationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NotificationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Component, OnInit, Input, ViewChild, AfterContentInit, OnDestroy } 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 DetailStore from '../../store/detail';
|
||||
import * as ListStore from '../../store/list';
|
||||
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 { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification',
|
||||
templateUrl: './notification.component.html',
|
||||
})
|
||||
export class NotificationComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
|
||||
notificationSubscription$: Subscription;
|
||||
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
|
||||
notifications: Notification[];
|
||||
readSuccess$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
|
||||
|
||||
pageSize = '10';
|
||||
totalLength = 0;
|
||||
currPage = 0;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private listStore: Store<ListStore.State>,
|
||||
private detailStore: Store<DetailStore.State>
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
// this.notificationSubscription$ = this.notification$.subscribe(
|
||||
// (page: Page) => {
|
||||
// if (page !== null) {
|
||||
// this.notifications = page.content;
|
||||
// this.totalLength = page.totalElements;
|
||||
// }
|
||||
// },
|
||||
// (error: RPCClientError) => {
|
||||
// console.log(error.response.message);
|
||||
// }
|
||||
// );
|
||||
|
||||
this.readSuccess$.subscribe(
|
||||
(noti: Notification) => {
|
||||
if (noti) {
|
||||
this.getNotifications(this.currPage);
|
||||
}
|
||||
},
|
||||
(error: RPCClientError) => {
|
||||
console.log(error.response.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this.getNotifications(this.currPage);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.notificationSubscription$) {
|
||||
this.notificationSubscription$.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
// updateData(noti: Notification) {
|
||||
// for (let i = 0; i < this.notifications.length; i++) {
|
||||
// const exist = this.notifications[i];
|
||||
// if (exist.id === noti.id) {
|
||||
// this.notifications[i] = noti;
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
getNotifications(pageIndex: number) {
|
||||
// this.listStore.select(AuthSelector.select('member')).subscribe(
|
||||
// (member: Member) => {
|
||||
// const pageParams: PageParams = {
|
||||
// pageNo: pageIndex + '',
|
||||
// countPerPage: this.pageSize,
|
||||
// sortCol: 'id',
|
||||
// sortDirection: 'descending'
|
||||
// };
|
||||
// this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
|
||||
// this.currPage = pageIndex;
|
||||
// },
|
||||
// (error) => {
|
||||
// console.log(error);
|
||||
// }
|
||||
// );
|
||||
}
|
||||
|
||||
onRowSelect(event) {
|
||||
this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
|
||||
alert('Will redirect to ' + event.data.url);
|
||||
// this.router.navigate([n.url]);
|
||||
}
|
||||
|
||||
onPaging(e) {
|
||||
this.getNotifications(e.page);
|
||||
}
|
||||
|
||||
onMarkAllAsRead() {
|
||||
// this.listStore.select(AuthSelector.select('member')).subscribe(
|
||||
// (member: Member) => {
|
||||
// const pageParams: PageParams = {
|
||||
// pageNo: this.currPage + '',
|
||||
// countPerPage: this.pageSize,
|
||||
// sortCol: 'id',
|
||||
// sortDirection: 'descending'
|
||||
// };
|
||||
// this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
|
||||
// },
|
||||
// (error) => {
|
||||
// console.log(error);
|
||||
// }
|
||||
// );
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user