diff options
6 files changed, 133 insertions, 43 deletions
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/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..82010db1c 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> @@ -262,8 +263,8 @@ <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-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> + <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; } |