diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
5 files changed, 265 insertions, 17 deletions
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 19c10c5fd..0c8fa3d20 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 @@ -24,7 +24,7 @@ export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) private metadataTabComponent: MetadataTabComponent; - public customActionName: string; + public customActionName = ''; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author']; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 964268de5..a095b3dfc 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -225,7 +225,7 @@ button.rotate{ left: 30px; } .componentsList tspan{ - width:60px !important; + /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; overflow-wrap: break-word; @@ -419,9 +419,8 @@ p.compType-4{ /*CANVAS*/ .editBar{ - width: 1080px; - height: 50px; - margin: 0 auto 0 -392px; + width: 200px; + margin: 0 auto 0; padding: 6px 10px; background:#F4F9FE; /* border: solid 1px #E8EFF8; */ @@ -505,11 +504,21 @@ p.compType-4{ .componentContainer p{ font-size: 12px; } - +.functionAttributeSidebar{ + width: 440px; + padding: 0px; + margin-top: 50px; +} +.functionAttributeSidebar .attributesContainer{ + background: #fff; + border: solid 1px #C1CDDD; + box-shadow: 0 2px 6px rgba(47, 83, 151, .1); +} /*ATTRIBUTES SIDE BAR*/ .attributesSideBar{ width: 396px; - padding: 0; + padding: 0px; + margin-top: 50px; } .attributesSideBar .attributesContainer{ background: #fff; @@ -517,12 +526,13 @@ p.compType-4{ box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .closeBar{ - float: right; - width: 90%; - height: 40px; + float: left; + width: 50%; + height: 42px; background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; border: 0; outline: 0; + margin-left: -30px; } .closeBar:focus{ outline: none; @@ -536,6 +546,15 @@ p.compType-4{ text-transform: uppercase; color: #1B3E6F; } +.attributesContainer h6{ + margin-bottom: 10px; + padding: 12px 0 12px 15px; + background: #DEE8F3; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + color: #1B3E6F; +} .actionName{ margin-bottom: 21px; } @@ -586,7 +605,7 @@ p.compType-4{ font-weight: bold; font-size: 13px; text-transform: uppercase; - line-height: 38px; + line-height: 15px; } .accordion .btn-link:hover{ color: #103D73; @@ -653,3 +672,27 @@ p.compType-4{ -webkit-user-select: none; z-index: 2; } */ +.attributesContainer .dropdown-text, +.dropdown-toggle:hover ~ .dropdown-text, +.dropdown-toggle:focus ~ .dropdown-text{ + top: 7px; + text-indent: 15px; + background: #F4F9FE; + border-radius: 5px; + border: 0; + box-shadow: whitesmoke; + color: #1B3E6F; + font-weight: bold; + font-size: 13px; +} +.radio-btn{ + margin-left: 12px; + font-weight: bold; +} +.function-attribute{ + margin-right: -16px; +} +.trash-span{ + margin-left: 150px; + font-size:15px +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 6904d5781..52503cf53 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -102,9 +102,9 @@ <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> - <button (click)="_toggleSidebar1()" class="topologySource active"> + <!-- <button (click)="_toggleSidebar1()" class="topologySource active"> <i style="font-size:24px" class="fa"></i> - </button> + </button> --> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" class="btn btn-secondary topologyView">Scripting</button> @@ -230,7 +230,7 @@ </div> --> <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> - <!-- Attribute SideBar --> + <!-- Action Attribute SideBar --> <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'" #sidebarRight> <div class="container-fluid0"> @@ -388,4 +388,202 @@ </div> </ng-sidebar> + <!-- Function Attribute SideBar --> + <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'" + [position]="'right'" #sidebarRight> + <div class="container-fluid0"> + <div class="row m-0"> + <div class="col-2 pr-0"> + <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> --> + </div> + <div class="col-10 attributesContainer p-0"> + <div class="row m-0"> + <div class="col-12"> + <div class="col-3"> + <button (click)="sidebarRight.close()" class="closeBar"></button> + </div> + + <div class="function-attribute"> + <h6>Function Attributes + <span class="trash-span"> + <i class="fa fa-trash" type="button" aria-hidden="true"></i> + </span> + </h6> + </div> + + + </div> + </div> + + <div> + <div class="row m-0"> + <div class="col-12"> + <div class="form-group actionName"> + <label for="exampleInputEmail1">Function Name</label> + <input type="text" class="form-control" placeholder="Function Name"> + </div> + </div> + </div> + <div class="row m-0"> + <div class="col-12"> + <div class=" actionName"> + <label>Function Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>other component</li> + </div> + </li> + </ul> + </div> + </div> + </div> + </div> + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Interface + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> + </div> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">ResourceResolutionComponent</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Resoluton-key</label> + <input type="text" class="form-control"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Store result</label> + </div> + <div class="form-group"> + <label> + <input class="with-gap radio-btn" name="group1" type="radio"/> + <span class="radio-btn">True</span> + </label> + <label class="radio-btn"> + <input class="with-gap radio-btn" name="group1" type="radio" /> + <span class="radio-btn">False</span> + </label> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder=""> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> + <input type="text" class="form-control" placeholder=""> + + </div> + + </div> + </div> + </div> + + </div> + + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Artifact + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> + </div> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">base config-template</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> + </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"><hr></div> + + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">base config-mapping</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> + </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"><hr></div> + </div> + </div> + </div> + + </div> + </div> + </div> + </div> + </div> + </ng-sidebar> + </ng-sidebar-container> 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 fe90b6b90..3d10f99e7 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 @@ -33,12 +33,13 @@ import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; import { GraphUtil } from './graph.util'; import { GraphGenerator } from './graph.generator.util'; import { FunctionsStore } from './functions.store'; -import { Subject } from 'rxjs'; +import { Subject, empty } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators'; import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; import { ActivatedRoute } from '@angular/router'; import { DesignerService } from './designer.service'; +import { isDefined } from '@angular/compiler/src/util'; @Component({ selector: 'app-designer', @@ -50,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private attributesSideBar: boolean; + functionAttributeSidebar: boolean; viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); customActionName: string; showAction: boolean; @@ -71,6 +73,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.controllerSideBar = true; this.attributesSideBar = false; this.showAction = false; + this.functionAttributeSidebar = true; } private _toggleSidebar1() { @@ -79,6 +82,9 @@ export class DesignerComponent implements OnInit, OnDestroy { private _toggleSidebar2() { this.attributesSideBar = !this.attributesSideBar; } + // private _toggleSidebar3() { + // this.functionAttributeSidebar = !this.functionAttributeSidebar; + // } /** @@ -95,7 +101,7 @@ export class DesignerComponent implements OnInit, OnDestroy { ngOnInit() { this.customActionName = this.route.snapshot.paramMap.get('actionName'); - if (this.customActionName != null) { + if (this.customActionName !== '') { this.showAction = true; } this.initializeBoard(); 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 e70d98d04..e6b00f413 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 @@ -19,6 +19,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private ngUnsubscribe = new Subject(); viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + public customActionName = ''; constructor(private store: DesignerStore, private packageCreationUtils: PackageCreationUtils, @@ -48,7 +49,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]); + this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); } ngOnDestroy() { |