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