Merge "CDS Functional decomposition image"
diff --git a/cds-ui/client/src/app/app.module.ts b/cds-ui/client/src/app/app.module.ts
index cc40c35..10532da 100644
--- a/cds-ui/client/src/app/app.module.ts
+++ b/cds-ui/client/src/app/app.module.ts
@@ -33,7 +33,7 @@
 import { SharedModule } from './common/shared/shared.module';
 import { CoreModule } from './common/core/core.module';
 
-import { BlueprintModule } from './feature-modules/blueprint/blueprint.module';
+// import { BlueprintModule } from './feature-modules/blueprint/blueprint.module';
 import { ResourceDefinitionModule } from './feature-modules/resource-definition/resource-definition.module';
 
 @NgModule({ 
@@ -65,7 +65,7 @@
     HttpClientModule,
     SharedModule,
     CoreModule,
-    BlueprintModule,
+    // BlueprintModule,
     ResourceDefinitionModule
   ],
   providers: [],
diff --git a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.html b/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.html
deleted file mode 100644
index 635b83c..0000000
--- a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-============LICENSE_START==========================================
-===================================================================
-Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
-===================================================================
-
-Unless otherwise specified, all software contained herein is licensed
-under the Apache License, Version 2.0 (the License);
-you may not use this software except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-============LICENSE_END============================================
--->
-<input type="file" accept=".cba">
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.scss b/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.scss
deleted file mode 100644
index e69de29..0000000
--- a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.scss
+++ /dev/null
diff --git a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.spec.ts b/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.spec.ts
deleted file mode 100644
index f80ca64..0000000
--- a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FileuploadComponent } from './fileupload.component';
-
-describe('FileuploadComponent', () => {
-  let component: FileuploadComponent;
-  let fixture: ComponentFixture<FileuploadComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ FileuploadComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FileuploadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.ts b/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.ts
deleted file mode 100644
index 8a61a7f..0000000
--- a/cds-ui/client/src/app/common/shared/fileupload/fileupload.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
-============LICENSE_START==========================================
-===================================================================
-Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
-===================================================================
-
-Unless otherwise specified, all software contained herein is licensed
-under the Apache License, Version 2.0 (the License);
-you may not use this software except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-============LICENSE_END============================================
-*/
-
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-fileupload',
-  templateUrl: './fileupload.component.html',
-  styleUrls: ['./fileupload.component.scss']
-})
-export class FileuploadComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/cds-ui/client/src/app/common/shared/shared.module.ts b/cds-ui/client/src/app/common/shared/shared.module.ts
index 2b3c993..4ee7cca 100644
--- a/cds-ui/client/src/app/common/shared/shared.module.ts
+++ b/cds-ui/client/src/app/common/shared/shared.module.ts
@@ -25,18 +25,16 @@
 import { CBAWizardComponent } from './components/cbawizard/cbawizard.component';
 import { MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
 import { RouterModule } from "@angular/router";
-import { FileuploadComponent } from './fileupload/fileupload.component';
 
 @NgModule({
   declarations: [
     HomeComponent,
-    CBAWizardComponent,
-    FileuploadComponent
+    CBAWizardComponent
+    
   ],
   exports: [
     HomeComponent,
-    CBAWizardComponent,
-    FileuploadComponent
+    CBAWizardComponent
   ],
   imports: [
     CommonModule,
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
index 22941b5..1c0c05a 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
@@ -17,4 +17,8 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
-*/
\ No newline at end of file
+*/
+
+.mat-card {
+    padding: 0px !important;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
index f9cb823..c41bdaf 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
@@ -18,8 +18,79 @@
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<p>
-  modify-template works!
-</p>
 
-<router-outlet></router-outlet>
+<div class="modifyTemp">
+  <div class="outerDiv divone">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Node types
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="flex-container">
+          <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Policy
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="flex-container">
+          <div class="item-box">Policy 1</div>
+          <div class="item-box">Policy 1</div>
+          <div class="item-box">Policy 1</div>
+        </div>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+
+
+  <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv">
+    <!-- <canvas class="cnv" height="500"> -->
+    <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[pendingList,reviewList]"
+              style="height: 100%;width: 100%" (cdkDropListDropped)="drop($event)"> -->
+    <!-- <canvas id="canvasArea" class="cnv" height="500" width="500" (click)="selected($event)"> -->
+    <!-- <div class="item-box" *ngFor="let item of done" cdkDrag>{{item}}</div> -->
+    <!-- </canvas> -->
+    <!-- </div> -->
+    <!-- </canvas> -->
+    <!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> -->
+    <!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> -->
+    <!-- </svg> -->
+  </div>
+
+
+  <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
+    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
+  </div>
+
+  <div *ngIf="on" id="overlay" class="outerDiv divThree">
+    <mat-accordion style="width: 100%">
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Properties
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Interface
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <div class="item-list">
+          <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div>
+        </div>
+      </mat-expansion-panel>
+
+    </mat-accordion>
+  </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
index 22941b5..1ddb255 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
@@ -1,7 +1,7 @@
 /*
 ============LICENSE_START==========================================
 ===================================================================
-Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
 ===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
@@ -17,4 +17,65 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
-*/
\ No newline at end of file
+*/
+
+.outerDiv {
+    display: flex;
+    // align-items: center;
+    // justify-content: center;
+    margin: 1px;
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .divone {
+    height: 100%;
+    width: 18%;
+    background-color: #D7D1D1;
+  }
+.divtwo {
+  height: 100%;
+    width: 100%;
+    background-color: #D7D1D1;
+}
+.divThree{
+  width: 30%;
+  height: 100%;
+  background-color: #D7D1D1;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-container > div {
+  background-color: #f1f1f1;
+  width: 53px;
+  margin: 2px;
+  text-align: center;
+  line-height: 53px;
+  font-size: 13px;
+}
+.cnv
+{
+  background-image: url('http://i.imgur.com/M3PFd.png');
+  background-position: 39px 32px;
+  background-repeat: repeat;
+  width: 100%
+}
+
+.modifyTemp {
+    display: flex; 
+    flex-direction: row; 
+    height: 524px;
+    width: 100%
+}
+
+.mat-expansion-panel-header{
+  background-color: #3f51b5 !important; 
+}
+
+.mat-expansion-panel-header-title {
+  color: white !important;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
index f502de4..eed926b 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
@@ -20,8 +20,11 @@
 */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { CdkTableModule } from '@angular/cdk/table';
+
 import { ModifyTemplateComponent } from './modify-template.component';
 import { ModifyTemplateRoutingModule } from './modify-template-routing.module';
+import { AppMaterialModule } from '../../../common/modules/app-material.module';
 
 @NgModule({
   declarations: [
@@ -32,6 +35,8 @@
   ],
   imports: [
     CommonModule,
+    CdkTableModule,
+    AppMaterialModule,
     ModifyTemplateRoutingModule
   ]
 })
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
index 8e22c70..635b83c 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
@@ -18,5 +18,4 @@
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<!-- <app-file-upload></app-file-upload> -->
 <input type="file" accept=".cba">
\ No newline at end of file