diff options
Diffstat (limited to 'cds-ui')
15 files changed, 310 insertions, 279 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 bf6bf1251..18c9277eb 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,7 +43,7 @@ </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> @@ -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> @@ -710,4 +720,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/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..0ff8d952f 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,28 +24,30 @@ 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(); + + 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 ) { } @@ -65,39 +68,39 @@ export class ConfigurationDashboardComponent implements OnInit { 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 +124,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 +146,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 +169,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 => { @@ -198,7 +201,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 +224,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/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 487c19ad1..033e80081 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,16 +17,17 @@ 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 = ''; - 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; } @@ -50,7 +51,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..bf94ebdbb 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 @@ -59,7 +59,7 @@ <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" + <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.templateTags" placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Use ENTER to add tag</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index dd9f45bf4..c74a1e01e 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 @@ -20,8 +20,8 @@ export class MetadataTabComponent implements OnInit { /* {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( 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..0c5885cef 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 @@ -19,18 +19,18 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; import * as JSZip from 'jszip'; -import {PackageCreationStore} from './package-creation.store'; -import {Definition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationModes} from './creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder'; -import {PackageCreationUtils} from './package-creation.utils'; -import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; -import {Router} from '@angular/router'; -import {ToastrService} from 'ngx-toastr'; +import { PackageCreationStore } from './package-creation.store'; +import { Definition } from './mapping-models/CBAPacakge.model'; +import { PackageCreationModes } from './creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder'; +import { PackageCreationUtils } from './package-creation.utils'; +import { MetadataTabComponent } from './metadata-tab/metadata-tab.component'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; @Component({ @@ -43,27 +43,28 @@ 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(); + { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, + { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }]; + metaDataTab: MetaDataTabModel = new MetaDataTabModel(); + folder: FolderNodeElement = new FolderNodeElement(); + zipFile: JSZip = new JSZip(); + filesData: any = []; + definition: Definition = new Definition(); - @ViewChild(MetadataTabComponent, {static: false}) - private metadataTabComponent: MetadataTabComponent; + @ViewChild(MetadataTabComponent, { static: false }) + metadataTabComponent: MetadataTabComponent; - @ViewChild('nameit', {static: true}) - private elementRef: ElementRef; + @ViewChild('nameit', { static: true }) + elementRef: ElementRef; ngOnInit() { this.elementRef.nativeElement.focus(); @@ -89,7 +90,7 @@ export class PackageCreationComponent implements OnInit { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationStore.saveBluePrint(blob).subscribe( bluePrintDetailModels => { @@ -99,7 +100,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/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); } } |