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