arranging proje

@overflow/notification/component/badge/badge.component.html

@@ -1,3 +1,15 @@
-<div *ngFor="let notification of notificationPage.content">
+<div class="ui-g ui-g-nopad ui-app-noti" *ngIf="notificationPage">
-    <div>{{notification.title}}</div>
+    <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>

@overflow/notification/component/badge/badge.component.ts

@@ -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();
+    }
 }

@overflow/notification/component/list/list.component.ts

@@ -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);
         }
     }

@overflow/notification/container/badge/badge-container.component.html

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

@overflow/notification/container/badge/badge-container.component.ts

@@ -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 * as NotificationEntityStore from '../../store/entity/notification';
-import { NotificationSelector } from '../../store';
+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) {
+    onSelect(notification: Notification) {
-        // this.router.navigate([notification.url]);
+        this.select.emit(notification);
-        alert('redirect to ' + notification.url);
     }
+
+    onViewAll() {
+        this.viewAll.emit();
+    }
+
 }

@overflow/notification/container/list/list-container.component.ts

@@ -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 * as NotificationEntityStore from '../../store/entity/notification';
-import { NotificationSelector } from '../../store';
+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);

@overflow/notification/store/entity/notification/notification.effect.ts

@@ -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 {

@overflow/notification/store/entity/notification/notification.reducer.ts

@@ -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: {
+    // case ActionType.ReadAllByMember: {
-      return {
+    //   return {
-        ...state,
+    //     ...state,
-        error: null,
+    //     error: null,
-        pending: true,
+    //   };
-      };
+    // }
-    }
 
     // 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: {
+    // case ActionType.MarkAllAsRead: {
-      return {
+    //   return {
-        ...state,
+    //     ...state,
-        error: null,
+    //     error: null,
-        pending: true,
+    //   };
-      };
+    // }
-    }
 
     // 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,
     //   };
     // }

@overflow/notification/store/entity/notification/notification.state.ts

@@ -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);
+}

@overflow/notification/store/index.ts

@@ -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(
+export const NotificationEntitySelector = NotificationEntityStore.getSelectors(createSelector(
-  selectNotificationState,
+  selectState,
   (state: State) => state.notification
 ));

@overflow/notification/store/notification/detail/notification.action.ts

@@ -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
-;

@overflow/notification/store/notification/detail/notification.effect.spec.ts

@@ -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();
-  }));
-});

@overflow/notification/store/notification/detail/notification.effect.ts

@@ -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));
-    });
-}

@overflow/notification/store/notification/detail/notification.reducer.ts

@@ -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;
-    }
-  }
-}

@overflow/notification/store/notification/detail/notification.state.ts

@@ -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,
-};

@overflow/notification/store/notification/index.ts

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

@overflow/notification/store/notification/list/index.ts

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

@overflow/notification/store/notification/list/notification.action.ts

@@ -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
-;

@overflow/notification/store/notification/list/notification.effect.spec.ts

@@ -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();
-  }));
-});

@overflow/notification/store/notification/list/notification.effect.ts

@@ -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));
-  //     });
-}

@overflow/notification/store/notification/list/notification.state.ts

@@ -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,
-};

@overflow/notification/store/notification/notification.reducer.ts

@@ -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;
-    }
-  }
-}

@overflow/notification/store/notification/notification.state.ts

@@ -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,
-};

@overflow/probe/component/detail/detail.component.html

@@ -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>

@overflow/probe/component/detail/detail.component.ts

@@ -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.displayName = this.displayName ? this.displayName : this.probeHost.probe.displayName;
-    this.probeHost.probe.description = this.description;
+    this.probeHost.probe.description = this.description ? this.description : this.probeHost.probe.description;
     this.modify.emit(this.probeHost);
     this.editMode = false;
   }

@overflow/probe/container/probe-detail-container.ts

@@ -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 {

@overflow/probe/container/probe-list-container.ts

@@ -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));
     }
 

@overflow/probe/store/index.ts

@@ -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
 ));

src/app/commons/component/layout/notification/app.notification.component.html

@@ -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>

src/app/commons/component/layout/notification/app.notification.component.ts

@@ -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);
-    }
-}

src/app/commons/component/layout/topbar/app.topbar.component.html

@@ -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-badge-container (select)="onNotificationSelect($event)" (viewAll)="onViewAllNotification($event)"></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> -->
                 </ul>
             </li>
             <!-- <li #notifications [ngClass]="{'active-top-menu':app.activeTopbarItem === notifications}">

src/app/commons/component/layout/topbar/app.topbar.component.ts

@@ -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);
+    }
 }

src/app/pages/pages.component.ts

@@ -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]);
+  }
+
 }

src/app/pages/pages.module.ts

@@ -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 },