feat: adjust the file structure of the customer component

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

1 files changed, 138 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.html b/usecaseui-portal/src/app/views/management/customer/customer.component.html
new file mode 100644
index 00000000..4f532f8f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.html
@@ -0,0 +1,138 @@
+<!--
+    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">
+  <div class="chearts">
+    <div class="Cu" #chart>
+      <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart" #pie></app-pie>
+      <div *ngIf="!serviceChart">No Service Instances </div>
+    </div>
+    <div class="type">
+      <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
+      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+      <div class="footname">
+        <img src="assets/images/customerBarUser.png" alt="customerName">
+        {{this.serviceInit["customer"]}}     
+      </div>
+    </div>
+  </div>
+  <div class="customer">
+    <div class="customer_title">
+      <div class="customers">
+        <span> {{"i18nTextDefine_Customer" | translate}} </span>
+        <img  src="assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd">
+      </div>
+    </div>
+    <div class="customer_detail">
+      <div class="customer_add" *ngIf="customeradd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name"
+          nzSize="default" [(ngModel)]="addNewCustomer">
+        <button nz-button nzType="primary" class="customer_addbut"
+          (click)="createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+      </div>
+      <div class="customer_list">
+        <ul>
+          <li *ngFor="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}"
+            (click)="choseCustomer(i,item)">
+            <img src="assets/images/customer05.png" alt="">
+            <span>{{item.name}}</span>
+            <i class="anticon anticon-delete" (click)="deleteCustomerModel(item)"></i>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="services_type">
+    <div class="services_type_title">
+      <div class="servicess">
+        <span> {{"i18nTextDefine_ServiceType" | translate}} </span>
+        <img src="assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd ">
+      </div>
+    </div>
+    <div class="services_type_detail">
+      <div class="services_add" *ngIf="servicesadd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name"
+          nzSize="default" [(ngModel)]="addNewServiceType">
+        <button nz-button nzType="primary" class="services_addbut"
+          (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+      </div>
+      <div class="services_list_content">
+        <div class="border_size"></div>
+        <div class="services_list">
+          <ul>
+            <li *ngFor="let item of AllServiceTypes">
+              <span>{{item.type}}</span>
+              <i class="anticon anticon-delete" (click)="deleteServiceTypeModel(item)"></i>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk(notificationModel)" nzClassName="deleteModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
+    </div>
+  </nz-modal>
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible"
+    nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
+    (nzOnOk)="deleteServiceTypeOk(notificationModel)" nzClassName="deleteModel deleteServiceTypeModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.name}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.id}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_ServiceType" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
+    </div>
+  </nz-modal>
+  <!--2019.08.14 add notification-->
+  <ng-template #notificationModel>
+    <div class="ant-notification-notice-content">
+      <div class="ant-notification-notice-with-icon">
+        <span class="ant-notification-notice-icon">
+          <img src="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+        </span>
+        <div class="ant-notification-notice-message" *ngIf="notificationAttributes.title == 'Customer'">
+          {{"i18nTextDefine_"+notificationAttributes.title | translate}}&nbsp;
+          {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+        </div>
+        <div class="ant-notification-notice-description">
+          <div class="notificationlist">
+            <p>{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+            <span>{{ notificationAttributes.name }}</span>
+          </div>
+        </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
+      </div>
+    </div>
+  </ng-template>
+</div>
\ No newline at end of file