<span>Custom Attribute</span>
</div>
<div class="col text-center">
- <button type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button"
+ <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button"
aria-hidden="true"></i></button>
<span>Function Attribute</span>
</div>
<label for="exampleFormControlTextarea1">{{input.name}}
<i [hidden]="!input.required" class="icon-required-star" type="button"
aria-hidden="true"></i>
- <i [hidden]="input.required" type="button" aria-hidden="true"></i>
+ <i [hidden]="input.required" class="icon-required-star optional-attribute" type="button" aria-hidden="true"></i>
</label>
<div class="attributeOptions">
<a data-toggle="modal" data-target="#exampleModalScrollable2"
<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"
+ <i [hidden]="output.required" class="icon-required-star optional-attribute" type="button"
aria-hidden="true"></i>
</label>
import {DesignerStore} from '../designer.store';
import {DesignerDashboardState} from '../model/designer.dashboard.state';
import {Action} from './models/Action';
+import {FunctionsStore} from '../functions.store';
+import {FunctionsState} from '../model/functions.state';
@Component({
selector: 'app-action-attributes',
inputOtherType = '';
actionName = '';
designerState: DesignerDashboardState;
+ isFunctionAttributeActive = false;
+ functions: FunctionsState;
- constructor(private designerStore: DesignerStore) {
+ constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore) {
}
if (this.designerState && this.designerState.actionName) {
this.actionName = this.designerState.actionName;
const action = this.designerState.template.workflows[this.actionName] as Action;
+ if (action.steps) {
+ const steps = Object.keys(action.steps);
+ if (steps && steps.length > 0) {
+ this.isFunctionAttributeActive = true;
+ } else {
+ this.isFunctionAttributeActive = false;
+ }
+ steps.forEach(step => {
+ const target = action.steps[step].target;
+ this.getInputs(target);
+ });
+ }
+
+
this.inputs = [];
if (action.inputs) {
const namesOfInput = Object.keys(action.inputs);
}
}
});
+
+ this.functionsStore.state$.subscribe(functions => {
+ this.functions = functions;
+ });
}
' "description" : "' + output.description + '"\n' +
' },';
}
+
+ getInputs(targetName) {
+ const nodeTemplate = this.designerState.template.node_templates[targetName];
+ /* tslint:disable:no-string-literal */
+ console.log(nodeTemplate['type']);
+ this.functions.serverFunctions
+ /* tslint:disable:no-string-literal */
+ .filter(currentFunction => currentFunction.modelName.includes(nodeTemplate['type']))
+ .forEach(currentFunction => {
+ console.log(currentFunction);
+ /* tslint:disable:no-string-literal */
+ if (currentFunction['definition'] && currentFunction['definition']['interfaces']) {
+ const interfaces = Object.keys(currentFunction['definition']['interfaces']);
+ if (interfaces && interfaces.length > 0) {
+ const interfaceName = interfaces[0];
+ if (nodeTemplate['interfaces'][interfaceName]['operations'] &&
+ nodeTemplate['interfaces'][interfaceName]['operations']['process']
+ ) {
+ if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['inputs']) {
+ /* tslint:disable:no-string-literal */
+ console.log(Object.keys(nodeTemplate['interfaces'][interfaceName]['operations']['process']['inputs']));
+ }
+ if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']) {
+ /* tslint:disable:no-string-literal */
+ console.log(Object.keys(nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']));
+ }
+
+ }
+ }
+ }
+ });
+ console.log(nodeTemplate);
+ }
+
+ printSomethings() {
+ console.log('something');
+ }
}
<div *ngIf="!showAction" class="custom-control">
<ul>
<li *ngFor="let customActionName of actions">
- <label>
+ <label [attr.for]="customActionName">
<i class="icon-file" aria-hidden="true" class="icon-file"
- (click)="openFunctionAttributes(customActionName)"></i>
+ (click)="openActionAttributes(customActionName)"
+ ></i>
{{customActionName}} </label>
+
+ <ul *ngIf="customActionName.includes(this.currentActionName)">
+ <li
+ [attr.for]="customActionName" *ngFor="let currentFunction of steps">
+ <span (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span>
+ </li>
+ </ul>
</li>
+
</ul>
</div>
</div>
import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
import {TopologyTemplate} from './model/designer.topologyTemplate.model';
import {ToastrService} from 'ngx-toastr';
+import {DesignerDashboardState} from './model/designer.dashboard.state';
@Component({
selector: 'app-designer',
cbaPackage: CBAPackage;
actions: string[] = [];
dataTarget: string;
+ steps: string[];
+ designerState: DesignerDashboardState;
+ currentActionName: string;
constructor(
private designerStore: DesignerStore,
distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
takeUntil(this.ngUnsubscribe))
.subscribe(state => {
+ this.designerState = state;
if (state.sourceContent) {
console.log('inside desinger.component---> ', state);
// generate graph from store objects if exist
});
}
- openFunctionAttributes(customActionName: string) {
- console.log('opening here function attributes');
+ openActionAttributes(customActionName: string) {
+ console.log('opening here action attributes');
+ this.currentActionName = customActionName;
this.actionAttributesSideBar = true;
+ this.functionAttributeSidebar = false;
this.designerStore.setCurrentAction(customActionName);
+ /* tslint:disable:no-string-literal */
+ this.steps = Object.keys(this.designerState.template.workflows[customActionName]['steps']);
+ }
+
+ openFunctionAttributes(customFunctionName: string) {
+ this.actionAttributesSideBar = false;
+ this.functionAttributeSidebar = true;
+ this.designerStore.setCurrentFunction(this.designerState.template.workflows[this.currentActionName]
+ ['steps'][customFunctionName]['target']);
}
}
actionName: customActionName
});
}
+
+ setCurrentFunction(customFunctionName: string) {
+ this.setState({
+ ...this.state,
+ functionName: customFunctionName
+ });
+ }
}
template: TopologyTemplate;
sourceContent: string;
actionName: string;
+ functionName: string;
constructor() {
this.template = new TopologyTemplate();