aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html110
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts67
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts5
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html54
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts13
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts41
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html5
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts36
9 files changed, 205 insertions, 130 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index f7ba40ce1..d23628bc7 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -3,7 +3,7 @@
<div class="col">
<div class="form-group">
<label for="exampleInputEmail1">Action Name</label>
- <input type="text" class="form-control" placeholder="Action Name" value="resource-assignment">
+ <input type="text" class="form-control" placeholder="Action Name" readonly [value]="actionName">
</div>
</div>
</div>
@@ -14,13 +14,13 @@
<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>
+ class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
+ aria-hidden="true"></i></button>
<span>Custom Attribute</span>
</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>
+ aria-hidden="true"></i></button>
<span>Function Attribute</span>
</div>
</div>
@@ -32,7 +32,7 @@
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
- aria-expanded="true" aria-controls="collapseOne">
+ aria-expanded="true" aria-controls="collapseOne">
Inputs
</button>
</h2>
@@ -44,15 +44,15 @@
<div class="form-group" *ngFor="let input of inputs">
<label for="exampleFormControlTextarea1">{{input.name}}
<i [hidden]="!input.required" class="icon-required-star" type="button"
- aria-hidden="true"></i>
+ aria-hidden="true"></i>
<i [hidden]="input.required" type="button" aria-hidden="true"></i>
</label>
<div class="attributeOptions">
<a data-toggle="modal" data-target="#exampleModalScrollable2"
- class="accordion-delete editAttribute" tooltip="Edit Attribute"
- placement="bottom"><i class="icon-edit"></i></a>
+ class="accordion-delete editAttribute" tooltip="Edit Attribute"
+ placement="bottom"><i class="icon-edit"></i></a>
<a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
- placement="bottom"><i class="icon-delete-sm"></i></a>
+ placement="bottom"><i class="icon-delete-sm"></i></a>
</div>
</div>
</div>
@@ -67,7 +67,7 @@
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
- aria-expanded="true" aria-controls="collapseTwo">
+ aria-expanded="true" aria-controls="collapseTwo">
Outputs
</button>
</h2>
@@ -79,10 +79,10 @@
<div class="col">
<div class="form-group" *ngFor="let output of outputs">
<label for="exampleFormControlTextarea1">{{output.name}}
- <i [hidden]="output.required" class="icon-required-star" type="button"
- aria-hidden="true"></i>
- <i [hidden]="!output.required" class="optional-attribute" type="button"
- aria-hidden="true"></i>
+ <i [hidden]="!output.required" class="icon-required-star" type="button"
+ aria-hidden="true"></i>
+ <i [hidden]="output.required" class="optional-attribute" type="button"
+ aria-hidden="true"></i>
</label>
</div>
@@ -95,14 +95,14 @@
</div>
<!--Action - Add Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+ 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" />
+ <img src="assets/img/icon-close.svg"/>
</button>
</div>
<div class="modal-body createAttributeTabs">
@@ -110,29 +110,29 @@
<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">Inputs</a>
+ aria-controls="home" aria-selected="true">Inputs</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">Outputs</a>
+ aria-controls="profile" aria-selected="false">Outputs</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!--INPUTS Tab-->
<div class="tab-pane fade show active create-form" id="home" role="tabpanel"
- aria-labelledby="home-tab">
+ aria-labelledby="home-tab">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
- id="inputEmail3" placeholder="Attribute name">
+ id="inputEmail3" placeholder="Attribute name">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
- id="inputPassword3" placeholder="Add some description">
+ id="inputPassword3" placeholder="Add some description">
</div>
</div>
<div class="form-group row">
@@ -140,25 +140,26 @@
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('String')">
+ (click)="setInputType('String')">
String
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('Integer')">Integer
+ (click)="setInputType('Integer')">Integer
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('Boolean')">Boolean
+ (click)="setInputType('Boolean')">Boolean
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('List')">List
+ (click)="setInputType('List')">List
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('Other')">Other
+ (click)="setInputType('Other')">Other
</button>
</div>
<input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
- id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType"
- (change)="setInputType(inputOtherType)">
+ id="inputPassword4" placeholder="Add Other type name"
+ [(ngModel)]="inputOtherType"
+ (change)="setInputType(inputOtherType)">
</div>
</div>
@@ -167,12 +168,12 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1"
- class="custom-control-input" (click)="setInputRequired(true)">
+ class="custom-control-input" (click)="setInputRequired(true)">
<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" (click)="setInputRequired(false)">
+ class="custom-control-input" (click)="setInputRequired(false)">
<label class="custom-control-label" for="customRadioInline2">False</label>
</div>
</div>
@@ -184,41 +185,44 @@
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
- id="inputEmail3" placeholder="Attribute name">
+ id="inputEmail3" placeholder="Attribute name">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control"
- id="inputPassword3" placeholder="Add some description">
+ id="inputPassword3" placeholder="Add some description">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
- <button type="button" class="list-group-item list-group-item-action">String</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setOutputType('Integer')">
+ (click)="setOutputType('String')">String
+ </button>
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setOutputType('Integer')">
Integer
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setOutputType('Boolean')">
+ (click)="setOutputType('Boolean')">
Boolean
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setOutputType('List')">
+ (click)="setOutputType('List')">
List
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setOutputType('Other')">
+ (click)="setOutputType('Other')">
Other
</button>
</div>
<input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
- id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType"
- (change)="setOutputType(outputOtherType)">
+ id="inputPassword3" placeholder="Add Other type name"
+ [(ngModel)]="outputOtherType"
+ (change)="setOutputType(outputOtherType)">
</div>
</div>
<div class="form-group row">
@@ -226,14 +230,14 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline3" name="customRadioInline3"
- class="custom-control-input" (click)="setOutputRequired(true)">
+ class="custom-control-input" (click)="setOutputRequired(true)">
<label class="custom-control-label" for="customRadioInline3">True</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline4" name="customRadioInline3"
- class="custom-control-input">
+ class="custom-control-input">
<label class="custom-control-label" for="customRadioInline4"
- (click)="setOutputRequired(false)">False</label>
+ (click)="setOutputRequired(false)">False</label>
</div>
</div>
</div>
@@ -249,14 +253,14 @@
</div>
<!--Delete Action - Modal-->
<div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
+ aria-labelledby="exampleModalScrollableTitle1" 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="exampleModalScrollableTitle1">
Delete Action</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">
@@ -271,14 +275,14 @@
</div>
<!--Action - Edit Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
+ aria-labelledby="exampleModalScrollableTitle2" 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="exampleModalScrollableTitle2">
Edit Custom Attributes</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 createAttributeTabs">
@@ -287,15 +291,15 @@
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
- value="resource-assignment-properties">
+ value="resource-assignment-properties">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputPassword3"
- placeholder="Add some description"
- value="Dynamic PropertyDefinition for workflow(resource-assignment).">
+ placeholder="Add some description"
+ value="Dynamic PropertyDefinition for workflow(resource-assignment).">
</div>
</div>
<div class="form-group row">
@@ -311,7 +315,7 @@
</button>
</div>
<input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
- placeholder="Add Other type name" value="dt-resource-assignment-properties">
+ placeholder="Add Other type name" value="dt-resource-assignment-properties">
</div>
</div>
<div class="form-group row">
@@ -319,12 +323,12 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1"
- class="custom-control-input" checked>
+ class="custom-control-input" checked>
<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">
+ class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">False</label>
</div>
</div>
@@ -337,4 +341,4 @@
</div>
</div>
</div>
-</div> \ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
index ee4b19930..752f0502d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
@@ -1,6 +1,8 @@
import {Component, OnInit} from '@angular/core';
import {InputActionAttribute, OutputActionAttribute} from './models/InputActionAttribute';
import {DesignerStore} from '../designer.store';
+import {DesignerDashboardState} from '../model/designer.dashboard.state';
+import {Action} from './models/Action';
@Component({
selector: 'app-action-attributes',
@@ -18,12 +20,46 @@ export class ActionAttributesComponent implements OnInit {
isOutputOtherType: boolean;
outputOtherType = '';
inputOtherType = '';
+ actionName = '';
+ designerState: DesignerDashboardState;
constructor(private designerStore: DesignerStore) {
}
ngOnInit() {
+ this.designerStore.state$.subscribe(designerState => {
+ this.designerState = designerState;
+ if (this.designerState && this.designerState.actionName) {
+ this.actionName = this.designerState.actionName;
+ const action = this.designerState.template.workflows[this.actionName] as Action;
+ this.inputs = [];
+ if (action.inputs) {
+ const namesOfInput = Object.keys(action.inputs);
+ this.inputs = this.extractFields(namesOfInput, action.inputs);
+ }
+ this.outputs = [];
+ if (action.outputs) {
+ const namesOfOutput = Object.keys(action.outputs);
+ this.outputs = this.extractFields(namesOfOutput, action.outputs);
+ }
+ }
+ });
+ }
+
+
+ private extractFields(namesOfOutput: string[], container: {}) {
+ const fields = [];
+ for (const nameOutput of namesOfOutput) {
+ const fieldAttribute = new OutputActionAttribute();
+ fieldAttribute.name = nameOutput;
+ fieldAttribute.description = container[nameOutput].description;
+ fieldAttribute.required = container[nameOutput].required;
+ fieldAttribute.type = container[nameOutput].type;
+ const insertedOutputActionAttribute = Object.assign({}, fieldAttribute);
+ fields.push(insertedOutputActionAttribute);
+ }
+ return fields;
}
addInput(input: InputActionAttribute) {
@@ -63,14 +99,11 @@ export class ActionAttributesComponent implements OnInit {
}
submitAttributes() {
- console.log(this.inputActionAttribute);
- console.log(this.outputActionAttribute);
this.addInput(this.inputActionAttribute);
this.addOutput(this.outputActionAttribute);
this.clearFormInputs();
- console.log(this.storeInputs(this.inputs));
- this.designerStore.setInputsToSpecificWorkflow(this.storeInputs(this.inputs));
- console.log(this.storeOutputs(this.outputs));
+ this.designerStore.setInputsAndOutputsToSpecificWorkflow(this.storeInputs(this.inputs)
+ , this.storeOutputs(this.outputs), this.actionName);
}
private clearFormInputs() {
@@ -87,9 +120,10 @@ export class ActionAttributesComponent implements OnInit {
inputs += this.appendAttributes(input);
});
- const returnedInputMap = new Map<string, string>();
- returnedInputMap.set('inputs', inputs);
- return returnedInputMap;
+ if (inputs.endsWith(',')) {
+ inputs = inputs.substr(0, inputs.length - 1);
+ }
+ return JSON.parse('{' + inputs + '}');
}
private storeOutputs(OutputActionAttributes: OutputActionAttribute[]) {
@@ -97,16 +131,17 @@ export class ActionAttributesComponent implements OnInit {
OutputActionAttributes.forEach(output => {
outputs += this.appendAttributes(output);
});
- const returnedOutputMap = new Map<string, string>();
- returnedOutputMap.set('outputs', outputs);
- return returnedOutputMap;
+ if (outputs.endsWith(',')) {
+ outputs = outputs.substr(0, outputs.length - 1);
+ }
+ return JSON.parse('{' + outputs + '}');
}
private appendAttributes(output: OutputActionAttribute) {
- return '"' + output.name + '":{\n' +
- ' \'required\': ' + output.required + ',\n' +
- ' \'type\': "' + output.type + '",\n' +
- ' \'description\': "' + output.description + '"\n' +
- ' }' + '\n';
+ return '"' + output.name + '" : {\n' +
+ ' "required" : ' + output.required + ',\n' +
+ ' "type" : "' + output.type + '",\n' +
+ ' "description" : "' + output.description + '"\n' +
+ ' },';
}
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts
new file mode 100644
index 000000000..52e555617
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts
@@ -0,0 +1,5 @@
+export class Action {
+ steps: {};
+ inputs: {};
+ outputs: {};
+}
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 76717b03c..a552c28f6 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 tooltip-bottom" data-toggle="modal"
- data-target="#exampleModalLong" data-tooltip="Package Details">
+ data-target="#exampleModalLong" data-tooltip="Package Details">
<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>
@@ -107,7 +107,7 @@
<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-->
@@ -119,9 +119,9 @@
<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>
@@ -162,7 +162,7 @@
<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>
@@ -173,15 +173,15 @@
<ng-sidebar-container class="sidebar-container">
<!--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>
@@ -190,15 +190,15 @@
<div class="tab-content" id="nav-tabContent">
<!--Action List-->
<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">
<div class="row temp-buttons">
<div class="col text-center">
- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
- Action Attributes
- </button>
+ <!-- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
+ Action Attributes
+ </button> -->
</div>
<div class="col text-center">
<button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
@@ -219,7 +219,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>
@@ -279,7 +279,7 @@
<!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
</div>
<ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
- [position]="'right'" #sidebarRight1>
+ [position]="'right'" #sidebarRight1>
<div class="container-fluid0">
<div class="row m-0">
<div class="col attributesContainer">
@@ -292,9 +292,9 @@
<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>
+ placement="bottom"><i class="icon-source"></i></button>
<button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
- class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
+ class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
class="icon-delete-sm" aria-hidden="true"></i></button>
</div>
</div>
@@ -306,24 +306,24 @@
</ng-sidebar>
<!--Right Side Menu - Function Attribute-->
<ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
- [position]="'right'" #sidebarRight2>
+ [position]="'right'" #sidebarRight2>
<div class="container-fluid0">
<div class="row m-0">
<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>
+ 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>
+ 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>
+ placement="bottom"><i class="icon-delete-sm" type="button"
+ aria-hidden="true"></i></button>
</div>
</div>
</div>
@@ -334,4 +334,4 @@
</ng-sidebar>
-</ng-sidebar-container> \ No newline at end of file
+</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 d0af828e8..77e0ceed6 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
@@ -231,6 +231,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
rankDir: 'TB'
});
this.actions = [];
+ console.log('here');
for (const workflowsKey in topologtTemplate.workflows) {
if (workflowsKey && !this.actions.includes(workflowsKey)) {
this.actions.push(workflowsKey);
@@ -273,8 +274,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
width: 1100,
gridSize: 10,
drawGrid: true,
- // background: {
- // color: 'rgba(0, 255, 0, 0.3)'
+ // background: {
+ // color: 'rgba(0, 255, 0, 0.3)'
// },
cellViewNamespace: joint.shapes
});
@@ -326,9 +327,13 @@ export class DesignerComponent implements OnInit, OnDestroy {
insertCustomActionIntoBoard() {
console.log('saving action to store action workflow....');
- const actionName = this.graphUtil.generateNewActionName();
+ let actionName = this.graphUtil.generateNewActionName();
+ while (this.actions.includes(actionName)) {
+ actionName = this.graphUtil.generateNewActionName();
+ }
this.graphUtil.createCustomActionWithName(actionName, this.boardGraph);
this.designerStore.addDeclarativeWorkFlow(actionName);
+ this.actions.push(actionName);
}
stencilPaperEventListeners() {
@@ -475,5 +480,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
openFunctionAttributes(customActionName: string) {
console.log('opening here function attributes');
+ this.actionAttributesSideBar = true;
+ this.designerStore.setCurrentAction(customActionName);
}
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
index d3326165f..c59478d91 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
@@ -19,12 +19,14 @@ limitations under the License.
============LICENSE_END============================================
*/
-import { Injectable } from '@angular/core';
-import { Store } from '../../../../common/core/stores/Store';
-import { DesignerService } from './designer.service';
-import { DesignerDashboardState } from './model/designer.dashboard.state';
-import { DeclarativeWorkflow } from './model/designer.workflow';
-import { NodeTemplate } from './model/desinger.nodeTemplate.model';
+import {Injectable} from '@angular/core';
+import {Store} from '../../../../common/core/stores/Store';
+import {DesignerService} from './designer.service';
+import {DesignerDashboardState} from './model/designer.dashboard.state';
+import {DeclarativeWorkflow} from './model/designer.workflow';
+import {NodeTemplate} from './model/desinger.nodeTemplate.model';
+import {PackageCreationUtils} from '../package-creation/package-creation.utils';
+import {Action} from './action-attributes/models/Action';
@Injectable({
@@ -32,7 +34,7 @@ import { NodeTemplate } from './model/desinger.nodeTemplate.model';
})
export class DesignerStore extends Store<DesignerDashboardState> {
- constructor(private designerService: DesignerService) {
+ constructor(private designerService: DesignerService, private packageCreationUtils: PackageCreationUtils) {
super(new DesignerDashboardState());
}
@@ -145,21 +147,26 @@ export class DesignerStore extends Store<DesignerDashboardState> {
});
}
- setInputsToSpecificWorkflow(inputs: Map<string, string>) {
+ setInputsAndOutputsToSpecificWorkflow(inputs: string, outputs: string, actionName: string) {
+
/* tslint:disable:no-string-literal */
- let mapOfWorkflows = this.state.template.workflows['Action1']['steps'];
- mapOfWorkflows += inputs;
- /*mapOfWorkflows.forEach(((value, key) => {
- if (value.includes('resource-assignment')) {
- value += inputs;
- }
- }));*/
- console.log('the new workflows');
- console.log(mapOfWorkflows);
+ const action = this.state.template.workflows[actionName] as Action;
+ if (action) {
+ action.inputs = inputs;
+ action.outputs = outputs;
+ this.saveSourceContent(this.packageCreationUtils.transformToJson(this.state.template));
+ }
+
}
clear() {
this.setState(new DesignerDashboardState());
}
+ setCurrentAction(customActionName: string) {
+ this.setState({
+ ...this.state,
+ actionName: customActionName
+ });
+ }
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts
index 1a14021f4..b52eb7cc3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts
@@ -19,13 +19,13 @@ limitations under the License.
============LICENSE_END============================================
*/
-import {ModelType} from './ModelType.model';
-import { TopologyTemplate } from './designer.topologyTemplate.model';
+import {TopologyTemplate} from './designer.topologyTemplate.model';
export class DesignerDashboardState {
template: TopologyTemplate;
sourceContent: string;
+ actionName: string;
constructor() {
this.template = new TopologyTemplate();
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 0bb4f1f41..0b03f4dde 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -63,7 +63,7 @@
</a>
</li>
<li class="action-delete">
- <a href="#">
+ <a (click)="deletePackage(bluePrint.id)">
<i class="icon-delete-sm" aria-hidden="true"></i>
Delete
</a>
@@ -111,7 +111,7 @@
class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
</div>
<div class="col">
- <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology"
+ <button type="button" (click)="viewDesigner(bluePrint.id)" class="btn btn-card-topology"><i class="icon-btn-card-topology"
aria-hidden="true"></i>Designer Mode
</button>
</div>
@@ -125,3 +125,4 @@
<app-import-package></app-import-package>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 4d0e108cf..30677f161 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -1,11 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { BlueprintModel } from '../../model/BluePrint.model';
-import { PackagesStore } from '../../packages.store';
-import { Router } from '@angular/router';
-import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service';
-import { saveAs } from 'file-saver';
-import { NgxUiLoaderService } from 'ngx-ui-loader';
-import { TourService } from 'ngx-tour-md-menu';
+import {Component, OnInit} from '@angular/core';
+import {BlueprintModel} from '../../model/BluePrint.model';
+import {PackagesStore} from '../../packages.store';
+import {Router} from '@angular/router';
+import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service';
+import {saveAs} from 'file-saver';
+import {NgxUiLoaderService} from 'ngx-ui-loader';
+import {TourService} from 'ngx-tour-md-menu';
+import {ToastrService} from 'ngx-toastr';
@Component({
selector: 'app-packages-list',
@@ -23,11 +24,11 @@ export class PackageListComponent implements OnInit {
private configurationDashboardService: ConfigurationDashboardService,
private ngxLoader: NgxUiLoaderService,
private tourService: TourService,
+ private toastService: ToastrService
) {
console.log('PackageListComponent');
-
this.packagesStore.state$.subscribe(state => {
console.log(state);
if (state.filteredPackages) {
@@ -51,8 +52,23 @@ export class PackageListComponent implements OnInit {
downloadPackage(artifactName: string, artifactVersion: string) {
this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
- const blob = new Blob([response], { type: 'application/octet-stream' });
+ const blob = new Blob([response], {type: 'application/octet-stream'});
saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
});
}
+
+ viewDesigner(id: string) {
+ this.router.navigate(['/packages/designer', id, {actionName: ''}]);
+ }
+
+ deletePackage(id: string) {
+ this.configurationDashboardService.deletePackage(id).subscribe(res => {
+ this.toastService.info('package deleted successfully ');
+ this.router.navigate(['/packages']);
+ this.packagesStore.getAll();
+ }, err => {
+ this.toastService.error('error deleting package' + err.message);
+ });
+
+ }
}