gerrit.onap Code Review - usecase-ui.git/blob

   1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
   2 import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants'
   3
   4 @Component({
   5         selector: 'app-subnet-params-model',
   6         templateUrl: './subnet-params-model.component.html',
   7         styleUrls: ['./subnet-params-model.component.less']
   8 })
   9 export class SubnetParamsModelComponent implements OnInit {
  10
  11         @Input() showModel: boolean;
  12         @Input() detailData: any;
  13         @Input() title: string;
  14         @Output() cancel = new EventEmitter<boolean>();
  15         @Output() paramsDataChange = new EventEmitter<any>();
  16
  17         transferFormItems = TRANSFRER_FORM_ITEMS;
  18         coreFormItems: any[] = [];
  19         areaList: any[] = [];
  20     // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  21     NexthopInfoOptions = NexthopInfo_Options;
  22     EndpointInputs: any[] = [];
  23     EndpointEnable: boolean = false;  // Whether to enable the three parameters of Endpoint
  24     //  Comment: Above code
  25
  26         constructor() { }
  27
  28         ngOnInit() { }
  29
  30         ngOnChanges() {
  31                 if(this.title){
  32             this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
  33             if(this.detailData !==undefined && Object.keys(this.detailData).length!==0){
  34                 this.EndpointEnable = (this.detailData.hasOwnProperty("an_Endpoint") && this.detailData['an_Endpoint'].length!==0) || (this.detailData.hasOwnProperty("cn_Endpoint") && this.detailData['cn_Endpoint'].length!==0)
  35             }
  36             // -------> 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  37             if(this.EndpointEnable){
  38                 this.EndpointInputs = this.title === 'An'
  39                     ?this.detailData["an_Endpoint"]
  40                     :this.title === 'Cn'
  41                         ?this.detailData["cn_Endpoint"]
  42                         :[];
  43             }else{
  44                 this.coreFormItems.map((item,index)=>{
  45                     if(item.title === 'Endpoint'){
  46                         this.coreFormItems.splice(index,1)
  47                     }
  48                 })
  49             }
  50                 }
  51         //-------> Comment: Above code
  52                 if (this.title === 'An') {
  53                         this.AreaFormatting();
  54                 }
  55         }
  56
  57         AreaFormatting () {
  58                 let areaList = [...this.detailData.an_coverage_area_ta_list];
  59                 this.areaList = areaList.map ( (item: any) => {
  60                         let arr = item.split(';');
  61                         item = arr.map( (ite, index) => {
  62                                 let key: string;
  63                                 if (!index) {
  64                                         key = 'province';
  65                                 } else if (index === 1){
  66                                         key = 'city'
  67                                 } else {
  68                                         key = 'district'
  69                                 }
  70                                 const obj: any = {};
  71                                 obj.key = key;
  72                                 obj.selected = ite
  73                                 obj.options = [{name: ite, id: ite}]
  74                                 return obj
  75                         })
  76                         return item;
  77                 })
  78         }
  79
  80         creatAreaList (): void {
  81                 let arr = [
  82                         {
  83                                 key: 'province',
  84                                 selected: '',
  85                                 options: []
  86                         },
  87                         {
  88                                 key: 'city',
  89                                 selected: '',
  90                                 options: []
  91                         },
  92                         {
  93                                 key: 'district',
  94                                 selected: '',
  95                                 options: []
  96                         }
  97                 ]
  98                 this.areaList.push(arr)
  99         }
 100
 101         deleteAreaList (index: number): void {
 102                 this.areaList.splice(index,1);
 103         }
 104
 105         handleChange(area: any[], areaItem: any): void{
 106                 if (areaItem.key === 'province' && areaItem.options.length <= 1) {
 107                         areaItem.options = ADDRESS;
 108                 } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
 109                         ADDRESS.forEach( item => {
 110                                 if(item.name === area[0].selected) {
 111                                         areaItem.options = item.city;
 112                                 }
 113                         })
 114                 }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
 115                         ADDRESS.forEach( (item: any) => {
 116                                 item.city.forEach(city => {
 117                                         if (city.name === area[1].selected) {
 118                                                 areaItem.options = city.county;
 119                                         }
 120                                 })
 121                         })
 122                 }
 123         }
 124
 125         handleChangeSelected(area: any[], areaItem: any) {
 126                 if (areaItem.key === 'province') {
 127                         area[1].selected = ''
 128                         area[1].options = [];
 129                         area[2].selected = '';
 130                         area[2].options = [];
 131                 } else if (areaItem.key === 'city') {
 132                         area[2].selected = '';
 133                         area[2].options = [];
 134                 }
 135         }
 136
 137         handleCancel() {
 138                 this.showModel = false
 139                 this.cancel.emit(this.showModel)
 140         }
 141
 142         handleOk(): void {
 143                 let params: object;
 144                 if (this.title === 'An') {
 145                         const an_coverage_area_ta_list: string[] = [];
 146                         this.areaList.forEach( item => {
 147                                 let str: string = '';
 148                                 item.forEach( area => {
 149                                         str += area.selected + ';';
 150                                 })
 151                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 152                         })
 153                         params = {...this.detailData, an_coverage_area_ta_list}
 154                 } else {
 155                         params = {...this.detailData}
 156                 }
 157                 this.paramsDataChange.emit(params)
 158                 this.handleCancel()
 159         }
 160
 161 }