aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer
diff options
context:
space:
mode:
authorRupinder <rupinsi1@in.ibm.com>2020-05-28 16:44:05 +0530
committerKAPIL SINGAL <ks220y@att.com>2020-05-28 15:52:31 +0000
commitd04515ae5983945d24fa2a339827ee938e5cb6ab (patch)
tree9d815100532b759d66f21db24639c893482ec3fe /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer
parent045eb1725eb72e727dfb17ad0296de05f422556f (diff)
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>
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css63
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html204
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts3
4 files changed, 264 insertions, 16 deletions
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() {