diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
6 files changed, 115 insertions, 34 deletions
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 f8f1d8099..0595db1ce 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 @@ -12,7 +12,7 @@ <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> + data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -106,7 +106,7 @@ <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <div class="collapse navbar-collapse "> @@ -117,9 +117,9 @@ <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> @@ -159,7 +159,7 @@ <div class="btn-group viewBtns" role="group"> <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 + class="btn btn-secondary topologyView">Scripting </button> </div> </li> @@ -171,16 +171,16 @@ <ng-sidebar-container class="sidebar-container"> <!-- Controller SideBar --> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> + [mode]="'push'" #sidebarLeft> <nav class="row"> <!--Nav Tabs--> <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> @@ -188,7 +188,7 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> @@ -203,7 +203,9 @@ <div *ngIf="!showAction" class="custom-control"> <ul> <li *ngFor="let customActionName of actions"> - <label><i class="icon-file" aria-hidden="true"></i> + <label> + <i class="icon-file" aria-hidden="true" class="icon-file" + (click)="openFunctionAttributes(customActionName)"></i> {{customActionName}} </label> </li> </ul> @@ -288,7 +290,7 @@ </div> <!-- Action Attribute SideBar --> <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> @@ -310,7 +312,8 @@ <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"> + data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> Steps </button> </h2> @@ -320,7 +323,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -340,7 +343,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -354,7 +357,8 @@ <div class="card-header row" id="headingTwo"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + data-target="#collapseTwo" aria-expanded="true" + aria-controls="collapseTwo"> Inputs </button> </h2> @@ -363,7 +367,7 @@ </div> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -383,7 +387,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -397,8 +401,8 @@ <div class="card-header row" id="headingThree"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseThree" aria-expanded="true" - aria-controls="collapseThree"> + data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> Outputs </button> </h2> @@ -407,7 +411,7 @@ </div> </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -427,7 +431,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -446,7 +450,7 @@ <!-- Function Attribute SideBar --> <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" - [mode]="'push'" [position]="'right'" #sidebarRight> + [mode]="'push'" [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> @@ -504,7 +508,7 @@ <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"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Interface </button> </h2> @@ -514,7 +518,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -536,11 +540,11 @@ </div> <div class="form-group"> <label> - <input class="with-gap radio-btn" name="group1" type="radio" /> + <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" /> + <input class="with-gap radio-btn" name="group1" type="radio"/> <span class="radio-btn">False</span> </label> </div> @@ -565,7 +569,7 @@ <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"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Artifact </button> </h2> @@ -575,7 +579,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -649,4 +653,5 @@ </div> </ng-sidebar> -</ng-sidebar-container>
\ No newline at end of file +</ng-sidebar-container> +<app-functions-attribute></app-functions-attribute> 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 19d000f8f..3078fe757 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 @@ -80,6 +80,7 @@ export class DesignerComponent implements OnInit, OnDestroy { zipFile: JSZip = new JSZip(); cbaPackage: CBAPackage; actions: string[] = []; + dataTarget: string; constructor( private designerStore: DesignerStore, @@ -470,4 +471,8 @@ export class DesignerComponent implements OnInit, OnDestroy { }); }); } + + openFunctionAttributes(customActionName: string) { + console.log('opening here function attributes'); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.spec.ts new file mode 100644 index 000000000..2b41c192a --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FunctionsAttributeComponent } from './functions-attribute.component'; + +describe('FunctionsAttributeComponent', () => { + let component: FunctionsAttributeComponent; + let fixture: ComponentFixture<FunctionsAttributeComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FunctionsAttributeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FunctionsAttributeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts new file mode 100644 index 000000000..88bd76eb6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts @@ -0,0 +1,46 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {DesignerStore} from '../designer.store'; +import {PackageCreationStore} from '../../package-creation/package-creation.store'; +import {Subject} from 'rxjs'; +import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; +import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model'; + +@Component({ + selector: 'app-functions-attribute', + templateUrl: './functions-attribute.component.html', + styleUrls: ['./functions-attribute.component.css'] +}) +export class FunctionsAttributeComponent implements OnInit, OnDestroy { + + ngUnsubscribe = new Subject(); + private designerDashboardState: DecodeSuccessCallback; + private cbaPackage: CBAPackage; + + constructor(private designerStore: DesignerStore, + private packageCreationStore: PackageCreationStore) { + } + + ngOnInit() { + this.designerStore.state$ + .pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe(designerDashboardState => { + this.designerDashboardState = designerDashboardState; + }); + + this.packageCreationStore.state$ + .pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe(cbaPackage => { + this.cbaPackage = cbaPackage; + }); + + } + + ngOnDestroy() { + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); + } +} |