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 (!this.isInteger(value)){
  76                                 return 'integer 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 (area: any) {
 186                 if (area.every((item) => {return item.selected === ''})) {
 187                         return 'empty';
 188                 }
 189                 if (area.some((item) => {return item.selected === ''})) {
 190                         return 'incomplete';
 191                 }
 192                 return '';
 193         }
 194
 195         judgeType (a) {
 196                 return Object.prototype.toString.call(a)
 197         }
 198
 199         // used to verify that each item is not empty in a object
 200         deepCheck (target) {
 201                 let type = this.judgeType(target);
 202                 if (type === '[object Array]') {
 203                         for (let i = 0; i < target.length; i++) {
 204                                 if (!this.deepCheck(target[i])) {
 205                                         return false;
 206                                 }
 207                           }
 208                 } else if (type === '[object Object]') {
 209                         for (const prop in target) {
 210                                 if (target.hasOwnProperty(prop)) { // special handling for address
 211                                   if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
 212                                           return target[prop].every((item) => {return this.deepCheck(item.split(';'))});
 213                                   } else if (!this.deepCheck(target[prop])) {
 214                                           return false;
 215                                   }
 216                                 }
 217                         }
 218                 } else {
 219                         if (!target && target!==0) {
 220                                 return false;
 221                         } else {
 222                                 return true;
 223                         }
 224                 }
 225                 return true;
 226         }
 227
 228         isInteger (value: any) {
 229                 // for common string and undefined, eg '123a3'
 230                 if (isNaN(value)) {
 231                         return false;
 232                 } else if (isNaN(parseInt(value))) {
 233                         return false;
 234                 } else if (Number(value) >= 0 && Number(value)%1 !== 0){
 235                         return false;
 236                 } else {
 237                         return true;
 238                 }
 239         }
 240
 241         endCheckBeforeSubmit () {
 242                 // check params of Endpoint
 243                 let result = [true, ''];
 244                 let formatedEndpoint = {};
 245                 this.EndpointInputs.forEach((item) => {
 246                         formatedEndpoint[Object.keys(item)[0]] = item[Object.keys(item)[0]];
 247                 })
 248                 if (this.title === 'An') {
 249                         for (let prop in formatedEndpoint) {
 250                                 if (prop === 'an_ip_address') {
 251                                         if (!this.regxpIP.test(formatedEndpoint[prop])) {
 252                                                 result = [false, 'Illegal IpAddress']
 253                                         }
 254                                 } else if (prop === 'an_logical_link') {
 255                                         if (!this.isInteger(formatedEndpoint[prop])) {
 256                                                 result = [false, 'LogicalID can only be an integer']
 257                                         }
 258                                 }
 259                         }
 260                 } else if (this.title === 'Cn') {
 261                         for (let prop in formatedEndpoint) {
 262                                 if (prop === 'cn_ip_address') {
 263                                         if (!this.regxpIP.test(formatedEndpoint[prop])) {
 264                                                 result = [false, 'Illegal IpAddress']
 265                                         }
 266                                 } else if (prop === 'cn_logical_link') {
 267                                         if (!this.isInteger(formatedEndpoint[prop])) {
 268                                                 result = [false, 'LogicalID can only be an integer']
 269                                         }
 270                                 }
 271                         }
 272                 }
 273                 return result;
 274         }
 275
 276         handleOk(): void {
 277                 // Verify that items of EndPoint is correct
 278                 let endCheckResult = this.endCheckBeforeSubmit()
 279                 if (!endCheckResult[0]) {
 280                         this.message.error(endCheckResult[1].toString());
 281                         return;
 282                 }
 283                 let params: object;
 284                 if (this.title === 'An') {
 285                         const an_coverage_area_ta_list: string[] = [];
 286                         this.areaList.forEach( item => {
 287                                 let str: string = '';
 288                                 item.forEach( area => {
 289                                         str += area.selected + ';';
 290                                 })
 291                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 292                         })
 293                         params = {...this.formData, an_coverage_area_ta_list};
 294                 } else {
 295                         params = {...this.formData};
 296                 }
 297                 // Verify that each item is not empty
 298                 if (this.deepCheck(params)) {
 299                         this.paramsDataChange.emit(params);
 300                         this.handleCancel();
 301                 } else {
 302                         this.message.error('Please complete the form');
 303                 }
 304         }
 305
 306 }