diff options
3 files changed, 177 insertions, 90 deletions
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 c54673d8e..6d590dc8f 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 @@ -87,6 +87,14 @@ header{ color: #1B3E6F; font-size: 10px; } +.template-list.active { + display: inline; + padding: 4px 10px; + background: #F4F9FE; + border-radius: 10px; + color: #1B3E6F; + font-size: 10px; +} .designer-breadcrumb .fa-angle-right::before { color: #fff; line-height: 38px; 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 c89a96de0..23633017d 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 @@ -19,106 +19,86 @@ <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" + aria-expanded="true" aria-controls="collapseOne"> Interfaces </button> </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <!--Inputs & Outputs Tabs--> <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" - href="#pills-home" role="tab" aria-controls="pills-home" - aria-selected="true">Inputs</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" + role="tab" aria-controls="pills-home" aria-selected="true">Inputs</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" - href="#pills-profile" role="tab" aria-controls="pills-profile" - aria-selected="false">Outputs</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" + role="tab" aria-controls="pills-profile" aria-selected="false">Outputs</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" - aria-labelledby="pills-home-tab"> + aria-labelledby="pills-home-tab"> <div class="row"> <div class="col"> <!--list--> <div class="attribute-wrap"> <div class="form-group"> - <label - for="exampleFormControlTextarea1">artifact-prefix-names + <label for="exampleFormControlTextarea1">artifact-prefix-names <i class="icon-required-star" type="button" - aria-hidden="true"></i></label> + aria-hidden="true"></i></label> </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">Pre-defined + <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">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 + <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 Template</label> </div> <br /> - <button type="button" class="btn btn-select-template"><i - class="icon-add-circle" type="button" + <button type="button" data-toggle="modal" data-target="#templateModal" + class="btn btn-select-template"><i class="icon-add-circle" type="button" aria-hidden="true"></i> Select Template</button> </div> <!--string--> <div class="attribute-wrap"> <div class="form-group"> - <label for="exampleInputEmail1">resoluton-key <i - class="icon-required-star" type="button" - aria-hidden="true"></i></label> + <label for="exampleInputEmail1">resoluton-key <i class="icon-required-star" + type="button" 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"> + <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"> </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" aria-hidden="true"></i></label> + <label for="exampleFormControlTextarea1">resolution-summary + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> </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 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> + <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> </div> </div> <!-- Add Optional Attributes button --> @@ -126,7 +106,7 @@ </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" - aria-labelledby="pills-profile-tab">2</div> + aria-labelledby="pills-profile-tab">2</div> </div> </div> </div> @@ -136,43 +116,86 @@ <div class="accordion" id="accordionExample1"> <div class="card"> <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" + aria-expanded="true" aria-controls="collapseTwo"> Artifacts </button> </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample1"> + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1"> <div class="card-body"> <div class="row"> - <div class="col-12"> + <div class="col-12" *ngFor="let file of getKeys(selectedTemplates)"> <a class="template-mapping-list"> - <p>baseconfig</p> - <span>Mapping</span> - <span>Template</span> + <p>{{file}}</p> + <span *ngIf="getValue(file).isMapping">Mapping</span> + <span *ngIf="getValue(file).isTemplate">Template</span> - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> + <a data-toggle="modal" (click)="fileToDelete = file" + data-target="#templateDeletionModal" class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> </a> </div> - <div class="col-12"> - <a class="template-mapping-list"> - <p>vpkg</p> - <span>Mapping</span> - <span>Template</span> - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> - </a> - </div> </div> </div> </div> </div> </div> </div> + +<!--function - Select Template - Modal--> +<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle" + aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="templateModalTitle"> + Select Pre-defined Tempalte Name</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body createAttributeTabs"> + <div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)"> + <a class="template-mapping-list float" [ngClass]="{'active':selectedTemplates.has(file)}"> + <p (click)="setTemplate(file)">{{file}}</p> + <span *ngIf="getValue(file).isMapping">Mapping</span> + <span *ngIf="getValue(file).isTemplate">Template</span> + </a> + + </div> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="addTemplates()">Add + Templates</button> + </div> + </div> + </div> +</div> + +<!-- Delete Modal --> +<div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog" + aria-labelledby="templateDeletionModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete Template file + <span>{{fileToDelete}}</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" (click)="setTemplate(fileToDelete)" data-dismiss="modal" + class="btn btn-primary">Delete</button> + </div> + </div> + </div> +</div>
\ No newline at end of file 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 88bd76eb6..0c47b3bbc 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 @@ -1,9 +1,10 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; -import {DesignerStore} from '../designer.store'; -import {PackageCreationStore} from '../../package-creation/package-creation.store'; -import {Subject} from 'rxjs'; -import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; -import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { DesignerStore } from '../designer.store'; +import { PackageCreationStore } from '../../package-creation/package-creation.store'; +import { Subject } from 'rxjs'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.model'; +import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping'; @Component({ selector: 'app-functions-attribute', @@ -13,11 +14,16 @@ import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model export class FunctionsAttributeComponent implements OnInit, OnDestroy { ngUnsubscribe = new Subject(); - private designerDashboardState: DecodeSuccessCallback; - private cbaPackage: CBAPackage; + designerDashboardState: DecodeSuccessCallback; + cbaPackage: CBAPackage; + templateAndMappingMap = new Map<string, TemplateAndMapping>(); + selectedTemplates = new Map<string, TemplateAndMapping>(); + fileToDelete: string; - constructor(private designerStore: DesignerStore, - private packageCreationStore: PackageCreationStore) { + constructor( + private designerStore: DesignerStore, + private packageCreationStore: PackageCreationStore + ) { } ngOnInit() { @@ -35,6 +41,22 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { takeUntil(this.ngUnsubscribe)) .subscribe(cbaPackage => { this.cbaPackage = cbaPackage; + console.log('File name =>================== '); + console.log(this.cbaPackage.templates.files); + this.cbaPackage.templates.files.forEach((value, key) => { + console.log('File name => ' + key); + const templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isTemplate = true; + const isFromTemplate = true; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); + + this.cbaPackage.mapping.files.forEach((value, key) => { + const templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isMapping = true; + const isFromTemplate = false; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); }); } @@ -43,4 +65,38 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } + // Template logic + + private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) { + const nameOfFile = isFromTemplate ? + key.split('/')[1].split('.')[0].split('-template')[0] + : key.split('/')[1].split('.')[0].split('-mapping')[0]; + // const fullName = nameOfFile + ',' + key.split('.'); + if (this.templateAndMappingMap.has(nameOfFile)) { + const templateAndMappingExisted = this.templateAndMappingMap.get(nameOfFile); + !isFromTemplate ? templateAndMappingExisted.isMapping = true : templateAndMappingExisted.isTemplate = true; + this.templateAndMappingMap.set(nameOfFile, templateAndMappingExisted); + } else { + this.templateAndMappingMap.set(nameOfFile, templateAndMapping); + } + + } + + addTemplates() { } + + setTemplate(file: string) { + if (this.selectedTemplates.has(file)) { + this.selectedTemplates.delete(file); + } else { + this.selectedTemplates.set(file, this.templateAndMappingMap.get(file)); + } + console.log(this.selectedTemplates); + } + + getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) { + return Array.from(templateAndMappingMap.keys()); + } + getValue(file: string) { + return this.templateAndMappingMap.get(file); + } } |