diff options
Diffstat (limited to 'cds-ui/designer-client/src')
25 files changed, 465 insertions, 379 deletions
diff --git a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts index d4851ded5..b73d48ed9 100644 --- a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts +++ b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts @@ -22,9 +22,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Injectable} from '@angular/core'; -import {HttpClient, HttpParams} from '@angular/common/http'; -import {Observable} from 'rxjs'; +import { Injectable } from '@angular/core'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { Observable } from 'rxjs'; @Injectable() export class ApiService<T> { @@ -40,7 +40,7 @@ export class ApiService<T> { httpParams = httpParams.append(key, params[key]); } } - const options = {params: httpParams}; + const options = { params: httpParams }; return this.httpClient.get<T[]>(url, options); } @@ -49,6 +49,11 @@ export class ApiService<T> { return this.httpClient.post(url, body, options); } + delete(url: string, body: any | null): Observable<any> { + + return this.httpClient.delete(url, body); + } + getOne(url: string, params?: {}): Observable<T> { console.log('params', params); let httpParams = new HttpParams(); @@ -57,7 +62,7 @@ export class ApiService<T> { httpParams = httpParams.append(key, params[key]); } } - const options = {params: httpParams}; + const options = { params: httpParams }; return this.httpClient.get<T>(url, options); } 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 bf6bf1251..8e2ae5dbb 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>{{viewedPackage.artifactName}}</li> + <li>{{viewedPackage.artifactName}}</li> </ul> </h2> <div class="col"> @@ -22,8 +22,8 @@ <div class="container"> <div class="creat-action-container"> - <a class="action-button save" (click)="editBluePrint()" > - <i class="icon-save-sm" aria-hidden="true" ></i> + <a class="action-button save" (click)="editBluePrint()"> + <i class="icon-save-sm" aria-hidden="true"></i> <span>Save</span> </a> <a href="#" class="action-button" (click)="goBacktoDashboard()"> @@ -43,12 +43,12 @@ </a> <a class="action-button" - (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> + (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> <i class="icon-download" aria-hidden="true"></i> <span>Download</span> </a> - <a class="action-button delete"> + <a data-target="#removePackageModal" data-toggle="modal" class="action-button"> <i class="icon-delete-sm" aria-hidden="true"></i> <span>Delete</span> </a> @@ -83,19 +83,19 @@ <ul class="package-contributers"> <li> <button type="button" class="border-fade" data-toggle="tooltip" - data-placement="bottom" title="User name"> + data-placement="bottom" title="User name"> <img src="/assets/img/img-user1.jpeg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user2.jpg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user3.jpg"> </button> </li> @@ -138,7 +138,8 @@ <div class="row"> <!--Custom Action--> <div class="col-3 d-flex"> - <a class="d-flex" data-target="#carouselExampleIndicators" + <a class="d-flex" + data-target="#carouselExampleIndicators" data-slide-to="1"> <div class="card actionType custom"> <div class="card-body"> @@ -155,7 +156,8 @@ </div> <!--Default Action--> <div class="col-3 d-flex"> - <a class="d-flex" data-target="#carouselExampleIndicators" + <a class="d-flex" + data-target="#carouselExampleIndicators" data-slide-to="2"> <div class="card actionType default"> <div class="card-body"> @@ -173,7 +175,8 @@ </div> <!--Recent Action--> <div class="col-3 d-flex"> - <a class="d-flex" data-target="#carouselExampleIndicators" + <a class="d-flex" + data-target="#carouselExampleIndicators" data-slide-to="3"> <div class="card actionType recent"> <div class="card-body"> @@ -192,7 +195,8 @@ </div> <!--Import Action--> <div class="col-3 d-flex"> - <a class="d-flex" data-target="#carouselExampleIndicators" + <a class="d-flex" + data-target="#carouselExampleIndicators" data-slide-to="4"> <div class="card actionType import"> <div class="card-body"> @@ -209,7 +213,9 @@ </div> <div class="row"> <div class="col text-center"> - <button class="btn skip-btn" (click)="goToDesignerMode(viewedPackage.id)">Skip to Designer Canvas</button> + <button class="btn skip-btn" + (click)="goToDesignerMode(viewedPackage.id)">Skip + to Designer Canvas</button> </div> </div> </div> @@ -220,9 +226,12 @@ class="icon-action-back"></i></button> <h1>Create Custom Action</h1> <div class="form-group text-center"> - <input type="text" [(ngModel)]="customActionName" class="form-control customAction" + <input type="text" [(ngModel)]="customActionName" + class="form-control customAction" placeholder="Type Action Name" autofocus> - <button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button> + <button type="button" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start</button> </div> </div> @@ -392,7 +401,8 @@ <div class="row"> <div class="col text-center"> <p class="selectedActions">0 selected</p> - <button type="button" (click)="goToDesignerMode(viewedPackage.id)" + <button type="button" + (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button> </div> </div> @@ -661,17 +671,17 @@ <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab" - href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" - autofocus #nameit (focusout)="saveMetaData()">METADATA</a> + href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" + autofocus #nameit (focusout)="saveMetaData()">METADATA</a> <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" - role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> + role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" - role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> + role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" - role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> + role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" - href="#nav-authentication" role="tab" aria-controls="nav-authentication" - aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + href="#nav-authentication" role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> </div> </div> @@ -680,24 +690,24 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab"> + aria-labelledby="nav-metadata-tab"> <app-metadata-tab></app-metadata-tab> </div> <div class="tab-pane fade" id="nav-template" role="tabpanel" - aria-labelledby="nav-template-tab"> + aria-labelledby="nav-template-tab"> <app-template-mapping></app-template-mapping> </div> <div class="tab-pane fade" id="nav-scripts" role="tabpanel" - aria-labelledby="nav-scripts-tab"> + aria-labelledby="nav-scripts-tab"> <app-scripts-tab></app-scripts-tab> </div> <div class="tab-pane fade" id="nav-imports" role="tabpanel" - aria-labelledby="nav-imports-tab"> + aria-labelledby="nav-imports-tab"> <app-imports-tab></app-imports-tab> </div> <div class="tab-pane fade" id="nav-authentication" role="tabpanel" - aria-labelledby="nav-authentication-tab"> + aria-labelledby="nav-authentication-tab"> <div class="card creat-card"> <div class="editor-container"> <app-dsl-definitions-tab></app-dsl-definitions-tab> @@ -711,3 +721,27 @@ </div> </div> </div> + + +<!-- Delete Modal --> +<div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete this package?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" (click)="deletePackage()" data-dismiss="modal" + class="btn btn-primary">Delete</button> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 471b25383..0e1d4cd11 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 @@ -1,20 +1,21 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; -import {PackageCreationStore} from '../package-creation/package-creation.store'; -import {FilesContent, FolderNodeElement, MetaDataTabModel} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; -import {MetadataTabComponent} from '../package-creation/metadata-tab/metadata-tab.component'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { PackageCreationStore } from '../package-creation/package-creation.store'; +import { FilesContent, FolderNodeElement, MetaDataTabModel } from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import { MetadataTabComponent } from '../package-creation/metadata-tab/metadata-tab.component'; import * as JSZip from 'jszip'; -import {ConfigurationDashboardService} from './configuration-dashboard.service'; -import {VlbDefinition} from '../package-creation/mapping-models/definitions/VlbDefinition'; -import {DslDefinition} from '../package-creation/mapping-models/CBAPacakge.model'; -import {PackageCreationUtils} from '../package-creation/package-creation.utils'; -import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; -import {saveAs} from 'file-saver'; -import {DesignerStore} from '../designer/designer.store'; -import {DesignerService} from '../designer/designer.service'; -import {ToastrService} from 'ngx-toastr'; +import { ConfigurationDashboardService } from './configuration-dashboard.service'; +import { VlbDefinition } from '../package-creation/mapping-models/definitions/VlbDefinition'; +import { DslDefinition } from '../package-creation/mapping-models/CBAPacakge.model'; +import { PackageCreationUtils } from '../package-creation/package-creation.utils'; +import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder'; +import { saveAs } from 'file-saver'; +import { DesignerStore } from '../designer/designer.store'; +import { DesignerService } from '../designer/designer.service'; +import { ToastrService } from 'ngx-toastr'; +import { NgxFileDropEntry } from 'ngx-file-drop'; @Component({ selector: 'app-configuration-dashboard', @@ -23,35 +24,37 @@ import {ToastrService} from 'ngx-toastr'; }) export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); - @ViewChild(MetadataTabComponent, {static: false}) - private metadataTabComponent: MetadataTabComponent; + @ViewChild(MetadataTabComponent, { static: false }) + metadataTabComponent: MetadataTabComponent; public customActionName = ''; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author', 'template_description']; - @ViewChild('nameit', {static: true}) - private elementRef: ElementRef; - - private zipFile: JSZip = new JSZip(); - private filesData: any = []; - private folder: FolderNodeElement = new FolderNodeElement(); - - private currentBlob = new Blob(); - - constructor(private route: ActivatedRoute, private configurationDashboardService: ConfigurationDashboardService, - private packageCreationStore: PackageCreationStore, - private packageCreationUtils: PackageCreationUtils, - private router: Router, - private designerStore: DesignerStore, - private designerService: DesignerService, - private toastService: ToastrService + @ViewChild('nameit', { static: true }) + elementRef: ElementRef; + uploadedFiles = []; + zipFile: JSZip = new JSZip(); + filesData: any = []; + folder: FolderNodeElement = new FolderNodeElement(); + id: any; + + currentBlob = new Blob(); + + constructor( + private route: ActivatedRoute, + private configurationDashboardService: ConfigurationDashboardService, + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router, + private designerStore: DesignerStore, + private toastService: ToastrService ) { } ngOnInit() { this.elementRef.nativeElement.focus(); - const id = this.route.snapshot.paramMap.get('id'); - this.configurationDashboardService.getPagedPackages(id).subscribe( + this.id = this.route.snapshot.paramMap.get('id'); + this.configurationDashboardService.getPagedPackages(this.id).subscribe( (bluePrintDetailModels) => { if (bluePrintDetailModels) { this.viewedPackage = bluePrintDetailModels[0]; @@ -59,45 +62,48 @@ export class ConfigurationDashboardComponent implements OnInit { this.packageCreationStore.clear(); } }); - } + if (this.route.snapshot.paramMap.has('id')) { + console.log('The id is equal to ' + this.route.snapshot.paramMap.get('id')); + } + } private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) { this.configurationDashboardService.downloadResource( bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); - this.currentBlob = blob; - this.zipFile.loadAsync(blob).then((zip) => { - Object.keys(zip.files).forEach((filename) => { - zip.files[filename].async('string').then((fileData) => { - if (fileData) { - if (filename.includes('Scripts/')) { - this.setScripts(filename, fileData); - } else if (filename.includes('Templates/')) { - if (filename.includes('-mapping.')) { - this.setMapping(filename, fileData); - } else if (filename.includes('-template.')) { - this.setTemplates(filename, fileData); + const blob = new Blob([response], { type: 'application/octet-stream' }); + this.currentBlob = blob; + this.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).forEach((filename) => { + zip.files[filename].async('string').then((fileData) => { + if (fileData) { + if (filename.includes('Scripts/')) { + this.setScripts(filename, fileData); + } else if (filename.includes('Templates/')) { + if (filename.includes('-mapping.')) { + this.setMapping(filename, fileData); + } else if (filename.includes('-template.')) { + this.setTemplates(filename, fileData); + } + + } else if (filename.includes('Definitions/')) { + this.setImports(filename, fileData, bluePrintDetailModels); + } else if (filename.includes('TOSCA-Metadata/')) { + const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); + this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]); } - - } else if (filename.includes('Definitions/')) { - this.setImports(filename, fileData, bluePrintDetailModels); - } else if (filename.includes('TOSCA-Metadata/')) { - const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); - this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]); } - } + }); }); }); }); - }); } - private setScripts(filename: string, fileData: any) { + setScripts(filename: string, fileData: any) { this.packageCreationStore.addScripts(filename, fileData); } - private setImports(filename: string, fileData: any, bluePrintDetailModels: BluePrintDetailModel) { + setImports(filename: string, fileData: any, bluePrintDetailModels: BluePrintDetailModel) { if (filename.includes(bluePrintDetailModels[0].artifactName)) { let definition = new VlbDefinition(); definition = fileData as VlbDefinition; @@ -121,11 +127,11 @@ export class ConfigurationDashboardComponent implements OnInit { } } - private setTemplates(filename: string, fileData: any) { + setTemplates(filename: string, fileData: any) { this.packageCreationStore.addTemplate(filename, fileData); } - private setMapping(fileName: string, fileData: string) { + setMapping(fileName: string, fileData: string) { this.packageCreationStore.addMapping(fileName, fileData); } @@ -143,7 +149,7 @@ export class ConfigurationDashboardComponent implements OnInit { }); } - private setMetaData(metaDataObject: MetaDataTabModel, bluePrintDetailModel: BluePrintDetailModel) { + setMetaData(metaDataObject: MetaDataTabModel, bluePrintDetailModel: BluePrintDetailModel) { metaDataObject.description = bluePrintDetailModel.artifactDescription; this.packageCreationStore.changeMetaData(metaDataObject); @@ -166,7 +172,7 @@ export class ConfigurationDashboardComponent implements OnInit { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationStore.saveBluePrint(blob).subscribe( bluePrintDetailModels => { @@ -182,7 +188,15 @@ export class ConfigurationDashboardComponent implements OnInit { }); } - + deletePackage() { + this.configurationDashboardService.deletePackage(this.id).subscribe(res => { + console.log('Deleted'); + console.log(res); + this.router.navigate(['/packages']); + }, err => { + console.log(err); + }); + } create() { this.zipFile = new JSZip(); FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => { @@ -198,7 +212,7 @@ export class ConfigurationDashboardComponent implements OnInit { downloadPackage(artifactName: string, artifactVersion: string) { this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + const blob = new Blob([response], { type: 'application/octet-stream' }); saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip'); }); } @@ -221,6 +235,17 @@ export class ConfigurationDashboardComponent implements OnInit { goToDesignerMode(id) { // this.designerService.setActionName(this.customActionName); - this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); + this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]); + } + + public dropped(files: NgxFileDropEntry[]) { + + } + public fileOver(event) { + console.log(event); + } + + public fileLeave(event) { + console.log(event); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts index 164d76601..c7f557121 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -1,8 +1,8 @@ -import {Injectable} from '@angular/core'; -import {ApiService} from '../../../../common/core/services/api.typed.service'; -import {BlueprintURLs} from '../../../../common/constants/app-constants'; -import {Observable} from 'rxjs'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import { Injectable } from '@angular/core'; +import { ApiService } from '../../../../common/core/services/api.typed.service'; +import { BlueprintURLs } from '../../../../common/constants/app-constants'; +import { Observable } from 'rxjs'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @Injectable({ @@ -22,10 +22,13 @@ export class ConfigurationDashboardService { } public downloadResource(path: string) { - return this.api.getCustomized(BlueprintURLs.download + path, {responseType: 'blob'}); + return this.api.getCustomized(BlueprintURLs.download + path, { responseType: 'blob' }); } deployPost(body: any | null): Observable<any> { - return this.api.post(BlueprintURLs.deploy, body, {responseType: 'text'}); + return this.api.post(BlueprintURLs.deploy, body, { responseType: 'text' }); + } + deletePackage(id: string) { + return this.api.delete(BlueprintURLs.getOneBlueprint + '/' + id, { observe: 'response' }); } } 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 e2a8d642b..9462caf68 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 @@ -49,8 +49,8 @@ import { isDefined } from '@angular/compiler/src/util'; }) export class DesignerComponent implements OnInit, OnDestroy { - private controllerSideBar: boolean; - private attributesSideBar: boolean; + controllerSideBar: boolean; + attributesSideBar: boolean; functionAttributeSidebar: boolean; viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); customActionName: string; @@ -62,31 +62,32 @@ export class DesignerComponent implements OnInit, OnDestroy { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; - private ngUnsubscribe = new Subject(); - private opt = { tx: 100, ty: 100 }; - - constructor(private designerStore: DesignerStore, - private functionStore: FunctionsStore, - private graphUtil: GraphUtil, - private graphGenerator: GraphGenerator, - private route: ActivatedRoute, - private designerService: DesignerService) { + ngUnsubscribe = new Subject(); + opt = { tx: 100, ty: 100 }; + + constructor( + private designerStore: DesignerStore, + private functionStore: FunctionsStore, + private graphUtil: GraphUtil, + private graphGenerator: GraphGenerator, + private route: ActivatedRoute, + private designerService: DesignerService) { this.controllerSideBar = true; this.attributesSideBar = false; this.showAction = false; this.functionAttributeSidebar = false; } - private _toggleSidebar1() { + _toggleSidebar1() { this.controllerSideBar = !this.controllerSideBar; if (this.controllerSideBar === false) { this.cl = 'editBar2'; - } + } if (this.controllerSideBar === true) { - this.cl = 'editBar'; - } + this.cl = 'editBar'; + } } - private _toggleSidebar2() { + _toggleSidebar2() { this.attributesSideBar = !this.attributesSideBar; } // private _toggleSidebar3() { @@ -164,7 +165,7 @@ export class DesignerComponent implements OnInit, OnDestroy { * auto arrange elements in graph * https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#layout.DirectedGraph */ - joint.layout.DirectedGraph.layout( this.boardGraph.getCells(), { + joint.layout.DirectedGraph.layout(this.boardGraph.getCells(), { dagre, graphlib, setLinkVertices: false, @@ -203,17 +204,17 @@ export class DesignerComponent implements OnInit, OnDestroy { console.log('initializeBoard...'); this.boardGraph = new joint.dia.Graph(); this.boardPaper = new joint.dia.Paper({ - el: $('#board-paper'), - model: this.boardGraph, - // height: 720, - // width: 1100, - gridSize: 10, - drawGrid: true, - // background: { - // color: 'rgba(0, 255, 0, 0.3)' - // }, - cellViewNamespace: joint.shapes - }); + el: $('#board-paper'), + model: this.boardGraph, + // height: 720, + // width: 1100, + gridSize: 10, + drawGrid: true, + // background: { + // color: 'rgba(0, 255, 0, 0.3)' + // }, + cellViewNamespace: joint.shapes + }); this.boardPaper.on('all', element => { // console.log(element); @@ -273,13 +274,13 @@ export class DesignerComponent implements OnInit, OnDestroy { $('body').append(` <div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;background-color: transparent !important;"></div>` - ); + ); const flyGraph = new joint.dia.Graph(); const flyPaper = new joint.dia.Paper({ - el: $('#flyPaper'), - model: flyGraph, - interactive: true - }); + el: $('#flyPaper'), + model: flyGraph, + interactive: true + }); const flyShape = draggedCell.model.clone(); const pos = draggedCell.model.position(); const offset = { @@ -312,15 +313,15 @@ export class DesignerComponent implements OnInit, OnDestroy { // step name is CDS realted terminology, please refer to tosca types const stepName = functionType; const functionElementForBoard = this.graphUtil.dropFunctionOverActionWithPosition( - stepName, functionType, - mouseupX, mouseupY, - target, offset, - this.boardGraph); + stepName, functionType, + mouseupX, mouseupY, + target, offset, + this.boardGraph); const parentCell = this.graphUtil.getParent(functionElementForBoard, this.boardPaper); if (parentCell && - parentCell.model.attributes.type === ActionElementTypeName && + parentCell.model.attributes.type === ActionElementTypeName && this.graphUtil.canEmpedMoreChildern(parentCell.model, this.boardGraph)) { if (this.graphUtil.isEmptyParent(parentCell.model)) { 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 a092e0c0f..69401928f 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 @@ -17,17 +17,18 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { content = ''; lang = 'json'; - private controllerSideBar: boolean; - private ngUnsubscribe = new Subject(); + controllerSideBar: boolean; + ngUnsubscribe = new Subject(); viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); public customActionName = ''; cl = 'editBar'; - constructor(private store: DesignerStore, - private packageCreationUtils: PackageCreationUtils, - private router: Router, - private route: ActivatedRoute, - private sourceViewService: SourceViewService) { + constructor( + private store: DesignerStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router, + private route: ActivatedRoute, + private sourceViewService: SourceViewService) { this.controllerSideBar = true; } private _toggleSidebar1() { @@ -60,7 +61,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { // TODO validate json against scheme console.log('convertAndOpenInDesingerView ...', this.content); this.store.saveSourceContent(this.content); - this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); + this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]); } ngOnDestroy() { 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 28f8938a7..9bd08b7cb 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 @@ -32,7 +32,7 @@ <div class="single-line-model"> <label class="label-name">Name <span>*</span></label> <div class="label-input"> - <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name" + <input type="input" [readOnly]="!packageNameAndVersionEnables" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.name" placeholder="Package name"> </div> <!--<div class="model-note-container error-message"> @@ -44,7 +44,7 @@ <div class="single-line-model"> <label class="label-name">Version <span>*</span></label> <div class="label-input"> - <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version" + <input type="input" [readOnly]="!packageNameAndVersionEnables" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" [pattern]="versionPattern" placeholder="Example: 1.0.0"> </div> <div class="model-note-container error-message">{{errorMessage}}</div> @@ -52,15 +52,14 @@ <div class="single-line-model"> <label class="label-name">Description <span>*</span></label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> + <input type="input" [(ngModel)]="metaDataTab.description" (change)="checkRequiredElements()" placeholder="Descripe the package"> </div> </div> <div class="single-line-model"> <label class="label-name">Tags</label> <div class="label-input"> - <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags" - placeholder="Ex., vDNS-CDS"> + <input type="input" (keyup.enter)="addTag($event)" placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Use ENTER to add tag</div> <div class="model-note-container tages-container"> @@ -75,7 +74,7 @@ <div class="card creat-card"> <div class="single-line customKeyTitle"> <h5 class="label-name w-100 "> - Custom key + Custom key </h5> <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index dd9f45bf4..c82ccc6b6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit } from '@angular/core'; -import { PackageCreationService } from '../package-creation.service'; -import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model'; -import { PackageCreationStore } from '../package-creation.store'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {PackageCreationService} from '../package-creation.service'; +import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationStore} from '../package-creation.store'; +import {ActivatedRoute} from '@angular/router'; @Component({ @@ -16,12 +16,12 @@ export class MetadataTabComponent implements OnInit { tags = new Set<string>(); customKeysMap = new Map(); modes: any[] = [ - { name: 'Designer Mode', style: 'mode-icon icon-topologyView-active' }]; + {name: 'Designer Mode', style: 'mode-icon icon-topologyView-active'}]; /* {name: 'Scripting Mode', style: 'mode-icon icon-topologySource'}, {name: 'Generic Script Mode', style: 'mode-icon icon-topologySource'}];*/ modeType = this.modes[0].name; - private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); - private errorMessage: string; + metaDataTab: MetaDataTabModel = new MetaDataTabModel(); + errorMessage: string; versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$'; constructor( @@ -104,8 +104,10 @@ export class MetadataTabComponent implements OnInit { this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { if (element) { this.errorMessage = 'Package name already exists with this version. Use different name or different version number.'; + } else if (!this.metaDataTab.version.match(this.versionPattern)) { + this.errorMessage = 'version should be as example 1.0.0'; } else { - this.errorMessage = ' '; + this.errorMessage = ''; } }); } @@ -115,4 +117,17 @@ export class MetadataTabComponent implements OnInit { saveMetaDataToStore() { this.packageCreationStore.changeMetaData(this.metaDataTab); } + + checkRequiredElements() { + const newMetaData = new MetaDataTabModel(); + newMetaData.description = this.metaDataTab.description; + newMetaData.name = this.metaDataTab.name; + newMetaData.version = this.metaDataTab.version; + newMetaData.templateTags = this.metaDataTab.templateTags; + newMetaData.mapOfCustomKey = this.metaDataTab.mapOfCustomKey; + newMetaData.mode = this.metaDataTab.mode; + this.packageCreationStore.changeMetaData(newMetaData); + } + + } 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 baf6ea9e3..7afea6b9a 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,35 +20,13 @@ <div class="container-fluid body-container"> <div class="container"> <div class="creat-action-container"> - <a class="action-button save" (click)="saveBluePrint()"> - <i class="icon-save-sm" aria-hidden="true"></i> - <span>Save</span> - </a> - <a href="#" class="action-button" (click)="goBackToDashBorad()"> - <i class="icon-discard-sm" aria-hidden="true"></i> - <span>Discard Changes</span> - </a> - - <hr> - <a href="#" class="action-button"> - <i class="icon-clone-sm" aria-hidden="true"></i> - <span>Clone</span> - </a> - - <a href="#" class="action-button"> - <i class="icon-archive-sm" aria-hidden="true"></i> - <span>Archive</span> - </a> - - <a href="#" class="action-button"> - <i class="icon-download" aria-hidden="true"></i> - <span>Download</span> - </a> - - <a href="#" class="action-button delete"> - <i class="icon-delete-sm" aria-hidden="true"></i> - <span>Delete</span> - </a> + <!-- <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()"> + <i class="icon-save-sm" aria-hidden="true"></i> + <span>Save</span>--> + <button (click)="saveBluePrint()" [disabled]="!isSaveEnabled" + class="action-button save" aria-hidden="true"><i class="icon-save-sm" + aria-hidden="true"></i> + <span>Save</span></button> </div> @@ -57,17 +35,17 @@ <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" - href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false" - autofocus #nameit (focusout)="test()">METADATA</a> + href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false" + autofocus #nameit (focusout)="test()">METADATA</a> <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" - role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> + role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" - role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> + role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" - role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> + role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" - href="#nav-authentication" role="tab" aria-controls="nav-authentication" - aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + href="#nav-authentication" role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> </div> </div> @@ -76,24 +54,24 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab"> + aria-labelledby="nav-metadata-tab"> <app-metadata-tab></app-metadata-tab> </div> <div class="tab-pane fade" id="nav-template" role="tabpanel" - aria-labelledby="nav-template-tab"> + aria-labelledby="nav-template-tab"> <app-template-mapping></app-template-mapping> </div> <div class="tab-pane fade" id="nav-scripts" role="tabpanel" - aria-labelledby="nav-scripts-tab"> + aria-labelledby="nav-scripts-tab"> <app-scripts-tab></app-scripts-tab> </div> <div class="tab-pane fade" id="nav-imports" role="tabpanel" - aria-labelledby="nav-imports-tab"> + aria-labelledby="nav-imports-tab"> <app-imports-tab></app-imports-tab> </div> <div class="tab-pane fade" id="nav-authentication" role="tabpanel" - aria-labelledby="nav-authentication-tab"> + aria-labelledby="nav-authentication-tab"> <div class="card creat-card"> <div class="editor-container"> <app-dsl-definitions-tab></app-dsl-definitions-tab> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 57c849761..bba45c810 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -43,30 +43,43 @@ export class PackageCreationComponent implements OnInit { // adding initial referencing to designer mode - constructor(private packageCreationStore: PackageCreationStore, - private packageCreationUtils: PackageCreationUtils, - private router: Router, - private toastService: ToastrService) { + constructor( + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router, + private toastService: ToastrService) { } counter = 0; modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; - private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); - private folder: FolderNodeElement = new FolderNodeElement(); - private zipFile: JSZip = new JSZip(); - private filesData: any = []; - private definition: Definition = new Definition(); + metaDataTab: MetaDataTabModel = new MetaDataTabModel(); + folder: FolderNodeElement = new FolderNodeElement(); + zipFile: JSZip = new JSZip(); + filesData: any = []; + definition: Definition = new Definition(); + isSaveEnabled = false; @ViewChild(MetadataTabComponent, {static: false}) - private metadataTabComponent: MetadataTabComponent; + metadataTabComponent: MetadataTabComponent; @ViewChild('nameit', {static: true}) - private elementRef: ElementRef; + elementRef: ElementRef; + versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$'; ngOnInit() { this.elementRef.nativeElement.focus(); + const regexp = RegExp(this.versionPattern); + this.packageCreationStore.state$.subscribe(cbaPackage => { + if (cbaPackage && cbaPackage.metaData && cbaPackage.metaData.description + && cbaPackage.metaData.name && cbaPackage.metaData.version && + regexp.test(cbaPackage.metaData.version)) { + this.isSaveEnabled = true; + } else { + this.isSaveEnabled = false; + } + }); } saveBluePrint() { @@ -99,7 +112,7 @@ export class PackageCreationComponent implements OnInit { this.router.navigate(['/packages/package/' + id]); } }, error => { - // this.toastService.error('error happened when editing ' + error.message); + // this.toastService.error('error happened when editing ' + error.message); console.log('Error -' + error.message); }); }); 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 ce5dc4884..55e715654 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 @@ -19,16 +19,16 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; -import {Store} from '../../../../common/core/stores/Store'; +import { Store } from '../../../../common/core/stores/Store'; -import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationService} from './package-creation.service'; -import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; -import {Observable} from 'rxjs'; -import {ResourceDictionary} from './mapping-models/ResourceDictionary.model'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model'; +import { PackageCreationService } from './package-creation.service'; +import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; +import { Observable } from 'rxjs'; +import { ResourceDictionary } from './mapping-models/ResourceDictionary.model'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @Injectable({ @@ -56,6 +56,9 @@ export class PackageCreationStore extends Store<CBAPackage> { }); } + istemplateExist(): boolean { + return this.state.templates.files.size > 0 && this.state.mapping.files.size > 0; + } changeDslDefinition(dslDefinition: DslDefinition) { this.setState({ 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 cdc73f1b9..e1b0f83d6 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,12 +1,12 @@ <div class="row template-mapping-action"> <div class="col"> <h6 [hidden]="edit" class="create-title">Create Template</h6> - <button (click)="closeCreationForm()" [hidden]="!edit" class="btn btn-outline-secondary"><i + <button (click)="openListView()" [hidden]="!edit" class="btn btn-outline-secondary"><i class="fa fa-chevron-left mr-2"></i>Template List</button> </div> <div class="col text-right"> - <button data-toggle="modal" [hidden]="!edit" (click)="initDelete()" data-target="#templateDeletionModal2" + <button data-toggle="modal" [hidden]="!edit" data-target="#templateDeletionModal2" class="btn btn-outline-danger" title="Delete Template">Delete</button> @@ -301,4 +301,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/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 f6bae0600..af7acc2d0 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 @@ -18,11 +18,11 @@ declare var $: any; styleUrls: ['./templ-mapp-creation.component.css'] }) export class TemplMappCreationComponent implements OnInit, OnDestroy { - @Output() showListViewParent = new EventEmitter<any>(); - @Output() openList = new EventEmitter<any>(); + @Output() showListView = new EventEmitter<any>(); + @Output() showCreationView = new EventEmitter<any>(); public uploadedFiles: FileSystemFileEntry[] = []; - private fileNames: Set<string> = new Set(); - private jsonConvert = new JsonConvert(); + fileNames: Set<string> = new Set(); + jsonConvert = new JsonConvert(); public files: NgxFileDropEntry[] = []; fileName: any; templateInfo = new TemplateInfo(); @@ -179,8 +179,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.uploadedFiles.splice(index, 1); } - initDelete(file) { - } confirmDelete() { // Delete from templates this.sharedService.deleteFromList(this.fileName); @@ -191,7 +189,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.packageCreationStore.state.templates.files.size > 0 || this.packageCreationStore.state.mapping.files.size > 0 ) { - this.closeCreationForm(); + this.openListView(); } } @@ -267,11 +265,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } openListView() { - this.showListViewParent.emit('tell parent to open create views'); + console.log('open List view'); + this.showListView.emit('tell parent to open create views'); } - closeCreationForm() { - this.openList.emit('close create form and open list'); + openCreationView() { + console.log('close creation view'); + this.showCreationView.emit('close create form and open list'); } getMappingTableFromTemplate(e) { @@ -337,7 +337,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { // } this.fileName = ''; this.toastr.success('File is created', 'success'); - this.closeCreationForm(); + this.openListView(); } else { console.log('this file already exist'); this.toastr.error('File name already exist', 'Error'); @@ -351,6 +351,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { selectSource(dict, e) { const source = e.target.value; let keyDepend = null; + this.dependancies.set(dict.name, null); try { keyDepend = dict.definition.sources[source].properties['key-dependencies'] || null; } catch (e) { } 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 e49b25a0c..3e377981e 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,4 +1,4 @@ -<a (click)="openCreationView()" class="create-template-mapping-button"> +<a (click)="createNewTemplate()" class="create-template-mapping-button"> <i class="fa fa-plus"></i> <span>Create 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 c790422c1..26740f3e1 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,11 +13,11 @@ import { SharedService } from '../shared-service'; styleUrls: ['./templ-mapp-listing.component.css'] }) 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; + @Output() showCreationView = new EventEmitter<any>(); + @Output() showListView = new EventEmitter<any>(); + templateAndMappingMap = new Map<string, TemplateAndMapping>(); + templates: Template; + mapping: Mapping; isCreate = true; currentFile: string; edit = false; @@ -40,6 +40,11 @@ export class TemplMappListingComponent implements OnInit { } this.packageCreationStore.state$.subscribe(cba => { + if (this.packageCreationStore.state.mapping.files.size > 0 || this.packageCreationStore.state.templates.files.size > 0) { + this.openListView(); + } else { + this.openCreationView(); + } if (cba.templates) { this.templates = cba.templates; this.mapping = cba.mapping; @@ -58,7 +63,6 @@ export class TemplMappListingComponent implements OnInit { const isFromTemplate = false; this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); }); - console.log('hello there '); console.log(this.templateAndMappingMap); } this.deleteFromList(); @@ -83,6 +87,7 @@ export class TemplMappListingComponent implements OnInit { console.log('response from actionList'); console.log(res); if (res) { + console.log('xccccccccccvvvvvv'); this.templateAndMappingMap.delete(res); if (this.templateAndMappingMap.size <= 0) { this.openCreationView(); @@ -91,14 +96,17 @@ export class TemplMappListingComponent implements OnInit { }); } + createNewTemplate() { + this.openCreationView(); + this.sharedService.disableEdit(); + } openCreationView() { - this.showCreationViewParentNotification.emit('tell parent to open create views'); + this.showCreationView.emit('tell parent to open create views'); console.log('disable edit mode'); - this.sharedService.disableEdit(); - } - FullView() { - this.showFullView.emit('show full view'); + openListView() { + console.log('open list view'); + this.showListView.emit('show full view'); } setSourceCodeEditor(key: string) { @@ -125,7 +133,7 @@ export class TemplMappListingComponent implements OnInit { templateInfo.type += 'mapping'; } this.templateStore.changeTemplateInfo(templateInfo); - this.FullView(); + this.openCreationView(); 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 f4f305ee9..48a503321 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,10 +1,9 @@ <div [hidden]="listView"> - <app-templ-mapp-listing [hidden]="!creationView" (showCreationViewParentNotification)="openCreationView($event)" - (showFullView)="openListView($event)"> + <app-templ-mapp-listing (showCreationView)="openCreationView()" (showListView)="openListView()"> </app-templ-mapp-listing> </div> <div [hidden]="creationView"> - <app-templ-mapp-creation (showListViewParent)="openListView($event)" (openList)="closeCreationView()"> + <app-templ-mapp-creation (showListView)="openListView()" (showCreationView)="openCreationView()"> </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 af6ced092..341d29f66 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 @@ -26,9 +26,8 @@ export class TemplateMappingComponent implements OnInit { this.creationView = true; this.listView = false; console.log('URL contains Id'); - this.sharedService.enableEdit(); - if (this.pakcageStore.state.mapping.files.size > 0 || this.pakcageStore.state.templates.files.size > 0) { - this.openListView(); + if (this.pakcageStore.istemplateExist()) { + this.sharedService.enableEdit(); } } else { console.log('Create mode'); @@ -37,18 +36,16 @@ export class TemplateMappingComponent implements OnInit { } } openCreationView() { + console.log('open creation view'); this.creationView = false; this.listView = true; } openListView() { - this.listView = false; - this.creationView = false; - } - - closeCreationView() { + console.log('open list view'); this.creationView = true; this.listView = false; + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts index 28be5f5c8..228b6d6ab 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -19,9 +19,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Component, OnDestroy, OnInit} from '@angular/core'; -import {PackagesStore} from '../../packages.store'; -import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { PackagesStore } from '../../packages.store'; +import { BlueprintModel, BluePrintPage } from '../../model/BluePrint.model'; @Component({ selector: 'app-filter-by-tags', @@ -36,7 +36,7 @@ export class TagsFilteringComponent implements OnInit { viewedTags: string[] = []; searchTag = ''; viewedPackages: BlueprintModel[] = []; - private checkBoxTages = ''; + checkBoxTages = ''; currentPage = 0; constructor(private packagesStore: PackagesStore, diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts index 91304e5c2..dc1965fde 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts @@ -1,5 +1,5 @@ -import {Component, OnInit} from '@angular/core'; -import {PackagesStore} from '../../packages.store'; +import { Component, OnInit } from '@angular/core'; +import { PackagesStore } from '../../packages.store'; @Component({ selector: 'app-packages-search', @@ -8,7 +8,7 @@ import {PackagesStore} from '../../packages.store'; }) export class PackagesSearchComponent implements OnInit { - private searchQuery = ''; + searchQuery = ''; constructor(private packagesStore: PackagesStore) { } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts index 92b27c24c..157a5aa25 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts @@ -25,8 +25,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./dictionary-editor.component.css'] }) export class DictionaryEditorComponent implements OnInit { + text = ''; constructor() { - } + } ngOnInit() { } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts index d5c4a109b..aa975f87a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts @@ -25,22 +25,22 @@ import { DictionaryCreationStore } from '../dictionary-creation.store'; import { MetaData } from '../../model/metaData.model'; @Component({ - selector: 'app-dictionary-metadata', - templateUrl: './dictionary-metadata.component.html', - styleUrls: ['./dictionary-metadata.component.css'] + selector: 'app-dictionary-metadata', + templateUrl: './dictionary-metadata.component.html', + styleUrls: ['./dictionary-metadata.component.css'] }) export class DictionaryMetadataComponent implements OnInit { - packageNameAndVersionEnables = true; + packageNameAndVersionEnables = true; counter = 0; tags = new Set<string>(); - private metaDataTab: MetaData = new MetaData(); - private errorMessage: string; + metaDataTab: MetaData = new MetaData(); + errorMessage: string; constructor( private route: ActivatedRoute, private dictionaryCreationService: DictionaryCreationService, private dictionaryCreationStore: DictionaryCreationStore - ) {} + ) { } ngOnInit() { this.dictionaryCreationStore.state$.subscribe(element => { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts index 1a3484bae..e32db8a37 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts @@ -36,20 +36,21 @@ export class ResourceDictionaryCreationComponent implements OnInit { } modes: object[] = [ - {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'} + { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, + { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' } ]; - private metaDataTab: DictionaryModel = new DictionaryModel(); - private definition: Definition = new Definition(); + metaDataTab: DictionaryModel = new DictionaryModel(); + definition: Definition = new Definition(); + createDate = ''; - @ViewChild(DictionaryMetadataComponent, {static: false}) + @ViewChild(DictionaryMetadataComponent, { static: false }) private metadataTabComponent: DictionaryMetadataComponent; - @ViewChild(SourcesTemplateComponent, {static: false}) + @ViewChild(SourcesTemplateComponent, { static: false }) private sourcesTemplateComponent: SourcesTemplateComponent; - @ViewChild('nameit', {static: true}) + @ViewChild('nameit', { static: true }) private elementRef: ElementRef; ngOnInit() { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts index 4a4f215cd..1b70a17ef 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts @@ -17,7 +17,7 @@ * limitations under the License. * ============LICENSE_END========================================================= */ -import { Component, OnInit} from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { SourcesStore } from './sources.store'; @@ -36,13 +36,15 @@ export class SourcesTemplateComponent implements OnInit { selectItem: boolean; ddSource = []; checked: boolean; + searchText = ''; + text = ''; selectedArray = []; constructor(private sourcesStore: SourcesStore) { this.sourcesStore.state$.subscribe(sources => { this.sources = sources.sources; for (const key in this.sources) { if (key) { - const sourceObj = { name: key, value: JSON.stringify(this.sources[key] )}; + const sourceObj = { name: key, value: JSON.stringify(this.sources[key]) }; this.option.push(sourceObj); } } @@ -58,27 +60,27 @@ export class SourcesTemplateComponent implements OnInit { } drop(event: CdkDragDrop<string[]>) { - this.ddSource = []; - if (event.previousContainer === event.container) { - moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); - } else { - transferArrayItem(event.previousContainer.data, - event.container.data, - event.previousIndex, - event.currentIndex); - } + this.ddSource = []; + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem(event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex); + } - for (const key2 in this.sources) { - if (key2) { - const originalSources = this.sourcesOptions; - for (const key of originalSources) { - if (key.name === key2) { - const obj = `{${key.name}: ${key.value}}`; - this.ddSource.push(obj); - } + for (const key2 in this.sources) { + if (key2) { + const originalSources = this.sourcesOptions; + for (const key of originalSources) { + if (key.name === key2) { + const obj = `{${key.name}: ${key.value}}`; + this.ddSource.push(obj); } } } + } } searchDictionary(event: any) { @@ -98,9 +100,9 @@ export class SourcesTemplateComponent implements OnInit { const editedData = JSON.parse(event); const originalSources = this.sources; for (const key in originalSources) { - if (key === item.name) { - this.sources[key] = editedData; - } + if (key === item.name) { + this.sources[key] = editedData; + } } this.option = []; this.sourcesStore.changeSources(this.sources); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts index bdf6bd1ea..3ad1b34e0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts @@ -23,78 +23,78 @@ import { DictionaryModel, DictionaryPage } from '../../model/dictionary.model'; import { DictionaryStore } from '../../dictionary.store'; @Component({ - selector: 'app-filterby-tags', - templateUrl: './filterby-tags.component.html', - styleUrls: ['./filterby-tags.component.css'] + selector: 'app-filterby-tags', + templateUrl: './filterby-tags.component.html', + styleUrls: ['./filterby-tags.component.css'] }) export class FilterbyTagsComponent implements OnInit { - page: DictionaryPage; - tags: string[] = []; - viewedTags: string[] = []; - searchTag = ''; - viewedDictionary: DictionaryModel[] = []; - private checkBoxTages = ''; - currentPage = 0; + page: DictionaryPage; + tags: string[] = []; + viewedTags: string[] = []; + searchTag = ''; + viewedDictionary: DictionaryModel[] = []; + checkBoxTages = ''; + currentPage = 0; - constructor(private dictionaryStore: DictionaryStore) { - this.dictionaryStore.state$.subscribe(state => { - console.log(state); - if (state.page) { - this.viewedDictionary = state.page.content; - this.tags = []; - if (state.currentPage !== this.currentPage) { - this.checkBoxTages = ''; - this.currentPage = state.currentPage; - } - this.viewedDictionary.forEach(element => { - element.tags.split(',').forEach(tag => { - this.tags.push(tag.trim()); - }); - this.tags.push('All'); - this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index); - this.assignTags(); - }); - } - }); - } + constructor(private dictionaryStore: DictionaryStore) { + this.dictionaryStore.state$.subscribe(state => { + console.log(state); + if (state.page) { + this.viewedDictionary = state.page.content; + this.tags = []; + if (state.currentPage !== this.currentPage) { + this.checkBoxTages = ''; + this.currentPage = state.currentPage; + } + this.viewedDictionary.forEach(element => { + element.tags.split(',').forEach(tag => { + this.tags.push(tag.trim()); + }); + this.tags.push('All'); + this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index); + this.assignTags(); + }); + } + }); + } - ngOnInit() { + ngOnInit() { - } + } - reloadChanges(event: any) { - this.searchTag = event.target.value; - this.filterItem(this.searchTag); - } + reloadChanges(event: any) { + this.searchTag = event.target.value; + this.filterItem(this.searchTag); + } - private assignTags() { - this.viewedTags = this.tags; - } + private assignTags() { + this.viewedTags = this.tags; + } - private filterItem(value) { - if (!value) { - this.assignTags(); - } - this.viewedTags = this.tags.filter( - item => item.toLowerCase().indexOf(value.toLowerCase()) > -1 - ); - } + private filterItem(value) { + if (!value) { + this.assignTags(); + } + this.viewedTags = this.tags.filter( + item => item.toLowerCase().indexOf(value.toLowerCase()) > -1 + ); + } - reloadDictionary(event: any) { - if (!event.target.checked) { - this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '') - .replace(event.target.id, ''); - } else { - this.checkBoxTages += event.target.id.trim() + ','; - } - const tagsSelected = this.checkBoxTages.split(',').filter(item => { - if (item) { - return true; - } - }).map((item) => { - return item.trim(); - }); - this.dictionaryStore.filterByTags(tagsSelected); - } + reloadDictionary(event: any) { + if (!event.target.checked) { + this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '') + .replace(event.target.id, ''); + } else { + this.checkBoxTages += event.target.id.trim() + ','; + } + const tagsSelected = this.checkBoxTages.split(',').filter(item => { + if (item) { + return true; + } + }).map((item) => { + return item.trim(); + }); + this.dictionaryStore.filterByTags(tagsSelected); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts index 76e40cf7d..d1fb4fc85 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts @@ -27,16 +27,16 @@ import { DictionaryStore } from '../../dictionary.store'; styleUrls: ['./search-dictionary.component.css'] }) export class SearchDictionaryComponent implements OnInit { - private searchQuery = ''; + searchQuery = ''; constructor(private dictionaryStore: DictionaryStore) { } ngOnInit() { } searchDictionary(event: any) { - this.searchQuery = event.target.value; - this.searchQuery = this.searchQuery.trim(); - this.dictionaryStore.search(this.searchQuery); + this.searchQuery = event.target.value; + this.searchQuery = this.searchQuery.trim(); + this.dictionaryStore.search(this.searchQuery); } } |