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

   1 import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
   2 import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants';
   3 import { NzMessageService } from "ng-zorro-antd";
   4 import { stringify } from '@angular/core/src/util';
   5 import { Util } from '../../../../../../shared/utils/utils';
   6
   7 @Component({
   8         selector: 'app-subnet-params-model',
   9         templateUrl: './subnet-params-model.component.html',
  10         styleUrls: ['./subnet-params-model.component.less']
  11 })
  12 export class SubnetParamsModelComponent implements OnInit {
  13
  14         @Input() showModel: boolean;
  15         @Input() detailData: any;
  16         @Input() title: string;
  17         @Output() cancel = new EventEmitter<boolean>();
  18         @Output() paramsDataChange = new EventEmitter<any>();
  19
  20         transferFormItems = TRANSFRER_FORM_ITEMS;
  21         regxpIP =  /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address
  22         formData: any;
  23         coreFormItems : any = [];
  24         areaList: any[] = [];
  25     // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  26     NexthopInfoOptions = NexthopInfo_Options;
  27     EndpointInputs: object = {};
  28         EndpointEnable: boolean = true;  // Whether to enable the three parameters of Endpoint
  29         keyList: string[] = []; // keys of endPoint
  30     //  Comment: Above code
  31
  32         constructor(
  33                 private message: NzMessageService,
  34                 private Util: Util
  35                 ) {
  36                 }
  37
  38         ngOnInit() {
  39          }
  40
  41         ngOnChanges() {
  42                 if(this.title){
  43    this.formData = JSON.parse(JSON.stringify(this.detailData));
  44    if (this.title === 'An' || this.title === 'Cn') {
  45     this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
  46     this.keyList = this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options.map((val) => {return val.key});
  47     if(this.formData !==undefined && Object.keys(this.formData).length!==0){
  48      this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
  49     }
  50     if(this.EndpointEnable){
  51      this.EndpointInputs = this.Util.pick(this.formData, this.keyList)// no?
  52     }else{
  53      this.coreFormItems.map((item,index)=>{
  54       if(item.title === 'Endpoint'){
  55        this.coreFormItems.splice(index,1)
  56       }
  57      })
  58     }
  59    }
  60
  61                 }
  62         //-------> Comment: Above code
  63                 if (this.title === 'An') {
  64                         this.AreaFormatting();
  65                 }
  66         }
  67         validateEndPoint (key: string, value: any): string {
  68                 if (this.Util.isEmpty(value)) {
  69                         return 'can not be empty';
  70                 }
  71                 if (key === 'ip_address') {
  72                         if (!this.regxpIP.test(value)) {
  73                                 return 'xxx.xxx.xxx.xxx';
  74                         } else {
  75                                 return '';
  76                         }
  77                 } else if (key === 'logical_link') {
  78                         if (!this.Util.isInteger(value)){
  79                                 return 'integer only'
  80                         } else {
  81                                 return ''
  82                         }
  83                 } else {
  84                         return '';
  85                 }
  86         }
  87
  88         // onInput ($event:any, title: string) {
  89         //      if (!$event) {
  90         //              return;
  91         //      }
  92         //      const target = $event.target;
  93         //      if (title === 'ip_address') {
  94         //          // only number and '.' can be inputted
  95         //              const regexp = /[^\d^\.]+/g;
  96         //              target.value = target.value.replace(regexp, '');
  97         //      } else if (title === 'logical_link') {
  98         //          // only number can be inputted
  99         //              const regxp = /[^\d]/g;
 100         //              target.value = target.value.replace(regxp, '');
 101         //      }
 102         // }
 103         AreaFormatting () {
 104                 let areaList = [...this.formData.an_coverage_area_ta_list];
 105                 this.areaList = areaList.map ( (item: any) => {
 106                         let arr = item.split(';');
 107                         item = arr.map( (ite, index) => {
 108                                 let key: string;
 109                                 if (!index) {
 110                                         key = 'province';
 111                                 } else if (index === 1){
 112                                         key = 'city'
 113                                 } else {
 114                                         key = 'district'
 115                                 }
 116                                 const obj: any = {};
 117                                 obj.key = key;
 118                                 obj.selected = ite
 119                                 obj.options = [{name: ite, id: ite}]
 120                                 return obj
 121                         })
 122                         return item;
 123                 })
 124         }
 125
 126         creatAreaList (): void {
 127                 let arr = [
 128                         {
 129                                 key: 'province',
 130                                 selected: '',
 131                                 options: []
 132                         },
 133                         {
 134                                 key: 'city',
 135                                 selected: '',
 136                                 options: []
 137                         },
 138                         {
 139                                 key: 'district',
 140                                 selected: '',
 141                                 options: []
 142                         }
 143                 ]
 144                 this.areaList.push(arr)
 145         }
 146
 147         deleteAreaList (index: number): void {
 148                 this.areaList.splice(index,1);
 149         }
 150
 151         handleChange(area: any[], areaItem: any): void{
 152                 if (areaItem.key === 'province' && areaItem.options.length <= 1) {
 153                         areaItem.options = ADDRESS;
 154                 } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
 155                         ADDRESS.forEach( item => {
 156                                 if(item.name === area[0].selected) {
 157                                         areaItem.options = item.city;
 158                                 }
 159                         })
 160                 }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
 161                         ADDRESS.forEach( (item: any) => {
 162                                 item.city.forEach(city => {
 163                                         if (city.name === area[1].selected) {
 164                                                 areaItem.options = city.county;
 165                                         }
 166                                 })
 167                         })
 168                 }
 169         }
 170
 171         handleChangeSelected(area: any[], areaItem: any) {
 172                 if (areaItem.key === 'province') {
 173                         area[1].selected = ''
 174                         area[1].options = [];
 175                         area[2].selected = '';
 176                         area[2].options = [];
 177                 } else if (areaItem.key === 'city') {
 178                         area[2].selected = '';
 179                         area[2].options = [];
 180                 }
 181         }
 182
 183         handleCancel() {
 184                 this.showModel = false
 185                 this.cancel.emit(this.showModel)
 186         }
 187
 188         // prompt text for each item of area_list
 189         checkArea (area: any) {
 190                 if (area.every((item) => {return item.selected === ''})) {
 191                         return 'empty';
 192                 }
 193                 if (area.some((item) => {return item.selected === ''})) {
 194                         return 'incomplete';
 195                 }
 196                 return '';
 197         }
 198
 199         // special handling for address
 200         areaCheckBeforeSubmit (target: object) : Boolean{
 201                 for (const prop in target) {
 202                         if (target.hasOwnProperty(prop)) {
 203                                 if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
 204                                         // if the vlaue is "shanghai;shanghai;", the input is incomplete
 205                                         return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))});
 206                                 }
 207                         }
 208                 }
 209                 return true;
 210         }
 211
 212         endCheckBeforeSubmit () : Array<any>{
 213                 // check params of Endpoint
 214                 let result: Array<any> = [true, ''];
 215                 const endPointList = this.coreFormItems&&this.coreFormItems.length!==0?this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options:{};
 216                 let ipKey = '';
 217                 let logicalKey = '';
 218                 for (let item of endPointList) {
 219                         if (item.title === 'ip_address') {
 220                                 ipKey = item.key
 221                         } else if (item.title === 'logical_link') {
 222                                 logicalKey = item.key
 223                         }
 224                 }
 225                 for (let prop in this.EndpointInputs) {
 226                         if (prop === ipKey) {
 227                                 if (!this.regxpIP.test(this.EndpointInputs[prop])) {
 228                                         result = [false, 'Illegal IpAddress']
 229                                 }
 230                         } else if (prop === logicalKey) {
 231                                 if (!this.Util.isInteger(this.EndpointInputs[prop])) {
 232                                         result = [false, 'LogicalID can only be an integer']
 233                                 }
 234                         }
 235                 }
 236                 return result;
 237         }
 238
 239         inputHolder (title: string): string {
 240                 const titleArr = title.split(' ')
 241                 if (titleArr.length > 1) {
 242                         return titleArr.slice(0, 2).join('');
 243                 } else {
 244                         return title;
 245                 }
 246         }
 247
 248         labelStyle (required: boolean) : object{
 249                 let style;
 250                 if (!required) {
 251                         style = {'margin-left': '18px', 'margin-right': '-18px'};
 252                 } else {
 253                         style = {}
 254                 }
 255                 return style;
 256         }
 257
 258         handleOk(): void {
 259                 // Verify that items of EndPoint is correct
 260                 let endCheckResult = this.endCheckBeforeSubmit()
 261                 if (!endCheckResult[0]) {
 262                         this.message.error(endCheckResult[1].toString());
 263                         return;
 264                 }
 265                 // replace the params about endPoint
 266                 for (let prop in this.formData) {
 267                         if (typeof this.EndpointInputs[prop] !== 'undefined') {
 268                                 this.formData[prop] = this.EndpointInputs[prop];
 269                         }
 270                 }
 271                 let params: object;
 272                 if (this.title === 'An') {
 273                         const an_coverage_area_ta_list: string[] = [];
 274                         this.areaList.forEach( item => {
 275                                 let str: string = '';
 276                                 item.forEach( area => {
 277                                         str += area.selected + ';';
 278                                 })
 279                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 280                         })
 281                         params = {...this.formData, an_coverage_area_ta_list};
 282                 } else {
 283                         params = {...this.formData};
 284                 }
 285                 // Verify that each item is not empty, include special handeling of area_list
 286                 if (this.Util.deepCheck(params) && this.areaCheckBeforeSubmit(params)) {
 287                         this.paramsDataChange.emit(params);
 288                         this.handleCancel();
 289                 } else {
 290                         this.message.error('Please complete the form');
 291                 }
 292         }
 293
 294 }