diff options
12 files changed, 256 insertions, 113 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css 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 new file mode 100644 index 000000000..f6afb4929 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -0,0 +1,113 @@ +<h6 class="create-title">CREATE</h6> +<div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" placeholder="Topology name.vLB.CDS"> + </div> + </div> + <hr /> + <div class="single-line"> + <label class="label-name">Management Type</label> + <div class="label-input"> + <div class="row"> + <div class="col-md-4 d-flex"> + <a class="select-type active" href="#"> + <div class="select-type-icon"><span class="icon-template-mapping"></span></div> + <div>Template And Support Mapping</div> + </a> + </div> + <div class="col-md-4 d-flex"> + <a class="select-type" href="#"> + <div class="select-type-icon"><span class="icon-template"></span></div> + <div>Template Only</div> + </a> + </div> + <div class="col-md-4 d-flex"> + <a class="select-type" href="#"> + <div class="select-type-icon"><span class="icon-mapping"></span></div> + <div>Mapping Only</div> + </a> + + </div> + </div> + + </div> + </div> + <hr /> + <div class="single-line"> + <label class="label-name">Type</label> + <div class="label-input"> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Velcoity + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Jinja + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Kotlin + </span> + </label> + </div> + </div> +</div> + +<div class="template-mapping-accordion"> + <div id="accordion"> + <div class="card"> + <div class="card-header" id="headingOne"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> + 1. Create Template + </button> + + </h5> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt + sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingTwo"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" + aria-expanded="false" aria-controls="collapseTwo"> + 2. Manage Mapping + </button> + </h5> + </div> + <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt + sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. + </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.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.spec.ts new file mode 100644 index 000000000..ec8a1370e --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TemplMappCreationComponent } from './templ-mapp-creation.component'; + +describe('TemplateMappingCreationComponent', () => { + let component: TemplMappCreationComponent; + let fixture: ComponentFixture<TemplMappCreationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TemplMappCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TemplMappCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..3a938c5ae --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-templ-mapp-creation', + templateUrl: './templ-mapp-creation.component.html', + styleUrls: ['./templ-mapp-creation.component.css'] +}) +export class TemplMappCreationComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css 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 new file mode 100644 index 000000000..ef233ad99 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -0,0 +1,6 @@ +<h6>Basic List Template and mapping</h6> +<div> + <a (click)="openCreationView()" class="action-button"> + <span>Create</span> + </a> +</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-listing/templ-mapp-listing.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.spec.ts new file mode 100644 index 000000000..d01d0bc58 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TemplMappListingComponent } from './templ-mapp-listing.component'; + +describe('TemplMappListingComponent', () => { + let component: TemplMappListingComponent; + let fixture: ComponentFixture<TemplMappListingComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TemplMappListingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TemplMappListingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..525e58128 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-templ-mapp-listing', + templateUrl: './templ-mapp-listing.component.html', + styleUrls: ['./templ-mapp-listing.component.css'] +}) +export class TemplMappListingComponent implements OnInit { + @Output() showCreationViewParentNotification = new EventEmitter<any>(); + + constructor() { } + + ngOnInit() { + } + + openCreationView() { + this.showCreationViewParentNotification.emit('tell parent to open create views'); + } + +} 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 57bd2b1ad..83f3c84c8 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,115 +1,9 @@ -<h6 class="create-title">CREATE</h6> -<div class="card creat-card"> - <div class="single-line"> - <label class="label-name">Name</label> - <div class="label-input"> - <input type="input" placeholder="Topology name.vLB.CDS"> - <!--(input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"--> - - </div> - </div> - <hr/> - <div class="single-line"> - <label class="label-name">Management Type</label> - <div class="label-input"> - <div class="row"> - <div class="col-md-4 d-flex"> - <a class="select-type active" href="#"> - <div class="select-type-icon"><span class="icon-template-mapping"></span></div> - <div>Template And Support Mapping</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-template"></span></div> - <div>Template Only</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-mapping"></span></div> - <div>Mapping Only</div> - </a> - - </div> - </div> - - </div> - </div> - <hr/> - <div class="single-line"> - <label class="label-name">Type</label> - <div class="label-input"> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Velcoity - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value=Velcoity> - - <span> - Jinja - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value=Velcoity> - - <span> - Kotlin - </span> - </label> - </div> - </div> +<div *ngIf="!creationView"> + <app-templ-mapp-listing + (showCreationViewParentNotification)="openCreationView($event)"> + </app-templ-mapp-listing> </div> -<div class="template-mapping-accordion"> - <div id="accordion"> - <div class="card"> - <div class="card-header" id="headingOne"> - <h5 class="mb-0 d-flex justify-content-between"> - <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" - aria-controls="collapseOne"> - 1. Create Template - </button> - - </h5> - </div> - - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> - <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 - wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum - eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla - assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt - sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus - labore sustainable VHS. - </div> - </div> - </div> - <div class="card"> - <div class="card-header" id="headingTwo"> - <h5 class="mb-0"> - <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" - aria-expanded="false" aria-controls="collapseTwo"> - 2. Manage Mapping - </button> - </h5> - </div> - <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> - <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 - wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum - eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla - assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt - sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus - labore sustainable VHS. - </div> - </div> - </div> - </div> +<div *ngIf="creationView"> + <app-templ-mapp-creation></app-templ-mapp-creation> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts index dc31bae85..e10545fad 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts @@ -1,6 +1,9 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { TemplateMappingComponent } from './template-mapping.component'; +import { TemplMappCreationComponent } from './templ-mapp-creation/templ-mapp-creation.component'; +import { TemplMappListingComponent } from './templ-mapp-listing/templ-mapp-listing.component'; +import { By } from '@angular/platform-browser'; describe('TemplateMappingComponent', () => { let component: TemplateMappingComponent; @@ -8,7 +11,11 @@ describe('TemplateMappingComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TemplateMappingComponent ] + declarations: [ + TemplateMappingComponent, + TemplMappCreationComponent, + TemplMappListingComponent + ] }) .compileComponents(); })); @@ -22,4 +29,33 @@ describe('TemplateMappingComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + + it('should load create component if create flag is true', () => { + component.creationView = true; + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + + const element = fixture.debugElement.query(By.css('app-templ-mapp-creation')); + expect(element).toBeTruthy(); + const child: TemplMappCreationComponent = element.componentInstance; + expect(child).not.toBeNull(); + + const listElement = fixture.debugElement.query(By.css('app-templ-mapp-listing')); + expect(listElement).toBeFalsy(); + + }); + + it('should load listing component by default', () => { + const compiled = fixture.debugElement.nativeElement; + + const element = fixture.debugElement.query(By.css('app-templ-mapp-creation')); + expect(element).toBeFalsy(); + + const listElement = fixture.debugElement.query(By.css('app-templ-mapp-listing')); + expect(listElement).toBeTruthy(); + const child: TemplMappListingComponent = listElement.componentInstance; + expect(child).not.toBeNull(); + + }); }); 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 6615a2d2c..7e9ae1639 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 @@ -6,10 +6,15 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./template-mapping.component.css'] }) export class TemplateMappingComponent implements OnInit { + creationView = false; constructor() { } ngOnInit() { } + openCreationView() { + this.creationView = true; + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index 6901d5773..7935e12a3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -26,6 +26,8 @@ import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.co import {AceEditorModule} from 'ng2-ace-editor'; import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component'; import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; +import { TemplMappCreationComponent } from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component'; +import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -42,6 +44,8 @@ import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab PackageCreationComponent, ImportsTabComponent, TemplateMappingComponent, + TemplMappCreationComponent, + TemplMappListingComponent, SourceEditorComponent, ScriptsTabComponent, MetadataTabComponent, |