arranging proje

This commit is contained in:
insanity 2018-05-27 18:12:20 +09:00
parent 8bc54330a6
commit 0ad9d38d49
37 changed files with 1933 additions and 2415 deletions

View File

@ -1,3 +1,15 @@
<div *ngFor="let notification of notificationPage.content">
<div>{{notification.title}}</div>
<div class="ui-g ui-g-nopad ui-app-noti" *ngIf="notificationPage">
<h4>Notifications</h4>
<li role="menuitem" *ngFor="let noti of notificationPage.content | slice:0:5; let i = index">
<a href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
<div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
<div class="ui-app-noti-title">{{noti.title}}</div>
<div class="ui-app-noti-content">{{noti.message}}</div>
</a>
</li>
<li role="menuitem">
<a href="javascript:void(0)" class="topbar-message" (click)="onViewAllClick()">
<span>View All</span>
</a>
</li>
</div>

View File

@ -10,4 +10,14 @@ import { Paginator } from 'primeng/primeng';
export class NotificationBadgeComponent {
@Input() notificationPage: Page<Notification>;
@Output() viewAll = new EventEmitter();
@Output() select = new EventEmitter<Notification>();
onNotiClick(notification: Notification) {
this.select.emit(notification);
}
onViewAllClick() {
this.viewAll.emit();
}
}

View File

@ -16,7 +16,7 @@ export class NotificationListComponent implements OnChanges {
@ViewChild('paginator') paginator: Paginator;
ngOnChanges(changes: SimpleChanges): void {
if (changes['notificationPage']) {
if (changes['notificationPage'] && this.paginator) {
this.paginator.changePage(this.notificationPage.number);
}
}

View File

@ -1,2 +1 @@
<of-notification-badge [notificationPage]="notificationPage$ | async"
></of-notification-badge>
<of-notification-badge [notificationPage]="notificationPage$ | async" (select)="onSelect($event)" (viewAll)="onViewAll($event)"></of-notification-badge>

View File

@ -1,10 +1,10 @@
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { AfterContentInit, OnDestroy, OnChanges, SimpleChanges } 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 * as NotificationEntityStore from '../../store/entity/notification';
import { NotificationEntitySelector } from '../../store/';
import { AuthSelector } from '../../../member/store';
import { Member } from '@overflow/commons-typescript/model/member';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
@ -16,20 +16,26 @@ import { ActivatedRoute } from '@angular/router';
selector: 'of-notification-badge-container',
templateUrl: './badge-container.component.html',
})
export class NotificationBadgeContainerComponent implements OnInit {
export class NotificationBadgeContainerComponent implements OnInit, OnChanges {
notificationPage$: Observable<Page<Notification>>;
@Output() viewAll = new EventEmitter();
@Output() select = new EventEmitter<Notification>();
constructor(
private store: Store<ListStore.State>,
private store: Store<NotificationEntityStore.State>,
private route: ActivatedRoute
) {
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
// this.notificationPage$ = store.pipe(select(NotificationEntitySelector.selectAll));
}
ngOnInit() {
this.getNotifications();
}
ngOnChanges(changes: SimpleChanges): void {
this.getNotifications();
}
getNotifications() {
this.store.select(AuthSelector.select('member')).subscribe(
@ -40,7 +46,7 @@ export class NotificationBadgeContainerComponent implements OnInit {
sortCol: 'id',
sortDirection: 'descending',
};
this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
this.store.dispatch(new NotificationEntityStore.ReadAllByMember({ member, pageParams }));
},
(error) => {
console.log(error);
@ -57,7 +63,7 @@ export class NotificationBadgeContainerComponent implements OnInit {
sortCol: 'id',
sortDirection: 'descending'
};
this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
this.store.dispatch(new NotificationEntityStore.MarkAllAsRead({ member, pageParams }));
},
(error) => {
console.log(error);
@ -65,8 +71,12 @@ export class NotificationBadgeContainerComponent implements OnInit {
);
}
notificationSelected(notification: Notification) {
// this.router.navigate([notification.url]);
alert('redirect to ' + notification.url);
onSelect(notification: Notification) {
this.select.emit(notification);
}
onViewAll() {
this.viewAll.emit();
}
}

View File

@ -3,8 +3,8 @@ import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycl
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 * as NotificationEntityStore from '../../store/entity/notification';
import { NotificationEntitySelector } from '../../store/';
import { AuthSelector } from '../../../member/store';
import { Member } from '@overflow/commons-typescript/model/member';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
@ -22,10 +22,10 @@ export class NotificationListContainerComponent implements OnInit {
pageNo: number;
constructor(
private store: Store<ListStore.State>,
private store: Store<NotificationEntityStore.State>,
private route: ActivatedRoute
) {
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
// this.notificationPage$ = store.pipe(select(NotificationEntitySelector.selectAll));
}
ngOnInit() {
@ -48,7 +48,7 @@ export class NotificationListContainerComponent implements OnInit {
sortCol: 'id',
sortDirection: 'descending',
};
this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
this.store.dispatch(new NotificationEntityStore.ReadAllByMember({ member, pageParams }));
},
(error) => {
console.log(error);
@ -65,7 +65,7 @@ export class NotificationListContainerComponent implements OnInit {
sortCol: 'id',
sortDirection: 'descending'
};
this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
this.store.dispatch(new NotificationEntityStore.MarkAllAsRead({ member, pageParams }));
},
(error) => {
console.log(error);

View File

@ -27,7 +27,7 @@ import {
MarkAllAsReadFailure,
ActionType,
} from './notification.action';
import { NotificationService } from '../../service/notification.service';
import { NotificationService } from '../../../service/notification.service';
@Injectable()
export class Effects {

View File

@ -6,23 +6,22 @@ import {
import {
State,
initialState,
notificationAdapter
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByMember: {
return {
...state,
error: null,
pending: true,
};
}
// case ActionType.ReadAllByMember: {
// return {
// ...state,
// error: null,
// };
// }
// case ActionType.ReadAllByMemberSuccess: {
// return {
// ...state,
// error: null,
// pending: false,
// page: action.payload,
// };
// }
@ -31,24 +30,21 @@ export function reducer(state = initialState, action: Actions): State {
// return {
// ...state,
// error: action.payload,
// pending: false,
// page: null,
// };
// }
case ActionType.MarkAllAsRead: {
return {
...state,
error: null,
pending: true,
};
}
// case ActionType.MarkAllAsRead: {
// return {
// ...state,
// error: null,
// };
// }
// case ActionType.MarkAllAsReadSuccess: {
// return {
// ...state,
// error: null,
// pending: false,
// page: action.payload,
// };
// }
@ -57,7 +53,6 @@ export function reducer(state = initialState, action: Actions): State {
// return {
// ...state,
// error: action.payload,
// pending: false,
// page: null,
// };
// }

View File

@ -0,0 +1,13 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { Selector, createSelector } from '@ngrx/store';
import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
export const notificationAdapter = createEntityAdapter<Notification, RPCClientError>();
export interface State extends EntityState<Notification, RPCClientError> {
}
export const initialState: State = notificationAdapter.getInitialState();
export function getSelectors<S>(selector: Selector<any, State>) {
return notificationAdapter.getSelectors(selector);
}

View File

@ -7,23 +7,23 @@ import { StateSelector } from '@overflow/core/ngrx/store';
import { MODULE } from '../notification.constant';
import * as NotificationStore from './notification';
import * as NotificationEntityStore from './entity/notification';
export interface State {
notification: NotificationStore.State;
notification: NotificationEntityStore.State;
}
export const REDUCERS = {
notification: NotificationStore.reducer,
notification: NotificationEntityStore.reducer,
};
export const EFFECTS = [
NotificationStore.Effects,
NotificationEntityStore.Effects,
];
export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
export const selectState = createFeatureSelector<State>(MODULE.name);
export const NotificationSelector = new StateSelector<NotificationStore.State>(createSelector(
selectNotificationState,
export const NotificationEntitySelector = NotificationEntityStore.getSelectors(createSelector(
selectState,
(state: State) => state.notification
));

View File

@ -1,61 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Member } from '@overflow/commons-typescript/model/member';
// import { PageParams, Page } from 'app/commons/model';
import { Notification } from '@overflow/commons-typescript/model/notification';
export enum ActionType {
MarkAsRead = '[Notification.notification] MarkAsRead',
MarkAsReadSuccess = '[Notification.notification] MarkAsReadSuccess',
MarkAsReadFailure = '[Notification.notification] MarkAsReadFailure',
// ReadUnconfirmedCount = '[Notification.notification] ReadUnconfirmedCount',
// ReadUnconfirmedCountSuccess = '[Notification.notification] ReadUnconfirmedCountSuccess',
// ReadUnconfirmedCountFailure = '[Notification.notification] ReadUnconfirmedCountFailure',
}
export class MarkAsRead implements Action {
readonly type = ActionType.MarkAsRead;
constructor(public payload: Notification ) {}
}
export class MarkAsReadSuccess implements Action {
readonly type = ActionType.MarkAsReadSuccess;
constructor(public payload: Notification) {}
}
export class MarkAsReadFailure implements Action {
readonly type = ActionType.MarkAsReadFailure;
constructor(public payload: RPCClientError) {}
}
// export class ReadUnconfirmedCount implements Action {
// readonly type = ActionType.ReadUnconfirmedCount;
// constructor(public payload: Member) {}
// }
// export class ReadUnconfirmedCountSuccess implements Action {
// readonly type = ActionType.ReadUnconfirmedCountSuccess;
// constructor(public payload: number) {}
// }
// export class ReadUnconfirmedCountFailure implements Action {
// readonly type = ActionType.ReadUnconfirmedCountFailure;
// constructor(public payload: RPCClientError) {}
// }
export type Actions =
| MarkAsRead
| MarkAsReadSuccess
| MarkAsReadFailure
// | ReadUnconfirmedCount
// | ReadUnconfirmedCountSuccess
// | ReadUnconfirmedCountFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './notification.effect';
describe('Notification.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,50 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { NotificationService } from '../../service/notification.service';
import {
MarkAsRead,
MarkAsReadSuccess,
MarkAsReadFailure,
ActionType,
} from './notification.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private notificationService: NotificationService,
private router: Router
) { }
@Effect()
markAsRead$: Observable<Action> = this.actions$
.ofType(ActionType.MarkAsRead)
.map((action: MarkAsRead) => action.payload)
.switchMap(payload => this.notificationService.markAsRead(payload))
.map(notification => {
return new MarkAsReadSuccess(notification);
})
.catch((error: RPCClientError) => {
console.log(error.response.message);
return of(new MarkAsReadFailure(error));
});
}

View File

@ -1,44 +0,0 @@
import {
Actions,
ActionType,
} from './notification.action';
import {
State,
initialState,
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.MarkAsRead: {
return {
...state,
error: null,
pending: true,
};
}
case ActionType.MarkAsReadSuccess: {
return {
...state,
error: null,
pending: false,
notification: action.payload,
};
}
case ActionType.MarkAsReadFailure: {
return {
...state,
error: action.payload,
pending: false,
notification: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,14 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Notification } from '@overflow/commons-typescript/model/notification';
export interface State {
error: RPCClientError | null;
pending: boolean;
notification: Notification;
}
export const initialState: State = {
error: null,
pending: false,
notification: null,
};

View File

@ -1,4 +0,0 @@
export * from './notification.action';
export * from './notification.effect';
export * from './notification.reducer';
export * from './notification.state';

View File

@ -1,4 +0,0 @@
export * from './notification.action';
export * from './notification.effect';
export * from './notification.reducer';
export * from './notification.state';

View File

@ -1,61 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Member } from '@overflow/commons-typescript/model/member';
// import { PageParams, Page } from 'app/commons/model';
export enum ActionType {
ReadAllByMember = '[Notification.notification] ReadAllByMember',
ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
MarkAllAsRead = '[Notification.notification] MarkAllAsRead',
MarkAllAsReadSuccess = '[Notification.notification] MarkAllAsReadSuccess',
MarkAllAsReadFailure = '[Notification.notification] MarkAllAsReadFailure',
}
export class ReadAllByMember implements Action {
readonly type = ActionType.ReadAllByMember;
// constructor(public payload: { member: Member, pageParams: PageParams }) {}
}
export class ReadAllByMemberSuccess implements Action {
readonly type = ActionType.ReadAllByMemberSuccess;
// constructor(public payload: Page) {}
}
export class ReadAllByMemberFailure implements Action {
readonly type = ActionType.ReadAllByMemberFailure;
constructor(public payload: RPCClientError) {}
}
export class MarkAllAsRead implements Action {
readonly type = ActionType.MarkAllAsRead;
// constructor(public payload: { member: Member, pageParams: PageParams }) {}
}
export class MarkAllAsReadSuccess implements Action {
readonly type = ActionType.MarkAllAsReadSuccess;
// constructor(public payload: Page) {}
}
export class MarkAllAsReadFailure implements Action {
readonly type = ActionType.MarkAllAsReadFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| ReadAllByMember
| ReadAllByMemberSuccess
| ReadAllByMemberFailure
| MarkAllAsRead
| MarkAllAsReadSuccess
| MarkAllAsReadFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './notification.effect';
describe('Notification.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,63 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { NotificationService } from '../../service/notification.service';
import {
ReadAllByMember,
ReadAllByMemberSuccess,
ReadAllByMemberFailure,
ActionType,
MarkAllAsRead,
MarkAllAsReadSuccess,
MarkAllAsReadFailure,
} from './notification.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private notificationService: NotificationService,
private router: Router
) { }
// @Effect()
// readAllByMember$: Observable<Action> = this.actions$
// .ofType(ActionType.ReadAllByMember)
// .map((action: ReadAllByMember) => action.payload)
// .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
// .map(page => {
// return new ReadAllByMemberSuccess(page);
// })
// .catch((error: RPCClientError) => {
// return of(new ReadAllByMemberFailure(error));
// });
// @Effect()
// markAllAsRead$: Observable<Action> = this.actions$
// .ofType(ActionType.MarkAllAsRead)
// .map((action: MarkAllAsRead) => action.payload)
// .switchMap(payload => this.notificationService.markAllAsRead(payload.member, payload.pageParams))
// .map(page => {
// return new MarkAllAsReadSuccess(page);
// })
// .catch((error: RPCClientError) => {
// return of(new MarkAllAsReadFailure(error));
// });
}

View File

@ -1,14 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
// import { Page } from 'app/commons/model';
export interface State {
error: RPCClientError | null;
pending: boolean;
// page: Page;
}
export const initialState: State = {
error: null,
pending: false,
// page: null,
};

View File

@ -1,63 +0,0 @@
import {
Actions,
ActionType,
} from './notification.action';
import {
State,
initialState,
} from './notification.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByMember: {
return {
...state,
error: null,
};
}
case ActionType.ReadAllByMemberSuccess: {
return {
...state,
error: null,
page: action.payload,
};
}
case ActionType.ReadAllByMemberFailure: {
return {
...state,
error: action.payload,
page: null,
};
}
case ActionType.MarkAllAsRead: {
return {
...state,
error: null,
};
}
case ActionType.MarkAllAsReadSuccess: {
return {
...state,
error: null,
page: action.payload,
};
}
case ActionType.MarkAllAsReadFailure: {
return {
...state,
error: action.payload,
page: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,13 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { Notification } from '@overflow/commons-typescript/model/notification';
export interface State {
error: RPCClientError | null;
page: Page<Notification> | null;
}
export const initialState: State = {
error: null,
page: null,
};

View File

@ -11,7 +11,7 @@
<div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
<button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNameErrMsg || descriptionErrMsg"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
</div>
</div>

View File

@ -27,7 +27,7 @@ export class ProbeDetailComponent implements OnChanges {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['probeHost']) {
if (changes['probeHost'].currentValue) {
this.checkConnectStatus();
}
}
@ -66,8 +66,8 @@ export class ProbeDetailComponent implements OnChanges {
}
onEditSave() {
this.probeHost.probe.displayName = this.displayName;
this.probeHost.probe.description = this.description;
this.probeHost.probe.displayName = this.displayName ? this.displayName : this.probeHost.probe.displayName;
this.probeHost.probe.description = this.description ? this.description : this.probeHost.probe.description;
this.modify.emit(this.probeHost);
this.editMode = false;
}

View File

@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
import { Store, select } from '@ngrx/store';
import * as ProbeStore from '../store/entity/probe';
import { ProbeSelector, ProbeDetailContainerSelector } from '../store';
import { ProbeEntitySelector, ProbeDetailContainerSelector } from '../store';
import { ActivatedRoute } from '@angular/router';
@Component({
@ -23,11 +23,11 @@ export class ProbeDetailContainerComponent implements OnInit, OnChanges {
private route: ActivatedRoute,
) {
this.pending$ = this.store.pipe(select(ProbeDetailContainerSelector.selectPending));
this.error$ = this.store.pipe(select(ProbeSelector.selectError));
this.error$ = this.store.pipe(select(ProbeEntitySelector.selectError));
}
ngOnInit() {
this.probeHost$ = this.store.pipe(select(ProbeSelector.selectOne(this.probeHostID)));
this.probeHost$ = this.store.pipe(select(ProbeEntitySelector.selectOne(this.probeHostID)));
}
ngOnChanges(changes: SimpleChanges): void {

View File

@ -3,7 +3,7 @@ import { ProbeHost } from '@overflow/commons-typescript/model/probe';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import * as ProbeStore from '../store/entity/probe';
import { ProbeSelector, ProbeListContainerSelector } from '../store';
import { ProbeEntitySelector, ProbeListContainerSelector } from '../store';
import { AuthSelector } from '@overflow/member/store';
import { Domain } from '@overflow/commons-typescript/model/domain';
@ -18,7 +18,7 @@ export class ProbeListContainerComponent implements OnInit {
@Output() select = new EventEmitter();
constructor(private store: Store<ProbeStore.State>) {
this.probeHosts$ = store.pipe(select(ProbeSelector.selectAll));
this.probeHosts$ = store.pipe(select(ProbeEntitySelector.selectAll));
this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending));
}

View File

@ -30,7 +30,7 @@ export const EFFECTS = [
export const selectState = createFeatureSelector<State>(MODULE.name);
export const ProbeSelector = ProbeEntityStore.getSelectors(createSelector(
export const ProbeEntitySelector = ProbeEntityStore.getSelectors(createSelector(
selectState,
(state: State) => state.probe
));

3636
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,15 +0,0 @@
<div class="ui-g ui-g-nopad ui-app-noti" *ngIf="notifications">
<h4>Notifications</h4>
<li role="menuitem" *ngFor="let noti of notifications | slice:0:5; let i = index">
<a href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
<div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
<div class="ui-app-noti-title">{{noti.title}}</div>
<div class="ui-app-noti-content">{{noti.message}}</div>
</a>
</li>
<li role="menuitem">
<a href="javascript:void(0)" class="topbar-message" (click)="onViewAllClick(noti)">
<span>View All</span>
</a>
</li>
</div>

View File

@ -1,93 +0,0 @@
import { Component, Injectable, OnInit, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import * as NotificationStore from '@overflow/notification/store/notification';
import { Store, select } from '@ngrx/store';
import { NotificationSelector } from '@overflow/notification/store';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { RPCClientError } from '@loafer/ng-rpc';
import { AuthSelector } from '@overflow/member/store';
import { Member } from '@overflow/commons-typescript/model/member';
import { PagesComponent } from '../../../../pages/pages.component';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'of-notification-menu',
templateUrl: './app.notification.component.html'
})
export class AppNotificationComponent implements OnInit, AfterContentInit, OnDestroy {
// notificationSubscription$: Subscription;
// notification$ = this.listStore.pipe(select(NotificationSelector.select('page')));
// notifications: Notification[];
@Output() notificationLoaded = new EventEmitter<number>();
constructor(
private router: Router,
private app: PagesComponent,
private notificationStore: Store<NotificationStore.State>,
) {
}
ngOnInit() {
// this.notificationSubscription$ = this.notification$.subscribe(
// (page: Page) => {
// if (page !== null && page !== undefined) {
// this.notifications = page.content;
// this.getUnconfirmedCount();
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
}
ngAfterContentInit() {
// 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);
// }
// );
}
ngOnDestroy() {
// if (this.notificationSubscription$) {
// this.notificationSubscription$.unsubscribe();
// }
}
getUnconfirmedCount() {
// if (this.notifications === null || this.notifications.length === 0) {
// return;
// }
// let totalCnt = 0;
// for (let i = 0; i < 5; i ++) {
// if (!this.notifications[i].confirmDate) {
// totalCnt += 1;
// }
// }
// this.notificationLoaded.emit(totalCnt);
}
onViewAllClick() {
this.router.navigate(['notification']);
}
onNotiClick(notification: Notification) {
// this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
// alert('Will redirect to ' + notification.url);
}
}

View File

@ -135,13 +135,7 @@
<span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated fadeInDown">
<!-- <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>
</a>
</li> -->
<of-notification-badge-container (select)="onNotificationSelect($event)" (viewAll)="onViewAllNotification($event)"></of-notification-badge-container>
</ul>
</li>
<!-- <li #notifications [ngClass]="{'active-top-menu':app.activeTopbarItem === notifications}">

View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../../../../app.component';
import { PagesComponent } from '../../../../pages/pages.component';
import { AppNotificationComponent } from '../notification/app.notification.component';
import { Notification } from '@overflow/commons-typescript/model/notification';
@Component({
selector: 'of-topbar',
@ -20,4 +20,12 @@ export class AppTopbarComponent implements OnInit {
onNotiLoaded(count) {
this.notificationCount = count;
}
onViewAllNotification() {
this.app.redirectNotifications();
}
onNotificationSelect(notification: Notification) {
this.app.redirect(notification.url);
}
}

View File

@ -338,4 +338,12 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
return outlet.isActivated ? outlet.activatedRoute : '';
}
public redirectNotifications() {
this.router.navigate(['notification']);
}
public redirect(command: string) {
this.router.navigate([command]);
}
}

View File

@ -18,7 +18,6 @@ import { PagesRoutingModule } from './pages-routing.module';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { PrimeNGModules } from '@overflow/commons/prime-ng/prime-ng.module';
import { TabbarModule } from '../commons/component/layout/tabbar/app.tabbar.module';
import { AppNotificationComponent } from '../commons/component/layout/notification/app.notification.component';
import { NotificationModule } from '@overflow/notification/notification.module';
@NgModule({
@ -39,7 +38,6 @@ import { NotificationModule } from '@overflow/notification/notification.module';
AppBreadcrumbComponent,
AppRightpanelComponent,
AppInlineProfileComponent,
AppNotificationComponent
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },