diff options
Diffstat (limited to 'cds-ui/designer-client/src/app')
11 files changed, 615 insertions, 40 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 6c7e1efc6..9e1c9b709 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -107,9 +107,542 @@ </div> </div> <div class="col-2 package-view-button pt-3"> - <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer + <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer Mode + </button> --> + <!-- Button trigger modal - 1st Action --> + <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal" + data-target="#exampleModalLong"> + Designer Mode </button> + <!-- Modal --> + <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLongTitle"></h5> + <button type="button" class="close" data-dismiss="modal" + aria-label="Close" title="Close"> + <i class="icon-action-close"></i> + </button> + </div> + <div class="modal-body"> + <div id="carouselExampleIndicators" class="carousel slide" + data-ride="carousel" data-interval="false"> + <div class="carousel-inner" style="height: 450px"> + <!--OPTIONS SLIDE--> + <div class="carousel-item active"> + <h1>Let’s create the 1st Action</h1> + <div class="row"> + <!--Custom Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="1"> + <div class="card actionType custom"> + <div class="card-body"> + <h3>Custom</h3> + <p>Start with your own settings</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="1" class="btn"> + Create + </button> + </div> + </div> + </a> + </div> + <!--Default Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="2"> + <div class="card actionType default"> + <div class="card-body"> + <h3>Default</h3> + <p>Explore preset actions from CDS + Action Catalog</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="2" class="btn"> + Select + </button> + </div> + </div> + </a> + </div> + <!--Recent Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="3"> + <div class="card actionType recent"> + <div class="card-body"> + <h3>Recent</h3> + <p>Re-use recent actions of your + recent + packages</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="3" class="btn"> + Select + </button> + </div> + </div> + </a> + </div> + <!--Import Action--> + <div class="col-3 d-flex"> + <a class="d-flex" data-target="#carouselExampleIndicators" + data-slide-to="4"> + <div class="card actionType import"> + <div class="card-body"> + <h3>Import</h3> + <p>Import your own action files</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="4" class="btn"> + Browse</button> + </div> + </div> + </a> + </div> + </div> + </div> + <!--Custom Action Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Create Custom Action</h1> + <div class="form-group text-center"> + <input type="text" class="form-control customAction" + placeholder="Type Action Name" autofocus> + <button type="button" class="btn submit">Start</button> + </div> + + </div> + <!--Default Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from CDS Default Package </h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Version</label> + <div class="dropdown" style="width: 90px"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">1.6.2</div> + <ul class="dropdown-content"> + <li> + <a>1.1.8</a> + </li> + <li> + <a>2.1.8</a> + </li> + </ul> + </div> + </div> + <div class="col"> + <input type="text" + class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" + required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" + required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" + required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" + required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" + class="btn submit">Start</button> + </div> + </div> + </div> + </div> + <!--Recent Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from Recent Packages</h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Package + Name</label> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">CDS (v 1.0.0) + </div> + <ul class="dropdown-content"> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + </ul> + </div> + </div> + <div class="col"> + <input type="text" + class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" + required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" + required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" + required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" + required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" + required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> + </div> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" + class="btn submit">Start</button> + </div> + </div> + </div> + </div> + <!--Import Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Import Action(s)</h1> + <div class="actionFormWrapper"> + <div class="row"> + <div class="col"> + <ngx-file-drop accept=".json" + dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" + (onFileLeave)="fileLeave($event)"> + <ng-template ngx-file-drop-content-tmp + let-openFileSelector="openFileSelector"> + <div class="folder-upload"> + <img + src="assets/img/folder-upload.svg" /> + </div> + <div class="folder-upload-text"> + Drag & Drop file + </div> + <div class="folder-upload-text">or + <button type="button" + class="btn btn-sm btn-primary" + (click)="openFileSelector()">Browse + Files + </button> + </div> + <div class="folder-upload-type"> + Allowed file + type: json</div> + </ng-template> + </ngx-file-drop> + <div class="upload-table"> + <table class="table"> + <thead> + <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> + </div> + </div> + </div> + <div class="row"> + <div class="col text-center"> + <button type="button" + class="btn submit mt-4">Import</button> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i class="fa fa-play-circle"></i> Deploy </button> 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 159f7aec4..1ecf2985e 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 @@ -116,8 +116,7 @@ <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal" type="button">Cancel </button> - <button (click)="setFilesToStore()" [disabled]="uploadedFiles?.length<=0" class="btn btn-sm btn-primary" - data-dismiss="modal" type="button"> + <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button"> Import </button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css index 7273b9c27..3a0d9461c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css @@ -1,4 +1,9 @@ .accordian-title { color: #a09e9e; font-size: .9em; +} + +.mapping-source-load { + background-color: white; + border: 0 }
\ No newline at end of file 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 e6149c883..4f9b2709a 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,8 @@ </label> <div class="label-input"> - <input type="input" [(ngModel)]="fileName" placeholder="Template name"> + <input type="input" [(ngModel)]="fileName" placeholder="Template name" name="templateName" autofocus + [autofocus]="true"> </div> </div> </div> @@ -79,11 +80,13 @@ <div class="card-body"> <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"> + <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)" + (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0 + ?'hover-enable':'hover-disable'"> <i class="icon-use-attributes"></i> <br /> <span>Use Current Template Instance</span> - </a> + </button> <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal" class="mapping-source-load"> <i class="icon-upload-attributes"></i> @@ -199,8 +202,9 @@ </div> <div class="template-mapping-action"> - <button (click)="cancel()" class="btn btn-outline-secondary">Cancel</button> - <button (click)="saveToStore()" class="btn btn-primary">Submit</button> + <button (click)="cancel()" [disabled]="fileName?.length <=0" + class="btn btn-outline-secondary">Cancel</button> + <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Submit</button> </div> </div> </div> @@ -253,8 +257,9 @@ <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" (click)="resetTheUploadedFiles()">Cancel </button> - <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" - (click)="uploadFile();openListView()"> + + <button (click)="uploadFile();openListView()" class="btn btn-sm btn-primary" data-dismiss="modal" + type="button"> Import </button> </div> 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 7d4705d69..4601880f8 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 @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../../package-creation.store'; import { TemplateInfo, TemplateStore } from '../../template.store'; @@ -17,14 +17,14 @@ import { ToastrService } from 'ngx-toastr'; }) export class TemplMappCreationComponent implements OnInit, OnDestroy { @Output() showListViewParent = new EventEmitter<any>(); - + @Output() openList = new EventEmitter<any>(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); private jsonConvert = new JsonConvert(); public files: NgxFileDropEntry[] = []; fileName: any; templateInfo = new TemplateInfo(); - private variables: string[] = []; + variables: string[] = []; dtOptions: DataTables.Settings = {}; // We use this trigger because fetching the list of persons can be quite long, // thus we ensure the data is fetched before rendering @@ -44,8 +44,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { currentTemplate: any; currentMapping: any; - - constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, @@ -56,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { ngOnInit() { this.templateStore.state$.subscribe(templateInfo => { + // init Template&mapping vars console.log('----------'); console.log(templateInfo); this.templateInfo = templateInfo; @@ -63,21 +62,29 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { if (this.fileName) { this.fileName = this.fileName.split('-')[0]; } - if (templateInfo.type === 'mapping') { + if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { this.mappingRes = templateInfo.mapping; - this.currentMapping = templateInfo; + this.currentMapping = Object.assign({}, templateInfo); this.resourceDictionaryRes = []; this.resTableDtTrigger.next(); } else { + this.mappingRes = []; + this.currentMapping = Any; + } + this.templateFileContent = templateInfo.fileContent; + this.currentTemplate = Object.assign({}, templateInfo); - this.templateFileContent = templateInfo.fileContent; - this.currentTemplate = templateInfo; + if (templateInfo.type === 'template' || templateInfo.type.includes('template')) { + this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl'; + } else { + this.currentTemplate = Any; } + }); this.dtOptions = { pagingType: 'full_numbers', - pageLength: 10, + pageLength: 25, destroy: true, retrieve: true, }; @@ -211,7 +218,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.showListViewParent.emit('tell parent to open create views'); } + closeCreationForm() { + this.openList.emit('close create form and open list'); + } + getMappingTableFromTemplate(e) { + console.log('-' + this.templateFileContent + '-'); this.resourceDictionaryRes = []; if (e) { e.preventDefault(); @@ -219,10 +231,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { if (this.variables && this.variables.length > 0) { console.log('base'); this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => { + let message = 'Attributes are Fetched'; this.mappingRes = []; this.resourceDictionaryRes = res; console.log(this.resourceDictionaryRes); this.rerender(); + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) { + message = 'No values for those attributes'; + } + this.toastr.success(message, 'Success'); + }, err => { + this.toastr.error('Error'); }); } } @@ -261,6 +280,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } this.fileName = ''; this.toastr.success('File is created', 'success'); + this.closeCreationForm(); } else { console.log('this file already exist'); this.toastr.error('File name already exist', 'Error'); 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 a47963a72..8c92f0dc2 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 @@ -1,9 +1,9 @@ -<a *ngIf="isCreate" (click)="openCreationView()" class="create-template-mapping-button"> +<a (click)="openCreationView()" class="create-template-mapping-button"> <i class="fa fa-plus"></i> <span>Create</span> </a> -<div class="template-mapping-accordion"> +<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0"> <div class="accordion" id="listAccordion"> <div class="card"> <div class="card-header" id="headingThree"> @@ -21,7 +21,8 @@ <div class="row"> <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">--> <div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)"> - <a (click)="setSourceCodeEditor(file)" class="template-mapping-list" [ngClass]="{'active':currentFile == file}">{{file}} + <a (click)="setSourceCodeEditor(file)" class="template-mapping-list" + [ngClass]="{'active':currentFile == file}">{{file}} <span *ngIf="getValue(file).isMapping">Mapping</span> <span *ngIf="getValue(file).isTemplate">Template</span> </a> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 448899019..ed9f3eeb3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -13,6 +13,7 @@ import { ActivatedRoute } from '@angular/router'; }) export class TemplMappListingComponent implements OnInit { @Output() showCreationViewParentNotification = new EventEmitter<any>(); + @Output() showFullView = new EventEmitter<any>(); private templateAndMappingMap = new Map<string, TemplateAndMapping>(); private templates: Template; private mapping: Mapping; @@ -71,6 +72,9 @@ export class TemplMappListingComponent implements OnInit { openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); } + FullView() { + this.showFullView.emit('show full view'); + } setSourceCodeEditor(key: string) { this.currentFile = key; @@ -80,23 +84,23 @@ export class TemplMappListingComponent implements OnInit { console.log(cba); console.log(key); console.log(this.templateAndMappingMap); + const templateInfo = new TemplateInfo(); if (cba.templates && cba.templates.files.has(templateKey)) { const fileContent = cba.templates.getValue(templateKey.trim()); console.log(fileContent); - const templateInfo = new TemplateInfo(); templateInfo.fileContent = fileContent; templateInfo.fileName = templateKey; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type = 'template'; } const mappingKey = 'Templates/' + key + '-mapping.json'; if (cba.mapping && cba.mapping.files.has(mappingKey)) { const obj = JSON.parse(cba.mapping.getValue(mappingKey)); - const templateInfo = new TemplateInfo(); templateInfo.mapping = obj; templateInfo.fileName = mappingKey; - templateInfo.type = 'mapping'; - this.templateStore.changeTemplateInfo(templateInfo); + templateInfo.type += 'mapping'; } + this.templateStore.changeTemplateInfo(templateInfo); + this.FullView(); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html index f8cfe7a6a..8fd97d71d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html @@ -1,9 +1,9 @@ <div *ngIf="!listView"> - <app-templ-mapp-listing - (showCreationViewParentNotification)="openCreationView($event)"> + <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)" (showFullView)="openListView($event)"> </app-templ-mapp-listing> </div> <div *ngIf="!creationView"> - <app-templ-mapp-creation (showListViewParent)="openListView($event)"></app-templ-mapp-creation> -</div> + <app-templ-mapp-creation (showListViewParent)="openListView($event)" (openList)="closeCreationView()"> + </app-templ-mapp-creation> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts index 106765834..d2e25ef6f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts @@ -8,8 +8,8 @@ import { PackageCreationStore } from '../package-creation.store'; styleUrls: ['./template-mapping.component.css'] }) export class TemplateMappingComponent implements OnInit { - creationView = true; - listView = false; + creationView = false; + listView = true; constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) { } @@ -17,7 +17,7 @@ export class TemplateMappingComponent implements OnInit { ngOnInit() { if (this.route.snapshot.paramMap.has('id')) { console.log('Edit mode'); - this.creationView = false; + this.creationView = true; this.listView = false; } else { console.log('Create mode'); @@ -34,4 +34,9 @@ export class TemplateMappingComponent implements OnInit { this.creationView = false; } + closeCreationView() { + this.creationView = true; + this.listView = false; + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts index 2332d8e53..8275f8c6c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts @@ -37,10 +37,12 @@ export class PackagesApiService { } getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> { + const sortType = sortBy.includes('DATE') ? 'DESC' : 'ASC'; return this.api.get(BlueprintURLs.getPagedBlueprints, { offset: pageNumber, limit: pageSize, - sort: sortBy + sort: sortBy, + sortType }); } @@ -56,11 +58,12 @@ export class PackagesApiService { } getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) { - + const sortType = sortBy.includes('DATE') ? 'DESC' : 'ASC'; return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, { offset: pageNumber, limit: pageSize, - sort: sortBy + sort: sortBy, + sortType }); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 9db3ce110..c2bfd9779 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -3,7 +3,7 @@ <!--Add Package Card--> <div class="card addPaackage-card"> <div class="card-body text-center"> - <img src="/assets/img/icon-addPackage.svg" width="40%"> + <img src="/assets/img/icon-addPackage.svg" width="30%"> </div> <div class="card-footer row"> <div class="col text-center"> @@ -12,7 +12,7 @@ Package </a> <br /> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i + <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i class="icon-import-blue" aria-hidden="true"></i>Import Package </a> </div> |