in progress
This commit is contained in:
parent
25d27f0996
commit
2cc645b116
|
@ -0,0 +1,3 @@
|
|||
<div *ngFor="let notification of notificationPage.content">
|
||||
<div>{{notification.title}}</div>
|
||||
</div>
|
|
@ -1,6 +1,6 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotificationBadgeComponent } from './notification.component';
|
||||
import { NotificationBadgeComponent } from './badge.component';
|
||||
|
||||
describe('NotificationBadgeComponent', () => {
|
||||
let component: NotificationBadgeComponent;
|
13
@overflow/notification/component/badge/badge.component.ts
Normal file
13
@overflow/notification/component/badge/badge.component.ts
Normal file
|
@ -0,0 +1,13 @@
|
|||
import { Component, Input, EventEmitter, Output, ViewChild, OnInit } from '@angular/core';
|
||||
import { Notification } from '@overflow/commons-typescript/model/notification';
|
||||
import { Page } from '@overflow/commons-typescript/model/commons/Page';
|
||||
import { Paginator } from 'primeng/primeng';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification-badge',
|
||||
templateUrl: './badge.component.html',
|
||||
})
|
||||
export class NotificationBadgeComponent {
|
||||
|
||||
@Input() notificationPage: Page<Notification>;
|
||||
}
|
|
@ -1,119 +0,0 @@
|
|||
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']);
|
||||
}
|
||||
}
|
|
@ -1,5 +1,7 @@
|
|||
import { NotificationListComponent } from './list/list.component';
|
||||
import { NotificationBadgeComponent } from './badge/badge.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
NotificationListComponent,
|
||||
NotificationBadgeComponent
|
||||
];
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
<of-notification-badge [notificationPage]="notificationPage$ | async"
|
||||
></of-notification-badge>
|
|
@ -0,0 +1,72 @@
|
|||
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Domain } from '@overflow/commons-typescript/model/domain';
|
||||
import * as ListStore from '../../store/notification';
|
||||
import { NotificationSelector } from '../../store';
|
||||
import { AuthSelector } from '../../../member/store';
|
||||
import { Member } from '@overflow/commons-typescript/model/member';
|
||||
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
|
||||
import { Page } from '@overflow/commons-typescript/model/commons/Page';
|
||||
import { Notification } from '@overflow/commons-typescript/model/notification';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification-badge-container',
|
||||
templateUrl: './badge-container.component.html',
|
||||
})
|
||||
export class NotificationBadgeContainerComponent implements OnInit {
|
||||
notificationPage$: Observable<Page<Notification>>;
|
||||
|
||||
constructor(
|
||||
private store: Store<ListStore.State>,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getNotifications();
|
||||
}
|
||||
|
||||
|
||||
getNotifications() {
|
||||
this.store.select(AuthSelector.select('member')).subscribe(
|
||||
(member: Member) => {
|
||||
const pageParams: PageParams = {
|
||||
pageNo: 0,
|
||||
countPerPage: 10,
|
||||
sortCol: 'id',
|
||||
sortDirection: 'descending',
|
||||
};
|
||||
this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
markAllasRead() {
|
||||
this.store.select(AuthSelector.select('member')).subscribe(
|
||||
(member: Member) => {
|
||||
const pageParams: PageParams = {
|
||||
pageNo: 0,
|
||||
countPerPage: 10,
|
||||
sortCol: 'id',
|
||||
sortDirection: 'descending'
|
||||
};
|
||||
this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
notificationSelected(notification: Notification) {
|
||||
// this.router.navigate([notification.url]);
|
||||
alert('redirect to ' + notification.url);
|
||||
}
|
||||
}
|
|
@ -1,5 +1,7 @@
|
|||
import { NotificationListContainerComponent } from './list/list-container.component';
|
||||
import { NotificationBadgeContainerComponent } from './badge/badge-container.component';
|
||||
|
||||
export const CONTAINER_COMPONENTS = [
|
||||
NotificationBadgeContainerComponent,
|
||||
NotificationListContainerComponent,
|
||||
];
|
||||
|
|
|
@ -1 +1 @@
|
|||
<of-probe-detail [probeHost]="(probeHosts$ | async)[0]" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
|
||||
<of-probe-detail [probeHost]="(probeHost$ | async)" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
|
|
@ -15,14 +15,14 @@ export class ProbeDetailContainerComponent implements OnInit {
|
|||
|
||||
@Input() probeHostID;
|
||||
@Output() discovery = new EventEmitter<number>();
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
probeHost$: Observable<ProbeHost>;
|
||||
error$: Observable<RPCClientError>;
|
||||
|
||||
constructor(
|
||||
private store: Store<ProbeStore.State>,
|
||||
private route: ActivatedRoute,
|
||||
) {
|
||||
this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
|
||||
this.probeHost$ = store.pipe(select(ProbeSelector.selectOne(this.probeHostID)));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
@ -17,7 +17,7 @@ export class ProbeListContainerComponent implements OnInit {
|
|||
@Output() select = new EventEmitter();
|
||||
|
||||
constructor(private store: Store<ProbeStore.State>) {
|
||||
this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
|
||||
this.probeHosts$ = store.pipe(select(ProbeSelector.selectAll));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
@ -61,7 +61,7 @@ export class Modify implements Action {
|
|||
export class ModifySuccess implements Action {
|
||||
readonly type = ActionType.ModifySuccess;
|
||||
|
||||
constructor(public payload: Probe) {}
|
||||
constructor(public payload: ProbeHost) {}
|
||||
}
|
||||
|
||||
export class ModifyFailure implements Action {
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
import {
|
||||
State,
|
||||
initialState,
|
||||
probeAdapter,
|
||||
} from './probe.state';
|
||||
|
||||
import { Probe } from '@overflow/commons-typescript/model/probe';
|
||||
|
@ -20,19 +21,11 @@ export function reducer(state = initialState, action: Actions): State {
|
|||
}
|
||||
|
||||
case ActionType.ReadAllByDomainIDSuccess: {
|
||||
return {
|
||||
...state,
|
||||
error: null,
|
||||
probeHosts: action.payload,
|
||||
};
|
||||
return probeAdapter.setAll(action.payload, state);
|
||||
}
|
||||
|
||||
case ActionType.ReadAllByDomainIDFailure: {
|
||||
return {
|
||||
...state,
|
||||
error: action.payload,
|
||||
probeHosts: null,
|
||||
};
|
||||
return probeAdapter.setError(action.payload, state);
|
||||
}
|
||||
|
||||
case ActionType.Read: {
|
||||
|
@ -43,19 +36,11 @@ export function reducer(state = initialState, action: Actions): State {
|
|||
}
|
||||
|
||||
case ActionType.ReadSuccess: {
|
||||
return {
|
||||
...state,
|
||||
error: null,
|
||||
probeHosts: [action.payload],
|
||||
};
|
||||
return probeAdapter.setOne(action.payload, state);
|
||||
}
|
||||
|
||||
case ActionType.ReadFailure: {
|
||||
return {
|
||||
...state,
|
||||
error: action.payload,
|
||||
probeHosts: null,
|
||||
};
|
||||
return probeAdapter.setError(action.payload, state);
|
||||
}
|
||||
|
||||
case ActionType.Modify: {
|
||||
|
@ -66,26 +51,11 @@ export function reducer(state = initialState, action: Actions): State {
|
|||
}
|
||||
|
||||
case ActionType.ModifySuccess: {
|
||||
return {
|
||||
...state,
|
||||
probeHosts: state.probeHosts.map(
|
||||
(probeHost, i) => probeHost.probe.id === action.payload.id ?
|
||||
{
|
||||
...probeHost,
|
||||
probe : action.payload
|
||||
} : probeHost
|
||||
),
|
||||
error: null,
|
||||
};
|
||||
return probeAdapter.upsertOne(action.payload, state);
|
||||
}
|
||||
|
||||
|
||||
case ActionType.ModifyFailure: {
|
||||
return {
|
||||
...state,
|
||||
error: action.payload,
|
||||
probeHosts: null,
|
||||
};
|
||||
return probeAdapter.setError(action.payload, state);
|
||||
}
|
||||
|
||||
default: {
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
import { RPCClientError } from '@loafer/ng-rpc';
|
||||
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { Selector, createSelector } from '@ngrx/store';
|
||||
import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
|
||||
|
||||
export interface State {
|
||||
error: RPCClientError | null;
|
||||
probeHosts: ProbeHost[] | null;
|
||||
export const probeAdapter = createEntityAdapter<ProbeHost, RPCClientError>();
|
||||
export interface State extends EntityState<ProbeHost, RPCClientError> {
|
||||
}
|
||||
export const initialState: State = probeAdapter.getInitialState();
|
||||
|
||||
export function getSelectors<S>(selector: Selector<any, State>) {
|
||||
return probeAdapter.getSelectors(selector);
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
error: null,
|
||||
probeHosts: null,
|
||||
};
|
||||
|
|
|
@ -22,10 +22,11 @@ export const EFFECTS = [
|
|||
ProbeStore.Effects,
|
||||
];
|
||||
|
||||
export const selectProbeState = createFeatureSelector<State>(MODULE.name);
|
||||
export const selectState = createFeatureSelector<State>(MODULE.name);
|
||||
|
||||
export const ProbeSelector = new StateSelector<ProbeStore.State>(createSelector(
|
||||
selectProbeState,
|
||||
export const ProbeSelector = ProbeStore.getSelectors(createSelector(
|
||||
selectState,
|
||||
(state: State) => state.probes
|
||||
));
|
||||
|
||||
|
||||
|
|
3634
package-lock.json
generated
3634
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -135,7 +135,8 @@
|
|||
<span class="topbar-item-name">Notifications</span>
|
||||
</a>
|
||||
<ul class="ultima-menu animated fadeInDown">
|
||||
<of-notification-menu (notificationLoaded)="onNotiLoaded($event)"></of-notification-menu>
|
||||
<!-- <of-notification-badge-container></of-notification-badge-container> -->
|
||||
<!-- <of-notification-menu (notificationLoaded)="onNotiLoaded($event)"></of-notification-menu> -->
|
||||
<!-- <li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<span>Give me a call</span>
|
||||
|
|
Loading…
Reference in New Issue
Block a user