dashboard

src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.html

@@ -1,12 +1,22 @@
 <mat-form-field>
-  <input matInput placeholder="Search">
+  <input matInput type="text" placeholder="Search" [(ngModel)]="searchWord" (ngModelChange)="handleSearch($event)">
+  <button mat-button *ngIf="searchWord" matSuffix mat-icon-button aria-label="Clear" (click)="handleCleanSearch()">
+    <mat-icon>close</mat-icon>
+  </button>
 </mat-form-field>
-<p *ngIf="dashboards == null || dashboards.length == 0">No dashboards found.</p>
-<div *ngFor="let dashboard of dashboards">
-  <button mat-button>{{dashboard.name}}</button>
-</div>
+
+<perfect-scrollbar style="height: 200px">
+  <p *ngIf="dashboards == null || dashboards.length == 0">No dashboards found.</p>
+  <div *ngFor="let dashboard of dashboards">
+    <button mat-button>{{dashboard.name}}</button>
+  </div>
+</perfect-scrollbar>
+
 <mat-divider></mat-divider>
 <mat-form-field>
-  <input matInput placeholder="New Dashboard">
+  <input matInput placeholder="New Dashboard" [(ngModel)]="newDashName">
+  <mat-error>
+    test
+  </mat-error>
 </mat-form-field>
-<button mat-raised-button color="accent">OK</button>
+<button mat-raised-button color="accent" (click)="handleNewDashboard(newDashName)">OK</button>

src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.ts

@@ -7,28 +7,95 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class AddDashboardDialogComponent implements OnInit {
 
-  dashboards = [
-    {
-      id: '0',
-      name: 'Dashboard1',
-    },
-    {
-      id: '1',
-      name: 'Dashboard2',
-    },
-    {
-      id: '2',
-      name: 'Dashboard3',
-    },
-    {
-      id: '3',
-      name: 'Dashboard4',
-    },
-  ];
+  private searchWord;
+  private dashboards;
+  private staticDashboards;
 
   constructor() { }
 
   ngOnInit() {
+    this.staticDashboards = [
+      {
+        id: '0',
+        name: 'Dashboard1',
+      },
+      {
+        id: '1',
+        name: 'Dashboard2',
+      },
+      {
+        id: '2',
+        name: 'Dashboard3',
+      },
+      {
+        id: '3',
+        name: 'Dashboard4',
+      },
+      {
+        id: '0',
+        name: 'Dashboard1',
+      },
+      {
+        id: '1',
+        name: 'Dashboard2',
+      },
+      {
+        id: '2',
+        name: 'Dashboard3',
+      },
+      {
+        id: '3',
+        name: 'Dashboard4',
+      },
+      {
+        id: '0',
+        name: 'Dashboard1',
+      },
+      {
+        id: '1',
+        name: 'Dashboard2',
+      },
+      {
+        id: '2',
+        name: 'Dashboard3',
+      },
+      {
+        id: '3',
+        name: 'Dashboard4',
+      },
+    ];
+    this.dashboards = this.staticDashboards;
   }
 
+  handleSearch(v: any) {
+    const tempArr = new Array();
+    for (const dashboard of this.staticDashboards) {
+      if (dashboard.name.indexOf(v) !== -1) {
+        tempArr.push(dashboard);
+      }
+    }
+    this.dashboards = tempArr;
+  }
+
+  handleNewDashboard(v: any) {
+    this.searchWord = '';
+    for (const dashboard of this.staticDashboards) {
+      if (dashboard.name === v) {
+        return;
+      }
+    }
+    // temporary
+    const newDash = {
+      id: '5',
+      name: v
+    };
+    this.staticDashboards.push(newDash);
+
+    this.handleSearch('');
+  }
+
+  handleCleanSearch() {
+    this.searchWord = '';
+    this.handleSearch('');
+  }
 }

src/app/pages/overview/overview-page.component.html

@@ -1,5 +1,4 @@
 <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlexFil fxFill fxLayoutGap="1px">
-
   <div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
 
     <div fxLayout="row" fxLayoutAlign="space-between center">
@@ -18,9 +17,13 @@
       <of-sensor-item-filter></of-sensor-item-filter>
     </div>
 
+    <div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
+        <button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
+    </div>
+
   </div>
 
-  <div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add" >
+  <div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
     <div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
       <h3 class="mat-headline" fxFlex="80">Activities</h3>
     </div>
@@ -41,5 +44,4 @@
   </div>
 </div>
 <div>
-  <!-- <button mat-raised-button (click)="openDialog()">Pick one</button> -->
 </div>

src/app/pages/overview/overview-page.module.ts

@@ -12,6 +12,7 @@ import { SensorItemFilterComponent } from '../../commons/component/sensor-item-f
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { HostSummaryCardComponent } from '../../commons/component/host-summary-card/host-summary-card.component';
 import { AppSummaryCardComponent } from '../../commons/component/app-summary-card/app-summary-card.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -20,7 +21,8 @@ import { AppSummaryCardComponent } from '../../commons/component/app-summary-car
     DashboardCardModule,
     MaterialModule,
     PerfectScrollbarModule,
-    NgxChartsModule
+    NgxChartsModule,
+    FormsModule
   ],
   declarations: [
     OverviewPageComponent,