diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation')
8 files changed, 145 insertions, 73 deletions
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 bf86c46ea..ac02c50e2 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 @@ -1,20 +1,20 @@ <div class="import-container-all"> <div class="import-container"> <div class="import-container-input"> - <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched"> - <a class="enter-link" href="#"><i class="icon-enter"></i></a> + <input placeholder="Enter file URL then ENTER" type="input" class="ng-pristine ng-valid ng-touched"> + <a class="enter-link" href="#"><i class="icon-enter-link"></i></a> </div> <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" - (click)="resetTheUploadedFiles()" data-target="#importModal">Import File</a></span> + (click)="resetTheUploadedFiles()" data-target="#importModal"><b>Import File</b></a></span> </div> <div class="accordion"> - <div class="card creat-card"> + <!-- <div class="card creat-card"> <div class="single-line"> <label class="label-name">File</label> </div> - </div> + </div> --> <div id="accordion" *ngFor="let file of definitionFiles | keyvalue; let mapIndex = index"> <!-- <div class="card"> <div class="card-header" [id]="file.key"> @@ -23,7 +23,7 @@ aria-expanded="true" aria-controls="collapseOne"> <i class="icon-file-code"></i> Definitions/{{file.key}} </button> - <a class="accordion-delete" href="#"><i class="icon-delete"></i></a> + <a class="accordion-delete" href="#"><i class="icon-delete-sm"></i></a> </h5> </div> @@ -41,7 +41,33 @@ (click)="changeDivShow(mapIndex)" > <i class="icon-file-code"></i> {{file.key}} </button> - <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a> + + <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i + class="icon-delete-sm"></i></a> + + <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> --> + <!-- Delete Modal --> + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Delete File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete file <span>artifact_types.json</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" + data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Delete</button> + </div> + </div> + </div> + </div> </h5> </div> <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" @@ -54,7 +80,6 @@ </div> </div> </div> - <!-- <div class="card"> <div class="card-header" id="headingThree"> @@ -78,7 +103,6 @@ </div> </div> --> - </div> </div> @@ -91,7 +115,8 @@ <div class="modal-header"> <h5 class="modal-title" id="importModalLabel">Import File</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> + <!-- <span aria-hidden="true">×</span> --> + <img src="assets/img/icon-close.svg" /> </button> </div> <div class="modal-body"> @@ -112,11 +137,13 @@ <div class="folder-upload-type">Allowed file type: json</div> </ng-template> </ngx-file-drop> - <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index"> + <div class="upload-table"> <table class="table"> <thead> - <tr> - <th>Name : {{ item.name }}</th> + <tr *ngFor="let item of uploadedFiles; let i=index"> + <th width="40"><img src="assets/img/icon-file-code.svg" /></th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> 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 3b9d38c1a..35c0918de 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 @@ -19,7 +19,6 @@ export class ImportsTabComponent implements OnInit { constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { } - ngOnInit(): void { this.packageCreationStore.state$.subscribe(cbaPackage => { if (cbaPackage.definitions && cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 89724be79..de2b3831d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -1,20 +1,23 @@ <div class="card creat-card"> - <div class="single-line"> + <div class="single-line-model"> <label class="label-name">Mode</label> - <label name="trst" *ngFor="let mode of modes; let i = index"> - <input class="form-check-input" [(ngModel)]="modeType" type="radio" name="radioMode" id="radioMode" - [value]="mode.name"> + <div class="label-input"> + <label name="trst" *ngFor="let mode of modes; let i = index" class="pl-0"> + <input class="form-check-input" [(ngModel)]="modeType" type="radio" name="radioMode" id="radioMode" + [value]="mode.name"> - <span> - <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i> - {{mode.name}} - </span> - </label> + <span> + <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i> + {{mode.name}} + </span> + </label> + </div> </div> <div class="single-line"> <label class="label-name">Dictionary Library Instance</label> <div class="label-input"> <select class="form-control" id="exampleFormControlSelect1"> + <option>Select Library Instance</option> <option>Library Instance 1</option> <option>Library Instance 2</option> <option>Library Instance 3</option> @@ -30,7 +33,7 @@ <label class="label-name">Name <span>*</span></label> <div class="label-input"> <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name" - placeholder="Topology name.vLB.CDS"> + placeholder="Package name"> </div> <!--<div class="model-note-container error-message"> Package name already exists with this version. Please enter a different name or enter different version @@ -54,31 +57,32 @@ </div> <div class="single-line-model"> - <label class="label-name">tags</label> + <label class="label-name">Tags</label> <div class="label-input"> <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags" placeholder="Ex., vDNS-CDS"> - </div> <div class="model-note-container tag-notes">Seprate tags with comma or space</div> <div class="model-note-container tages-container"> - <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)" - class="fa fa-times-circle"></i></span> + <span *ngFor="let tag of tags" class="single-tage">{{tag}} + <i (click)="removeTag(tag)" class="fa fa-times-circle"></i> + </span> </div> </div> </div> <div id="container"> <div id="target"> <div class="card creat-card"> - <div class="single-line"> - <h5 class="label-name"> - Custom key + <div class="single-line customKeyTitle"> + <h5 class="label-name w-100 "> + Custom key </h5> + <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span> </div> <div *ngFor="let map of customKeysMap | keyvalue; let i=index" class="single-custom-key"> <div class="single-line-custom-key"> - <label class="label-name"><span>{{i + 1}}-</span> Name</label> + <label class="label-name"><span>{{i + 1}}.</span> Name</label> <div class="label-input"> <input value="{{map.key}}" name="key" type="input" placeholder="Enter name"> </div> @@ -91,7 +95,7 @@ </div> <div class="single-line-custom-key-delete"> <button (click)="removeKey($event,map.key)" class="custom-key-delete"><i aria-hidden="true" - class="icon-delete"></i></button> + class="icon-delete-sm"></i></button> </div> </div> @@ -111,7 +115,7 @@ </div> </div> <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)" - class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> --> + class="custom-key-delete"><i aria-hidden="true" class="icon-delete-sm"></i></button></div> --> </div> </div> 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 3a9b7b880..6018ad535 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 @@ -16,9 +16,9 @@ export class MetadataTabComponent implements OnInit { tags = new Set<string>(); customKeysMap = new Map(); modes: any[] = [ - { 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-topologyView-active' }]; + /* {name: 'Scripting Mode', style: 'mode-icon icon-topologySource'}, + {name: 'Generic Script Mode', style: 'mode-icon icon-topologySource'}];*/ modeType = this.modes[0].name; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; @@ -101,7 +101,7 @@ export class MetadataTabComponent implements OnInit { if (this.metaDataTab.name && this.metaDataTab.version) { this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { if (element) { - this.errorMessage = 'the package with name and version is exists'; + this.errorMessage = 'Package name already exists with this version. Use different name or different version number.'; } else { this.errorMessage = ' '; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 67beca2a1..3bb8b56a1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -4,37 +4,49 @@ <div class="container-fluid main-container"> <header class="page-title"> <div class="row"> - <h2 class="col m-0"> + <h2 class="col m-0 pb-0"> <ul class="breadcrumb-header"> <li><a routerLink="/packages">CBA Packages</a></li> + <i class="fa fa-angle-right ml-2 mr-2"></i> <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" (click)="goBackToDashBorad()">Discard - Changes</button> - <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> + <div class="col"> + </div> </div> </header> - <div class="container-fluid body-container"> - <div class="container"> <div class="creat-action-container"> + <a href="#" class="action-button" (click)="saveBluePrint()"> + <i class="icon-save-sm" aria-hidden="true"></i> + <span>Save</span> + </a> + <a href="#" class="action-button" (click)="goBackToDashBorad()"> + <i class="icon-discard-sm" aria-hidden="true"></i> + <span>Discard Changes</span> + </a> + + <hr> <a href="#" class="action-button"> - <i class="icon-clone" aria-hidden="true"></i> + <i class="icon-clone-sm" aria-hidden="true"></i> <span>Clone</span> </a> <a href="#" class="action-button"> - <i class="icon-archive" aria-hidden="true"></i> + <i class="icon-archive-sm" aria-hidden="true"></i> <span>Archive</span> </a> + <a href="#" class="action-button"> + <i class="icon-download" aria-hidden="true"></i> + <span>Download</span> + </a> + <a href="#" class="action-button delete"> - <i class="icon-delete" aria-hidden="true"></i> + <i class="icon-delete-sm" aria-hidden="true"></i> <span>Delete</span> </a> </div> 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 5b4e7c840..79c444061 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 @@ -1,20 +1,20 @@ <div class="import-container-all"> <div class="import-container"> <div class="import-container-input"> - <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input"> - <a class="enter-link" href="#"><i class="icon-enter"></i></a> + <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input"> + <a class="enter-link" href="#"><i class="icon-enter-link"></i></a> </div> <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal" - (click)="resetTheUploadedFiles()" href="#">Import File</a></span> + (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span> </div> <div class="accordion"> - <div class="card creat-card"> + <!-- <div class="card creat-card"> <div class="single-line"> <label class="label-name">File</label> </div> - </div> + </div> --> <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script"> <div class="card"> @@ -24,8 +24,34 @@ aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse"> <i class="icon-file-code"></i> {{file.key}} </button> - <a (click)="removeFile(file.key,mapIndex)" class="accordion-delete"><i - class="icon-delete"></i></a> + <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i + class="icon-delete-sm"></i></a> + <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i + class="icon-delete-sm"></i></a> --> + <!-- Delete Modal --> + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" + data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Delete</button> + </div> + </div> + </div> + </div> + + </h5> </div> <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse" @@ -51,7 +77,7 @@ <div class="modal-header"> <h5 class="modal-title" id="scriptsModalLabel">Import File</h5> <button aria-label="Close" class="close" data-dismiss="modal" type="button"> - <span aria-hidden="true">×</span> + <img src="assets/img/icon-close.svg" /> </button> </div> <div class="modal-body"> @@ -72,11 +98,13 @@ <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div> </ng-template> </ngx-file-drop> - <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table"> + <div class="upload-table"> <table class="table"> <thead> - <tr> - <th>Name : {{ item.name }}</th> + <tr *ngFor="let item of uploadedFiles; let i=index"> + <th width="40"><img src="assets/img/icon-file-code.svg" /></th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> 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 86e713b9e..a33087461 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 @@ -6,7 +6,7 @@ </label> <div class="label-input"> - <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS"> + <input type="input" [(ngModel)]="fileName" placeholder="Template name"> </div> </div> </div> @@ -56,8 +56,8 @@ </div> <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]" - data-target="#templateModal">Import - File</a></div> + data-target="#templateModal"><b>Import + File</b></a></div> <div class="editor-container"> <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)" [(text)]="templateFileContent"></app-source-editor> @@ -76,16 +76,16 @@ </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> - <h6 class="text-center">Select a source to load config parameters</h6> + <p class="text-center"><b>Select a source to load config parameters</b></p> <div class="text-center"> <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load"> - <i class="icon-current-template"></i> + <i class="icon-use-attributes"></i> <br /> <span>Use Current Template Instance</span> </a> <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal" class="mapping-source-load"> - <i class="icon-Upload-attribute"></i> + <i class="icon-upload-attributes"></i> <br /> <div>Upload attribute list</div> <div class="source-load-note">(Should be comma delimited file)</div> @@ -119,8 +119,8 @@ <tbody> <tr *ngFor="let dict of resourceDictionaryRes"> <td> - <i *ngIf="dict.definition?.property?.required" class="fa fa-check-square mx-2"></i> - <i *ngIf="!dict.definition?.property?.required" class="fa fa-square mx-2"></i> + <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-no.svg"> + <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg"> </td> <td>{{ dict.name }}</td> <td>{{ dict.name }}</td> @@ -195,7 +195,7 @@ </div> <div class="template-mapping-action"> <button class="btn btn-sm btn-outline-secondary">Cancel</button> - <button (click)="saveToStore()" class="btn btn-sm btn-primary">Finish</button> + <button (click)="saveToStore()" class="btn btn-sm btn-primary">Submit</button> </div> </div> </div> @@ -208,7 +208,7 @@ <div class="modal-header"> <h5 class="modal-title" id="templateModalLabel">Import File</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> + <img src="assets/img/icon-close.svg" /> </button> </div> <div class="modal-body"> @@ -231,11 +231,13 @@ </div> </ng-template> </ngx-file-drop> - <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index"> + <div class="upload-table"> <table class="table"> <thead> - <tr> - <th>Name : {{ item.name }}</th> + <tr *ngFor="let item of uploadedFiles; let i=index"> + <th width="40"><img src="assets/img/icon-file-code.svg" /></th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index ab97159b6..f5e683f28 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -20,7 +20,7 @@ <div class="card-body max-height-list"> <div class="row"> <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">--> - <div class="col-4" style="color:white" *ngFor="let file of getKeys(templateAndMappingMap)"> + <div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)"> <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{file}} <span *ngIf="getValue(file).isMapping">Mapping</span> <span *ngIf="getValue(file).isTemplate">Template</span> |