Add user service type management module

Change-Id: Id86465d839b27dd4350d391198b8eacdf1f330a8
Issue-ID: USECASEUI-212
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

4 files changed, 135 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html
new file mode 100644
index 00000000..a695b003
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.html
@@ -0,0 +1,19 @@
+<div class="content" style="padding: 20px 20px;">
+  <div class="management"  [@showHideAnimate]="show" >
+    <div class="title">
+      <p>Create initial customer</p>
+      <span>Customer has not been created in ONAP </span>
+      <span>please create customer and its service type</span>
+      <img src="../../assets/images/customer01.png" alt="">
+      <input nz-input placeholder="input customer name" nzSize="large">
+      <button nz-button nzType="primary" class="cancel">Cancel</button>
+      <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button>
+    </div>
+    <div class="image">
+      <img src="../../assets/images/customer02.png" alt="">
+    </div>
+  </div>
+  <div  [@showHideAnimate]="hide">
+    <app-customer></app-customer>
+  </div>
+</div>
diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less
new file mode 100644
index 00000000..cc50e3c2
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.less
@@ -0,0 +1,57 @@
+.content {
+    .management {
+        width: 100%;
+        .title {
+            width: 50%;
+            vertical-align:top;
+            display: inline-block;
+            font-family: "Arial";
+            p {
+                font-size: 33px;
+                color: #3C4F8C;
+                margin-bottom: 0.5em;
+            }
+            span {
+                font-size: 18px;
+                color: rgba(60,79,140,0.5);
+                display: block;
+            }
+            img {
+                padding-top: 8%;
+                width: 55%;
+                margin-left: 18%;
+                margin-bottom: 5%;
+            }
+            input {
+                width: 50%;
+                margin-left: 20%;
+                margin-bottom: 5%;
+                display: block;
+            }
+            .cancel{
+                background-color: #eee;
+                border-color: #eee;
+                color: #9DA7C5;
+                width: 80px;
+                margin-left: 25%;
+                margin-right: 2%;
+            }
+            .add {
+                color: #fff;
+                width: 80px;
+                background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+                border-color: #1890ff;
+            }
+        }
+        .image {
+            width: 49%;
+            vertical-align:top;
+            display: inline-block;
+            img {
+                width: 85%;
+                margin-top: 41%;
+            }
+        }
+    }
+   
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/management/management.component.spec.ts
new file mode 100644
index 00000000..f6152432
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagementComponent } from './management.component';
+
+describe('ManagementComponent', () => {
+  let component: ManagementComponent;
+  let fixture: ComponentFixture<ManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts
new file mode 100644
index 00000000..7345e7a3
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit , HostBinding} from '@angular/core';
+import { showHideAnimate, slideToRight } from '../animates';
+
+@Component({
+  selector: 'app-management',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.less'],
+  animations: [
+    showHideAnimate, slideToRight
+  ]
+})
+export class ManagementComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  show = "show";
+  hide = "hide";
+  custerhide = false;
+  customershow(){
+    this.show = "show";
+    this.hide = "hide";
+    this.custerhide = true;
+  }
+  customerhide(){
+    this.show = "hide";
+    this.hide = "show";
+    this.custerhide = false;
+  }
+
+}