diff options
Diffstat (limited to 'cds-ui/designer-client/src/app')
11 files changed, 207 insertions, 108 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 63cf4bd6c..f7ba40ce1 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 @@ -225,14 +225,14 @@ <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label> <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" name="customRadioInline1" + <input type="radio" id="customRadioInline3" name="customRadioInline3" class="custom-control-input" (click)="setOutputRequired(true)"> - <label class="custom-control-label" for="customRadioInline1">True</label> + <label class="custom-control-label" for="customRadioInline3">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" name="customRadioInline1" + <input type="radio" id="customRadioInline4" name="customRadioInline3" class="custom-control-input"> - <label class="custom-control-label" for="customRadioInline2" + <label class="custom-control-label" for="customRadioInline4" (click)="setOutputRequired(false)">False</label> </div> </div> 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 1d2a939bd..f15d735f6 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 @@ -266,12 +266,13 @@ button.rotate{ .rotate a:hover{ text-decoration: none; } -#board-paper svg{ +/*PAUSE*/ +/* #board-paper svg{ top: 30px; left: 0; height: 95%; -} -.componentsList tspan{ +} */ +.functionsList tspan{ /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; @@ -307,7 +308,7 @@ tspan#type{ text-shadow: none; border-color: #DEE8F3; } -.componentsList p{ +.functionsList p{ margin-bottom: 0; padding-left: 30px; background-position: left center; @@ -385,8 +386,9 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } -.controllerSidebar .joint-paper{ - width: 98% !important; +/*PAUSE*/ +.functionsList .joint-paper{ + width: 100% !important; height: 72vh !important; margin: 0 !important; } @@ -411,15 +413,9 @@ p.compType-4{ .new-action:hover{ background: #D7E7F9; } -.componentsList{ - margin-top: 16px; - padding: 0 20px 10px; -} -.componentsList{ - padding-bottom: 0; - /* height: calc( 100vh - 218px)!important; - overflow: scroll;*/ - background: #F4F9FE !important; +.functionsList{ + height: calc(100vh - 200px); + overflow-y: auto; } .custom-control.custom-checkbox:hover, .custom-control-label:hover{ @@ -433,8 +429,7 @@ p.compType-4{ .custom-control:hover{ background-color: white; } -.actionsList, -.componentsList{ +.actionsList{ height: 65vh !important; overflow-y: auto; } @@ -444,13 +439,16 @@ p.compType-4{ .actionsList li{ list-style: none; } -.componentsList .list-group-item{ +.functionsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; background: #fff; box-shadow: 0 2px 6px rgba(47, 83, 151, .15); border-radius: 2px; } +.functionsList .joint-paper{ + background: transparent !important; +} .actionsList .custom-control-label{ width: 100%; padding: 6px; @@ -499,7 +497,7 @@ p.compType-4{ margin-right: 9px; } /*Components List*/ -.componentsList .list-group-item{ +.functionsList .list-group-item{ padding-left: 36px; border: 0; font-size: 14px; @@ -1043,13 +1041,13 @@ p.compType-4{ background-color: #1B3E6F !important; color: #fff !important; } - - +/*PAUSE*/ +/* .joint-paper{ width: 96.4% !important; height: 80vh !important; margin: 60px auto 0 !important; -} +} */ ul.templateLegend{ margin: 0; } 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 d4fea67bb..76717b03c 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"></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,23 +173,24 @@ <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> <div class="row"> <div class="col"> <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"> @@ -218,17 +219,20 @@ <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> </div> </div> </div> + <!--Function List--> <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab"> <!--Function Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Functions"> - <div id="palette-paper" class="componentsList"></div> + <div class="functionsList"> + <div id="palette-paper"></div> + </div> </div> </div> </div> @@ -275,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"> @@ -288,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> @@ -302,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> @@ -330,5 +334,4 @@ </ng-sidebar> -</ng-sidebar-container> - +</ng-sidebar-container>
\ 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 1475f1ac3..d0af828e8 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 @@ -251,6 +251,7 @@ export class DesignerComponent implements OnInit, OnDestroy { el: $('#palette-paper'), model: this.paletteGraph, width: 318, + // height: '100%', height: $('#palette-paper').height(), // background: { // color: 'rgba(0, 255, 0, 0.3)' @@ -268,12 +269,12 @@ export class DesignerComponent implements OnInit, OnDestroy { this.boardPaper = new joint.dia.Paper({ el: $('#board-paper'), model: this.boardGraph, - // height: 720, - // width: 1100, + height: 720, + 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 }); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html index 115bf6d54..3107c9368 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html @@ -3,7 +3,8 @@ <div class="col"> <div class="form-group"> <label for="exampleInputEmail1">Function Instance Name</label> - <input type="text" class="form-control" placeholder="Function Instance Name"> + <input type="text" [(ngModel)]="currentFuncion['instance-name']" class="form-control" + placeholder="Function Instance Name"> </div> <div class="form-group mb-0"> <label>Function Type</label> @@ -11,7 +12,8 @@ </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> + <textarea [(ngModel)]="currentFuncion['description']" class="form-control" + id="exampleFormControlTextarea1" rows="3"></textarea> </div> </div> </div> @@ -50,20 +52,22 @@ <!--list--> <div class="attribute-wrap" *ngIf="artifactPrefix"> <div class="form-group"> - <label for="exampleFormControlTextarea1">artifact-prefix-names + <label for="exampleFormControlTextarea">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" + <input type="radio" id="functionRadioInline" name="functionRadioInline" class="custom-control-input"> - <label class="custom-control-label" for="customRadioInline1">Pre-defined + <label class="custom-control-label" for="functionRadioInline">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 + <input + [checked]="currentFuncion['inputs']['artifact-prefix-names']?.get_input" + (click)="setArtifact(false)" type="radio" id="functionRadioInline-a" + name="functionRadioInline" class="custom-control-input"> + <label class="custom-control-label" for="functionRadioInline-a">Input Drivin Template</label> </div> <br /> @@ -71,42 +75,63 @@ class="btn btn-select-template m-auto"><i class="icon-add-circle" type="button" aria-hidden="true"></i> Select Template</button> </div> - <!--string--> - <div class="attribute-wrap" *ngFor="let requiredInput of getKeys(requiredInputs)"> - <div class="form-group"> + + <div class="attribute-wrap" + *ngFor="let requiredInput of getKeys(requiredInputs); let i=index"> + <!--string--> + <div *ngIf="getValue(requiredInput,requiredInputs).type=='string' || getValue(requiredInput,requiredInputs).type=='json'" + class="form-group"> <label for="exampleInputEmail1">{{ requiredInput }}<i class="icon-required-star" type="button" [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}" 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"> + <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="text" + class="form-control"> </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" + <!-- Integer --> + <div class="form-group" + *ngIf="getValue(requiredInput,requiredInputs).type=='integer'"> + <label for="exampleInputEmail1">{{ requiredInput }} <i + class="icon-required-star" type="button" + [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}" aria-hidden="true"></i></label> + <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="number" + class="form-control" placeholder=""> </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> + <!--boolean--> + <!-- <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> --> + <div class="form-group" + *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> + <label for="exampleFormControlTextarea1">{{ requiredInput }} + <i class="icon-required-star" type="button" + [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}" + aria-hidden="true"></i></label><br /> + + <div class="custom-control custom-radio custom-control-inline"> + <input [value]="true" + [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio" + id="{{'functionRadioInline' + i}}" + name="{{'functionRadioInline' + i}}" class="custom-control-input"> + <label class="custom-control-label" + for="{{'functionRadioInline' + i}}">True</label> + </div><br /> + <div class="custom-control custom-radio custom-control-inline"> + <input [value]="false" + [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio" + id="{{'functionRadioInline' + i+'-a'}}" + name="{{'functionRadioInline' + i}}" class="custom-control-input"> + <label class="custom-control-label" + for="{{'functionRadioInline' + i+'-a'}}">False</label> + </div> </div> + <!-- </div> --> + </div> + + <!--integer--> + <!-- <div class="attribute-wrap"> + </div> --> + </div> </div> <!-- Add Optional Attributes button --> @@ -140,7 +165,8 @@ <div class="form-group"> <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star" type="button" aria-hidden="true"></i></label> - <input type="text" class="form-control"> + <input [(ngModel)]="currentFuncion['outputs'][requiredOutput]" type=" text" + class="form-control"> </div> </div> </div> @@ -178,6 +204,7 @@ </div> </div> </div> + <button class="btn btn-info" (click)="displayFunctionData()">Save</button> </div> <!--function - Select Template - Modal--> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts index 4eee1f30c..624f9c7a8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts @@ -6,6 +6,7 @@ import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.model'; import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping'; import { FunctionsStore } from '../functions.store'; +import { NodeProcess, NodeTemplate } from '../model/desinger.nodeTemplate.model'; @Component({ selector: 'app-functions-attribute', @@ -25,6 +26,8 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { OptionalInputs = new Map<string, {}>(); optionalOutputs = new Map<string, {}>(); artifactPrefix = false; + currentFuncion = new NodeProcess(); + nodeTemplates = new NodeTemplate(''); constructor( private designerStore: DesignerStore, @@ -70,8 +73,42 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } - // Template logic + displayFunctionData() { + this.selectedTemplates.forEach((value, key) => { + console.log(key); + console.log(value); + + if (value.isMapping) { + this.nodeTemplates.artifacts[key + '-mapping'] = { + type: 'artifact-mapping-resource', + file: 'Templates/' + key + '-mapping.json' + }; + } + + if (value.isTemplate) { + this.nodeTemplates.artifacts[key + '-template'] = { + type: 'artifact-template-resource', + file: 'Templates/' + key + '-template.vtl' + }; + } + }); + this.nodeTemplates.interfaces = { + ResourceResolutionComponent: { + operations: { + process: { + ...this.currentFuncion + } + } + } + }; + setTimeout(() => { + console.log(this.currentFuncion); + console.log(this.nodeTemplates); + + }, 1500); + } + // Template logic private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) { const nameOfFile = isFromTemplate ? key.split('/')[1].split('.')[0].split('-template')[0] @@ -88,6 +125,13 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { } addTemplates() { } + setArtifact(predefined: boolean) { + if (predefined) { + + } else { + this.currentFuncion.inputs['artifact-prefix-names'] = { get_input: 'template-prefix' }; + } + } addToInputs(optionalInput) { this.requiredInputs.set(optionalInput, this.OptionalInputs.get(optionalInput)); this.OptionalInputs.delete(optionalInput); 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 b7a0ff9d5..417f60ba4 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 @@ -14,9 +14,8 @@ declare module 'jointjs' { } } } - -const rectWidth = '100%'; -const rectHeight = '100%'; +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(ActionElementTypeName, { @@ -40,8 +39,19 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> <g id="workflow-container" transform="translate(401.000000, 137.000000)"> <g id="Card"> - <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use> - <use fill-rule="evenodd" xlink:href="#custom-action"></use> + <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> + <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> + </g> + <g id="name"> + <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, + 0.8954305 87,2 L87,30 L87,30 L0,30 L0, + 2 C-1.3527075e-16,0.8954305 0.8954305, + 2.02906125e-16 2,0 Z" id="Rectangle" + fill="#C3CDDB"></path> + <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" + font-size="12" font-weight="bold" fill="#1B3E6F"> + <tspan id="label" x="20" y="20">Action 1</tspan> + </text> </g> </g> </g> 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 index 8715e44c2..bd3240b88 100644 --- 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 @@ -11,5 +11,13 @@ export class NodeTemplate { constructor(type) { this.type = type; this.properties = {}; + this.artifacts = {}; + this.interfaces = {}; } } + +export class NodeProcess { + inputs: {} = {}; + outputs: {} = {}; +} + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts new file mode 100644 index 000000000..2baae2cc9 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts @@ -0,0 +1,5 @@ +export class Nodetemplates { + type: string; + interfaces: {}; + artifacts: {}; +} 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 70b1644ab..256789586 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 @@ -149,12 +149,13 @@ <span>({{resourceDictionaryRes.length}} attributes in total)</span> </div> </div> - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.resourceDictionaryRes.length]"> + </mat-paginator> <mat-form-field class="tableFilter float-right"> <mat-label>Filter</mat-label> <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> </mat-form-field> - <table mat-table [dataSource]="initDataSource" matSort> + <table mat-table matSortDisableClear [dataSource]="initDataSource" matSort> <!-- select Column --> <ng-container matColumnDef="select"> <th mat-header-cell *matHeaderCellDef> </th> @@ -232,9 +233,6 @@ <input type="text" class="form-control" #velocity (input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)"> </td> - - - </ng-container> <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> @@ -258,12 +256,12 @@ <!------ View Table-------> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> <div class="mat-elevation-z8"> + <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator> <mat-form-field class="tableFilter float-right"> <mat-label>Filter</mat-label> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> - <table mat-table [dataSource]="dataSource" matSort> + </mat-form-field> + <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort> <!-- Required Column --> <ng-container matColumnDef="Required"> <th mat-header-cell *matHeaderCellDef> Required </th> 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 0bf4d9c54..a26f3b90e 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 @@ -74,8 +74,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI dataSource: MatTableDataSource<{}>; initDataSource: MatTableDataSource<{}>; // dataSource = new MatTableDataSource(); - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - @ViewChild(MatSort, { static: true }) sort: MatSort; + @ViewChild('paginate', { static: true }) paginator: MatPaginator; + @ViewChild('sort', { static: true }) sort: MatSort; @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator; @ViewChild(MatSort, { static: true }) initSort: MatSort; @@ -519,6 +519,11 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI rerender(): void { this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes); // this.cdr.detectChanges(); + /* + Hint: the intial page size for the table will be the result size; I did that because the table doesn't load element in DOM, + as result some function are not working well like save and you have to move to other pages to fix that. + */ + this.initPaginator.pageSize = this.resourceDictionaryRes.length; this.initDataSource.paginator = this.initPaginator; this.initDataSource.sort = this.initSort; } |