added a basic function attribute sidebar

Designed a basic function attribute sidebar, it is still work in
progress. Need to work on Content depends on current selection of
Function.

Issue-ID: CCSDK-2281
Change-Id: Ifd6019348d530deb043d1a0275cd93413e128c7c
Signed-off-by: Rupinder <rupinsi1@in.ibm.com>

5 files changed, 265 insertions, 17 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 19c10c5fd..0c8fa3d20 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -24,7 +24,7 @@ export class ConfigurationDashboardComponent implements OnInit {
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
     @ViewChild(MetadataTabComponent, {static: false})
     private metadataTabComponent: MetadataTabComponent;
-    public customActionName: string;
+    public customActionName = '';
 
     entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
         'author-email', 'template_version', 'template_name', 'template_author'];
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 964268de5..a095b3dfc 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -225,7 +225,7 @@ button.rotate{
   left: 30px;
 }
 .componentsList tspan{
-  width:60px !important; 
+  /* width:30px !important;  */
   font: normal 13px sans-serif; 
   fill: #1B3E6F !important; 
   overflow-wrap: break-word;
@@ -419,9 +419,8 @@ p.compType-4{
  
 /*CANVAS*/
 .editBar{
-  width: 1080px;
-  height: 50px;
-  margin: 0 auto 0 -392px;
+  width: 200px;
+  margin: 0 auto 0;
   padding: 6px 10px;
   background:#F4F9FE;
   /* border: solid 1px #E8EFF8; */
@@ -505,11 +504,21 @@ p.compType-4{
 .componentContainer p{
   font-size: 12px;
 }
-
+.functionAttributeSidebar{
+  width: 440px;
+  padding: 0px;
+  margin-top: 50px;
+}
+.functionAttributeSidebar .attributesContainer{
+  background: #fff;
+  border: solid 1px #C1CDDD;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+}
 /*ATTRIBUTES SIDE BAR*/
 .attributesSideBar{
   width: 396px;
-  padding: 0;
+  padding: 0px;
+  margin-top: 50px;
 }
 .attributesSideBar .attributesContainer{
   background: #fff;
@@ -517,12 +526,13 @@ p.compType-4{
   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 }
 .closeBar{
-  float: right;
-  width: 90%;
-  height: 40px;
+  float: left;
+  width: 50%;
+  height: 42px;
   background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
   border: 0;
   outline: 0;
+  margin-left: -30px;
 }
 .closeBar:focus{
   outline: none;
@@ -536,6 +546,15 @@ p.compType-4{
   text-transform: uppercase;
   color: #1B3E6F;
 }
+.attributesContainer h6{
+  margin-bottom: 10px;
+  padding: 12px 0 12px 15px;
+  background: #DEE8F3;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #1B3E6F;
+}
 .actionName{
   margin-bottom: 21px;
 }
@@ -586,7 +605,7 @@ p.compType-4{
   font-weight: bold;
   font-size: 13px;
   text-transform: uppercase;
-  line-height: 38px;
+  line-height: 15px;
 }
 .accordion .btn-link:hover{
   color: #103D73;
@@ -653,3 +672,27 @@ p.compType-4{
     -webkit-user-select: none;
     z-index: 2;
 } */
+.attributesContainer .dropdown-text,
+.dropdown-toggle:hover ~ .dropdown-text, 
+.dropdown-toggle:focus ~ .dropdown-text{
+  top: 7px;
+  text-indent: 15px;
+  background: #F4F9FE;
+  border-radius: 5px;
+  border: 0;
+  box-shadow: whitesmoke;
+  color: #1B3E6F;
+  font-weight: bold;
+  font-size: 13px;
+}
+.radio-btn{
+  margin-left: 12px;
+  font-weight: bold;
+}
+.function-attribute{
+  margin-right: -16px;
+}
+.trash-span{
+  margin-left: 150px;
+  font-size:15px
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 6904d5781..52503cf53 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -102,9 +102,9 @@
 <div class="source-button editBar">
     
     <div class="btn-group viewBtns" role="group">
-        <button (click)="_toggleSidebar1()" class="topologySource active">
+        <!-- <button (click)="_toggleSidebar1()" class="topologySource active">
             <i style="font-size:24px" class="fa">&#xf101;</i> 
-        </button>
+        </button> -->
         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
         <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
             class="btn btn-secondary topologyView">Scripting</button>
@@ -230,7 +230,7 @@
         </div> -->
         <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
     </div>
-    <!-- Attribute SideBar -->
+    <!-- Action Attribute SideBar -->
     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
         [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
@@ -388,4 +388,202 @@
         </div>
     </ng-sidebar>
 
+        <!-- Function Attribute SideBar -->
+    <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'"
+        [position]="'right'" #sidebarRight>
+        <div class="container-fluid0">
+            <div class="row m-0">
+                <div class="col-2 pr-0">
+                    <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> -->
+                </div>
+                <div class="col-10 attributesContainer p-0">
+                   <div class="row m-0"> 
+                       <div class="col-12">
+                           <div class="col-3">
+                                 <button (click)="sidebarRight.close()" class="closeBar"></button>
+                           </div>
+
+                           <div class="function-attribute">
+                              <h6>Function Attributes 
+                                  <span class="trash-span">
+                                      <i class="fa fa-trash" type="button" aria-hidden="true"></i>
+                                  </span>
+                            </h6>         
+                           </div>
+                           
+                        
+                       </div>
+                   </div>
+                   
+                    <div>
+                        <div class="row m-0">
+                            <div class="col-12">
+                                <div class="form-group actionName">
+                                    <label for="exampleInputEmail1">Function Name</label>
+                                    <input type="text" class="form-control" placeholder="Function Name">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row m-0">
+                            <div class="col-12">
+                                <div class=" actionName">
+                                    <label>Function Type</label>
+                                    <div class="dropdown  w-100">
+                                        <input class="dropdown-toggle" type="text">
+                                        <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div>
+                                        <ul class="dropdown-content w-100">
+                                            <li>
+                                                <div class="form-group ">
+                                                    <li>other component</li>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion" id="accordionExample">
+                            <div class="card">
+                                <div class="card-header row" id="headingOne">
+                                    <h2 class="col-10 mb-0">
+                                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                            Interface
+                                        </button>
+                                    </h2>
+                                    <div class="col-2 p-0 text-center">
+                                        <button class="btn btn-addAttribute" type="button"></button>
+                                    </div>
+                                </div>
+
+                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                    data-parent="#accordionExample">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Resoluton-key</label>
+                                            <input type="text" class="form-control">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleFormControlTextarea1">Store result</label>
+                                        </div>
+                                        <div class="form-group">
+                                            <label>
+                                                <input class="with-gap radio-btn" name="group1" type="radio"/>
+                                                <span class="radio-btn">True</span>
+                                              </label>
+                                              <label class="radio-btn">
+                                                <input class="with-gap radio-btn" name="group1" type="radio"  />
+                                                <span class="radio-btn">False</span>
+                                              </label>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Target</label>
+                                            <input type="text" class="form-control" placeholder="">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
+                                            <input type="text" class="form-control" placeholder="">
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        </div>
+
+                        <div class="accordion" id="accordionExample">
+                            <div class="card">
+                                <div class="card-header row" id="headingOne">
+                                    <h2 class="col-10 mb-0">
+                                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                            Artifact
+                                        </button>
+                                    </h2>
+                                    <div class="col-2 p-0 text-center">
+                                        <button class="btn btn-addAttribute" type="button"></button>
+                                    </div>
+                                </div>
+
+                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                    data-parent="#accordionExample">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">base config-template</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Type</label>
+                                            <div class="dropdown  w-100">
+                                                <input class="dropdown-toggle" type="text">
+                                                <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div>
+                                                <ul class="dropdown-content w-100">
+                                                    <li>
+                                                        <div class="form-group ">
+                                                            <li>ddwd</li>
+                                                        </div>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+
+                                        <div style="height: 30px; margin-top: 30px;"><hr></div>
+
+                                        <div class="row">
+                                            <div class="col-9">
+                                                <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
+                                                <button type="button" class="btn p-0">
+                                                    <img src="/assets/img/icon-edit.svg">
+                                                </button>
+                                            </div>
+                                            <div class="col-3">
+                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="exampleInputEmail1">Type</label>
+                                            <div class="dropdown  w-100">
+                                                <input class="dropdown-toggle" type="text">
+                                                <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div>
+                                                <ul class="dropdown-content w-100">
+                                                    <li>
+                                                        <div class="form-group ">
+                                                            <li>ddwd</li>
+                                                        </div>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+
+                                        <div style="height: 30px; margin-top: 30px;"><hr></div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-sidebar>
+
 </ng-sidebar-container>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index fe90b6b90..3d10f99e7 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -33,12 +33,13 @@ import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
 import { GraphUtil } from './graph.util';
 import { GraphGenerator } from './graph.generator.util';
 import { FunctionsStore } from './functions.store';
-import { Subject } from 'rxjs';
+import { Subject, empty } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 import { ActivatedRoute } from '@angular/router';
 import { DesignerService } from './designer.service';
+import { isDefined } from '@angular/compiler/src/util';
 
 @Component({
   selector: 'app-designer',
@@ -50,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
 
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
+  functionAttributeSidebar: boolean;
   viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
   customActionName: string;
   showAction: boolean;
@@ -71,6 +73,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
     this.showAction = false;
+    this.functionAttributeSidebar = true;
 
   }
   private _toggleSidebar1() {
@@ -79,6 +82,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
   private _toggleSidebar2() {
     this.attributesSideBar = !this.attributesSideBar;
   }
+  // private _toggleSidebar3() {
+  //   this.functionAttributeSidebar = !this.functionAttributeSidebar;
+  // }
 
 
   /**
@@ -95,7 +101,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.customActionName = this.route.snapshot.paramMap.get('actionName');
-    if (this.customActionName != null) {
+    if (this.customActionName !== '') {
       this.showAction = true;
     }
     this.initializeBoard();
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
index e70d98d04..e6b00f413 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
@@ -19,6 +19,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
     private controllerSideBar: boolean;
     private ngUnsubscribe = new Subject();
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+    public customActionName = '';
 
     constructor(private store: DesignerStore,
                 private packageCreationUtils: PackageCreationUtils,
@@ -48,7 +49,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
         // TODO validate json against scheme
         console.log('convertAndOpenInDesingerView ...', this.content);
         this.store.saveSourceContent(this.content);
-        this.router.navigate(['/packages/designer', id]);
+        this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
     }
 
     ngOnDestroy() {