openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   4 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   5
   6 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
   7
   8
   9 const SoftwareProductPropType = React.PropTypes.shape({
  10         id: React.PropTypes.string,
  11         name: React.PropTypes.string,
  12         description: React.PropTypes.string,
  13         category: React.PropTypes.string,
  14         subCategory: React.PropTypes.string,
  15         vendorId: React.PropTypes.string
  16 });
  17
  18 class SoftwareProductCreationView extends React.Component {
  19
  20         static propTypes = {
  21                 data: SoftwareProductPropType,
  22                 finalizedLicenseModelList: React.PropTypes.array,
  23                 softwareProductCategories: React.PropTypes.array,
  24                 onDataChanged: React.PropTypes.func.isRequired,
  25                 onSubmit: React.PropTypes.func.isRequired,
  26                 onCancel: React.PropTypes.func.isRequired
  27         };
  28
  29         render() {
  30                 let {softwareProductCategories, data = {}, onDataChanged, onCancel} = this.props;
  31                 let {name, description, vendorId, subCategory} = data;
  32
  33                 const vendorList = this.getVendorList();
  34
  35                 return (
  36                         <div className='software-product-creation-page'>
  37                                 <ValidationForm
  38                                         ref='validationForm'
  39                                         hasButtons={true}
  40                                         onSubmit={() => this.submit() }
  41                                         onReset={() => onCancel() }
  42                                         labledButtons={true}>
  43                                         <div className='software-product-form-row'>
  44                                                 <div className='software-product-inline-section'>
  45                                                         <ValidationInput
  46                                                                 value={name}
  47                                                                 label={i18n('Name')}
  48                                                                 ref='software-product-name'
  49                                                                 onChange={name => onDataChanged({name})}
  50                                                                 validations={{validateName: true, maxLength: 25, required: true}}
  51                                                                 type='text'
  52                                                                 className='field-section'/>
  53                                                         <ValidationInput
  54                                                                 onEnumChange={vendorId => onDataChanged({vendorId})}
  55                                                                 value={vendorId}
  56                                                                 label={i18n('Vendor')}
  57                                                                 values={vendorList}
  58                                                                 validations={{required: true}}
  59                                                                 type='select'
  60                                                                 className='field-section'/>
  61                                                         <ValidationInput
  62                                                                 label={i18n('Category')}
  63                                                                 type='select'
  64                                                                 value={subCategory}
  65                                                                 onChange={subCategory => this.onSelectSubCategory(subCategory)}
  66                                                                 validations={{required: true}}
  67                                                                 className='options-input-category'>
  68                                                                 <option key='' value=''>{i18n('please select…')}</option>
  69                                                                 {softwareProductCategories.map(category =>
  70                                                                         category.subcategories &&
  71                                                                         <optgroup
  72                                                                                 key={category.name}
  73                                                                                 label={category.name}>{category.subcategories.map(sub =>
  74                                                                                 <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
  75                                                                         </optgroup>)
  76                                                                 }
  77                                                         </ValidationInput>
  78                                                 </div>
  79                                                 <div className='software-product-inline-section'>
  80                                                         <ValidationInput
  81                                                                 value={description}
  82                                                                 label={i18n('Description')}
  83                                                                 ref='description'
  84                                                                 onChange={description => onDataChanged({description})}
  85                                                                 validations={{freeEnglishText: true, maxLength: 1000, required: true}}
  86                                                                 type='textarea'
  87                                                                 className='field-section'/>
  88                                                 </div>
  89                                         </div>
  90                                 </ValidationForm>
  91                         </div>
  92                 );
  93         }
  94
  95         getVendorList() {
  96                 let {finalizedLicenseModelList} =  this.props;
  97
  98                 return [{enum: '', title: i18n('please select...')}].concat(finalizedLicenseModelList.map(vendor => {
  99                         return {
 100                                 enum: vendor.id,
 101                                 title: vendor.vendorName
 102                         };
 103                 }));
 104         }
 105
 106         onSelectSubCategory(subCategory) {
 107                 let {softwareProductCategories, onDataChanged} = this.props;
 108                 let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
 109                 onDataChanged({category, subCategory});
 110         }
 111
 112         create(){
 113                 this.refs.validationForm.handleFormSubmit(new Event('dummy'));
 114         }
 115
 116         submit() {
 117                 const {data:softwareProduct, finalizedLicenseModelList} = this.props;
 118                 softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName;
 119                 this.props.onSubmit(softwareProduct);
 120         }
 121 }
 122
 123 export default SoftwareProductCreationView;