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