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         @Output() noPassParaChange = new EventEmitter<any>();
  20
  21         transferFormItems: any[] = TRANSFRER_FORM_ITEMS;
  22         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
  23         formData: any;
  24         coreFormItems : any = [];
  25         areaList: any[] = [];
  26     // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  27     NexthopInfoOptions = NexthopInfo_Options;
  28         EndpointInputs: object = {};
  29         ANEndpointInputs: object = {};
  30         CNEndpointInputs: object = {};
  31         ANkeyList: string[] = [];
  32         CNkeyList: string[] = [];
  33         EndpointEnable: boolean = true;  // Whether to enable the three parameters of Endpoint
  34         keyList: string[] = []; // keys of endPoint
  35         specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint'];
  36         // Parameters not passed to the back end
  37         notPassPara: string[] = ['tn_connection_links'];
  38     //  Comment: Above code
  39
  40         constructor(
  41                 private message: NzMessageService,
  42                 private Util: Util
  43                 ) {
  44                 }
  45
  46         ngOnInit() {
  47          }
  48
  49         ngOnChanges() {
  50                 if (this.title) {
  51                         this.formData = JSON.parse(JSON.stringify(this.detailData));
  52                         if (this.title === 'An' || this.title === 'Cn') {
  53                                 this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
  54                                 this.keyList = this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options.map((val) => {return val.key});
  55                                 }
  56                         else if (this.title === 'Tn') {
  57                                 this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key})
  58                                 this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key})
  59                                 this.keyList = this.ANkeyList.concat(this.CNkeyList)
  60                                 this.formData['tn_connection_links_option'].forEach((item) => { // add init selection status
  61                                         if (this.formData['tn_connection_links']!== null && this.formData['tn_connection_links'].indexOf(item.id) !== -1) {
  62                                                 item.checked = true
  63                                         } else {
  64                                                 item.checked = false
  65                                         }
  66                                 })
  67                                 this.judgeTn() // init judge
  68                         }
  69                         // If the endpoint related parameters from the back end are incomplete, delete the endpoint item
  70                         if(this.formData !==undefined && Object.keys(this.formData).length!==0) {
  71                                 this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
  72                         }
  73                         if(this.EndpointEnable){
  74                                 if (this.title === 'An' || this.title === 'Cn') {
  75                                         this.EndpointInputs = this.Util.pick(this.formData, this.keyList)
  76                                 } else if (this.title === 'Tn') {
  77                                         this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList)
  78                                         this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList)
  79                         } else {
  80                                 if (this.title === 'An' || this.title === 'Cn') {
  81                                         this.coreFormItems.map((item,index)=>{
  82                                                 if (item.title === 'Endpoint') {
  83                                                         this.coreFormItems.splice(index,1)
  84                                                 }
  85                                         })
  86                                 } else if (this.title === 'Tn') {
  87                                         this.transferFormItems.map((item,index)=>{
  88                                                 if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
  89                                                         this.coreFormItems.splice(index,1)
  90                                                 }
  91                                         })
  92                                 }
  93                         }
  94                         //-------> Comment: Above code
  95                         if (this.title === 'An') {
  96                                         this.AreaFormatting();
  97                         }
  98                         }
  99                 }
 100         }
 101         changeResourceShare () {
 102                 this.judgeTn()
 103         }
 104
 105         judgeTn (): void {
 106                 if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') {
 107                         this.formData['tn_connection_links_option'].forEach ((item) => {
 108                                 item.checked = false
 109                         })
 110                         this.formData['tn_connection_links'] = null
 111                         this.transferFormItems.forEach((item) => {
 112                                 if (item.title === 'Connection Links') {
 113                                         item.disable = true
 114                                         this.notPassPara = ['tn_connection_links', 'tn_connection_links_option']
 115                                 } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
 116                                         item.required = true
 117                                         item.disable = false
 118                                 }
 119                         })
 120                 } else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') {
 121                         this.transferFormItems.forEach((item) => {
 122                                 if (item.title === 'Connection Links') {
 123                                         item.disable = false
 124                                 } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
 125                                         if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length !== 0) {
 126                                                 item.disable = true
 127                                                 item.required = false
 128                                                 this.notPassPara = ['tn_connection_links_option']
 129                                                 this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
 130                                                 console.log('not', this.notPassPara)
 131                                         } else if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length === 0) {
 132                                                 item.disable = false
 133                                                 item.required = true
 134                                         }
 135                                 }
 136                         })
 137                 }
 138         }
 139
 140         validateEndPoint (key: string, value: any, required: boolean): string {
 141                 if (required) {
 142                         if (this.Util.isEmpty(value)) {
 143                                 return 'can not be empty';
 144                         }
 145                 }
 146                 if (key === 'ip_address') {
 147                         if (!this.regxpIP.test(value)) {
 148                                 if (value !== '') {
 149                                         return 'xxx.xxx.xxx.xxx';
 150                                 } else {
 151                                         return ''
 152                                 }
 153                         } else {
 154                                 return '';
 155                         }
 156                 } else if (key === 'logical_link') {
 157                         if (!this.Util.isInteger(value)){
 158                                 if (value !== ''){
 159                                         return 'integer only'
 160                                 } else {
 161                                         return ''
 162                                 }
 163                         } else {
 164                                 return ''
 165                         }
 166                 } else {
 167                         return '';
 168                 }
 169         }
 170
 171         changeLinkCheck (id: string, e: boolean) : void{ // update the selection state
 172                 this.formData['tn_connection_links_option'].find((item) => {
 173                         return item.id === id
 174                 }).checked = e
 175                 const checkedList = this.formData['tn_connection_links_option'].filter((item) => {return item.checked === true})
 176                 this.formData['tn_connection_links'] = checkedList.map((item) => {return item.id}) //  get the selected id
 177                 this.judgeTn()
 178         }
 179
 180         AreaFormatting () {
 181                 let areaList = [...this.formData.an_coverage_area_ta_list];
 182                 this.areaList = areaList.map ( (item: any) => {
 183                         let arr = item.split(';');
 184                         item = arr.map( (ite, index) => {
 185                                 let key: string;
 186                                 if (!index) {
 187                                         key = 'province';
 188                                 } else if (index === 1){
 189                                         key = 'city'
 190                                 } else {
 191                                         key = 'district'
 192                                 }
 193                                 const obj: any = {};
 194                                 obj.key = key;
 195                                 obj.selected = ite
 196                                 obj.options = [{name: ite, id: ite}]
 197                                 return obj
 198                         })
 199                         return item;
 200                 })
 201         }
 202
 203         creatAreaList (): void {
 204                 let arr = [
 205                         {
 206                                 key: 'province',
 207                                 selected: '',
 208                                 options: []
 209                         },
 210                         {
 211                                 key: 'city',
 212                                 selected: '',
 213                                 options: []
 214                         },
 215                         {
 216                                 key: 'district',
 217                                 selected: '',
 218                                 options: []
 219                         }
 220                 ]
 221                 this.areaList.push(arr)
 222         }
 223
 224         deleteAreaList (index: number): void {
 225                 this.areaList.splice(index,1);
 226         }
 227
 228         handleChange(area: any[], areaItem: any): void{
 229                 if (areaItem.key === 'province' && areaItem.options.length <= 1) {
 230                         areaItem.options = ADDRESS;
 231                 } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
 232                         ADDRESS.forEach( item => {
 233                                 if(item.name === area[0].selected) {
 234                                         areaItem.options = item.city;
 235                                 }
 236                         })
 237                 }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
 238                         ADDRESS.forEach( (item: any) => {
 239                                 item.city.forEach(city => {
 240                                         if (city.name === area[1].selected) {
 241                                                 areaItem.options = city.county;
 242                                         }
 243                                 })
 244                         })
 245                 }
 246         }
 247
 248         handleChangeSelected(area: any[], areaItem: any) {
 249                 if (areaItem.key === 'province') {
 250                         area[1].selected = ''
 251                         area[1].options = [];
 252                         area[2].selected = '';
 253                         area[2].options = [];
 254                 } else if (areaItem.key === 'city') {
 255                         area[2].selected = '';
 256                         area[2].options = [];
 257                 }
 258         }
 259
 260         handleCancel() : void{
 261                 this.showModel = false
 262                 this.cancel.emit(this.showModel)
 263         }
 264
 265         // prompt text for each item of area_list
 266         checkArea (area: any) : string{
 267                 if (area.every((item) => {return item.selected === ''})) {
 268                         return 'empty';
 269                 }
 270                 if (area.some((item) => {return item.selected === ''})) {
 271                         return 'incomplete';
 272                 }
 273                 return '';
 274         }
 275
 276         // special handling for address
 277         areaCheckBeforeSubmit (target: object) : Boolean{
 278                 for (const prop in target) {
 279                         if (target.hasOwnProperty(prop)) {
 280                                 if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
 281                                         // if the vlaue is "shanghai;shanghai;", the input is incomplete
 282                                         return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))});
 283                                 }
 284                         }
 285                 }
 286                 return true;
 287         }
 288
 289         endCheckBeforeSubmit (endpoint, required) : Array<any>{
 290                 // check params of Endpoint
 291                         console.log('end', endpoint)
 292                         let result: Array<any> = [true, ''];
 293                         let endPointList;
 294                         if (this.title === 'An' || this.title === 'Cn') {
 295                                 endPointList = this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options
 296                         } else {
 297                                 endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options
 298                         }
 299                         let ipKey = '';
 300                         let logicalKey = '';
 301                         let nextKey = ''
 302                         for (let item of endPointList) {
 303                                 if (item.title === 'ip_address') {
 304                                         ipKey = item.key
 305                                 } else if (item.title === 'logical_link') {
 306                                         logicalKey = item.key
 307                                 } else if (item.title === 'nexthop_info') {
 308                                         nextKey = item.key
 309                                 }
 310                         }
 311                         for (let prop in endpoint) {
 312                                 if (prop === ipKey) {
 313                                         if (required) {
 314                                                 if (endpoint[prop] === '') {
 315                                                         result = [false, 'Endpoint can not be empty']
 316                                                 } else if (!this.regxpIP.test(endpoint[prop])) {
 317                                                         result = [false, 'Illegal IpAddress']
 318                                                 }
 319                                         } else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') {
 320                                                 result = [false, 'Illegal IpAddress']
 321                                         }
 322                                 } else if (prop === logicalKey) {
 323                                         if (required) {
 324                                                 if (endpoint[prop] === '') {
 325                                                         result = [false, 'logical can not be empty']
 326                                                 } else if (!this.Util.isInteger(endpoint[prop])) {
 327                                                         result = [false, 'LogicalID can only be an integer']
 328                                                 }
 329                                         } else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') {
 330                                                 result = [false, 'LogicalID can only be an integer']
 331                                         }
 332                                 } else if (prop === nextKey) {
 333                                         if (required && endpoint[prop] === '') {
 334                                                 result = [false, 'Endpoint can not be empty']
 335                                         }
 336                                 }
 337                         }
 338                         return result;
 339         }
 340
 341         inputHolder (title: string): string {
 342                 const titleArr = title.split(' ')
 343                 if (titleArr.length > 1) {
 344                         return titleArr.slice(0, 2).join('');
 345                 } else {
 346                         return title;
 347                 }
 348         }
 349
 350         labelStyle (required: boolean) : object{
 351                 let style;
 352                 if (!required) {
 353                         style = {'margin-left': '18px', 'margin-right': '-18px'};
 354                 } else {
 355                         style = {}
 356                 }
 357                 return style;
 358         }
 359
 360         handleOk(): void {
 361                 // Verify that items of EndPoint is correct
 362                 if (this.EndpointEnable) {
 363                         let endCheckResult = []
 364                         if (this.title === 'An' || this.title === 'Cn') {
 365                                 endCheckResult = this.endCheckBeforeSubmit(this.EndpointInputs, this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).required)
 366                         } else if (this.title === 'Tn') {
 367                                 const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required)
 368                                 const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required)
 369                                 if (ANendCheckResult[0] && CNendCheckResult[0]) {
 370                                         endCheckResult[0] = true
 371                                 } else {
 372                                         if (ANendCheckResult[0] === false) {
 373                                                 endCheckResult = ANendCheckResult
 374                                         } else {
 375                                                 endCheckResult = CNendCheckResult
 376                                         }
 377                                 }
 378                         }
 379                         if (!endCheckResult[0]) {
 380                                 this.message.error(endCheckResult[1].toString());
 381                                 return;
 382                         }
 383                         // replace the params about endPoint
 384                         for (let prop in this.formData) {
 385                                 if ((this.title === 'An' || this.title === 'Cn') && typeof this.EndpointInputs[prop] !== 'undefined') {
 386                                         this.formData[prop] = this.EndpointInputs[prop];
 387                                 } else if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') {
 388                                         this.formData[prop] = this.ANEndpointInputs[prop];
 389                                 } else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') {
 390                                         this.formData[prop] = this.CNEndpointInputs[prop];
 391                                 }
 392                         }
 393                 }
 394                 let params: object;
 395                 if (this.title === 'An') {
 396                         const an_coverage_area_ta_list: string[] = [];
 397                         this.areaList.forEach( item => {
 398                                 let str: string = '';
 399                                 item.forEach( area => {
 400                                         str += area.selected + ';';
 401                                 })
 402                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 403                         })
 404                         params = {...this.formData, an_coverage_area_ta_list};
 405                 } else {
 406                         params = {...this.formData};
 407                 }
 408                 // Verify that each item exclude endpoint is not empty, include special handeling of area_list
 409                 let checkParams = params
 410                 if (this.title === 'An' || this.title === 'Cn') {
 411                         checkParams = this.coreFormItems.filter((item) => {
 412                                 return item.required === true
 413                         })
 414                 } else if (this.title = 'Tn') {
 415                         checkParams = this.transferFormItems.filter((item) => {
 416                                 return item.required === true
 417                         })
 418                 }
 419                 if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
 420                         this.paramsDataChange.emit(params);
 421                         this.noPassParaChange.emit(this.notPassPara)
 422                         this.handleCancel();
 423                 } else {
 424                         this.message.error('Please complete the form');
 425                 }
 426         }
 427
 428 }