From 77ade80fd73156c526cfedc12b7227eb81e974d5 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 19 Mar 2018 18:54:14 +0900
Subject: [PATCH] sensor config

---
 .../infra/component/map/map.component.ts      |  4 +-
 src/packages/infra/infra.module.ts            |  7 +-
 src/packages/sensor/component/index.ts        |  8 ++
 .../crawler-auth/crawler-auth.component.html  | 15 +++
 .../crawler-auth/crawler-auth.component.scss  |  0
 .../crawler-auth.component.spec.ts            | 25 +++++
 .../crawler-auth/crawler-auth.component.ts    | 16 ++++
 .../crawler-selector.component.html           | 15 +++
 .../crawler-selector.component.scss           |  0
 .../crawler-selector.component.spec.ts        | 25 +++++
 .../crawler-selector.component.ts             | 16 ++++
 .../sensor-item-selector.component.html       | 17 ++++
 .../sensor-item-selector.component.scss       |  0
 .../sensor-item-selector.component.spec.ts    | 25 +++++
 .../sensor-item-selector.component.ts         | 16 ++++
 .../component/setting/setting.component.html  | 95 +++----------------
 .../component/setting/setting.component.ts    |  9 --
 .../target-selector.component.html            | 21 ++++
 .../target-selector.component.scss            |  0
 .../target-selector.component.spec.ts         | 25 +++++
 .../target-selector.component.ts              | 33 +++++++
 src/packages/sensor/sensor.module.ts          |  4 +-
 22 files changed, 280 insertions(+), 96 deletions(-)
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.ts

diff --git a/src/packages/infra/component/map/map.component.ts b/src/packages/infra/component/map/map.component.ts
index e46b257..8468828 100644
--- a/src/packages/infra/component/map/map.component.ts
+++ b/src/packages/infra/component/map/map.component.ts
@@ -8,7 +8,7 @@ import { ListSelector } from '../../store';
 import { Page, PageParams } from 'app/commons/model';
 import { Domain } from '../../../domain/model';
 import { MatDialog } from '@angular/material';
-import { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component';
+import { SettingComponent } from '../../../sensor/component/setting/setting.component';
 
 @Component({
   selector: 'of-infra-map',
@@ -64,7 +64,7 @@ export class MapComponent implements OnInit, AfterContentInit {
     const targetId = infra.target.id;
     console.log(targetId);
 
-    const dialogRef = this.dialog.open(SensorSettingPageComponent, {
+    const dialogRef = this.dialog.open(SettingComponent, {
       width: '80%',
       data: { }
     });
diff --git a/src/packages/infra/infra.module.ts b/src/packages/infra/infra.module.ts
index 9159f2c..ce72315 100644
--- a/src/packages/infra/infra.module.ts
+++ b/src/packages/infra/infra.module.ts
@@ -7,15 +7,16 @@ import { InfraStoreModule } from './infra-store.module';
 
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
-import { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component';
 import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting-page.module';
+import { SensorModule } from '../sensor/sensor.module';
+import { SettingComponent } from '../sensor/component/setting/setting.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
     InfraStoreModule,
-    SensorSettingPageModule
+    SensorModule
   ],
   declarations: [
     COMPONENTS,
@@ -27,7 +28,7 @@ import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting
     SERVICES
   ],
   entryComponents: [
-    SensorSettingPageComponent,
+    SettingComponent,
   ]
 })
 export class InfraModule { }
diff --git a/src/packages/sensor/component/index.ts b/src/packages/sensor/component/index.ts
index 7d11086..bb35714 100644
--- a/src/packages/sensor/component/index.ts
+++ b/src/packages/sensor/component/index.ts
@@ -3,6 +3,10 @@ import { SettingResultComponent } from './setting-result/setting-result.componen
 import { FilterComponent } from './list/filter/filter.component';
 import { ListComponent } from './list/list.component';
 import { DetailComponent } from './detail/detail.component';
+import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
+import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
+import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
+import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
 
 export const COMPONENTS = [
   SettingComponent,
@@ -10,4 +14,8 @@ export const COMPONENTS = [
   ListComponent,
   FilterComponent,
   DetailComponent,
+  TargetSelectorComponent,
+  CrawlerSelectorComponent,
+  CrawlerAuthComponent,
+  SensorItemSelectorComponent
 ];
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
new file mode 100644
index 0000000..798cb00
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
@@ -0,0 +1,15 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 3</mat-card-title>
+      <mat-card-subtitle>Crawler 인증</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+        크롤러 인증해야 됨
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
new file mode 100644
index 0000000..87f023d
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerAuthComponent } from './crawler-auth.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerAuthComponent;
+  let fixture: ComponentFixture<CrawlerAuthComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerAuthComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerAuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
new file mode 100644
index 0000000..69feba2
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-crawler-auth',
+  templateUrl: './crawler-auth.component.html',
+  styleUrls: ['./crawler-auth.component.scss']
+})
+export class CrawlerAuthComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
new file mode 100644
index 0000000..ad139e4
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
@@ -0,0 +1,15 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 2</mat-card-title>
+      <mat-card-subtitle>Crawler 선택</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+        크롤러 골라야됨
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
new file mode 100644
index 0000000..77251eb
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerSelectorComponent } from './crawler-selector.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerSelectorComponent;
+  let fixture: ComponentFixture<CrawlerSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
new file mode 100644
index 0000000..9e9b028
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-crawler-selector',
+  templateUrl: './crawler-selector.component.html',
+  styleUrls: ['./crawler-selector.component.scss']
+})
+export class CrawlerSelectorComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
new file mode 100644
index 0000000..ad5047c
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
@@ -0,0 +1,17 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 4</mat-card-title>
+      <mat-card-subtitle>Select Sensor Items</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+        트리 들어가야됨
+        
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
new file mode 100644
index 0000000..25e7477
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SensorItemSelectorComponent } from './sensor-item-selector.component';
+
+describe('SensorItemSelectorComponent', () => {
+  let component: SensorItemSelectorComponent;
+  let fixture: ComponentFixture<SensorItemSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SensorItemSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SensorItemSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
new file mode 100644
index 0000000..d8fc1cd
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-sensor-item-selector',
+  templateUrl: './sensor-item-selector.component.html',
+  styleUrls: ['./sensor-item-selector.component.scss']
+})
+export class SensorItemSelectorComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html
index 61ef2ca..d0fccb0 100644
--- a/src/packages/sensor/component/setting/setting.component.html
+++ b/src/packages/sensor/component/setting/setting.component.html
@@ -1,86 +1,19 @@
-<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-  <div *ngIf="step == 1">
-    <!--  -->
-    <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-      <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+<mat-grid-list cols="2" rowHeight="200px">
 
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 1</mat-card-title>
-            <mat-card-subtitle>Select Target</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            여기에 타겟들 출력
-          </mat-card-content>
-        </mat-card>
+  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
+    <of-target-selector></of-target-selector>
+  </mat-grid-tile>
 
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 3</mat-card-title>
-            <mat-card-subtitle>Crawler Auth</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            <form class="example-form">
-              <mat-form-field class="example-full-width">
-                <input matInput placeholder="Account" value="Loafe">
-              </mat-form-field>
+  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightcoral">
+    <of-crawler-auth></of-crawler-auth>
+  </mat-grid-tile>
 
-              <mat-form-field class="example-full-width">
-                <input matInput type="password" placeholder="Password" value="">
-              </mat-form-field>
-              <div fxLayout="row" fxLayoutWrap fxLayoutAlign="right">
-                <button mat-button>Confirm</button>
-              </div>
-            </form>
-          </mat-card-content>
-        </mat-card>
+  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightgrey">
+    <of-sensor-item-selector></of-sensor-item-selector>
+  </mat-grid-tile>
 
-      </div>
+  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightpink">
+    <of-crawler-selector></of-crawler-selector>
+  </mat-grid-tile>
 
-      <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 2</mat-card-title>
-            <mat-card-subtitle>Select Crawler</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            <mat-radio-group class="example-radio-group" [(ngModel)]="selectCrawler">
-              <mat-radio-button class="example-radio-button" *ngFor="let crawler of crawlerList" [value]="crawler">
-                {{crawler}}
-              </mat-radio-button>
-            </mat-radio-group>
-            <div class="example-selected-value">Your select crawler is: {{selectCrawler}}</div>
-          </mat-card-content>
-        </mat-card>
-
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 4</mat-card-title>
-            <mat-card-subtitle>Select Sensor Item</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            트리로 센서 아이템 목록 출력
-          </mat-card-content>
-        </mat-card>
-
-      </div>
-    </div>
-
-    <!--  -->
-  </div>
-  <div *ngIf="step == 2">
-    <of-sensor-setting-result></of-sensor-setting-result>
-  </div>
-  <div fxLayout="col" fxLayoutWrap fxLayoutAlign="center">
-
-    <button mat-button (click)="onCloseCancel()">Cancel</button>
-    스텝 순서를 바꿨으니 나중에 바꾸잡
-    <button mat-button (click)="onNext()">Next</button>
-
-  </div>
-
-
-</div>
-
-<!--  -->
\ No newline at end of file
+</mat-grid-list>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts
index 1a1f611..59a8fec 100644
--- a/src/packages/sensor/component/setting/setting.component.ts
+++ b/src/packages/sensor/component/setting/setting.component.ts
@@ -13,21 +13,12 @@ export class SettingComponent implements OnInit, AfterContentInit {
 
   constructor() { }
 
-  selectCrawler: String;
-
-  crawlerList: Array<String>;
 
   ngOnInit() {
   }
 
   ngAfterContentInit() {
 
-    this.crawlerList = new Array();
-
-    this.crawlerList.push('SSH Crawler');
-    this.crawlerList.push('WMI Crawler');
-    this.crawlerList.push('MySQL Crawler');
-    this.crawlerList.push('PostgreSQL Crawler');
   }
 
   onNext() {
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.html b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
new file mode 100644
index 0000000..6bc0369
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
@@ -0,0 +1,21 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 1</mat-card-title>
+      <mat-card-subtitle>Select Target</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+          <mat-selection-list>
+              <mat-list-option *ngFor="let target of targets">
+                {{target.name}}
+              </mat-list-option>
+            </mat-selection-list>
+
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.scss b/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
new file mode 100644
index 0000000..c13ee67
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetSelectorComponent } from './target-selector.component';
+
+describe('FilterComponent', () => {
+  let component: TargetSelectorComponent;
+  let fixture: ComponentFixture<TargetSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
new file mode 100644
index 0000000..3cb7fd7
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-target-selector',
+  templateUrl: './target-selector.component.html',
+  styleUrls: ['./target-selector.component.scss']
+})
+export class TargetSelectorComponent implements OnInit {
+
+  targets = [
+    {
+      'name': 'Target1'
+    },
+    {
+      'name': 'Target2'
+    },
+    {
+      'name': 'Target3'
+    },
+    {
+      'name': 'Target4'
+    },
+    {
+      'name': 'Target5'
+    },
+  ];
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/sensor.module.ts b/src/packages/sensor/sensor.module.ts
index 62a5d34..42183ee 100644
--- a/src/packages/sensor/sensor.module.ts
+++ b/src/packages/sensor/sensor.module.ts
@@ -9,6 +9,7 @@ import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
 import { SettingComponent } from './component/setting/setting.component';
 import { TreeModule } from 'angular-tree-component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   imports: [
@@ -16,7 +17,8 @@ import { TreeModule } from 'angular-tree-component';
     MaterialModule,
     FormsModule,
     SensorStoreModule,
-    TreeModule
+    TreeModule,
+    PerfectScrollbarModule
   ],
   declarations: [
     COMPONENTS,