From 8d73524de61f1cd7462cb0cf43feb13561613cd5 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 26 Sep 2019 11:11:22 +0900
Subject: [PATCH] refactoring

---
 package-lock.json                             | 16 +++++
 package.json                                  |  1 +
 .../src/app/app-routing.module.ts             |  2 +-
 .../src/app/app.component.scss                |  4 ++
 .../src/app/app.module.ts                     |  8 ++-
 .../chat/components/left-sidenav.component.ts | 14 -----
 .../components/right-sidenav.component.ts     | 14 -----
 .../{chat => messenger}/components/index.ts   |  8 +--
 .../components/intro.component.html           |  0
 .../components/intro.component.scss           |  0
 .../components/intro.component.spec.ts        |  2 +-
 .../components/intro.component.ts             |  2 +-
 .../components/left-side.component.html}      |  2 +-
 .../components/left-side.component.scss}      |  0
 .../components/left-side.component.spec.ts}   | 12 ++--
 .../components/left-side.component.ts         | 14 +++++
 .../left-sidenav/call.component.html          |  0
 .../left-sidenav/call.component.scss          |  0
 .../left-sidenav/call.component.spec.ts       |  0
 .../components/left-sidenav/call.component.ts |  0
 .../left-sidenav/chat.component.html          |  0
 .../left-sidenav/chat.component.scss          |  0
 .../left-sidenav/chat.component.spec.ts       |  0
 .../components/left-sidenav/chat.component.ts |  0
 .../left-sidenav/group.component.html         |  0
 .../left-sidenav/group.component.scss         |  0
 .../left-sidenav/group.component.spec.ts      |  0
 .../left-sidenav/group.component.ts           |  0
 .../components/left-sidenav/index.ts          |  0
 .../left-sidenav/organization.component.html  |  0
 .../left-sidenav/organization.component.scss  |  0
 .../organization.component.spec.ts            |  0
 .../left-sidenav/organization.component.ts    |  0
 .../components/messages.component.html        |  0
 .../components/messages.component.scss        |  0
 .../components/messages.component.spec.ts     |  2 +-
 .../components/messages.component.ts          |  2 +-
 .../components/right-side.component.html}     |  0
 .../components/right-side.component.scss}     |  0
 .../components/right-side.component.spec.ts}  | 12 ++--
 .../components/right-side.component.ts        | 14 +++++
 .../messenger.layout.module.ts}               |  2 +-
 .../components/main.page.component.html       | 51 +++++----------
 .../components/main.page.component.scss       | 63 +++----------------
 .../pages/messenger/messenger.page.module.ts  |  4 +-
 .../src/app/services/notification.service.ts  |  6 +-
 .../src/app/store/messenger/sync/effects.ts   |  9 ++-
 .../app/store/setting/version-info/effects.ts |  7 ++-
 .../src/lib/services/protocol.service.ts      | 22 +++++--
 .../components/expansion-panel.component.html |  2 +-
 50 files changed, 141 insertions(+), 154 deletions(-)
 delete mode 100644 projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts
 delete mode 100644 projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/index.ts (59%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/intro.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/intro.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/intro.component.spec.ts (90%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/intro.component.ts (88%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/left-sidenav.component.html => messenger/components/left-side.component.html} (96%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/left-sidenav.component.scss => messenger/components/left-side.component.scss} (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/left-sidenav.component.spec.ts => messenger/components/left-side.component.spec.ts} (53%)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/call.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/call.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/call.component.spec.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/call.component.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/chat.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/chat.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/chat.component.spec.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/chat.component.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/group.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/group.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/group.component.spec.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/group.component.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/index.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/organization.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/organization.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/organization.component.spec.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/left-sidenav/organization.component.ts (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/messages.component.html (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/messages.component.scss (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/messages.component.spec.ts (90%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat => messenger}/components/messages.component.ts (88%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/right-sidenav.component.html => messenger/components/right-side.component.html} (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/right-sidenav.component.scss => messenger/components/right-side.component.scss} (100%)
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/components/right-sidenav.component.spec.ts => messenger/components/right-side.component.spec.ts} (52%)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.ts
 rename projects/ucap-webmessenger-app/src/app/layouts/{chat/chat.layout.module.ts => messenger/messenger.layout.module.ts} (95%)

diff --git a/package-lock.json b/package-lock.json
index 7edf556a..74be0533 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9975,6 +9975,16 @@
         "deep-freeze-strict": "^1.1.1"
       }
     },
+    "ngx-logger": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-logger/-/ngx-logger-4.0.5.tgz",
+      "integrity": "sha512-RUvu6TeDga+nUFGMwGiUn+GTCwpshfF4rsfS02i8euGXE9Lq9PPPzHg10sgonPCYBYj4GAx+bdPRv8BQpRyldQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0",
+        "vlq": "^1.0.0"
+      }
+    },
     "ngx-perfect-scrollbar": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-8.0.0.tgz",
@@ -14377,6 +14387,12 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vlq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
+      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
+      "dev": true
+    },
     "vm-browserify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
diff --git a/package.json b/package.json
index a44b8913..a5ac2c22 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "moment": "^2.24.0",
     "ng-packagr": "^5.4.0",
     "ngrx-store-freeze": "^0.2.4",
+    "ngx-logger": "^4.0.5",
     "ngx-perfect-scrollbar": "^8.0.0",
     "npm-run-all": "^4.1.5",
     "parallel-webpack": "^2.4.0",
diff --git a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
index c3d59ffb..6444944a 100644
--- a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
@@ -21,7 +21,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
+  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app.component.scss b/projects/ucap-webmessenger-app/src/app/app.component.scss
index e69de29b..fb4d4647 100644
--- a/projects/ucap-webmessenger-app/src/app/app.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/app.component.scss
@@ -0,0 +1,4 @@
+:host {
+  width: 100%;
+  height: auto !important;
+}
diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
index 2358831b..01018b73 100644
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -24,6 +24,8 @@ import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
 
 import { UCapUtilModule } from '@ucap-webmessenger/util';
 
+import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
+
 import { environment } from '../environments/environment';
 
 import { AppProviderModule } from './app-provider.module';
@@ -77,7 +79,11 @@ import { GUARDS } from './guards';
     AppProviderModule,
     AppRoutingModule,
     AppStoreModule,
-    AppTranslateModule
+    AppTranslateModule,
+
+    LoggerModule.forRoot({
+      level: NgxLoggerLevel.DEBUG
+    })
   ],
   providers: [...GUARDS],
   declarations: [AppComponent],
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts
deleted file mode 100644
index 741fe3b8..00000000
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
-
-@Component({
-  selector: 'app-layout-chat-left-sidenav',
-  templateUrl: './left-sidenav.component.html',
-  styleUrls: ['./left-sidenav.component.scss'],
-  animations: ucapAnimations
-})
-export class LeftSidenavComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts
deleted file mode 100644
index 64d01951..00000000
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
-
-@Component({
-  selector: 'app-layout-chat-right-sidenav',
-  templateUrl: './right-sidenav.component.html',
-  styleUrls: ['./right-sidenav.component.scss'],
-  animations: ucapAnimations
-})
-export class RightSidenavComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
similarity index 59%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/index.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
index 259d82f4..53ac688b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
@@ -1,15 +1,15 @@
 import { IntroComponent } from './intro.component';
-import { LeftSidenavComponent } from './left-sidenav.component';
+import { LeftSideComponent } from './left-side.component';
 import { MessagesComponent } from './messages.component';
-import { RightSidenavComponent } from './right-sidenav.component';
+import { RightSideComponent } from './right-side.component';
 
 import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav';
 
 export const COMPONENTS = [
   IntroComponent,
-  LeftSidenavComponent,
+  LeftSideComponent,
   MessagesComponent,
-  RightSidenavComponent,
+  RightSideComponent,
 
   ...LEFT_SIDENAV_COMPONENTS
 ];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts
similarity index 90%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts
index bc679487..cd8f885b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.spec.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IntroComponent } from './intro.component';
 
-describe('Chat::IntroComponent', () => {
+describe('App::Layout::Messenger::IntroComponent', () => {
   let component: IntroComponent;
   let fixture: ComponentFixture<IntroComponent>;
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts
similarity index 88%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts
index a87db74a..6dae294a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 @Component({
-  selector: 'app-layout-chat-intro',
+  selector: 'app-layout-messenger-intro',
   templateUrl: './intro.component.html',
   styleUrls: ['./intro.component.scss'],
   animations: ucapAnimations
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
similarity index 96%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index e17b30db..4ac91ee9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -1,4 +1,4 @@
-<mat-tab-group md-stretch-tabs>
+<mat-tab-group mat-stretch-tabs>
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon>group</mat-icon>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.spec.ts
similarity index 53%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.spec.ts
index 62d733b1..56df6e9d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.spec.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.spec.ts
@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LeftSidenavComponent } from './left-sidenav.component';
+import { LeftSideComponent } from './left-side.component';
 
-describe('Chat::LeftSidenavComponent', () => {
-  let component: LeftSidenavComponent;
-  let fixture: ComponentFixture<LeftSidenavComponent>;
+describe('App::Layout::Messenger::LeftSideComponent', () => {
+  let component: LeftSideComponent;
+  let fixture: ComponentFixture<LeftSideComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LeftSidenavComponent]
+      declarations: [LeftSideComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LeftSidenavComponent);
+    fixture = TestBed.createComponent(LeftSideComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git 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
new file mode 100644
index 00000000..bbf11992
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-messenger-left-side',
+  templateUrl: './left-side.component.html',
+  styleUrls: ['./left-side.component.scss'],
+  animations: ucapAnimations
+})
+export class LeftSideComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.spec.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.spec.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/call.component.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.spec.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.spec.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.spec.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.spec.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/index.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/index.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/index.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.spec.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.spec.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts
similarity index 90%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts
index 0be9fce8..cf72b7bb 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.spec.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MessagesComponent } from './messages.component';
 
-describe('Chat::MessagesComponent', () => {
+describe('App::Layout::Messenger::MessagesComponent', () => {
   let component: MessagesComponent;
   let fixture: ComponentFixture<MessagesComponent>;
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
similarity index 88%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 90095e04..a387b36c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 @Component({
-  selector: 'app-layout-chat-messages',
+  selector: 'app-layout-messenger-messages',
   templateUrl: './messages.component.html',
   styleUrls: ['./messages.component.scss'],
   animations: ucapAnimations
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.spec.ts
similarity index 52%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.spec.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.spec.ts
index 85fcdd20..45fc2bfa 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.spec.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.spec.ts
@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RightSidenavComponent } from './right-sidenav.component';
+import { RightSideComponent } from './right-side.component';
 
-describe('Chat::RightSidenavComponent', () => {
-  let component: RightSidenavComponent;
-  let fixture: ComponentFixture<RightSidenavComponent>;
+describe('App::Layout::Messenger::RightSideComponent', () => {
+  let component: RightSideComponent;
+  let fixture: ComponentFixture<RightSideComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [RightSidenavComponent]
+      declarations: [RightSideComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RightSidenavComponent);
+    fixture = TestBed.createComponent(RightSideComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.ts
new file mode 100644
index 00000000..12126424
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-messenger-right-side',
+  templateUrl: './right-side.component.html',
+  styleUrls: ['./right-side.component.scss'],
+  animations: ucapAnimations
+})
+export class RightSideComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/chat/chat.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
similarity index 95%
rename from projects/ucap-webmessenger-app/src/app/layouts/chat/chat.layout.module.ts
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index 58c05972..0e93673b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/chat/chat.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -27,4 +27,4 @@ import { COMPONENTS } from './components';
   declarations: [...COMPONENTS],
   entryComponents: []
 })
-export class AppChatLayoutModule {}
+export class AppMessengerLayoutModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index bdab3e9e..61d914af 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -1,43 +1,26 @@
-<div id="messenger" class="page-layout carded fullwidth inner-scroll">
+<div class="container">
   <!-- TOP BACKGROUND -->
-  <div class="top-bg accent"></div>
+  <div></div>
   <!-- / TOP BACKGROUND -->
 
   <!-- CENTER -->
-  <div class="center">
+  <div>
     <!-- CONTENT CARD -->
-    <div class="content-card">
-      <mat-sidenav-container>
-        <!-- LEFT SIDENAV -->
-        <mat-sidenav
-          class="sidenav left-sidenav"
-          position="start"
-          opened="true"
-          mode="side"
-          matIsLockedOpen="gt-md"
-        >
-          <app-layout-chat-left-sidenav></app-layout-chat-left-sidenav>
-        </mat-sidenav>
-        <!-- / LEFT SIDENAV -->
-
-        <!-- CONTENT -->
-        <app-layout-chat-intro *ngIf="!selectedChat"></app-layout-chat-intro>
-
-        <app-layout-chat-messages
+    <div>
+      <div class="left-side">
+        <app-layout-messenger-left-side></app-layout-messenger-left-side>
+      </div>
+      <div>
+        <app-layout-messenger-intro
+          *ngIf="!selectedChat"
+        ></app-layout-messenger-intro>
+        <app-layout-messenger-messages
           *ngIf="selectedChat"
-        ></app-layout-chat-messages>
-        <!-- / CONTENT -->
-        <!-- RIGHT SIDENAV -->
-        <mat-sidenav
-          class="sidenav right-sidenav"
-          position="end"
-          opened="true"
-          mode="side"
-        >
-          <app-layout-chat-right-sidenav></app-layout-chat-right-sidenav>
-        </mat-sidenav>
-        <!-- / RIGHT SIDENAV -->
-      </mat-sidenav-container>
+        ></app-layout-messenger-messages>
+      </div>
+      <div class="right-side">
+        <app-layout-messenger-right-side></app-layout-messenger-right-side>
+      </div>
     </div>
     <!-- / CONTENT CARD -->
   </div>
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
index 15f62344..18643c12 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -1,55 +1,12 @@
-#messenger {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+.container {
+  width: 100%;
   height: auto !important;
-
-  .center {
-    max-width: 1400px;
-    margin: 0 auto;
-
-    .content-card {
-      position: relative;
-      display: flex;
-      flex: 1;
-      border-radius: 8px;
-
-      .mat-sidenav-container {
-        display: flex;
-        flex: 1;
-        width: 100%;
-
-        .left-sidenav {
-          width: 300px;
-        }
-
-        .right-sidenav {
-          width: 70px;
-        }
-
-        > .mat-sidenav-content,
-        > .mat-drawer-content {
-          display: flex;
-          flex: 1 1 auto;
-          min-height: 100%;
-          width: auto;
-          height: auto;
-        }
-
-        > .mat-drawer-content {
-          max-width: 100%;
-        }
-
-        mat-sidenav {
-          display: flex;
-          flex-direction: column;
-          width: 400px;
-          max-width: 90%;
-          overflow: hidden;
-        }
-      }
-    }
-  }
+}
+
+.left-side {
+  width: 300px;
+}
+
+.right-side {
+  width: 70px;
 }
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
index 1ecd9244..c83115a7 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { MatSidenavModule } from '@angular/material/sidenav';
 
-import { AppChatLayoutModule } from '@app/layouts/chat/chat.layout.module';
+import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
 
 import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
 
@@ -13,7 +13,7 @@ import { COMPONENTS } from './components';
   imports: [
     CommonModule,
     MatSidenavModule,
-    AppChatLayoutModule,
+    AppMessengerLayoutModule,
     AppMessengerRoutingPageModule
   ],
   declarations: [...COMPONENTS],
diff --git a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
index f0ce2c7a..ff31045b 100644
--- a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
@@ -14,12 +14,14 @@ import {
 } from '@ucap-webmessenger/protocol-authentication';
 
 import * as AuthenticationStore from '../store/account/authentication';
+import { NGXLogger } from 'ngx-logger';
 
 @Injectable()
 export class AppNotificationService {
   constructor(
     private protocolService: ProtocolService,
-    private store: Store<any>
+    private store: Store<any>,
+    private logger: NGXLogger
   ) {}
 
   public subscribe(): void {
@@ -32,7 +34,7 @@ export class AppNotificationService {
         ),
         tap(message => {
           const logoutRes = decodeLogout(message);
-          console.log('logoutRes', logoutRes);
+          this.logger.debug('logoutRes', logoutRes);
           this.store.dispatch(AuthenticationStore.logout());
         })
       )
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
index 8a90a261..ad9c531b 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@@ -7,6 +7,8 @@ import { catchError, exhaustMap, map, withLatestFrom } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
+import { NGXLogger } from 'ngx-logger';
+
 import {
   buddy2,
   buddy2Success,
@@ -38,7 +40,7 @@ export class Effects {
       withLatestFrom(
         this.store.pipe(
           select(state => {
-            console.log('state', state);
+            this.logger.debug('state', state);
             return state.messenger.sync.buddy2SyncDate as string;
           })
         )
@@ -72,7 +74,7 @@ export class Effects {
       withLatestFrom(
         this.store.pipe(
           select(state => {
-            console.log('state', state);
+            this.logger.debug('state', state);
             return state.messenger.sync.group2SyncDate as string;
           })
         )
@@ -104,6 +106,7 @@ export class Effects {
     private actions$: Actions,
     private store: Store<any>,
     private syncProtocolService: SyncProtocolService,
-    private sessionStorageService: SessionStorageService
+    private sessionStorageService: SessionStorageService,
+    private logger: NGXLogger
   ) {}
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts
index 726770fd..8c374d60 100644
--- a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts
@@ -10,6 +10,8 @@ import { PublicApiService } from '@ucap-webmessenger/api-public';
 import { StatusCode } from '@ucap-webmessenger/api';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 
+import { NGXLogger } from 'ngx-logger';
+
 import { fetch, fetchSuccess, fetchFailure } from './actions';
 
 @Injectable()
@@ -22,7 +24,7 @@ export class Effects {
         this.publicApiService.versionInfo2(req).pipe(
           map(res => {
             if (res.statusCode === StatusCode.Success) {
-              console.log('fetchSuccess', res);
+              this.logger.debug('fetchSuccess', res);
               return fetchSuccess(res);
             } else {
               return fetchFailure({ error: 'Failed' });
@@ -47,6 +49,7 @@ export class Effects {
     private actions$: Actions,
     private publicApiService: PublicApiService,
     private sessionStorageService: SessionStorageService,
-    private router: Router
+    private router: Router,
+    private logger: NGXLogger
   ) {}
 }
diff --git a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
index 1d805823..6776e647 100644
--- a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
@@ -22,6 +22,8 @@ import { PacketBodyValue } from '../types/packet-body-value.type';
 import { SSVC_TYPE_ERROR_RES, ServerErrorCode } from '../types/service';
 import { ProtocolMessage } from '../models/protocol';
 
+import { NGXLogger } from 'ngx-logger';
+
 interface RequestState {
   subject: Subject<ProtocolMessage>;
   request: {
@@ -45,7 +47,10 @@ export class ProtocolService {
   private serverMessageSubject: Subject<ProtocolMessage> | null = null;
   private serverMessage$: Observable<ProtocolMessage> | null = null;
 
-  constructor(@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig) {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private logger: NGXLogger
+  ) {
     this.pendingRequests = new Map();
     this.input$ = new QueueingSubject<string>();
     this.serverMessageSubject = new Subject();
@@ -106,16 +111,23 @@ export class ProtocolService {
           (error: Error) => {
             const { message } = error;
             if (message === NormalClosureMessage) {
-              console.log('server closed the websocket connection normally');
+              this.logger.info(
+                'server closed the websocket connection normally'
+              );
             } else {
-              console.log('socket was disconnected due to error:', message);
+              this.logger.error(
+                'socket was disconnected due to error:',
+                message
+              );
             }
           },
           () => {
             // The clean termination only happens in response to the last
             // subscription to the observable being unsubscribed, any
             // other closure is considered an error.
-            console.log('the connection was closed in response to the user');
+            this.logger.info(
+              'the connection was closed in response to the user'
+            );
           }
         );
       } catch (error) {
@@ -170,7 +182,7 @@ export class ProtocolService {
           if (this.pendingRequests.has(requestId)) {
             this.pendingRequests.delete(requestId);
           }
-          console.log(
+          this.logger.debug(
             'ProtocolService::pendingRequests.size',
             this.pendingRequests.size
           );
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index 3820e18c..26ea11e3 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -2,7 +2,7 @@
   <mat-expansion-panel *ngFor="let group of groupList">
     <mat-expansion-panel-header>
       <mat-panel-title> {{ group.name }} </mat-panel-title>
-      <mat-panel-description>{{ group.name }} </mat-panel-description>
+      <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
 </mat-accordion>