designer component

Added designer component selector to modify component

Issue-ID: CCSDK-975
Change-Id: I0d80f003dbf6de12b9a690156836fa7f05cdcc75
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

2 files changed, 68 insertions, 2 deletions

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 c41bdafb7..1ba944a30 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
@@ -61,6 +61,7 @@ limitations under the License.
     <!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> -->
     <!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> -->
     <!-- </svg> -->
+    <app-designer></app-designer>
   </div>
 
 
@@ -71,6 +72,18 @@ limitations under the License.
   <div *ngIf="on" id="overlay" class="outerDiv divThree">
     <mat-accordion style="width: 100%">
 
+        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+            <mat-expansion-panel-header style="background-color: #f1f1f1">
+              <mat-panel-title>
+                Type
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+    
+            <div class="item-list">
+              <div class="item-box">vnf-netconf-device</div>
+            </div>
+          </mat-expansion-panel>
+
       <mat-expansion-panel>
         <mat-expansion-panel-header style="background-color: #f1f1f1">
           <mat-panel-title>
@@ -91,6 +104,56 @@ limitations under the License.
         </div>
       </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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Artifacts
+          </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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Inputs
+          </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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+        <mat-expansion-panel-header style="background-color: #f1f1f1">
+          <mat-panel-title>
+            Capabilities
+          </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.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
index eed926b7f..9ccb9977f 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
@@ -25,13 +25,16 @@ 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';
+import { DesignerComponent } from './designer/designer.component';
 
 @NgModule({
   declarations: [
-    ModifyTemplateComponent
+    ModifyTemplateComponent,
+    DesignerComponent
   ],
   exports: [
-    ModifyTemplateComponent
+    ModifyTemplateComponent,
+    DesignerComponent
   ],
   imports: [
     CommonModule,