diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html')
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html | 128 |
1 files changed, 101 insertions, 27 deletions
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 4b0ef8b49..de97a4679 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 @@ -5,12 +5,14 @@ class="fa fa-chevron-left mr-2"></i>Template List</button> </div> <div class="col text-right"> + <button (click)="cancel()" [hidden]="!templatesExist || edit" class="btn btn-outline-danger" + title="Delete Template">Cancel</button> <button data-toggle="modal" [hidden]="!edit" data-target="#templateDeletionModal2" class="btn btn-outline-danger" title="Delete Template">Delete</button> - <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit" + <button (click)="clear()" [hidden]="fileName?.length <=0 || edit" class="btn btn-outline-secondary">Clear</button> - <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close" - class="btn btn-primary">Finish</button> + <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" + title="Submit template and close" class="btn btn-primary">Finish</button> </div> </div> <div class="card creat-card"> @@ -31,8 +33,8 @@ <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0 d-flex justify-content-between"> - <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" - aria-controls="collapseOne"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab" + aria-expanded="true" aria-controls="collapseOne"> 1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span> </button> @@ -44,24 +46,25 @@ <div tourAnchor="tm-templateType" class="single-line"> <label class="label-name">Template Type</label> <div class="label-input"> - <label name="trst" (click)="allowedExt=['.vtl']"> + <label name="trst" (click)="allowedExt=['.vtl'];templateExt='vtl'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Velcoity> + name="exampleRadios" id="exampleRadios1" value=vtl> <span> - Velcoity + Velocity </span> </label> - <label name="trst" (click)="allowedExt=['.j2','.jinja2']"> + <label name="trst" (click)="allowedExt=['.j2','.jinja2'];templateExt='j2'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Jinja> + name="exampleRadios" id="exampleRadios1" value=j2> <span> Jinja </span> </label> - <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt']"> + <label tourAnchor="tm-templateContent" name="trst" + (click)="allowedExt=['.kt'];templateExt='kt'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Kotlin> + name="exampleRadios" id="exampleRadios1" value=kt> <span> Kotlin @@ -70,7 +73,7 @@ </div> </div> <div class="create-template-import">Use the editor to add parameters or you can also - <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]" + <a href="#" data-toggle="modal" (click)="allowedExt=['.'+templateExt]" data-target="#templateModal"><b>Import File</b></a>. <br /> <span class="templateNote"><i class="icon-info" aria-hidden="true"></i> When you import new file, the new attributes will replace @@ -86,8 +89,9 @@ <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> - <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" + data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" + aria-controls="collapseTwo"> 2. Manage Mapping <span class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span> </button> @@ -97,8 +101,8 @@ <div class="card-body"> <p class="text-center"><b>Select a source to load config parameters</b></p> <div class="text-center"> - <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)" - (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0 + <button [disabled]="!(templateFileContent?.trim()?.length > 0)" + (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="templateFileContent?.trim()?.length > 0 ?'hover-enable':'hover-disable'"> <i class="icon-use-attributes"></i> <br /> @@ -122,28 +126,68 @@ </div> + </div> + <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2"> + <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck1" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck1"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" + tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> + <div style="line-height: 35px;font-size: 10px;"> + <span>{{selectedProps.size}} selected </span> + <span>({{resourceDictionaryRes.length}} attributes in total)</span> + </div> + </div> <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover"> <thead> <tr> + <th></th> <th>Required</th> + <th>Template Input</th> <th>Parameter Name</th> <th>Dictionary Name</th> <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> </thead> <tbody> - <tr *ngFor="let dict of resourceDictionaryRes"> + <tr *ngFor="let dict of resourceDictionaryRes;let i=index;trackBy: identify"> + <td> + <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom"> + <input type="checkbox" class="custom-control-input" + id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck-{{dict.name}}"></label> + </div> + <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"></td> --> + </td> <td> - <img *ngIf="dict.definition?.property?.required" - src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" - src="/assets/img/icon-required-no.svg"> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" #requiredInput + (click)="setProp(requiredInput,'required',i)" + id="requiredCheck-{{dict.name}}"> + <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label> + </div> + </td> + <td> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" #tempInput + (click)="setProp(tempInput,'input-param',i)" id="inputCheck-{{dict.name}}"> + <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label> + </div> </td> <td>{{ dict.name }}</td> <td>{{ dict.name }}</td> @@ -159,12 +203,13 @@ <!-- <select class="custom-select"> <option *ngFor="let val of getKeys(dependancies)"> {{ getValue(dict.name)}}</option> - </select> --> <input type="text" class="form-control" [ngModel]="getValue(dict.name)"> <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict.definition?.property?.default }}</td> + <td><input type="text" class="form-control" #velocity + (input)="setVelocity(i,velocity.value)"></td> <td>{{ dict.definition?.property?.type }}</td> <td>{{ dict.definition?.property['entry_schema'] }}</td> </tr> @@ -173,26 +218,51 @@ </div> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> + <!-- <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck2" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck2"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" + tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> + </div> --> <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover"> <thead> <tr> + <!-- <th></th> --> <th>Required</th> + <th>Template Input</th> <th>Parameter Name</th> <th>Dictionary Name</th> <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> </thead> <tbody> <tr *ngFor="let dict of mappingRes"> + <!-- <td> + <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom"> + <input type="checkbox" class="custom-control-input" + id="customCheck2-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck2-{{dict.name}}"></label> + </div> + </td> --> <td> - <img *ngIf="dict.definition?.property?.required" - src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" - src="/assets/img/icon-required-no.svg"> + <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg"> + </td> + <td> + <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict['name'] }}</td> <td>{{ dict['name'] }}</td> @@ -206,6 +276,10 @@ <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict['property']['default'] }}</td> + <td *ngIf="dict?.property?.metadata"> + {{dict?.property?.metadata['transform-template']}} + </td> + <td *ngIf="!dict?.property?.metadata"></td> <td>{{ dict['property']['type'] }}</td> <td>{{ dict['property']['entry_schema'] }}</td> </tr> |