gerrit.onap Code Review - sdc.git/blob

   1 /*!
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import Input from 'nfvo-components/input/validation/Input.jsx';
  22 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
  23
  24 class VendorSelector extends React.Component {
  25         static propTypes = {
  26                 finalizedLicenseModelList: PropTypes.array,
  27                 vendorName: PropTypes.string,
  28                 onClose: PropTypes.func.isRequired,
  29                 onConfirm: PropTypes.func.isRequired
  30         }
  31         constructor(props){
  32                 super(props);
  33                 const selectedValue = props.finalizedLicenseModelList.length ? props.finalizedLicenseModelList[0].id : '';
  34                 this.state = {
  35                         selectedValue
  36                 };
  37         }
  38         submit() {
  39                 const vendor = this.props.finalizedLicenseModelList.find(item => item.id === this.state.selectedValue);
  40                 this.props.onConfirm(vendor.id);
  41                 this.props.onClose();
  42         }
  43         render() {
  44                 const {finalizedLicenseModelList, vendorName, onClose} =  this.props;
  45                 const {selectedValue} = this.state;
  46                 return (
  47                         <div className='vsp-details-vendor-select'>
  48                                 <Form
  49                                         onSubmit={() => this.submit()}
  50                                         onReset={() => onClose()}
  51                                         isValid = {!!selectedValue}
  52                                         submitButtonText={i18n('Save')}
  53                                         hasButtons={true}>
  54                                                 <div className='vendor-selector-modal-title'>{`${i18n('The VLM')} '${vendorName}' ${i18n('assigned to this VSP is archived')}.`}</div>
  55                                                 <div className='vendor-selector-modal-additional-text'>{i18n('If you select a different VLM you will not be able to reselect the archived VLM.')}</div>
  56                                                 <Input
  57                                                         data-test-id='vsp-vendor-name-select'
  58                                                         label={i18n('Vendor')}
  59                                                         type='select'
  60                                                         onChange={e => {this.setState({
  61                                                                 selectedValue: e.target.options[e.target.selectedIndex].value
  62                                                         });}}
  63                                                         value={selectedValue}>
  64                                                         <option key='emtyVendor' value=''>{i18n('please select...')}</option>
  65                                                         {sortByStringProperty(
  66                                                                 finalizedLicenseModelList,
  67                                                                 'name'
  68                                                         ).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
  69                                                         }
  70                                                 </Input>
  71                                 </Form>
  72                         </div>
  73                 );
  74         }
  75 }
  76
  77 export default VendorSelector;
  78