diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
28 files changed, 928 insertions, 145 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..a549d54a2 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 @@ -8,7 +8,7 @@ <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> + <li>{{viewedPackage.artifactName}}</li> </ul> </h2> <div class="col"> @@ -107,9 +107,547 @@ </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: 480px"> + <!--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 class="row"> + <div class="col text-center"> + <button class="btn skip-btn">Skip to Designer Canvas</button> + </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" (click)="goToDesignerMode(viewedPackage.id)" 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" (click)="goToDesignerMode(viewedPackage.id)" + 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/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 6de76f949..0578b10f8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -206,7 +206,7 @@ export class ConfigurationDashboardComponent implements OnInit { this.router.navigate(['/packages']); } - goToDesignerMode() { - this.router.navigate(['/packages/designer']); - } + goToDesignerMode(id) { + this.router.navigate(['/packages/designer', id]); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 6e072b18d..3e3528c00 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -10,7 +10,7 @@ </li> <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> - <a href="#">Package Name</a> + <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> @@ -102,7 +102,7 @@ <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> - <button [routerLink]="['/designer/source']" type="button" + <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" class="btn btn-secondary topologyView">Scripting</button> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 5adce7ea0..fa3a99b49 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2019 Orange. All rights reserved. =================================================================== +Modification Copyright (c) 2020 IBM +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -34,6 +36,9 @@ import { FunctionsStore } from './functions.store'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { ActivatedRoute } from '@angular/router'; +import { DesignerService } from './designer.service'; @Component({ @@ -46,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private attributesSideBar: boolean; + viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -58,7 +64,9 @@ export class DesignerComponent implements OnInit, OnDestroy { constructor(private designerStore: DesignerStore, private functionStore: FunctionsStore, private graphUtil: GraphUtil, - private graphGenerator: GraphGenerator) { + private graphGenerator: GraphGenerator, + private route: ActivatedRoute, + private designerService: DesignerService) { this.controllerSideBar = true; this.attributesSideBar = false; @@ -88,6 +96,14 @@ export class DesignerComponent implements OnInit, OnDestroy { this.initializePalette(); this.stencilPaperEventListeners(); + const id = this.route.snapshot.paramMap.get('id'); + this.designerService.getPagedPackages(id).subscribe( + (bluePrintDetailModels) => { + if (bluePrintDetailModels) { + this.viewedPackage = bluePrintDetailModels[0]; + } + }); + /** * the code to retrieve from server is commented */ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts index aa3a6a668..771c44ba8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2019 Orange. All rights reserved. =================================================================== +Modification Copyright (c) 2020 IBM +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -22,8 +24,9 @@ limitations under the License. import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.typed.service'; -import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; +import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants'; import {ModelType} from './model/ModelType.model'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @Injectable({ @@ -31,11 +34,20 @@ import {ModelType} from './model/ModelType.model'; }) export class DesignerService { - constructor(private api: ApiService<ModelType>) { + constructor(private api: ApiService<ModelType>, + private api2: ApiService<BluePrintDetailModel>) { } getFunctions(modelDefinitionType: string): Observable<ModelType[]> { return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType); } + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + return this.api2.getOne(BlueprintURLs.getOneBlueprint + '/' + id); + } + + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html index 2a558517c..05f6eeb5a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html @@ -8,7 +8,7 @@ <a href="#">CBA Packages</a> </li> <li class="breadcrumb-item"> - <a href="#">Package Name</a> + <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> </li> <li class="breadcrumb-item active" aria-current="page"> <p class="mb-0">Topology View</p> @@ -56,7 +56,7 @@ </header> <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> - <button (click)="convertAndOpenInDesingerView()" type="button" class="btn btn-secondary topologySource">Designer</button> + <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button" class="btn btn-secondary topologySource">Designer</button> <button type="button" class="btn btn-secondary topologyView active">Scripting</button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts index 34194e42f..e70d98d04 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts @@ -1,8 +1,11 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { DesignerStore } from '../designer.store'; import { PackageCreationUtils } from '../../package-creation/package-creation.utils'; -import { RouterLink, Router } from '@angular/router'; +import { RouterLink, Router, ActivatedRoute } from '@angular/router'; import { Subject } from 'rxjs'; +import { BluePrintDetailModel } from '../../model/BluePrint.detail.model'; +import { viewClassName } from '@angular/compiler'; +import { SourceViewService } from './source-view.service'; @Component({ selector: 'app-designer-source-view', @@ -15,10 +18,13 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { lang = 'json'; private controllerSideBar: boolean; private ngUnsubscribe = new Subject(); + viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); constructor(private store: DesignerStore, private packageCreationUtils: PackageCreationUtils, - private router: Router) { + private router: Router, + private route: ActivatedRoute, + private sourceViewService: SourceViewService) { this.controllerSideBar = true; } @@ -29,13 +35,20 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { this.content = this.packageCreationUtils.transformToJson(state.template); }); + const id = this.route.snapshot.paramMap.get('id'); + this.sourceViewService.getPagedPackages(id).subscribe( + (bluePrintDetailModels) => { + if (bluePrintDetailModels) { + this.viewedPackage = bluePrintDetailModels[0]; + } + }); } - convertAndOpenInDesingerView() { + convertAndOpenInDesingerView(id) { // TODO validate json against scheme console.log('convertAndOpenInDesingerView ...', this.content); this.store.saveSourceContent(this.content); - this.router.navigateByUrl('/packages/designer'); + this.router.navigate(['/packages/designer', id]); } ngOnDestroy() { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts new file mode 100644 index 000000000..758952221 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts @@ -0,0 +1,26 @@ +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import { ApiService } from 'src/app/common/core/services/api.typed.service'; +import { BluePrintDetailModel } from '../../model/BluePrint.detail.model'; +import { ModelType } from '../model/ModelType.model'; +import { ResourceDictionaryURLs, BlueprintURLs } from 'src/app/common/constants/app-constants'; + + + +@Injectable({ + providedIn: 'root' +}) +export class SourceViewService { + + constructor(private api1: ApiService<BluePrintDetailModel>) { + } + + + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + return this.api1.getOne(BlueprintURLs.getOneBlueprint + '/' + id); + } + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } + +} 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 ac02c50e2..d487de3d1 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 @@ -36,38 +36,39 @@ <div class="card"> <div class="card-header" [id]="'head-'+mapIndex"> <h5 class="mb-0 d-flex justify-content-between"> - <button class="btn btn-link " data-toggle="collapse" - aria-expanded="false" - (click)="changeDivShow(mapIndex)" > + <button class="btn btn-link " data-toggle="collapse" aria-expanded="false" + (click)="changeDivShow(mapIndex)"> <i class="icon-file-code"></i> {{file.key}} </button> - - <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> + + <a data-toggle="modal" (click)="initDelete(file)" 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>{{fileToDelete?.key?.split('/')[1]}}</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" + data-dismiss="modal">Cancel</button> + <button type="button" data-dismiss="modal" (click)="removeFile()" + class="btn btn-primary">Delete</button> + </div> </div> </div> </div> - </div> </h5> </div> <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" @@ -153,7 +154,8 @@ <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)="setFilesToStore()"> + <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" (click)="setFilesToStore()"> Import </button> </div> 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 35c0918de..9858fd580 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 @@ -1,7 +1,7 @@ -import {Component, OnInit} from '@angular/core'; -import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; -import {PackageCreationStore} from '../package-creation.store'; -import {PackageCreationUtils} from '../package-creation.utils'; +import { Component, OnInit } from '@angular/core'; +import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; +import { PackageCreationStore } from '../package-creation.store'; +import { PackageCreationUtils } from '../package-creation.utils'; @Component({ @@ -14,7 +14,7 @@ export class ImportsTabComponent implements OnInit { public definitionFiles: Map<string, string> = new Map<string, string>(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); - + fileToDelete: any = {}; public files: NgxFileDropEntry[] = []; constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { @@ -40,11 +40,21 @@ export class ImportsTabComponent implements OnInit { } } } - - removeFile(fileIndex: number) { - const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; + initDelete(file) { + console.log(file); + this.fileToDelete = file; + } + removeFile() { + const filename = this.fileToDelete.key; this.packageCreationStore.removeFileFromDefinition(filename); - this.uploadedFiles.splice(fileIndex, 1); + + for (let i = 0; i < this.uploadedFiles.length; i++) { + console.log(this.uploadedFiles[i]); + if (this.uploadedFiles[i].name === filename) { + this.uploadedFiles.splice(i, 1); + break; + } + } } public fileOver(event) { 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 6622f6700..50d9eea08 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 @@ -50,7 +50,7 @@ <div class="model-note-container error-message">{{errorMessage}}</div> </div> <div class="single-line-model"> - <label class="label-name">Description</label> + <label class="label-name">Description <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> </div> 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 ee4368711..baf6ea9e3 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 @@ -20,7 +20,7 @@ <div class="container-fluid body-container"> <div class="container"> <div class="creat-action-container"> - <a href="#" class="action-button save" (click)="saveBluePrint()"> + <a class="action-button save" (click)="saveBluePrint()"> <i class="icon-save-sm" aria-hidden="true"></i> <span>Save</span> </a> @@ -106,4 +106,4 @@ </div> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts index 0808223cd..8302697fe 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts @@ -84,6 +84,10 @@ export class PackageCreationStore extends Store<CBAPackage> { this.state.scripts.files.delete(name); } + fileExist(key: string) { + return this.state.templates.files.has(key); + } + removeFileFromDefinition(filename) { this.state.definitions.imports.delete(filename); } 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 79c444061..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 @@ -20,12 +20,12 @@ <div class="card"> <div [id]="'head-script-'+mapIndex" class="card-header"> <h5 class="mb-0 d-flex justify-content-between"> - <button (click)="changeDivShow(mapIndex)" - aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse"> + <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed" + data-toggle="collapse"> <i class="icon-file-code"></i> {{file.key}} </button> - <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i - class="icon-delete-sm"></i></a> + <a data-toggle="modal" (click)="initDelete(file)" 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 --> @@ -40,12 +40,14 @@ </button> </div> <div class="modal-body"> - <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p> + <p>Are you sure you want to delete script file + <span>{{fileToDelete?.key?.split('/')[2]}}</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> + <button type="button" (click)="removeFile(fileToDelete?.key,0)" + data-dismiss="modal" class="btn btn-primary">Delete</button> </div> </div> </div> @@ -120,4 +122,4 @@ </div> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index efe28e9a4..a85ccf146 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -3,6 +3,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../package-creation.store'; import 'ace-builds/src-noconflict/ace'; import 'ace-builds/webpack-resolver'; +declare var $: any; @Component({ selector: 'app-scripts-tab', @@ -15,6 +16,7 @@ export class ScriptsTabComponent implements OnInit { public uploadedFiles: FileSystemFileEntry[] = []; public files: NgxFileDropEntry[] = []; private fileNames: Set<string> = new Set(); + fileToDelete: any = {}; constructor( private packageCreationStore: PackageCreationStore, @@ -42,7 +44,9 @@ export class ScriptsTabComponent implements OnInit { } } } - + initDelete(file) { + this.fileToDelete = file; + } removeFile(filePath: string, FileIndex: number) { const filename = filePath.split('/')[2] || ''; // const filename = 'Scripts/' + this.getFileType(this.uploadedFiles[fileIndex].name) + '/' + this.uploadedFiles[fileIndex].name; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts new file mode 100644 index 000000000..f2b73016c --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; + +import { Observable, of, BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + + // based on edit Mode, edit=false + mode = new BehaviorSubject(false); + constructor() { + } + + isEdit(): Observable<boolean> { + return this.mode.asObservable(); + } + enableEdit() { + this.mode.next(true); + } + disableEdit() { + this.mode.next(false); + } + +} 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 e69de29bb..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 @@ -0,0 +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 16c3101f2..164f0ac73 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 @@ -1,4 +1,13 @@ -<h6 class="create-title">CREATE</h6> + +<div class="row template-mapping-action"> + <div class="col"> + <h6 class="create-title">Create Template</h6> + </div> + <div class="col text-right"> + <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">Finish</button> + </div> +</div> <div class="card creat-card"> <div class="single-line-model"> <label class="label-name">Name @@ -6,19 +15,20 @@ </label> <div class="label-input"> - <input type="input" [(ngModel)]="fileName" placeholder="Template name"> + <input type="input" [disabled]="edit" [(ngModel)]="fileName" placeholder="Template name" name="templateName" + autofocus [autofocus]="true"> </div> </div> </div> <div class="template-mapping-accordion"> - <div id="accordion"> + <div class="accordion" id="accordion"> <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"> - 1. Create Template + 1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span> </button> </h5> @@ -70,7 +80,8 @@ <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> - 2. Manage Mapping + 2. Manage Mapping <span + class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span> </button> </h5> </div> @@ -78,11 +89,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> @@ -119,8 +132,10 @@ <tbody> <tr *ngFor="let dict of resourceDictionaryRes"> <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.definition?.property?.required" + src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict.definition?.property?.required" + src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict.name }}</td> <td>{{ dict.name }}</td> @@ -166,8 +181,10 @@ <tbody> <tr *ngFor="let dict of mappingRes"> <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.definition?.property?.required" + src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict.definition?.property?.required" + src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict['name'] }}</td> <td>{{ dict['name'] }}</td> @@ -193,10 +210,7 @@ </div> - <div class="template-mapping-action"> - <button class="btn btn-outline-secondary">Cancel</button> - <button (click)="saveToStore()" class="btn btn-primary">Submit</button> - </div> + </div> </div> @@ -212,8 +226,8 @@ </button> </div> <div class="modal-body"> - <ngx-file-drop [multiple]="false" [accept]="allowedExt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> + <ngx-file-drop [multiple]="false" [accept]="allowedExt" 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" /> @@ -248,8 +262,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 628d963ce..5129b38d9 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'; @@ -7,7 +7,10 @@ import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.mode import { DataTableDirective } from 'angular-datatables'; import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.model'; import { PackageCreationUtils } from '../../package-creation.utils'; -import { JsonConvert } from 'json2typescript'; +import { JsonConvert, Any } from 'json2typescript'; +import { ToastrService } from 'ngx-toastr'; +import { Router, ActivatedRoute } from '@angular/router'; +import { SharedService } from '../shared-service'; @Component({ selector: 'app-templ-mapp-creation', @@ -16,14 +19,14 @@ import { JsonConvert } from 'json2typescript'; }) 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 @@ -40,35 +43,74 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { dependancies = new Map<string, Array<string>>(); dependanciesSource = new Map<string, string>(); mappingRes = []; - - + currentTemplate: any; + currentMapping: any; + edit = false; constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, - private packageCreationUtils: PackageCreationUtils + private packageCreationUtils: PackageCreationUtils, + private toastr: ToastrService, + private router: ActivatedRoute, + private sharedService: SharedService ) { } ngOnInit() { + if (this.router.snapshot.paramMap.has('id')) { + console.log('URL contains Id'); + this.sharedService.enableEdit(); + } + this.templateStore.state$.subscribe(templateInfo => { - console.log('----------'); + // init Template&mapping vars + console.log('Oninit'); console.log(templateInfo); this.templateInfo = templateInfo; this.fileName = templateInfo.fileName.split('/')[1]; - if (templateInfo.type === 'mapping') { + if (this.fileName) { + this.fileName = this.fileName.split('-')[0]; + } + if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { this.mappingRes = templateInfo.mapping; + 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); + + if (templateInfo.type === 'template' || templateInfo.type.includes('template')) { + this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl'; + } else { + this.currentTemplate = Any; + } + + }); + + this.sharedService.isEdit().subscribe(res => { + console.log('------------------------'); + console.log(res); + this.edit = res; - this.templateFileContent = templateInfo.fileContent; + if (!this.edit) { + console.log('remove ----'); + this.currentMapping = {}; + this.currentTemplate = {}; + this.fileName = ''; + this.templateFileContent = ''; + this.resourceDictionaryRes = []; + this.mappingRes = []; } }); this.dtOptions = { pagingType: 'full_numbers', - pageLength: 10, + pageLength: 25, destroy: true, retrieve: true, }; @@ -202,7 +244,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(); @@ -210,10 +257,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'); }); } } @@ -224,28 +278,50 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } return map.key; } + cancel() { + this.fileName = ''; + this.templateFileContent = ''; + this.resourceDictionaryRes = []; + this.mappingRes = []; + this.currentMapping = {}; + this.currentTemplate = {}; + this.closeCreationForm(); + } saveToStore() { - console.log(this.dependancies); - console.log(this.dependanciesSource); if (this.fileName) { - // Save Mapping to Store - if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { - const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); - this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', - this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); - this.resourceDictionaryRes = []; - } - // Save Template to store - if (this.templateFileContent) { - this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(), - this.templateFileContent); - this.templateFileContent = ''; + // check file duplication + console.log('----------- mode ' + this.edit); + if ( + (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json') + || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) + || this.edit + ) { + // Save Mapping to Store + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { + const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); + this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', + this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); + this.resourceDictionaryRes = []; + } + // Save Template to store + if (this.templateFileContent) { + this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(), + this.templateFileContent); + this.templateFileContent = ''; + } + 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'); } } else { - + this.toastr.error('Add the file name', 'Error'); } } + selectSource(dict, e) { const source = e.target.value; let keyDepend = null; 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 f5e683f28..6ae5c1122 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,10 +1,10 @@ -<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 id="accordion"> +<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0"> + <div class="accordion" id="listAccordion"> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0 d-flex justify-content-between"> @@ -16,15 +16,20 @@ </h5> </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> + <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#listAccordion"> <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" *ngFor="let file of getKeys(templateAndMappingMap)"> - <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{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> + <button type="button" class="deleteTemplate" title="Delete Template"> + <i class="icon-delete-sm"></i> + </button> </a> + </div> </div> </div> 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 372fbca03..338c8f7cd 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 @@ -4,6 +4,7 @@ import { Mapping, Template } from '../../mapping-models/CBAPacakge.model'; import { TemplateInfo, TemplateStore } from '../../template.store'; import { TemplateAndMapping } from '../TemplateAndMapping'; import { ActivatedRoute } from '@angular/router'; +import { SharedService } from '../shared-service'; @Component({ @@ -13,21 +14,29 @@ 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; isCreate = true; + currentFile: string; + edit = false; constructor( private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore, - private route: ActivatedRoute + private route: ActivatedRoute, + private sharedService: SharedService ) { } ngOnInit() { if (this.route.snapshot.paramMap.has('id')) { this.isCreate = false; + this.sharedService.isEdit().subscribe(res => { + this.edit = res; + }); + } this.packageCreationStore.state$.subscribe(cba => { if (cba.templates) { @@ -69,32 +78,40 @@ export class TemplMappListingComponent implements OnInit { openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); + console.log('disable edit mode'); + this.sharedService.disableEdit(); + + } + FullView() { + this.showFullView.emit('show full view'); } setSourceCodeEditor(key: string) { + this.currentFile = key; const templateKey = 'Templates/' + key + '-template.vtl'; this.packageCreationStore.state$.subscribe(cba => { console.log('cba ------'); 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(); + this.sharedService.enableEdit(); }); } 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..80df7c637 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,10 @@ <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> +<div [hidden]="creationView"> + <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/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 07c192d2c..c65d08e77 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,6 +1,6 @@ <div class="dropdown packagesFilter w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Filter By Tags {{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div> + <div class="dropdown-text">Filter By Tags <span class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div> <ul class="dropdown-content w-100"> <li> <div class="form-group"> 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..9c789941d 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> @@ -30,7 +30,7 @@ <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> --> <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom"> {{bluePrint.artifactName}}</p> - <span class="package-version">{{bluePrint.artifactVersion}}</span> + <span class="package-version">version {{bluePrint.artifactVersion}}</span> </a> </div> @@ -107,15 +107,16 @@ </div> <div class="card-footer"> <div class="row"> + + <div class="col"> + <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i + class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> + </div> <div class="col"> <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode </button> </div> - <div class="col"> - <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i - class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> - </div> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts index 49f91316b..c242b7e72 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts @@ -1,6 +1,5 @@ -import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {PackagesStore} from '../../packages.store'; -import {map} from 'rxjs/operators'; @Component({ selector: 'app-package-pagination', @@ -18,7 +17,7 @@ export class PackagePaginationComponent implements OnInit { this.packagesStore.state$ .subscribe(state => { - this.pageNumber = state.currentPage; + this.pageNumber = state.currentPage + 1; this.totalCount = state.totalPackages; }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts index ad06cf15f..f357bc167 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -12,10 +12,10 @@ const routes: Routes = [ path: '', component: PackagesDashboardComponent }, - {path: 'designer', component: DesignerComponent}, - { path: 'designer/source', component: DesignerSourceViewComponent }, + {path: 'designer/:id', component: DesignerComponent}, + {path: 'designer/source/:id', component: DesignerSourceViewComponent}, {path: 'package/:id', component: ConfigurationDashboardComponent}, - {path: 'createPackage', component: PackageCreationComponent}, + {path: 'createPackage', component: PackageCreationComponent} ]; @NgModule({ |