diff options
22 files changed, 372 insertions, 89 deletions
diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index eeff3d41f..14cb001c8 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -118,3 +118,6 @@ export const ControllerCatalogURLs = { getDefinition: '/controllercatalog/model-type/by-definition', getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom' }; + + +export const ActionElementTypeName = 'app.ActionElement'; 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 804aad057..f07258439 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 @@ -1,7 +1,133 @@ -<app-header> -</app-header> -<p>package-viewing works! +<app-header></app-header> + +<div class="new-wrapper"> + <div class="container-fluid main-container"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0"> + <ul class="breadcrumb-header"> + <li>CBA Packages</li> + <li>Package Name</li> + </ul> + </h2> + <!-- <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> + </div>--> + </div> + </header> + + + + <div class="container-fluid body-container"> + + <div class="container"> + <!-- <div class="creat-action-container"> + <a href="#" class="action-button"> + <i class="icon-clone" aria-hidden="true"></i> + <span>Clone</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-archive" aria-hidden="true"></i> + <span>Archive</span> + </a> + + <a href="#" class="action-button delete"> + <i class="icon-delete" aria-hidden="true"></i> + <span>Delete</span> + </a> + </div>--> + + <div class="card creat-card view-package-container"> + <div class="row"> + <div class="col-8"> + <div class="row"> + <div class="col d-flex"> + <i class="package-type-icon icon-designer-mode"></i> + <div class="package-name-container"> + <div class="row"> + <div class="col-12 package-name deployed"> + Package Name + <span>.vLB.CDS</span> + <i class="icon-deploy"></i> + </div> + <div class="col-12 package-description"> + Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas + </div> + </div> + + </div> + </div> + </div> + </div> + <div class="col-4 package-view-button"> + <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button> + <button class="btn btn-sm btn-primary">Designer Mode</button> + </div> + </div> + + </div> + + <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" id="nav-metadata-tab" data-toggle="tab" + href="#nav-metadata" + role="tab" aria-controls="nav-metadata" + aria-selected="true">METADATA</a> + <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" + role="tab" aria-controls="nav-template" + aria-selected="false">TEMPLATE & MAPPING</a> + <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" + role="tab" aria-controls="nav-scripts" + aria-selected="false">SCRIPTS</a> + <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" + role="tab" aria-controls="nav-imports" + aria-selected="false">IMPORTS</a> + <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" + href="#nav-authentication" + role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + </div> + </div> + + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <app-metadata-tab></app-metadata-tab> + </div> + <div class="tab-pane fade" id="nav-template" role="tabpanel" + aria-labelledby="nav-template-tab"> + <app-template-mapping></app-template-mapping> + </div> + <div class="tab-pane fade" id="nav-scripts" role="tabpanel" + aria-labelledby="nav-scripts-tab"> + <app-scripts-tab></app-scripts-tab> + </div> + <div class="tab-pane fade" id="nav-imports" role="tabpanel" + aria-labelledby="nav-imports-tab"> + <app-imports-tab></app-imports-tab> + + </div> + <div class="tab-pane fade" id="nav-authentication" role="tabpanel" + aria-labelledby="nav-authentication-tab"> + <div class="card creat-card"> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> - {{viewedPackage!.artifactName}}} -</p> 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 84fdafb36..b08ea3e4f 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 @@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {PackageStore} from './package.store'; import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; @Component({ @@ -18,6 +19,8 @@ export class ConfigurationDashboardComponent implements OnInit { this.configurationStore.getPagedPackages(id); this.configurationStore.state$.subscribe( el => { + const cbaPackage = new CBAPackage(); + if (el && el.configuration) { this.viewedPackage = el.configuration; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts index 51d0e9db1..ab280fd10 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -17,6 +17,5 @@ export class ConfigurationDashboardService { getBluePrintModel(id: string): Observable<BluePrintDetailModel> { return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id); - } } 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 8ec735aec..311ce7ad9 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 @@ -61,20 +61,20 @@ [mode]="'push'" #sidebarLeft> <div class="row"> - <div class="col-12 p-0"> + <!-- <div class="col-12 p-0"> <form> <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions"> </form> - </div> + </div> --> <h1 class="col-12">Actions</h1> <div class="col-12 text-center p-0"> <div class="btn-group actionBtns" role="group"> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button> - <button type="button" class="btn">Import Action</button> + <!-- <button type="button" class="btn">Import Action</button> --> </div> </div> - <div class="col-12 actionsList"> + <!-- <div class="col-12 actionsList"> <b>Select from other packages:</b> <div class="actions-scroll"> <div class="custom-control custom-checkbox"> @@ -106,7 +106,7 @@ <button type="button" class="btn btn-secondary mr-3">Insert</button> <button type="button" class="btn btn-secondary">Cancel</button> </div> - </div> + </div> --> <h1 class="col-12">Functions</h1> <div id="palette-paper" class="col-12 componentsList"> 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 b19f5699b..130e0ae19 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 @@ -3,6 +3,8 @@ import * as joint from 'jointjs'; import './jointjs/elements/palette.function.element'; import './jointjs/elements/action.element'; import './jointjs/elements/board.function.element'; +import { DesignerStore } from './designer.store'; +import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; @@ -26,7 +28,7 @@ export class DesignerComponent implements OnInit { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; - constructor() { + constructor(private designerStore: DesignerStore) { this.controllerSideBar = true; this.attributesSideBar = false; } @@ -54,22 +56,37 @@ export class DesignerComponent implements OnInit { this.initializeBoard(); this.initializePalette(); // this.createEditBarOverThePaper(); + + //functions list is contants for now const list = [ { modelName: 'component-netconf-executor'}, { modelName: 'component-remote-ansible-executor' }, { modelName: 'dg-generic' }, { modelName: 'component-resource-resolution' }]; + const cells = this.buildPaletteGraphFromList(list); + this.paletteGraph.resetCells(cells); - const cells = this.buildPaletteGraphFromList(list); - this.paletteGraph.resetCells(cells); - - let idx = 0; - cells.forEach(cell => { - console.log(cell); - cell.translate(5, (cell.attributes.size.height + 5) * idx++); + let idx = 0; + cells.forEach(cell => { + console.log(cell); + cell.translate(5, (cell.attributes.size.height + 5) * idx++); - }); - this.stencilPaperEventListeners(); + }); + this.stencilPaperEventListeners(); + /** + * the code to retrieve from server is commented + */ + // this.designerStore.state$.subscribe(state => { + // console.log(state); + // if (state.functions) { + // console.log('functions-->' , state.functions); + // // this.viewedFunctions = state.functions; + // const list = state.functions; + // } + // }); + //action triggering + // this.designerStore.getFuntions(); + } initializePalette() { @@ -127,9 +144,6 @@ export class DesignerComponent implements OnInit { var parentBbox = parent.getBBox(); var cellBbox = cell.getBBox(); - - console.log("parent ", parentBbox); - console.log("cell ", cellBbox); if (parentBbox.containsPoint(cellBbox.origin()) && parentBbox.containsPoint(cellBbox.topRight()) && parentBbox.containsPoint(cellBbox.corner()) && @@ -149,8 +163,12 @@ export class DesignerComponent implements OnInit { insertCustomActionIntoBoard() { this.actionIdCounter++; - const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter); + const actionId = "action_" + this.actionIdCounter; + const actionName = 'Action' + this.actionIdCounter; + const element = this.createCustomAction(actionId , actionName); this.boardGraph.addCell(element); + console.log('saving action to store action workflow....'); + this.designerStore.addDeclarativeWorkFlow(actionName); } createCustomAction(id: string, label: string) { @@ -192,7 +210,6 @@ export class DesignerComponent implements OnInit { stencilPaperEventListeners() { this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => { - console.log('pointerdown 2'); $('body').append(` <div id="flyPaper" @@ -232,38 +249,30 @@ export class DesignerComponent implements OnInit { if (mouseupX > target.left && mouseupX < target.left + this.boardPaper.$el.width() && mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) { - // const clonedShape = flyShape.clone(); - const type = flyShape.attributes.attrs.type; - console.log(type); - - //create board function element of the same type of palette function - //board function element is different in design from the palette function element - this.fuctionIdCounter++; - console.log(this.fuctionIdCounter); - const functionElementForBoard = - this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type); - - functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); - this.boardGraph.addCell(functionElementForBoard); - const cellViewsBelow = - this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); - console.log(cellViewsBelow); - if (cellViewsBelow.length) { - let cellViewBelow; - cellViewsBelow.forEach( cellItem => { - if (cellItem.model.id !== functionElementForBoard.id) { - cellViewBelow = cellItem; - } - }); + const functionType = flyShape.attributes.attrs.type; + console.log(functionType); + const functionElementForBoard = this.dropFunctionOverAction(functionType, mouseupX, target, offset, mouseupY); + + let parentCell = this.getParent(functionElementForBoard); + + console.log("parentCell -->", parentCell); + + if (parentCell && + parentCell.model.attributes.type === ActionElementTypeName){ + + const actionName = parentCell.model.attributes.attrs['#label'].text; + this.designerStore.addStepToDeclarativeWorkFlow(actionName, functionType); + this.designerStore.addNodeTemplate(functionType); // Prevent recursive embedding. - if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) { - console.log(cellViewBelow); - cellViewBelow.model.embed(functionElementForBoard); + if (parentCell && + parentCell.model.get('parent') !== functionElementForBoard.id) { + parentCell.model.embed(functionElementForBoard); } - console.log(this.boardGraph); + }else{ + console.log('function dropped outside action, rolling back...'); + functionElementForBoard.remove(); } - } $('body').off('mousemove.fly').off('mouseup.fly'); // flyShape.remove(); @@ -272,6 +281,32 @@ export class DesignerComponent implements OnInit { }); } + private getParent(functionElementForBoard: joint.shapes.board.FunctionElement) { + const cellViewsBelow = this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); + let cellViewBelow; + if (cellViewsBelow.length) { + cellViewsBelow.forEach(cellItem => { + if (cellItem.model.id !== functionElementForBoard.id) { + cellViewBelow = cellItem; + } + }); + } + return cellViewBelow; + } + + /** + * trigger actions related to Function dropped over the board: + * - create board function element of the same type of palette function + * as board function element is different from the palette function element + * - save function to parent action in store + */ + private dropFunctionOverAction(functionType: any, mouseupX: number, target: JQuery.Coordinates, offset: { x: number; y: number; }, mouseupY: number) { + this.fuctionIdCounter++; + const functionElementForBoard = this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', functionType); + functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); + this.boardGraph.addCell(functionElementForBoard); + return functionElementForBoard; + } /** * this is a way to add the button like zoom in , zoom out , and source over jointjs paper * may be used if no other way is found diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts index c4564254f..aa3a6a668 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -23,7 +23,7 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.typed.service'; import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; -import {ModelType} from '../model/ModelType.model'; +import {ModelType} from './model/ModelType.model'; @Injectable({ 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 be98eec88..f2972d03b 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 @@ -22,8 +22,10 @@ limitations under the License. import {Injectable} from '@angular/core'; import {Store} from '../../../../common/core/stores/Store'; import {DesignerService} from './designer.service'; -import {ModelType} from '../model/ModelType.model'; -import {DesignerDashboardState} from '../model/designer-dashboard.state'; +import {ModelType} from './model/ModelType.model'; +import {DesignerDashboardState} from './model/designer.dashboard.state'; +import { DeclarativeWorkflow } from './model/designer.workflow'; +import { NodeTemplate } from './model/desinger.nodeTemplate.model'; @Injectable({ @@ -35,15 +37,60 @@ export class DesignerStore extends Store<DesignerDashboardState> { super(new DesignerDashboardState()); } - public getFuntions() { + public retrieveFuntions() { const modelDefinitionType = 'node_type'; this.designerService.getFunctions(modelDefinitionType).subscribe( - (modelType: ModelType[]) => { - console.log(modelType); + (modelTypeList: ModelType[]) => { + console.log(modelTypeList); this.setState({ ...this.state, - functions: modelType, + serverFunctions: modelTypeList, }); }); } + + /** + * adds empty workflow with name only. + * called when blank action is added to the board + * declarative workflow just contain the steps but its order is determind by dg-graph + */ + addDeclarativeWorkFlow(workflowName: string) { + this.setState({ + ...this.state, + template: { + ...this.state.template, + workflows: + this.state.template.workflows.set(workflowName, new DeclarativeWorkflow()) + } + }); + } + + addStepToDeclarativeWorkFlow(workflowName: string, stepType: string) { + const currentWorkflow: DeclarativeWorkflow = this.state.template.workflows.get(workflowName); + currentWorkflow.steps = { + target: stepType, + description: '' + }; + const allNewWorkflowsMap = + this.state.template.workflows.set(workflowName, currentWorkflow); + this.setState({ + ...this.state, + template: { + ...this.state.template, + workflows: allNewWorkflowsMap + } + }); + } + + + addNodeTemplate(nodeTemplateName: string) { + this.setState({ + ...this.state, + template: { + ...this.state.template, + node_templates: + this.state.template.node_templates.set(nodeTemplateName, new NodeTemplate()) + } + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts index 5a86150e8..e1e980ed9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {DesignerStore} from '../designer.store'; -import {ModelType} from '../../model/ModelType.model'; +import {ModelType} from '../model/ModelType.model'; @Component({ @@ -15,14 +15,14 @@ export class FunctionsComponent implements OnInit { this.designerStore.state$.subscribe(state => { console.log(state); - if (state.functions) { - this.viewedFunctions = state.functions; + if (state.serverFunctions) { + this.viewedFunctions = state.serverFunctions; } }); } ngOnInit() { - this.designerStore.getFuntions(); + this.designerStore.retrieveFuntions(); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index 212905814..7960e83d1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -1,4 +1,5 @@ import * as joint from 'jointjs'; +import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; /** * please refer to documentation in file palette.function.element.ts to get more details * about how to create new element type and define it in typescript @@ -18,7 +19,7 @@ const rectWidth = 616; const rectHeight = 381; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup -const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', { +const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, { size: {width: rectWidth, height: rectHeight} }, { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts index c8498fa36..c8498fa36 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts index dc65c009f..5ae62d84a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts @@ -20,10 +20,15 @@ limitations under the License. */ import {ModelType} from './ModelType.model'; +import { TopologyTemplate } from './designer.topologyTemplate.model'; export class DesignerDashboardState { - functions: ModelType[]; - actions: string[]; + serverFunctions: ModelType[]; + template: TopologyTemplate; + constructor() { + this.serverFunctions = []; + this.template = new TopologyTemplate(); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts new file mode 100644 index 000000000..4e73c7986 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts @@ -0,0 +1,13 @@ +import { DeclarativeWorkflow } from './designer.workflow'; +import { NodeTemplate } from './desinger.nodeTemplate.model'; + +export class TopologyTemplate { + + workflows: Map<string, DeclarativeWorkflow>; + 'node_templates': Map<string, NodeTemplate>; + + constructor() { + this.workflows = new Map(); + this.node_templates = new Map(); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts new file mode 100644 index 000000000..0687c1f47 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts @@ -0,0 +1,14 @@ +export class Workflow { + inputs: {}; + outputs?: {}; +} + +export class DeclarativeWorkflow implements Workflow { + steps: {}; + inputs: {}; + outputs?: {}; + + constructor() { + this.steps = {}; + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts new file mode 100644 index 000000000..7f8556535 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts @@ -0,0 +1,10 @@ +export class NodeTemplate { + type: string; + properties?: { + 'dependency-node-template'?: string[] + }; + interfaces?: {}; + artifacts?: {}; + cabapilities?: {}; + requirements?: {}; +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index 344e7f599..63d392e35 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -47,7 +47,7 @@ <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" data-parent="#accordion"> <div class="card-body"> - <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true" + <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> </ace-editor> @@ -130,4 +130,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/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index 106fe3090..bc31e6c25 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { PackageCreationStore } from '../package-creation.store'; -import { PackageCreationUtils } from '../package-creation.utils'; +import {Component, OnInit} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageCreationUtils} from '../package-creation.utils'; @Component({ @@ -74,4 +74,8 @@ export class ImportsTabComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + textChanges(code: any, key: string) { + this.packageCreationStore.addDefinition(key, code); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index 2f8ebcc7c..c71e2564a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit } from '@angular/core'; -import { PackageCreationService } from '../package-creation.service'; -import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model'; -import { PackageCreationStore } from '../package-creation.store'; +import {Component, OnInit} from '@angular/core'; +import {PackageCreationService} from '../package-creation.service'; +import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageStore} from '../../configuration-dashboard/package.store'; @Component({ @@ -15,13 +16,14 @@ export class MetadataTabComponent implements OnInit { tags = new Set<string>(); customKeysMap = new Map(); modes: object[] = [ - { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, - { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }, - { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }]; + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}, + {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}]; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; - constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore) { + constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore, + private packageStore: PackageStore) { } @@ -29,12 +31,22 @@ export class MetadataTabComponent implements OnInit { this.metaDataTab.templateTags = this.tags; this.metaDataTab.mapOfCustomKey = this.customKeysMap; this.packageCreationStore.changeMetaData(this.metaDataTab); + + this.packageStore.state$.subscribe(element => { + if (element && element.configuration) { + this.metaDataTab.name = element.configuration.artifactName; + this.metaDataTab.version = element.configuration.artifactVersion; + this.metaDataTab.tags = element.configuration.tags; + this.metaDataTab.description = element.configuration.artifactDescription; + } + }); } removeTag(value) { // console.log(event); this.tags.delete(value); } + addTag(event) { const value = event.target.value; console.log(value); @@ -48,6 +60,7 @@ export class MetadataTabComponent implements OnInit { console.log(event); this.customKeysMap.delete(key); } + addCustomKey() { // tslint:disable-next-line: no-string-literal const key = document.getElementsByClassName('mapKey')[0]; @@ -64,6 +77,7 @@ export class MetadataTabComponent implements OnInit { value['value'] = ''; } } + validatePackageNameAndVersion() { if (this.metaDataTab.name && this.metaDataTab.version) { this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index 824152035..54491488e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -30,7 +30,7 @@ <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse" data-parent="#accordion-script"> <div class="card-body"> - <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true" + <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> </ace-editor> @@ -91,4 +91,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/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index eee291bba..c70109fc5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { PackageCreationStore } from '../package-creation.store'; -import { PackageCreationUtils } from '../package-creation.utils'; +import {Component, OnInit} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageCreationUtils} from '../package-creation.utils'; import 'ace-builds/src-noconflict/ace'; import 'ace-builds/webpack-resolver'; @@ -76,4 +76,8 @@ export class ScriptsTabComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + textChanges(code: any, key: string) { + this.packageCreationStore.addScripts(key, code); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 07c88c330..c3a36c9cb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -61,7 +61,7 @@ File</a></div> <div class="editor-container"> <app-source-editor - [(text)]="templateInfo.fileContent"></app-source-editor> + (textChange)="textChanges($event,templateInfo.fileName)" [(text)]="templateInfo.fileContent"></app-source-editor> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 836b0f5a6..d63eb2a38 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -113,8 +113,13 @@ export class TemplMappCreationComponent implements OnInit { } initTemplateMappingTableFromCurrentTemplate() { + console.log('happend'); if (this.variables && this.variables.length > 0) { this.packageCreationStore.getTemplateAndMapping(this.variables); } } + + textChanges(code: any, fileName: string) { + this.packageCreationStore.addTemplate(fileName, code); + } } |