settings is added

2019-11-21 10:29:19 +09:00 · 2019-11-21 10:29:19 +09:00 · 99f657988a
commit 99f657988a
parent 2f72ee7ae6
23 changed files with 415 additions and 79 deletions
--- a/electron-projects/ucap-webmessenger-electron/src/index.ts
+++ b/electron-projects/ucap-webmessenger-electron/src/index.ts
@ -174,6 +174,7 @@ function createTray() {
      // accelerator: 'Q',
      // selector: 'terminate:',
      click: () => {
+        appWindow.show();
        appWindow.browserWindow.webContents.send(MessengerChannel.ShowSetting);
      }
    },
--- a/package-lock.json
+++ b/package-lock.json
@ -1127,7 +1127,6 @@
      "version": "8.2.12",
      "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.12.tgz",
      "integrity": "sha512-wEFwhHCuuXynXAMeA1G+0KIYY0jqXYs7I8p+GO+ufKoUmzWHFTvtMJ6nvKgy+LmZTByO2gf9oVAAlRodNb8ttQ==",
-      "dev": true,
      "requires": {
        "tslib": "^1.9.0"
      }
@ -3150,6 +3149,15 @@
      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
      "dev": true
    },
+    "autolinker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.11.1.tgz",
+      "integrity": "sha512-6sAmetStorjXvwmV8MBxI5DGICHKD1B5EjdkIrq34X6YBDN6jj54EUHnoHgNqmNCclcf8c409zuVMNy449u80g==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
    "autoprefixer": {
      "version": "9.6.1",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
@ -12454,7 +12462,6 @@
      "version": "6.5.3",
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz",
      "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==",
-      "dev": true,
      "requires": {
        "tslib": "^1.9.0"
      }
@ -14082,8 +14089,7 @@
    "tslib": {
      "version": "1.10.0",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
    },
    "tslint": {
      "version": "5.15.0",
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@ -38,8 +38,8 @@
        >-->
        <div
          class="icon-item"
-          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
-          [matBadge]="badgeChatUnReadCount$ | async"
+          [matBadgeHidden]="badgeChatUnReadCount <= 0"
+          [matBadge]="badgeChatUnReadCount"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@ -6,7 +6,8 @@ import {
  EventEmitter,
  ViewChildren,
  QueryList,
-  ElementRef
+  ElementRef,
+  OnDestroy
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@ -15,7 +16,7 @@ import {
  CreateChatDialogData,
  CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
@ -44,7 +45,7 @@ export enum MainMenu {
  styleUrls: ['./left-side.component.scss'],
  animations: ucapAnimations
 })
-export class LeftSideComponent implements OnInit {
+export class LeftSideComponent implements OnInit, OnDestroy {
  @Output()
  openProfile = new EventEmitter<
    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
@ -52,7 +53,8 @@ export class LeftSideComponent implements OnInit {

  @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;

-  badgeChatUnReadCount$: Observable<number>;
+  badgeChatUnReadCount: number;
+  badgeChatUnReadCountSubscription: Subscription;

  /** 조직도에서 부서원 선택 */
  selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
@ -70,13 +72,25 @@ export class LeftSideComponent implements OnInit {
  ) {}

  ngOnInit() {
-    this.badgeChatUnReadCount$ = this.store.pipe(
+    this.badgeChatUnReadCountSubscription = this.store
+      .pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
-    );
+      )
+      .subscribe(count => {
+        this.badgeChatUnReadCount = count;
+      });

    this.setFabInitial(MainMenu.Group);
  }

+  ngOnDestroy(): void {
+    if (!!this.badgeChatUnReadCountSubscription) {
+      this.badgeChatUnReadCountSubscription.unsubscribe();
+    }
+
+    this.logger.debug('-----------------------LeftSideComponent ngOnDestroy');
+  }
+
  async onClickNewChat(type: string = 'NORMAL') {
    const result = await this.dialogService.open<
      CreateChatDialogComponent,
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
@ -165,10 +165,11 @@ export class GroupComponent implements OnInit, OnDestroy {
  }

  ngOnDestroy(): void {
-    this.logger.debug('ngOnDestroy');
    if (!!this.loginResSubscription) {
      this.loginResSubscription.unsubscribe();
    }
+
+    this.logger.debug('-----------------------GroupComponent ngOnDestroy');
  }

  async onClickGroupMenu(menuType: string) {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@ -1,5 +1,11 @@
 import { DIALOGS as CHAT_DIALOGS } from './chat';
 import { DIALOGS as GROUP_DIALOGS } from './group';
 import { DIALOGS as PROFILE_DIALOGS } from './profile';
+import { DIALOGS as SETTINGS_DIALOGS } from './settings';

-export const DIALOGS = [...CHAT_DIALOGS, ...GROUP_DIALOGS, ...PROFILE_DIALOGS];
+export const DIALOGS = [
+  ...CHAT_DIALOGS,
+  ...GROUP_DIALOGS,
+  ...PROFILE_DIALOGS,
+  ...SETTINGS_DIALOGS
+];
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/index.ts
@ -0,0 +1,3 @@
+import { MessengerSettingsDialogComponent } from './messenger-settings.dialog.component';
+
+export const DIALOGS = [MessengerSettingsDialogComponent];
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
@ -0,0 +1,92 @@
+<mat-card class="confirm-card mat-elevation-z" fxFlexFill>
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>설정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div
+      fxLayout="column"
+      fxLayout.xs="column"
+      fxLayoutAlign="center"
+      fxLayoutGap="10px"
+      fxLayoutGap.xs="0"
+    >
+      <mat-tab-group flex="1" vertical animationDuration="0ms">
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          하나
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          둘
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          셋
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          넷
+        </mat-tab>
+      </mat-tab-group>
+
+      <div class="left-side-tabs-body">
+        <div
+          #tabs
+          id="tabs-0"
+          class="left-side-tabs-contents"
+          style="display: block;"
+        >
+          ddddd
+        </div>
+        <div
+          #tabs
+          id="tabs-1"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          dddagadsfgadsf
+        </div>
+        <div
+          #tabs
+          id="tabs-2"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          fbkasfldsafkskdf
+        </div>
+        <div
+          #tabs
+          id="tabs-3"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          rgkdsfgkdfglkdsflgs
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
@ -0,0 +1,30 @@
+.confirm-card {
+  padding: 0px;
+  min-width: 500px;
+
+  .mat-card-header {
+    margin-bottom: 10px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
+    }
+  }
+
+  .mat-card-content {
+    flex: 1 1 auto;
+    display: flex;
+
+    .content-box {
+      flex-direction: column;
+      flex-flow: column;
+    }
+  }
+
+  .button-farm {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.spec.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.spec.ts
@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { MessengerSettingsDialogComponent } from './messenger-settings.dialog.component';
+
+describe('MessengerSettingsDialogComponent', () => {
+  let component: MessengerSettingsDialogComponent;
+  let fixture: ComponentFixture<MessengerSettingsDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessengerSettingsDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessengerSettingsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
@ -0,0 +1,50 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+
+import { Store } from '@ngrx/store';
+
+import { DialogService } from '@ucap-webmessenger/ui';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { map } from 'rxjs/operators';
+
+export interface MessengerSettingsDialogData {}
+
+export interface MessengerSettingsDialogResult {}
+
+@Component({
+  selector: 'app-messenger-settings-dialog',
+  templateUrl: './messenger-settings.dialog.component.html',
+  styleUrls: ['./messenger-settings.dialog.component.scss']
+})
+export class MessengerSettingsDialogComponent implements OnInit {
+  loginRes: LoginResponse;
+  sessionVerinfo: VersionInfo2Response;
+
+  constructor(
+    public dialogRef: MatDialogRef<
+      MessengerSettingsDialogData,
+      MessengerSettingsDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: MessengerSettingsDialogData,
+    private dialogService: DialogService,
+    private sessionStorageService: SessionStorageService,
+    private store: Store<any>
+  ) {
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+  }
+
+  ngOnInit() {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({});
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@ -9,14 +9,14 @@ import { Observable, Subscription } from 'rxjs';
 import {
  WindowIdle,
  UCAP_NATIVE_SERVICE,
-  NativeService,
+  NativeService
 } from '@ucap-webmessenger/native';

 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
  UserInfoSS,
  UserInfoF,
-  UserInfoDN,
+  UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
 import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
 import { StatusType, StatusCode } from '@ucap-webmessenger/core';
@ -24,17 +24,18 @@ import { DialogService } from '@ucap-webmessenger/ui';
 import {
  ProfileDialogComponent,
  ProfileDialogData,
-  ProfileDialogResult,
+  ProfileDialogResult
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
 import { MatSidenav, MatDrawer } from '@angular/material';
 import { SplitAreaDirective } from 'angular-split';
+import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-page-messenger-main',
  templateUrl: './main.page.component.html',
-  styleUrls: ['./main.page.component.scss'],
+  styleUrls: ['./main.page.component.scss']
 })
-export class MainPageComponent implements OnInit {
+export class MainPageComponent implements OnInit, OnDestroy {
  selectedChat$: Observable<string | null>;
  selectedRightDrawer$: Observable<string | null>;
  idleStateChangedSubscription: Subscription;
@ -49,7 +50,8 @@ export class MainPageComponent implements OnInit {
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    private store: Store<any>,
    private statusProtocolService: StatusProtocolService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private logger: NGXLogger
  ) {}

  ngOnInit(): void {
@ -90,7 +92,7 @@ export class MainPageComponent implements OnInit {
        this.statusProtocolService.status({
          statusDivisionType: StatusType.Messenger,
          statusType,
-          statusMessage: '',
+          statusMessage: ''
        });
      });

@ -101,7 +103,7 @@ export class MainPageComponent implements OnInit {
      });
  }

-  OnDestroy(): void {
+  ngOnDestroy(): void {
    if (!!this.idleStateChangedSubscription) {
      this.idleStateChangedSubscription.unsubscribe();
    }
@ -109,13 +111,15 @@ export class MainPageComponent implements OnInit {
    if (!!this.chatOpenRoomSubscription) {
      this.chatOpenRoomSubscription.unsubscribe();
    }
+
+    this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
  }

  onOpenedChange(event: boolean) {
    if (!event) {
      this.store.dispatch(
        ChatStore.selectedRightDrawer({
-          req: null,
+          req: null
        })
      );
    }
@ -135,8 +139,8 @@ export class MainPageComponent implements OnInit {
      ProfileDialogResult
    >(ProfileDialogComponent, {
      data: {
-        userInfo,
-      },
+        userInfo
+      }
    });
  }

--- a/projects/ucap-webmessenger-app/src/app/services/native.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/native.service.ts
@ -4,6 +4,7 @@ import { Store } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';

 import * as AuthenticationStore from '@app/store/account/authentication';
+import * as SettingsStore from '@app/store/messenger/settings';

@Injectable({
  providedIn: 'root'
@ -20,6 +21,8 @@ export class AppNativeService {
      this.store.dispatch(AuthenticationStore.logout());
    });
    this.nativeService.changeStatus().subscribe(statusCode => {});
-    this.nativeService.showSetting().subscribe(() => {});
+    this.nativeService.showSetting().subscribe(() => {
+      this.store.dispatch(SettingsStore.showDialog());
+    });
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@ -125,9 +125,11 @@ export class Effects {
        ofType(loginRedirect),
        tap(authed => {
          this.ngZone.run(() => {
+            // location.href = this.router.parseUrl('/account/login').toString();
+            this.router.navigate(['/account/login']).then(() => {
              this.appAuthenticationService.logout();
              this.store.dispatch(logoutInitialize());
-            location.href = this.router.parseUrl('/account/login').toString();
+            });
          });
        })
      ),
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts
@ -8,6 +8,7 @@ import * as QueryStore from './query';
 import * as RoomStore from './room';
 import * as StatusStore from './status';
 import * as SyncStore from './sync';
+import * as SettingsStore from './settings';

 export interface State {
  chat: ChatStore.State;
@ -17,6 +18,7 @@ export interface State {
  room: RoomStore.State;
  status: StatusStore.State;
  sync: SyncStore.State;
+  settings: SettingsStore.State;
 }

 export const effects: Type<any>[] = [
@ -26,7 +28,8 @@ export const effects: Type<any>[] = [
  QueryStore.Effects,
  RoomStore.Effects,
  StatusStore.Effects,
-  SyncStore.Effects
+  SyncStore.Effects,
+  SettingsStore.Effects
 ];

 export function reducers(state: State | undefined, action: Action) {
@ -37,53 +40,36 @@ export function reducers(state: State | undefined, action: Action) {
    query: QueryStore.reducer,
    room: RoomStore.reducer,
    status: StatusStore.reducer,
-    sync: SyncStore.reducer
+    sync: SyncStore.reducer,
+    settings: SettingsStore.reducer
  })(state, action);
 }

 export function selectors<S>(selector: Selector<any, State>) {
  return {
    ChatSelector: ChatStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.chat
-      )
+      createSelector(selector, (state: State) => state.chat)
    ),
    EventSelector: EventStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.event
-      )
+      createSelector(selector, (state: State) => state.event)
    ),
    OptionSelector: OptionStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.option
-      )
+      createSelector(selector, (state: State) => state.option)
    ),
    RoomSelector: RoomStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.room
-      )
+      createSelector(selector, (state: State) => state.room)
    ),
    QuerySelector: QueryStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.query
-      )
+      createSelector(selector, (state: State) => state.query)
    ),
    StatusSelector: StatusStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.status
-      )
+      createSelector(selector, (state: State) => state.status)
    ),
    SyncSelector: SyncStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.sync
-      )
+      createSelector(selector, (state: State) => state.sync)
+    ),
+    SettingsSelector: SettingsStore.selectors(
+      createSelector(selector, (state: State) => state.settings)
    )
  };
 }
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
@ -0,0 +1,3 @@
+import { createAction, props } from '@ngrx/store';
+
+export const showDialog = createAction('[Messenger::Settings] Show Dialog');
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+import { tap } from 'rxjs/operators';
+
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+
+import { NGXLogger } from 'ngx-logger';
+
+import { DialogService } from '@ucap-webmessenger/ui';
+
+import { showDialog } from './actions';
+import {
+  MessengerSettingsDialogComponent,
+  MessengerSettingsDialogData,
+  MessengerSettingsDialogResult
+} from '@app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component';
+
+@Injectable()
+export class Effects {
+  showDialog$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(showDialog),
+        tap(async () => {
+          const result = await this.dialogService.open<
+            MessengerSettingsDialogComponent,
+            MessengerSettingsDialogData,
+            MessengerSettingsDialogResult
+          >(MessengerSettingsDialogComponent, {
+            width: '800px',
+            height: '800px',
+            disableClose: false,
+            data: {}
+          });
+        })
+      ),
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private store: Store<any>,
+    private dialogService: DialogService,
+    private logger: NGXLogger
+  ) {}
+}
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/index.ts
@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
@ -0,0 +1,4 @@
+import { createReducer } from '@ngrx/store';
+import { initialState } from './state';
+
+export const reducer = createReducer(initialState);
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
@ -0,0 +1,11 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
+
+export interface State {}
+
+export const initialState: State = {};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {};
+}
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@ -77,8 +77,8 @@ $lg-red: (
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
-    G100:$dark-primary-text,
-    G900:$light-primary-text
+    G100: $dark-primary-text,
+    G900: $light-primary-text
  )
 );

@ -98,7 +98,7 @@ $daesang: (
  A400: #00e5ff,
  A700: #00b8d4,
  G100: #6dd5ed,
-  /*G900: #192a2c,*/G900: #2193b0,
+  /*G900: #192a2c,*/ G900: #2193b0,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
@ -130,14 +130,14 @@ $daesang: (
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

-  $gradient-darkest:mat-color($accent, G900);
-  $gradient-light:mat-color($accent, G100);
+  $gradient-darkest: mat-color($accent, G900);
+  $gradient-light: mat-color($accent, G100);

-  .bg-primary-dark{
+  .bg-primary-dark {
    background: mat-color($primary, 900);
    color: mat-color($primary, default-contrast);
  }
-  .bg-primary-light{
+  .bg-primary-light {
    background: mat-color($primary, 300);
    color: mat-color($primary, default-contrast);
  }
@ -191,9 +191,9 @@ $daesang: (
     color: mat-color($accent, 800);
   }*/
  .global-menu {
-    .mat-tab-label[aria-selected='true']{
-     .mat-tab-label-content{
-      .icon-item{
+    .mat-tab-label[aria-selected='true'] {
+      .mat-tab-label-content {
+        .icon-item {
          background: mat-color($accent, 300);
        }
      }
@ -221,7 +221,7 @@ $daesang: (
    box-shadow: none;
    border-radius: 0px;
  }
-  .btn-main-float .bg-accent-dark{
+  .btn-main-float .bg-accent-dark {
    background: mat-color($accent, 600);
    color: mat-color($primary, default-contrast);
  }
@ -232,8 +232,38 @@ $daesang: (
    height: 70px;
    background-color: #eeeeee;
    background: $gradient-light;
-    background: -webkit-linear-gradient(to right, $gradient-darkest, $gradient-light);
+    background: -webkit-linear-gradient(
+      to right,
+      $gradient-darkest,
+      $gradient-light
+    );
    background: linear-gradient(to right, $gradient-darkest, $gradient-light);
-    color:#ffffff;
+    color: #ffffff;
+  }
+
+  mat-tab-group[vertical] {
+    display: flex;
+    flex-direction: row !important;
+
+    .mat-tab-labels {
+      display: flex;
+      flex-direction: column !important;
+    }
+
+    .mat-ink-bar {
+      width: 0px !important;
+      height: 50px;
+      left: 98% !important;
+    }
+  }
+
+  nav[mat-tab-nav-bar][vertical] {
+    display: flex;
+    flex-direction: row !important;
+  }
+
+  nav[mat-tab-nav-bar][vertical] .mat-tab-links {
+    display: flex;
+    flex-direction: column !important;
  }
 }
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
@ -6,7 +6,8 @@ import {
  ViewChild,
  Output,
  EventEmitter,
-  AfterViewInit
+  AfterViewInit,
+  OnDestroy
 } from '@angular/core';
 import { MatTreeFlattener, MatTree } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
@ -36,12 +37,13 @@ interface FlatNode {
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss']
 })
-export class TreeComponent implements OnInit, AfterViewInit {
+export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
  @Output()
  selected = new EventEmitter<DeptInfo>();

  @Input()
  loginRes: LoginResponse;
+
  @Input()
  set oraganizationList(deptInfoList: DeptInfo[]) {
    if (!deptInfoList || 0 === deptInfoList.length) {
@ -127,6 +129,10 @@ export class TreeComponent implements OnInit, AfterViewInit {

  ngOnInit() {}

+  ngOnDestroy(): void {
+    this.logger.debug('-----------------------TreeComponent ngOnDestroy');
+  }
+
  ngAfterViewInit(): void {
    this.dataSource.cdkVirtualScrollViewport = this.cvsvOrganization;
  }
--- a/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
@ -115,6 +115,12 @@ export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
  }

  disconnect() {
+    console.log('VirtualScrollTreeFlatDataSource disconnect');
+    if (!!this.connectSubject) {
+      this.connectSubject.next();
+      this.connectSubject.unsubscribe();
+    }
+
    if (!!this.dataChangeSubscription) {
      this.dataChangeSubscription.unsubscribe();
    }