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