add template and mapping page skeleton in designer client

Issue-ID: CCSDK-2065
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Icbd3240c8043449a47d72bf70c76397725ffd2ba

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,