summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-05 15:18:41 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-05 17:41:05 +0200
commitf08c5e96d5b4c0792c4709093480f5f6cb452d49 (patch)
treec3771e914a5b2fd465de691dfe76b4f725e2fd94 /cds-ui/designer-client/src/app/modules/feature-modules/packages
parenta7581011658acf44c7eff92bd2f2716b91116dc5 (diff)
HTML for Action & Function Attributes
Issue-ID: CCSDK-2808 Issue-ID: CCSDK-2281 Issue-ID: CCSDK-2292 Issue-ID: CCSDK-2809 Issue-ID: CCSDK-2810 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: If37f968a03b18ea5d3d0a7cb8697bd4756b61bcc
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css249
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html724
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts6
3 files changed, 602 insertions, 377 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 e1de6f60f..43f3818a0 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
@@ -593,39 +593,69 @@ p.compType-4{
.componentContainer p{
font-size: 12px;
}
-.functionAttributeSidebar{
+.attributeSidebar{
width: 440px;
padding: 0px;
margin-top: 45px;
}
-.functionAttributeSidebar .attributesContainer{
+.attributesContainer{
+ padding: 0;
background: #fff;
border: solid 1px #C1CDDD;
box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
}
/*ATTRIBUTES SIDE BAR*/
.attributesSideBar{
- width: 396px;
+ width: 358px;
padding: 0px;
- margin-top: 50px;
+ margin-top: 45px;
}
.attributesSideBar .attributesContainer{
+ height: 85.9vh;
+ overflow-y: hidden;
+ padding-bottom: 20px;
background: #fff;
border: solid 1px #C1CDDD;
box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
}
.closeBar{
float: left;
- width: 50%;
- height: 42px;
- background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
+ padding: 0 !important;
+ width: 38px;
+ height: 35px;
+ background:#D9E3EE;
border: 0;
outline: 0;
- margin-left: -30px;
}
.closeBar:focus{
outline: none;
}
+.attributesContainer .scrollWrapper{
+ overflow-y: auto;
+ height: 79vh;
+}
+.attributesContainer .nav-link{
+ padding-top: 7px !important;
+ padding-bottom: 7px !important;
+ color: #1B3E6F !important;
+ text-transform: capitalize !important;
+ border: solid 1px #ECEDF2 !important;
+ border-radius: 0 !important;
+}
+.attributesContainer .nav-item:first-child a{
+ border-top-left-radius: 4px !important;
+ border-bottom-left-radius: 4px !important;
+ border-right-width: 0 !important;
+}
+.attributesContainer .nav-item:last-child a{
+ border-top-right-radius: 4px !important;
+ border-bottom-right-radius: 4px !important;
+ border-left-width: 0 !important;
+}
+.nav-pills .nav-link.active{
+ background-color: #1B3E6F;
+ color: #fff !important;
+}
.attributesContainer h1{
margin-bottom: 10px;
padding: 12px 0 12px 15px;
@@ -635,24 +665,91 @@ p.compType-4{
text-transform: uppercase;
color: #1B3E6F;
}
+.attributesContainertTitle{
+ height: 35px;
+ margin-bottom: 9px !important;
+ padding: 0;
+ background: #DEE8F3;
+ font-size: 12px;
+}
+.add-attribute{
+ margin: 15px 0;
+ padding: 15px 9px;
+ background-color: #F4F9FE;
+}
+.add-attribute h5{
+ padding: 0;
+ margin-bottom: 12px;
+ font-size: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: #1B3E6F;
+}
+.add-attribute .btn{
+ width: 100%;
+ background-color: #fff;
+ border: solid 1px #C1CDDD;
+ color: #1B3E6F;
+ line-height: 18px;
+ border-radius: 4px;
+}
+.add-attribute .btn:hover{
+ background-color: #1B3E6F;
+}
+.add-attribute .btn:hover i::before{
+ color: #fff;
+}
+.icon-function-attribute{
+ font-size: 18px;
+}
+.add-attribute span{
+ font-size: 11px;
+ line-height: 16px;
+}
+.attributesContainertTitle .btn-group{
+ margin-top: 3px;
+}
+.attributesContainertTitle .btn{
+ margin-left: 8px !important;
+ padding: 1px 9px !important;
+ border-radius: 4px !important;
+}
.attributesContainer h6{
- margin-bottom: 10px;
- padding: 12px 0 12px 15px;
+ padding: 0;
+ margin-bottom: 0;
background: #DEE8F3;
+ line-height: 35px !important;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #1B3E6F;
}
-.actionName{
- margin-bottom: 21px;
+.view-source,
+.view-source:hover{
+ background: #103D73;
+ border-color: #D0DFF1;
+ color: #fff;
+ font-size: 11px;
+}
+.trash-item,
+.trash-item:hover{
+ background: #fff;
+ border-color: #D0DFF1;
+ color: #103D73;
+}
+.trash-item{
+ font-size: 14px;
}
.attributesContainer label{
color: #1B3E6F;
- text-transform: uppercase;
- font-size: 11px;
+ /* text-transform: uppercase; */
+ font-size: 12px;
font-weight: bold;
}
+.attributesContainer label.custom-control-label{
+ text-transform: unset;
+ font-weight: normal;
+}
.attributesContainer .form-group{
margin-bottom: 9px;
}
@@ -670,23 +767,119 @@ p.compType-4{
.attributesContainer .form-control::placeholder{
color: #CFD7E5;
}
-.scrolll{
- max-height: 88.75vh;
- overflow-y: auto;
+.attributesContainer .attribute-value{
+ text-transform: unset;
+ display: block;
+ width: 100%;
+ padding: 0 .75rem .375rem 0;
+ font-size: 12px;
+ font-weight: normal;
+}
+.attributesContainer textarea{
+ height: 60px;
+}
+.icon-required-star{
+ font-size: 10px;
+}
+.optional-attribute::before{
+ color: #CAD3E0;
+}
+.attributeOptions{
+ display: none;
+ border: 0;
+}
+.attributeOptions a:not(:first-child){
+ margin-left: 18px;
+}
+.attributeOptions i{
+ color: #103D73 !important;
+ font-size: 16px;
+}
+.editAttribute i{
+ font-size: 14px;
+}
+.action-attributes .form-group{
+ display: inline-block;
+ width: 100%;
+ padding-left: 12px;
+ /* line-height: 30px; */
+}
+.action-attributes .form-group:hover{
+ cursor: pointer !important;
+ background-color: #F5FAFF;
+}
+.action-attributes .form-group:hover label{
+ cursor: pointer !important;
+ /* padding-left: 12px; */
+}
+.action-attributes .form-group:hover .attributeOptions{
+ display: inline-block;
+ position: relative;
+ left: 8%;
+ top: 3px;
+}
+
+.btn-select-template{
+ background-color: #C3CDDB;
+ border-radius: 2px;
+ color: #1B3E6F;
+ font-size: 12px;
+}
+.btn-select-template i{
+ font-size: 16px;
+ vertical-align: text-bottom;
+}
+.attribute-wrap{
+ padding-bottom: 15px;
+ margin-bottom: 9px;
+ border-bottom: solid 1px #F4F9FE;
+}
+.attribute-wrap .form-group{
+ margin-bottom: 0;
+}
+.template-mapping-list{
+ margin-bottom: 15px;
+ font-size: 13px;
+}
+.template-mapping-list p{
+ width: 56%;
+}
+.deleteTemplate{
+ right: 30px;
+ top: -8px;
+}
+.deleteTemplate i{
+ color: #103D73 !important;
+}
+.icon-close::before{
+ color: #103D73;
+ font-size: 10px !important;
+}
+.accordion{
+ margin-top: 12px;
}
.accordion > .card{
margin-bottom: 0 !important;
border: 0;
+ box-shadow: none;
+}
+.card-header .btn-link,
+.accordion .card-header .btn-link[aria-expanded="true"],
+.accordion .card-header .btn-link[aria-expanded="false"]{
+ padding-left: 15px !important;
+ padding-right: 15px !important;
}
.accordion > .card .card-header{
margin: 0;
- padding: 0;
+ padding: 0 !important;
background-color: #F4F9FE;
border: 0;
border-radius: 0;
}
+
.accordion > .card .card-body{
- padding-bottom: 10px !important;
+ padding-top: 20px !important;
+ padding-bottom: 0 !important;
}
.accordion .btn-link{
padding: 0;
@@ -696,6 +889,9 @@ p.compType-4{
text-transform: uppercase;
line-height: 15px;
}
+.btn-link::before{
+ font-size: 15px !important;
+}
.accordion .btn-link:hover{
color: #103D73;
text-decoration: unset;
@@ -708,12 +904,12 @@ p.compType-4{
font-weight: normal;
font-size: 12px;
}
-.accordion .card-header .btn-link[aria-expanded="true"]:after{
+/* .accordion .card-header .btn-link[aria-expanded="true"]:after{
content: "\f078";
}
.accordion .card-header .btn-link[aria-expanded="false"]:after{
content: "\f054";
-}
+} */
.btn-addAttribute{
width: 20px;
height: 20px;
@@ -778,11 +974,7 @@ p.compType-4{
margin-left: 12px;
font-weight: bold;
}
-.function-attribute{
- margin-right: -16px;
-}
.trash-span{
- margin-left: 150px;
font-size:15px
}
@@ -856,3 +1048,10 @@ ul.editor{
.zoom-percent{
font-size: 12px;
}
+/*Modal*/
+.modal-backdrop{z-index: -1}
+.modal-holder.modal-backdrop{z-index: 100}
+.modal-holder + .modal-dialog {z-index: 1000}
+.modal-dialog{
+ max-width: 680px;
+} \ No newline at end of file
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 0595db1ce..980a94ca5 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
@@ -12,7 +12,7 @@
<li class="breadcrumb-item">
<a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
<button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
+ data-target="#exampleModalLong">
<i class="icon-info" aria-hidden="true"></i>
</button>
</li>
@@ -22,13 +22,13 @@
</li>
</ol>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+ aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <img src="assets/img/icon-close.svg"/>
+ <img src="assets/img/icon-close.svg" />
</button>
</div>
<div class="modal-body package-info">
@@ -70,15 +70,15 @@
<li>
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Preview">
+ data-tooltip="Preview">
<i class="fa fa-eye"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Download">
+ data-tooltip="Download">
<i class="fa fa-download"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Share">
+ data-tooltip="Share">
<i class="fa fa-share-square"></i>
</a>
</div>
@@ -103,33 +103,36 @@
</div>
</div>
</header>
-
+<!--Editor Bar-->
<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
+ <!--Actions/Functions Side Menu Toogole Button-->
<button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
- data-tooltip="Collapse Side bar">
+ data-tooltip="Collapse Side bar">
<i class="fa arr-size">&#xf100;</i>
</button>
+ <!--Nav Tabs-->
<div class="collapse navbar-collapse ">
+ <!--Action Tabs-->
<ul class="navbar-nav">
<li class="nav-item active">
<nav class="row">
- <!--Nav Tabs-->
<div class="col-12">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
- aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+ aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
<a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
- aria-controls=" " aria-selected="false">Template</a>
+ aria-controls=" " aria-selected="false">Template</a>
</div>
</div>
</nav>
</li>
</ul>
+ <!--Requirement/Capability Legend-->
<ul class="templateLegend ml-auto mr-auto p-0">
<li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
<li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
</ul>
-
+ <!--Undo/Redo Buttons-->
<ul class="editor navbar">
<li>
<button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
@@ -153,34 +156,32 @@
<img src="/assets/img/icon-zoomIn.svg"></button>
</li>
</ul>
-
+ <!--Designer/Scripting View Tabs-->
<ul class="navbar ml-2" style="list-style: none">
<li class="nav-item">
<div class="btn-group viewBtns" role="group">
<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
+ class="btn btn-secondary topologyView">Scripting
</button>
</div>
</li>
</ul>
-
</div>
</nav>
<ng-sidebar-container class="sidebar-container">
- <!-- Controller SideBar -->
+ <!--Left Side Menu-->
<ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
- [mode]="'push'" #sidebarLeft>
-
+ [mode]="'push'" #sidebarLeft>
<nav class="row">
<!--Nav Tabs-->
<div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
- role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+ role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
<a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
- role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+ role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
</div>
</div>
</nav>
@@ -188,10 +189,17 @@
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-action" role="tabpanel"
- aria-labelledby="nav-action-tab">
+ aria-labelledby="nav-action-tab">
<!--Action Search Box-->
<input type="text" class="form-control input-search-controller" placeholder="Search Actions">
-
+ <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
+ Action Attributes
+ </button>
+ <br /><br />
+ <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
+ Function Attributes
+ </button>
+ <br />
<button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
+ &nbsp;&nbsp;New Action
</button>
@@ -205,7 +213,7 @@
<li *ngFor="let customActionName of actions">
<label>
<i class="icon-file" aria-hidden="true" class="icon-file"
- (click)="openFunctionAttributes(customActionName)"></i>
+ (click)="openFunctionAttributes(customActionName)"></i>
{{customActionName}} </label>
</li>
</ul>
@@ -217,16 +225,14 @@
<input type="text" class="form-control input-search-controller" placeholder="Search Functions">
<div id="palette-paper" class="componentsList"></div>
</div>
-
</div>
</div>
</div>
- <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
- href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
+ <div class="helpBox"><i class="icon-info" aria-hidden="true"></i>
+ <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
</div>
</ng-sidebar>
- <!-- Page content -->
-
+ <!--Page content-->
<div ng-sidebar-content id="board-paper">
<button class="rotate" (click)="_toggleSidebar1()">
<span>
@@ -235,7 +241,9 @@
</span>
</button>
- <!-- Canvas -->
+
+ <!-- CANVAS -->
+ <!--Editor Bar-->
<div class="editBar text-center">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
@@ -259,185 +267,165 @@
<button type="button" class="btn btn-secondary topologyView">Source</button>
</div>
</div>
- <!-- <div class="card actionContainer">
- <div class="card-header">
- <span>Action 1</span>
- </div>
- <div class="card-body">
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType1.svg" title="">
- <h2>config-assign</h2>
- <p>component-resource-resolution</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType2.svg" title="">
- <h2>execute</h2>
- <p>component-netconf-executor</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType3.svg" title="">
- <h2>function 1</h2>
- <p>dg-generic</p>
- </a>
- <a (click)="sidebarRight.open()" class="componentContainer text-center">
- <img src="/assets/img/icon-comType2.svg" title="">
- <h2>execute</h2>
- <p>component-netconf-executor</p>
- </a>
- </div>
- </div> -->
- <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+ <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
</div>
- <!-- Action Attribute SideBar -->
- <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
- [position]="'right'" #sidebarRight>
+
+ <!--Right Side Menu - Action Attribute-->
+ <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
+ [position]="'right'" #sidebarRight1>
<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">
- <h1>Action Attributes</h1>
- <div class="scrolll">
+ <div class="col attributesContainer">
+ <div class="row m-0 attributesContainertTitle">
+ <div class="col-2 pl-0">
+ <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close"
+ placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button>
+ </div>
+ <h6 class="col pl-0">Action Attributes</h6>
+ <div class="col-3 pl-0">
+ <div class="btn-group" role="group" aria-label="Basic example">
+ <button type="button" class="btn view-source" tooltip="View Action Source"
+ placement="bottom"><i class="icon-source"></i></button>
+ <button type="button" class="btn trash-item" tooltip="Delete Action"
+ placement="bottom"><i class="icon-delete-sm" type="button"
+ aria-hidden="true"></i></button>
+ </div>
+ </div>
+ </div>
+ <div class="scrollWrapper">
<div class="row m-0">
<div class="col">
- <div class="form-group actionName">
+ <div class="form-group">
<label for="exampleInputEmail1">Action Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
+ <input type="text" class="form-control" placeholder="Action Name"
+ value="resource-assignment">
</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">
- Steps
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
- </div>
+ <!--Add Attribute-->
+ <div class="row m-b add-attribute">
+ <div class="col">
+ <h5>Add Attribute</h5>
+ <div class="row">
+ <div class="col pr-0 text-center">
+ <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
+ class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
+ aria-hidden="true"></i></button>
+ <span>Custom Attribute</span>
- <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">Name</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">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
</div>
+ <div class="col text-center">
+ <button type="button" class="btn btn-secondary"><i
+ class="icon-function-attribute" type="button"
+ aria-hidden="true"></i></button>
+ <span>Function Attribute</span>
+ </div>
</div>
</div>
+ </div>
+ <!--INPUTS-->
+ <div class="accordion" id="accordionExample">
<div class="card">
- <div class="card-header row" id="headingTwo">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseTwo" aria-expanded="true"
- aria-controls="collapseTwo">
- Inputs
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
+ <div class="card-header row" id="headingOne">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Inputs
+ </button>
</div>
- <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
- data-parent="#accordionExample">
- <div class="card-body">
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample">
+ <div class="card-body action-attributes">
<div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">Name</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 class="col">
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">template-prefix
+ <i class="icon-required-star" type="button"
+ aria-hidden="true"></i></label>
+ <div class="attributeOptions">
+ <a data-toggle="modal" data-target="#templateDeletionModal"
+ class="accordion-delete editAttribute"
+ tooltip="Edit Attribute" placement="bottom"><i
+ class="icon-edit"></i></a><a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteAttribute"
+ tooltip="Delete Attribute" placement="bottom"><i
+ class="icon-delete-sm"></i></a>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">resource-assignment-properties <i
+ class="icon-required-star" type="button"
+ aria-hidden="true"></i></label>
+ <div class="attributeOptions">
+ <a data-toggle="modal" data-target="#templateDeletionModal"
+ class="accordion-delete editAttribute"
+ tooltip="Edit Attribute" placement="bottom"><i
+ class="icon-edit"></i></a><a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteAttribute"
+ tooltip="Delete Attribute" placement="bottom"><i
+ class="icon-delete-sm"></i></a>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">occurrence <i
+ class="icon-required-star optional-attribute" type="button"
+ aria-hidden="true"></i></label>
+ <div class="attributeOptions">
+ <a data-toggle="modal" data-target="#templateDeletionModal"
+ class="accordion-delete editAttribute"
+ tooltip="Edit Attribute" placement="bottom"><i
+ class="icon-edit"></i></a><a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteAttribute"
+ tooltip="Delete Attribute" placement="bottom"><i
+ class="icon-delete-sm"></i></a>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">store-result
+ <i class="icon-required-star optional-attribute" type="button"
+ aria-hidden="true"></i></label>
+ <div class="attributeOptions">
+ <a data-toggle="modal" data-target="#templateDeletionModal"
+ class="accordion-delete editAttribute"
+ tooltip="Edit Attribute" placement="bottom"><i
+ class="icon-edit"></i></a><a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteAttribute"
+ tooltip="Delete Attribute" placement="bottom"><i
+ class="icon-delete-sm"></i></a>
+ </div>
+ </div>
</div>
</div>
- <div class="form-group">
- <label for="exampleInputEmail1">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
-
</div>
</div>
</div>
+ </div>
+ <!--OUTPUTS-->
+ <div class="accordion" id="accordionExample1">
<div class="card">
- <div class="card-header row" id="headingThree">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseThree" aria-expanded="true"
- aria-controls="collapseThree">
- Outputs
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
+ <div class="card-header row" id="headingOne">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+ Outputs
+ </button>
</div>
- <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
- data-parent="#accordionExample">
+
+ <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample1">
<div class="card-body">
<div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">Name</label> &nbsp;
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
+ <div class="col">
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">resolved-data
+ <i class="icon-required-star optional-attribute" type="button"
+ aria-hidden="true"></i></label>
+ </div>
</div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Name</label>
- <input type="text" class="form-control" placeholder="Action 1">
</div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Description</label>
- <textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="Action 1">
- </div>
-
</div>
</div>
</div>
@@ -446,212 +434,250 @@
</div>
</div>
</div>
+ <!-- Modal -->
+
</ng-sidebar>
- <!-- Function Attribute SideBar -->
- <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
- [mode]="'push'" [position]="'right'" #sidebarRight>
+ <!--Right Side Menu - Function Attribute-->
+ <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
+ [position]="'right'" #sidebarRight2>
<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">
- <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 class="col attributesContainer">
+ <div class="row m-0 attributesContainertTitle">
+ <div class="col-2 pl-0">
+ <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
+ placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button>
+ </div>
+ <h6 class="col pl-0">Function Attributes</h6>
+ <div class="col-3 pl-0">
+ <div class="btn-group" role="group" aria-label="Basic example">
+ <button type="button" class="btn view-source" tooltip="View Function Source"
+ placement="bottom"><i class="icon-source"></i></button>
+ <button type="button" class="btn trash-item" tooltip="Delete Function"
+ placement="bottom"><i class="icon-delete-sm" type="button"
+ aria-hidden="true"></i></button>
</div>
-
-
</div>
</div>
-
- <div>
+ <div class="scrollWrapper">
<div class="row m-0">
<div class="col">
- <div class="form-group actionName">
- <label for="exampleInputEmail1">Function Name</label>
- <input type="text" class="form-control" placeholder="Function Name">
+ <div class="form-group">
+ <label for="exampleInputEmail1">Function Instance Name</label>
+ <input type="text" class="form-control" placeholder="Function Instance Name">
</div>
- </div>
- </div>
- <div class="row m-0">
- <div class="col">
- <div class=" actionName">
+ <div class="form-group">
<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>
+ <label class="attribute-value">component-resource-resolution</label>
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Description</label>
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</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">
+ <!--INTERFACES-->
+ <div class="accordion" id="accordionExample">
+ <div class="card">
+ <div class="card-header row" id="headingOne">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Interface
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Interfaces
</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 id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <!--Inputs & Outputs Tabs-->
+ <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
+ <li class="nav-item" role="presentation">
+ <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
+ href="#pills-home" role="tab" aria-controls="pills-home"
+ aria-selected="true">Inputs</a>
+ </li>
+ <li class="nav-item" role="presentation">
+ <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
+ href="#pills-profile" role="tab" aria-controls="pills-profile"
+ aria-selected="false">Outputs</a>
+ </li>
+ </ul>
+ <div class="tab-content" id="pills-tabContent">
+ <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
+ aria-labelledby="pills-home-tab">
+ <div class="row">
+ <div class="col">
+ <!--list-->
+ <div class="attribute-wrap">
+ <div class="form-group">
+ <label
+ for="exampleFormControlTextarea1">artifact-prefix-names
+ <i class="icon-required-star" type="button"
+ aria-hidden="true"></i></label>
+ </div>
+ <div
+ class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline1"
+ name="customRadioInline1"
+ class="custom-control-input">
+ <label class="custom-control-label"
+ for="customRadioInline1">Pre-defined
+ Template</label>
+ </div>
+ <div
+ class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline2"
+ name="customRadioInline1"
+ class="custom-control-input">
+ <label class="custom-control-label"
+ for="customRadioInline2">Input Drivin
+ Template</label>
+ </div>
+ <br />
+ <button type="button" class="btn btn-select-template"><i
+ class="icon-add-circle" type="button"
+ aria-hidden="true"></i> Select Template</button>
+ </div>
+ <!--string-->
+ <div class="attribute-wrap">
+ <div class="form-group">
+ <label for="exampleInputEmail1">resoluton-key <i
+ class="icon-required-star" type="button"
+ aria-hidden="true"></i></label>
+ <input type="text" class="form-control">
+ </div>
+ </div>
+ <!--integer-->
+ <div class="attribute-wrap">
+ <div class="form-group">
+ <label for="exampleInputEmail1">request-id <i
+ class="icon-required-star" type="button"
+ aria-hidden="true"></i></label>
+ <input type="number" class="form-control" placeholder=""
+ value="356">
+ </div>
+ </div>
+ <!--boolean-->
+ <div class="attribute-wrap">
+ <div class="form-group">
+ <label
+ for="exampleFormControlTextarea1">resolution-summary
+ <i class="icon-required-star optional-attribute"
+ type="button" aria-hidden="true"></i></label>
+ </div>
+ <div
+ class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline1"
+ name="customRadioInline1"
+ class="custom-control-input">
+ <label class="custom-control-label"
+ for="customRadioInline1">True</label>
+ </div>
+ <div
+ class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline2"
+ name="customRadioInline1"
+ class="custom-control-input">
+ <label class="custom-control-label"
+ for="customRadioInline2">False</label>
+ </div>
+ </div>
+ <!-- Add Optional Attributes button -->
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade" id="pills-profile" role="tabpanel"
+ aria-labelledby="pills-profile-tab">2</div>
</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">
+ <!--ARTIFACTS-->
+ <div class="accordion" id="accordionExample1">
+ <div class="card">
+ <div class="card-header row" id="headingOne">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Artifact
+ data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+ Artifacts
</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 id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample1">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-12">
+ <a class="template-mapping-list">
+ <p>baseconfig</p>
+ <span>Mapping</span>
+ <span>Template</span>
+
+ <a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteTemplate"
+ title="Delete Template"><i class="icon-delete-sm"></i></a>
+ </a>
- <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>
+ <div class="col-12">
+ <a class="template-mapping-list">
+ <p>vpkg</p>
+ <span>Mapping</span>
+ <span>Template</span>
+ <a data-toggle="modal"
+ data-target="#templateDeletionModal"
+ class="accordion-delete deleteTemplate"
+ title="Delete Template"><i class="icon-delete-sm"></i></a>
+ </a>
+ </div>
+ </div>
</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>
+
<app-functions-attribute></app-functions-attribute>
+<!--Action - Add Custom Attribute - Modal-->
+<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
+ aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalScrollableTitle">
+ Add Custom Attributes</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <img src="assets/img/icon-close.svg" />
+ </button>
+ </div>
+ <div class="modal-body">
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+ </li>
+ </ul>
+ <div class="tab-content" id="myTabContent">
+ <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
+ <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-primary">Submit Attributes</button>
+ </div>
+ </div>
+ </div>
+</div> \ No newline at end of file
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 3078fe757..1475f1ac3 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
@@ -61,7 +61,7 @@ import {ToastrService} from 'ngx-toastr';
export class DesignerComponent implements OnInit, OnDestroy {
controllerSideBar: boolean;
- attributesSideBar: boolean;
+ actionAttributesSideBar: boolean;
functionAttributeSidebar: boolean;
viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
customActionName: string;
@@ -96,7 +96,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
private packageCreationExtractionService: PackageCreationExtractionService,
private toastService: ToastrService) {
this.controllerSideBar = true;
- this.attributesSideBar = false;
+ this.actionAttributesSideBar = false;
this.showAction = false;
this.functionAttributeSidebar = false;
@@ -113,7 +113,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
}
_toggleSidebar2() {
- this.attributesSideBar = !this.attributesSideBar;
+ this.actionAttributesSideBar = !this.actionAttributesSideBar;
}
publishBluePrint() {