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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Validator from 'nfvo-utils/Validator.js';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import {SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
  22 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
  23
  24 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
  25
  26 const SoftwareProductPropType = React.PropTypes.shape({
  27         id: React.PropTypes.string,
  28         name: React.PropTypes.string,
  29         description: React.PropTypes.string,
  30         category: React.PropTypes.string,
  31         subCategory: React.PropTypes.string,
  32         vendorId: React.PropTypes.string
  33 });
  34
  35 class SoftwareProductCreationView extends React.Component {
  36
  37         static propTypes = {
  38                 data: SoftwareProductPropType,
  39                 finalizedLicenseModelList: React.PropTypes.array,
  40                 softwareProductCategories: React.PropTypes.array,
  41                 VSPNames: React.PropTypes.object,
  42                 onDataChanged: React.PropTypes.func.isRequired,
  43                 onSubmit: React.PropTypes.func.isRequired,
  44                 onCancel: React.PropTypes.func.isRequired
  45         };
  46
  47         render() {
  48                 let {softwareProductCategories, data = {}, onDataChanged, onCancel, genericFieldInfo, disableVendor} = this.props;
  49                 let {name, description, vendorId, subCategory} = data;
  50
  51                 const vendorList = this.getVendorList();
  52                 return (
  53                         <div className='software-product-creation-page'>
  54                                 { genericFieldInfo && <Form
  55                                         ref={(validationForm) => this.validationForm = validationForm}
  56                                         hasButtons={true}
  57                                         onSubmit={() => this.submit() }
  58                                         onReset={() => onCancel() }
  59                                         labledButtons={true}
  60                                         isValid={this.props.isFormValid}
  61                                         formReady={this.props.formReady}
  62                                         onValidateForm={() => this.validate() }>
  63                                         <div className='software-product-form-row'>
  64                                                 <div className='software-product-inline-section'>
  65                                                         <Input
  66                                                                 value={name}
  67                                                                 label={i18n('Name')}
  68                                                                 isRequired={true}
  69                                                                 onChange={name => onDataChanged({name},SP_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
  70                                                                 isValid={genericFieldInfo.name.isValid}
  71                                                                 errorText={genericFieldInfo.name.errorText}
  72                                                                 type='text'
  73                                                                 className='field-section'
  74                                                                 data-test-id='new-vsp-name' />
  75                                                         <Input
  76                                                                 label={i18n('Vendor')}
  77                                                                 type='select'
  78                                                                 value={vendorId}
  79                                                                 isRequired={true}
  80                                                                 disabled={disableVendor}
  81                                                                 onChange={e => this.onSelectVendor(e)}
  82                                                                 isValid={genericFieldInfo.vendorId.isValid}
  83                                                                 errorText={genericFieldInfo.vendorId.errorText}
  84                                                                 className='input-options-select'
  85                                                                 groupClassName='bootstrap-input-options'
  86                                                                 data-test-id='new-vsp-vendor' >
  87                                                                 {vendorList.map(vendor =>
  88                                                                 <option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
  89                                                         </Input>
  90                                                         <Input
  91                                                                 label={i18n('Category')}
  92                                                                 type='select'
  93                                                                 value={subCategory}
  94                                                                 isRequired={true}
  95                                                                 onChange={e => this.onSelectSubCategory(e)}
  96                                                                 isValid={genericFieldInfo.subCategory.isValid}
  97                                                                 errorText={genericFieldInfo.subCategory.errorText}
  98                                                                 className='input-options-select'
  99                                                                 groupClassName='bootstrap-input-options'
 100                                                                 data-test-id='new-vsp-category' >
 101                                                                 <option key='' value=''>{i18n('please select…')}</option>
 102                                                                 {softwareProductCategories.map(category =>
 103                                                                         category.subcategories &&
 104                                                                         <optgroup
 105                                                                                 key={category.name}
 106                                                                                 label={category.name}>{category.subcategories.map(sub =>
 107                                                                                 <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
 108                                                                         </optgroup>)
 109                                                                 }
 110                                                         </Input>
 111                                                 </div>
 112                                                 <div className='software-product-inline-section'>
 113                                                         <Input
 114                                                                 value={description}
 115                                                                 label={i18n('Description')}
 116                                                                 isRequired={true}
 117                                                                 overlayPos='bottom'
 118                                                                 onChange={description => onDataChanged({description},SP_CREATION_FORM_NAME)}
 119                                                                 isValid={genericFieldInfo.description.isValid}
 120                                                                 errorText={genericFieldInfo.description.errorText}
 121                                                                 type='textarea'
 122                                                                 className='field-section'
 123                                                                 data-test-id='new-vsp-description' />
 124                                                 </div>
 125                                         </div>
 126                                 </Form>}
 127                         </div>
 128                 );
 129         }
 130
 131         getVendorList() {
 132                 let {finalizedLicenseModelList} =  this.props;
 133
 134                 return [{enum: '', title: i18n('please select...')}].concat(
 135                         sortByStringProperty(finalizedLicenseModelList, 'vendorName').map(vendor => {
 136                                 return {
 137                                         enum: vendor.id,
 138                                         title: vendor.vendorName
 139                                 };
 140                         })
 141                 );
 142         }
 143
 144         onSelectVendor(e) {
 145                 const selectedIndex = e.target.selectedIndex;
 146                 const vendorId = e.target.options[selectedIndex].value;
 147                 this.props.onDataChanged({vendorId},SP_CREATION_FORM_NAME);
 148         }
 149
 150         onSelectSubCategory(e) {
 151                 const selectedIndex = e.target.selectedIndex;
 152                 const subCategory = e.target.options[selectedIndex].value;
 153                 let {softwareProductCategories, onDataChanged} = this.props;
 154                 let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
 155                 onDataChanged({category, subCategory},SP_CREATION_FORM_NAME);
 156         }
 157
 158         submit() {
 159                 let  {data:softwareProduct, finalizedLicenseModelList} = this.props;
 160                 softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName;
 161                 this.props.onSubmit(softwareProduct);
 162         }
 163
 164         validateName(value) {
 165                 const {data: {id}, VSPNames} = this.props;
 166                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
 167
 168                 return !isExists ?  {isValid: true, errorText: ''} :
 169                         {isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
 170         }
 171
 172         validate() {
 173                 this.props.onValidateForm(SP_CREATION_FORM_NAME);
 174         }
 175 }
 176
 177 export default SoftwareProductCreationView;