feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

4 files changed, 211 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/management/management.component.html b/usecaseui-portal/src/app/views/management/management.component.html
new file mode 100644
index 00000000..c96f0253
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/management.component.html
@@ -0,0 +1,39 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="content" style="padding: 20px 20px;height: 100vh">
+  <div class="management" *ngIf="nocuster">
+    <div class="title">
+      <p> {{"i18nTextDefine_Create_initial_customer" | translate}} </p>
+      <span> {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} </span>
+      <span> {{"i18nTextDefine_CreateCustomer" | translate}} </span>
+      <img src="../../../assets/images/customer01.png" alt="">
+      <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large"
+        style="height: 50px" [(ngModel)]="firstCustomer">
+      <div class="action">
+        <button nz-button nzType="primary" class="cancel" (click)="clearCustomerInput()">
+          {{"i18nTextDefine_Cancel" | translate}} </button>
+        <button nz-button nzType="primary" class="add" (click)="createNewCustomer(firstCustomer)">
+          {{"i18nTextDefine_Add" | translate}} </button>
+      </div>
+    </div>
+    <div class="image">
+      <img src="../../../assets/images/customer02.png" alt="">
+    </div>
+  </div>
+  <div *ngIf="!nocuster" style="height: 100%">
+    <app-customer></app-customer>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/management/management.component.less b/usecaseui-portal/src/app/views/management/management.component.less
new file mode 100644
index 00000000..5a3a0f42
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/management.component.less
@@ -0,0 +1,79 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.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: 20%;
+                margin-bottom: 5%;
+            }
+            input {
+                width: 50%;
+                margin: 0 auto;
+                margin-bottom: 5%;
+                display: block;
+
+            }
+            .action{
+                width: 50%;
+                height: 40px;
+                margin: 0 auto;
+            }
+            .action button{
+                width: 40%;
+                height: 40px;
+                margin: 0 4%;
+            }
+            .cancel{
+                background-color: #eee;
+                border-color: #eee;
+                color: #9DA7C5;
+            }
+            .add {
+                color: #fff;
+                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/views/management/management.component.spec.ts b/usecaseui-portal/src/app/views/management/management.component.spec.ts
new file mode 100644
index 00000000..f6152432
--- /dev/null
+++ b/usecaseui-portal/src/app/views/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/views/management/management.component.ts b/usecaseui-portal/src/app/views/management/management.component.ts
new file mode 100644
index 00000000..8b3afea7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/management.component.ts
@@ -0,0 +1,68 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { Component, OnInit , HostBinding} from '@angular/core';
+import { showHideAnimate, slideToRight } from '../../animates';
+import { ManagemencsService } from '../../core/services/managemencs.service';
+
+@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(private managemencs: ManagemencsService) { }
+
+  ngOnInit() {
+    this.getAllCustomers();
+  }
+
+    nocuster = true;
+    firstCustomer = null;
+    AllCustomersdata = [];
+
+    // Get all customers
+    getAllCustomers() {
+        this.managemencs.getAllCustomers().subscribe((data) => {
+            if (data.length > 0) {
+                this.nocuster = false;
+            } else {
+                this.nocuster = true;
+            }
+        })
+    }
+
+    createNewCustomer(customer) {
+        let createParams = {
+            customerId: customer
+        };
+        this.managemencs.createCustomer(customer, createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.nocuster = false;
+            } else {
+                this.nocuster = true;
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    clearCustomerInput(){
+        this.firstCustomer=null;
+    }
+}