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