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: any[] = [];
  28         EndpointEnable: boolean = true;  // Whether to enable the three parameters of Endpoint
  29     //  Comment: Above code
  30
  31         constructor(
  32                 private message: NzMessageService,
  33                 private Util: Util
  34                 ) {
  35                 }
  36
  37         ngOnInit() {
  38          }
  39
  40         ngOnChanges() {
  41                 if(this.title){
  42                         this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
  43                         this.formData = JSON.parse(JSON.stringify(this.detailData));
  44             if(this.formData !==undefined && Object.keys(this.formData).length!==0){
  45                 this.EndpointEnable = (this.formData.hasOwnProperty("an_Endpoint") && this.formData['an_Endpoint'].length!==0) || (this.formData.hasOwnProperty("cn_Endpoint") && this.formData['cn_Endpoint'].length!==0)
  46             }
  47             // -------> 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  48             if(this.EndpointEnable){
  49                 this.EndpointInputs = this.title === 'An'
  50                     ?this.formData["an_Endpoint"]
  51                     :this.title === 'Cn'
  52                         ?this.formData["cn_Endpoint"]
  53                         :[];
  54             }else{
  55                 this.coreFormItems.map((item,index)=>{
  56                     if(item.title === 'Endpoint'){
  57                         this.coreFormItems.splice(index,1)
  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                 let formatedEndpoint = {};
 216                 this.EndpointInputs.forEach((item) => {
 217                         formatedEndpoint[Object.keys(item)[0]] = item[Object.keys(item)[0]];
 218                 })
 219                 if (this.title === 'An') {
 220                         for (let prop in formatedEndpoint) {
 221                                 if (prop === 'an_ip_address') {
 222                                         if (!this.regxpIP.test(formatedEndpoint[prop])) {
 223                                                 result = [false, 'Illegal IpAddress']
 224                                         }
 225                                 } else if (prop === 'an_logical_link') {
 226                                         if (!this.Util.isInteger(formatedEndpoint[prop])) {
 227                                                 result = [false, 'LogicalID can only be an integer']
 228                                         }
 229                                 }
 230                         }
 231                 } else if (this.title === 'Cn') {
 232                         for (let prop in formatedEndpoint) {
 233                                 if (prop === 'cn_ip_address') {
 234                                         if (!this.regxpIP.test(formatedEndpoint[prop])) {
 235                                                 result = [false, 'Illegal IpAddress']
 236                                         }
 237                                 } else if (prop === 'cn_logical_link') {
 238                                         if (!this.Util.isInteger(formatedEndpoint[prop])) {
 239                                                 result = [false, 'LogicalID can only be an integer']
 240                                         }
 241                                 }
 242                         }
 243                 }
 244                 return result;
 245         }
 246
 247         inputHolder (title: string): string {
 248                 const titleArr = title.split(' ')
 249                 if (titleArr.length > 1) {
 250                         return titleArr.slice(0, 2).join('');
 251                 } else {
 252                         return title;
 253                 }
 254         }
 255
 256         labelStyle (required: boolean) : object{
 257                 let style;
 258                 if (!required) {
 259                         style = {'margin-left': '18px', 'margin-right': '-18px'};
 260                 } else {
 261                         style = {}
 262                 }
 263                 return style;
 264         }
 265
 266         handleOk(): void {
 267                 // Verify that items of EndPoint is correct
 268                 let endCheckResult = this.endCheckBeforeSubmit()
 269                 if (!endCheckResult[0]) {
 270                         this.message.error(endCheckResult[1].toString());
 271                         return;
 272                 }
 273                 let params: object;
 274                 if (this.title === 'An') {
 275                         const an_coverage_area_ta_list: string[] = [];
 276                         this.areaList.forEach( item => {
 277                                 let str: string = '';
 278                                 item.forEach( area => {
 279                                         str += area.selected + ';';
 280                                 })
 281                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 282                         })
 283                         params = {...this.formData, an_coverage_area_ta_list};
 284                 } else {
 285                         params = {...this.formData};
 286                 }
 287                 // Verify that each item is not empty, include special handeling of area_list
 288                 if (this.Util.deepCheck(params) && this.areaCheckBeforeSubmit(params)) {
 289                         this.paramsDataChange.emit(params);
 290                         this.handleCancel();
 291                 } else {
 292                         this.message.error('Please complete the form');
 293                 }
 294         }
 295
 296 }