feat: change the project structure and add mock data function

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

1 files changed, 552 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
new file mode 100644
index 00000000..a0cf8338
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
@@ -0,0 +1,552 @@
+/*
+    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, TemplateRef } from '@angular/core';
+import { ManagemencsService } from '../../../core/services/managemencs.service';
+import { NzNotificationService } from 'ng-zorro-antd';
+@Component({
+    selector: 'app-customer',
+    templateUrl: './customer.component.html',
+    styleUrls: ['./customer.component.less']
+})
+export class CustomerComponent implements OnInit {
+    public chose = '';
+
+    constructor(
+        private managemencs: ManagemencsService,
+        private notification: NzNotificationService
+    ) {
+    }
+
+    ngOnInit() {
+        this.getAllCustomers();
+    }
+
+    AllCustomersdata = [];
+    AllServiceTypes = [];
+    customerber = [];
+    // Get all customers
+    active;
+    selectCustomer = {
+        name: null,
+        id: null
+    };
+    addNewCustomer = null;
+    addNewServiceType = null;
+    deleteCustomerModelVisible = false;
+    deleteServiceTypeModelVisible = false;
+    //2019.08.14 add
+    notificationAttributes = {
+        "title": "Customer",
+        "imgPath": "../../../../assets/images/execute-inproess.png",
+        "action": "Create",
+        "status": "InProgress",
+        "name": ""
+    };
+    notificationModelShow(template: TemplateRef<{}>): void {
+        console.log(this.notificationAttributes, "notificationModelShow show");
+        this.notification.template(template);
+    }
+    notificationSuccess(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png";
+        this.notificationAttributes.status = "Success";
+        this.notificationModelShow(notificationModel);
+    }
+    notificationFailed(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png";
+        this.notificationAttributes.status = "Failed";
+        this.notificationModelShow(notificationModel);
+    }
+    getAllCustomers() {
+        this.managemencs.getAllCustomers().subscribe((data) => {
+            this.AllCustomersdata = data.map((item) => {
+                return { name: item["subscriber-name"], id: item["global-customer-id"] }
+            });
+            this.active = this.selectCustomer = this.AllCustomersdata[0];
+            this.serviceInit["customer"] = this.AllCustomersdata[0].name;
+            this.getCustomersPie();
+            this.getServiceTypes(this.active);
+            this.getCustomersColumn(this.active);
+        })
+
+    }
+
+    // Get all servicetype
+    getServiceTypes(item) {
+        this.managemencs.getServiceTypes(item).subscribe((data) => {
+            this.AllServiceTypes = data.map((item) => {
+                return { type: item["service-type"], id: item["global-customer-id"] }
+            });
+        })
+    }
+
+    // Switch user data
+    choseCustomer(index, item) {
+        this.chose = index;
+        this.selectCustomer = item;
+        this.serviceInit["customer"] = this.selectCustomer.name;
+        this.getServiceTypes(item);
+        this.getCustomersColumn(item);
+    }
+
+    customeradd = false;
+    servicesadd = false;
+    //Customer pie
+    CUChartData: Object;
+    CUChartInit: Object = {
+        height: 200,
+        option: {
+            color: ["#F2F6FD"],
+            series: [{
+                type: 'pie',
+                name: "customer",
+                radius: '90%',
+                center: ['50%', '50%'],
+                data: [],
+                label: {
+                    normal: {
+                        position: 'center',
+                        show: false,
+                        formatter: '   {b|{b}：{c}}  ',
+                        backgroundColor: 'rgba(51,51,51,0.9)',
+                        borderColor: 'rgba(51,51,51,0.9)',
+                        borderWidth: 1,
+                        borderRadius: 4,
+                        rich: {
+                            b: {
+                                fontSize: 16,
+                                color: '#fff',
+                                lineHeight: 33
+                            }
+                        }
+                    },
+                    emphasis: {
+                        show: true,
+
+                    }
+                },
+                labelLine: {
+                    normal: {
+                        show: false
+                    }
+                },
+                itemStyle: {
+                    normal: {
+                        borderWidth: 3,
+                        borderColor: '#ffffff',
+                    },
+                    emphasis: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#7DCEFB'
+                            }, {
+                                offset: 1, color: '#0DA9E2'
+                            }],
+                            global: false
+                        },
+                        borderWidth: 0,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 10, 5, 0)'
+                    }
+                }
+            }]
+        }
+    };
+
+    // get customers chart pie
+    Pie_name = [];
+    Pie_value = [];
+    serviceChart = true;
+    serviceNumber;
+    getCustomersPie() {
+        this.managemencs.getCustomersPie().subscribe((data) => {
+            this.serviceNumber = data.serviceTotalNum;
+            if (this.serviceNumber > 0) {
+                this.serviceChart = true;
+            } else {
+                this.serviceChart = false;
+            }
+            this.CUChartData = {
+                series: [{
+                    data: data.customerServiceList
+                }]
+            }
+            console.log(this.CUChartData)
+        }, (err) => {
+            console.log(err);
+        });
+    }
+
+    // service bar
+    serviceData: Object;
+    serviceInit: Object = {
+        customer: '',
+        width: 280,
+        height: 190,
+        option: {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: "{c}"
+            },
+            grid: {
+                top: '5%',
+                left: '5%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'value',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    }
+                }
+
+            ],
+            yAxis: [
+                {
+                    type: 'category',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    },
+                    data: [],
+                },
+
+            ],
+            series: [
+                {
+                    name: '',
+                    barWidth: '40%',
+                    type: 'bar',
+                    data: [],
+                    itemStyle: {
+                        normal: {
+                            color: function (params) {
+                                // build a color map as your need.
+                                var colorList = [
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#FCCE2B'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FEE956'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#F43A59'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FA6C92'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#4F5B60'
+                                        }, {
+                                            offset: 1,
+                                            color: '#879499'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#31DAC3'
+                                        }, {
+                                            offset: 1,
+                                            color: '#5FEFE3'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#999999'
+                                        }, {
+                                            offset: 1,
+                                            color: '#C9C9C9'
+                                        }],
+                                        globalCoord: false,
+                                    }
+                                ];
+                                return colorList[params.dataIndex]
+                            },
+                        }
+                    }
+                },
+                {
+                    name: 'Type4',
+                    type: 'bar',
+                    stack: '',
+                    data: '',
+
+                },
+                {
+                    name: 'Type1',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type2',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type3',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Other',
+                    type: 'bar',
+                    stack: '',
+                    data: '',
+
+                }
+            ]
+        }
+    };
+    name_s = [];
+    value_s = [];
+
+    getCustomersColumn(item) {
+        this.name_s = [];
+        this.value_s = [];
+        this.managemencs.getCustomersColumn(item).subscribe((data) => {
+            data.list.forEach((item) => {
+                this.name_s.push(item.name);
+                this.value_s.push(item.value);
+            })
+            this.serviceData = {
+                yAxis: [{
+                    data: this.name_s
+                }],
+                series: [{
+                    data: this.value_s
+                }]
+            }
+            console.log(this.serviceData)
+        })
+    }
+
+    createNewCustomer(notificationModel) {
+        let createParams = {
+            customerId: this.addNewCustomer,
+            'global-customer-id': this.addNewCustomer,
+            'subscriber-name': this.addNewCustomer,
+            'subscriber-type': 'INFRA'
+        };
+        this.notificationAttributes = {
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewCustomer
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    // Customer delete model
+    thisdeleteCustomer = {
+        name: null,
+        id: null
+    };
+    deleteCustomerModel(itemCustomer) {
+        this.thisdeleteCustomer = itemCustomer;
+        this.deleteCustomerModelVisible = true;
+    }
+    deleteCustomerCancel() {
+        this.deleteCustomerModelVisible = false;
+    }
+    deleteCustomerOk(notificationModel) {
+        this.deleteCustomerModelVisible = false;
+        this.getCustomerVersion(this.thisdeleteCustomer, notificationModel);
+        this.notificationAttributes = {
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteCustomer.name
+        };
+        this.notificationModelShow(notificationModel);
+    }
+    getCustomerVersion(thisdeleteCustomer, notificationModel) {
+        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: thisdeleteCustomer.id,
+                    version: data["result"]["resource-version"]
+                };
+                this.deleteCustomer(params, notificationModel);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteCustomer(params, notificationModel) {
+        this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    createNewServiceType(notificationModel) {
+        let createParams = {
+            customer: this.selectCustomer,
+            ServiceType: this.addNewServiceType,
+            "service-type": this.addNewServiceType,
+            "temp-ub-sub-account-id": "sotnaccount"
+        };
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewServiceType
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.createServiceType(createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getCustomersColumn(this.selectCustomer);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    // ServiceType delete model
+    thisdeleteServiceType = {
+        type: null
+    };
+    deleteServiceTypeModel(itemServiceType) {
+        this.thisdeleteServiceType = itemServiceType;
+        this.deleteServiceTypeModelVisible = true;
+    }
+    deleteServiceTypeCancel() {
+        this.deleteServiceTypeModelVisible = false;
+    }
+    deleteServiceTypeOk(notificationModel) {
+        this.deleteServiceTypeModelVisible = false;
+        this.getServiceTypeVersion(notificationModel);
+    }
+    getServiceTypeVersion(notificationModel) {
+        let paramss = {
+            customerId: this.selectCustomer,
+            ServiceType: this.thisdeleteServiceType["type"]
+        };
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteServiceType["type"]
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
+            console.log(data)
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: this.selectCustomer,
+                    ServiceType: this.thisdeleteServiceType["type"],
+                    version: data["result"]["resource-version"]
+                };
+                this.deleteServiceType(params, notificationModel);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteServiceType(params, notificationModel) {
+        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getServiceTypes(params.customerId);
+                this.getCustomersColumn(params.customerId);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+
+}