summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorRupinder <rupinsi1@in.ibm.com>2020-05-20 18:26:45 +0530
committerRupinderjeet Singh <rupinsi1@in.ibm.com>2020-05-20 13:50:06 +0000
commitece9a75262670dba3e622cea8452957925ce036d (patch)
treec6dae13b366d7801b26d233467c5a814c5294238 /cds-ui/designer-client
parent2f467eb7afcaad363ea08246ec473094a5346c9e (diff)
custom action name
Issue-ID: CCSDK-2269 Change-Id: I16efe1d6bae9ef13f4c70525db4e37d35154479a Signed-off-by: Rupinder <rupinsi1@in.ibm.com>
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css35
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html63
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts10
5 files changed, 64 insertions, 58 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index a549d54a2..a31c95652 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -209,7 +209,7 @@
</div>
<div class="row">
<div class="col text-center">
- <button class="btn skip-btn">Skip to Designer Canvas</button>
+ <button class="btn skip-btn" (click)="goToDesignerMode(viewedPackage.id)">Skip to Designer Canvas</button>
</div>
</div>
</div>
@@ -220,7 +220,7 @@
class="icon-action-back"></i></button>
<h1>Create Custom Action</h1>
<div class="form-group text-center">
- <input type="text" class="form-control customAction"
+ <input type="text" [(ngModel)]="customActionName" class="form-control customAction"
placeholder="Type Action Name" autofocus>
<button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button>
</div>
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 0578b10f8..19c10c5fd 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
@@ -13,16 +13,18 @@ import {PackageCreationModes} from '../package-creation/creationModes/PackageCre
import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder';
import {saveAs} from 'file-saver';
import {DesignerStore} from '../designer/designer.store';
+import { DesignerService } from '../designer/designer.service';
@Component({
selector: 'app-configuration-dashboard',
templateUrl: './configuration-dashboard.component.html',
- styleUrls: ['./configuration-dashboard.component.css']
+ styleUrls: ['./configuration-dashboard.component.css'],
})
export class ConfigurationDashboardComponent implements OnInit {
viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
@ViewChild(MetadataTabComponent, {static: false})
private metadataTabComponent: MetadataTabComponent;
+ public customActionName: string;
entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
'author-email', 'template_version', 'template_name', 'template_author'];
@@ -39,7 +41,8 @@ export class ConfigurationDashboardComponent implements OnInit {
private packageCreationStore: PackageCreationStore,
private packageCreationUtils: PackageCreationUtils,
private router: Router,
- private designerStore: DesignerStore) {
+ private designerStore: DesignerStore,
+ private designerService: DesignerService) {
}
ngOnInit() {
@@ -207,6 +210,7 @@ export class ConfigurationDashboardComponent implements OnInit {
}
goToDesignerMode(id) {
- this.router.navigate(['/packages/designer', id]);
+ // this.designerService.setActionName(this.customActionName);
+ this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
}
}
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 04f410c5f..964268de5 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
@@ -316,17 +316,19 @@ p.compType-4{
color: #C3CDDB;
}
.actionBtns .btn{
- margin: 0 15px 12px;
- padding: 9px 20px;
- border-radius: 2px !important;
- font-size: 12px;
+ margin: 0px 15px 16px -90px;
+ /* padding: 9px 20px; */
+ border-radius: 0px;
+ font-size: 14px;
font-weight: bold;
- outline: 0 !important;
+ /* outline: 0 !important; */
+ float: left;
+
}
.actionBtns .btn.insert-custom{
- background: #1B3E6F;
- border: solid 1px #1B3E6F;
- color: #fff;
+ /* background: white; */
+ /* border: solid 1px #1B3E6F; */
+ color: #1B3E6F;
}
.actionBtns .btn.import-action{
border: solid 1px #D0DFF1;
@@ -347,6 +349,18 @@ p.compType-4{
.custom-control-label:hover{
cursor: pointer;
}
+.custom-control{
+ padding-top: 10px;
+ width: 315px;
+ height: 40px;
+ margin-left: -15px;
+ font-size: 14px;
+ padding-bottom: 0;
+}
+.custom-control:hover{
+ background-color: white;
+}
+
.actionsList .custom-checkbox,
.componentsList .list-group-item{
margin-bottom: 10px;
@@ -405,8 +419,9 @@ p.compType-4{
/*CANVAS*/
.editBar{
- width: 200px;
- margin: 0 auto 0;
+ width: 1080px;
+ height: 50px;
+ margin: 0 auto 0 -392px;
padding: 6px 10px;
background:#F4F9FE;
/* border: solid 1px #E8EFF8; */
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 3e3528c00..6904d5781 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
@@ -100,12 +100,17 @@
</div>
</header>
<div class="source-button editBar">
+
<div class="btn-group viewBtns" role="group">
+ <button (click)="_toggleSidebar1()" class="topologySource active">
+ <i style="font-size:24px" class="fa">&#xf101;</i>
+ </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>
</div>
</div>
+
<ng-sidebar-container class="sidebar-container">
<!-- Controller SideBar -->
<ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
@@ -122,21 +127,33 @@
href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
</div>
</div>
- </nav>
+ </nav>
- <div class="row mt-2">
- <div class="col">
+ <div class="row mt-2">
+ <div class="col-12">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-action" role="tabpanel"
aria-labelledby="nav-action-tab">
+ <!--Action Search Box-->
+ <div>
+ <h1>Search</h1>
+ </div>
+
<div class="btn-group actionBtns col-8" role="group">
<button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">
- Insert Custom
+ + New Action
</button>
- <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> -->
</div>
+
+ <div>
+ <div *ngIf="showAction" class="custom-control">
+ <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span>
+ {{customActionName}} </label>
+ </div>
+ </div>
</div>
+
<div class="tab-pane fade" id="nav-function" role="tabpanel"
aria-labelledby="nav-function-tab">
<div class="col-12 text-center p-0">
@@ -148,41 +165,7 @@
</div>
</div>
- <!-- <div class="col-12 actionsList">
- <b>Select from other packages:</b>
- <div class="actions-scroll">
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck1">
- <label class="custom-control-label" for="customCheck1">Action name
- <p class="m-0">Toplogy name</p>
- </label>
- </div>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck2">
- <label class="custom-control-label" for="customCheck2">Action name
- <p class="m-0">Toplogy name</p>
- </label>
- </div>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck3">
- <label class="custom-control-label" for="customCheck3">Action name
- <p class="m-0">Toplogy name</p>
- </label>
- </div>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck4">
- <label class="custom-control-label" for="customCheck4">Action name
- <p class="m-0">Toplogy name</p>
- </label>
- </div>
- </div>
- <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
- <button type="button" class="btn btn-secondary mr-3">Insert</button>
- <button type="button" class="btn btn-secondary">Cancel</button>
- </div>
- </div> -->
-
-
+
</ng-sidebar>
<!-- Page content -->
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 fa3a99b49..fe90b6b90 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
@@ -40,7 +40,6 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
import { ActivatedRoute } from '@angular/router';
import { DesignerService } from './designer.service';
-
@Component({
selector: 'app-designer',
templateUrl: './designer.component.html',
@@ -52,6 +51,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
private controllerSideBar: boolean;
private attributesSideBar: boolean;
viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+ customActionName: string;
+ showAction: boolean;
boardGraph: joint.dia.Graph;
boardPaper: joint.dia.Paper;
@@ -69,6 +70,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
private designerService: DesignerService) {
this.controllerSideBar = true;
this.attributesSideBar = false;
+ this.showAction = false;
}
private _toggleSidebar1() {
@@ -92,10 +94,13 @@ export class DesignerComponent implements OnInit, OnDestroy {
*/
ngOnInit() {
+ this.customActionName = this.route.snapshot.paramMap.get('actionName');
+ if (this.customActionName != null) {
+ this.showAction = true;
+ }
this.initializeBoard();
this.initializePalette();
this.stencilPaperEventListeners();
-
const id = this.route.snapshot.paramMap.get('id');
this.designerService.getPagedPackages(id).subscribe(
(bluePrintDetailModels) => {
@@ -103,7 +108,6 @@ export class DesignerComponent implements OnInit, OnDestroy {
this.viewedPackage = bluePrintDetailModels[0];
}
});
-
/**
* the code to retrieve from server is commented
*/