diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute')
4 files changed, 249 insertions, 0 deletions
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..c89a96de0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html @@ -0,0 +1,178 @@ +<div class="scrollWrapper"> + <div class="row m-0"> + <div class="col"> + <div class="form-group"> + <label for="exampleInputEmail1">Function Instance Name</label> + <input type="text" class="form-control" placeholder="Function Instance Name"> + </div> + <div class="form-group"> + <label>Function Type</label> + <label class="attribute-value">component-resource-resolution</label> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Description</label> + <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> + </div> + </div> + </div> + <!--INTERFACES--> + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Interfaces + </button> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <!--Inputs & Outputs Tabs--> + <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist"> + <li class="nav-item" role="presentation"> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" + href="#pills-home" role="tab" aria-controls="pills-home" + aria-selected="true">Inputs</a> + </li> + <li class="nav-item" role="presentation"> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" + href="#pills-profile" role="tab" aria-controls="pills-profile" + aria-selected="false">Outputs</a> + </li> + </ul> + <div class="tab-content" id="pills-tabContent"> + <div class="tab-pane fade show active" id="pills-home" role="tabpanel" + aria-labelledby="pills-home-tab"> + <div class="row"> + <div class="col"> + <!--list--> + <div class="attribute-wrap"> + <div class="form-group"> + <label + for="exampleFormControlTextarea1">artifact-prefix-names + <i class="icon-required-star" type="button" + aria-hidden="true"></i></label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline1">Pre-defined + Template</label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline2">Input Drivin + Template</label> + </div> + <br /> + <button type="button" class="btn btn-select-template"><i + class="icon-add-circle" type="button" + aria-hidden="true"></i> Select Template</button> + </div> + <!--string--> + <div class="attribute-wrap"> + <div class="form-group"> + <label for="exampleInputEmail1">resoluton-key <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <input type="text" class="form-control"> + </div> + </div> + <!--integer--> + <div class="attribute-wrap"> + <div class="form-group"> + <label for="exampleInputEmail1">request-id <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <input type="number" class="form-control" placeholder="" + value="356"> + </div> + </div> + <!--boolean--> + <div class="attribute-wrap"> + <div class="form-group"> + <label + for="exampleFormControlTextarea1">resolution-summary + <i class="icon-required-star optional-attribute" + type="button" aria-hidden="true"></i></label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline1">True</label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline2">False</label> + </div> + </div> + <!-- Add Optional Attributes button --> + </div> + </div> + </div> + <div class="tab-pane fade" id="pills-profile" role="tabpanel" + aria-labelledby="pills-profile-tab">2</div> + </div> + </div> + </div> + </div> + </div> + <!--ARTIFACTS--> + <div class="accordion" id="accordionExample1"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + Artifacts + </button> + </div> + + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample1"> + <div class="card-body"> + <div class="row"> + <div class="col-12"> + <a class="template-mapping-list"> + <p>baseconfig</p> + <span>Mapping</span> + <span>Template</span> + + <a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> + </a> + + </div> + <div class="col-12"> + <a class="template-mapping-list"> + <p>vpkg</p> + <span>Mapping</span> + <span>Template</span> + <a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> + </a> + </div> + </div> + </div> + </div> + </div> + </div> +</div> 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(); + } +} |