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 GridSection from 'nfvo-components/grid/GridSection.jsx';
  22 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  23
  24 import {SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
  25 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
  26
  27 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
  28 import {onboardingMethod as onboardingMethodConst} from '../SoftwareProductConstants.js';
  29
  30 const SoftwareProductPropType = React.PropTypes.shape({
  31         id: React.PropTypes.string,
  32         name: React.PropTypes.string,
  33         description: React.PropTypes.string,
  34         category: React.PropTypes.string,
  35         subCategory: React.PropTypes.string,
  36         vendorId: React.PropTypes.string
  37 });
  38
  39 class SoftwareProductCreationView extends React.Component {
  40
  41         static propTypes = {
  42                 data: SoftwareProductPropType,
  43                 finalizedLicenseModelList: React.PropTypes.array,
  44                 softwareProductCategories: React.PropTypes.array,
  45                 VSPNames: React.PropTypes.object,
  46                 onDataChanged: React.PropTypes.func.isRequired,
  47                 onSubmit: React.PropTypes.func.isRequired,
  48                 onCancel: React.PropTypes.func.isRequired
  49         };
  50
  51         render() {
  52                 let {softwareProductCategories, data = {}, onDataChanged, onCancel, genericFieldInfo, disableVendor} = this.props;
  53                 let {name, description, vendorId, subCategory, onboardingMethod} = data;
  54
  55                 const vendorList = this.getVendorList();
  56                 return (
  57                         <div className='software-product-creation-page'>
  58                                 { genericFieldInfo && <Form
  59                                         ref={(validationForm) => this.validationForm = validationForm}
  60                                         hasButtons={true}
  61                                         onSubmit={() => this.submit() }
  62                                         onReset={() => onCancel() }
  63                                         labledButtons={true}
  64                                         isValid={this.props.isFormValid}
  65                                         submitButtonText={i18n('Create')}
  66                                         formReady={this.props.formReady}
  67                                         onValidateForm={() => this.validate() }>
  68                                         <GridSection>
  69                                                 <GridItem colSpan='2'>
  70                                                         <Input
  71                                                                 value={name}
  72                                                                 label={i18n('Name')}
  73                                                                 isRequired={true}
  74                                                                 onChange={name => onDataChanged({name},SP_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
  75                                                                 isValid={genericFieldInfo.name.isValid}
  76                                                                 errorText={genericFieldInfo.name.errorText}
  77                                                                 type='text'
  78                                                                 className='field-section'
  79                                                                 data-test-id='new-vsp-name' />
  80                                                         <Input
  81                                                                 label={i18n('Vendor')}
  82                                                                 type='select'
  83                                                                 value={vendorId}
  84                                                                 overlayPos='bottom'
  85                                                                 isRequired={true}
  86                                                                 disabled={disableVendor}
  87                                                                 onChange={e => this.onSelectVendor(e)}
  88                                                                 isValid={genericFieldInfo.vendorId.isValid}
  89                                                                 errorText={genericFieldInfo.vendorId.errorText}
  90                                                                 className='input-options-select'
  91                                                                 groupClassName='bootstrap-input-options'
  92                                                                 data-test-id='new-vsp-vendor' >
  93                                                                 {vendorList.map(vendor =>
  94                                                                 <option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
  95                                                         </Input>
  96                                                         <Input
  97                                                                 label={i18n('Category')}
  98                                                                 type='select'
  99                                                                 value={subCategory}
 100                                                                 isRequired={true}
 101                                                                 onChange={e => this.onSelectSubCategory(e)}
 102                                                                 isValid={genericFieldInfo.subCategory.isValid}
 103                                                                 errorText={genericFieldInfo.subCategory.errorText}
 104                                                                 className='input-options-select'
 105                                                                 groupClassName='bootstrap-input-options'
 106                                                                 data-test-id='new-vsp-category' >
 107                                                                 <option key='' value=''>{i18n('please select…')}</option>
 108                                                                 {softwareProductCategories.map(category =>
 109                                                                         category.subcategories &&
 110                                                                         <optgroup
 111                                                                                 key={category.name}
 112                                                                                 label={category.name}>{category.subcategories.map(sub =>
 113                                                                                 <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
 114                                                                         </optgroup>)
 115                                                                 }
 116                                                         </Input>
 117                                                 </GridItem>
 118                                                 <GridItem colSpan='2' stretch>
 119                                                         <Input
 120                                                                 value={description}
 121                                                                 label={i18n('Description')}
 122                                                                 isRequired={true}
 123                                                                 overlayPos='bottom'
 124                                                                 onChange={description => onDataChanged({description},SP_CREATION_FORM_NAME)}
 125                                                                 isValid={genericFieldInfo.description.isValid}
 126                                                                 errorText={genericFieldInfo.description.errorText}
 127                                                                 type='textarea'
 128                                                                 className='field-section'
 129                                                                 data-test-id='new-vsp-description'/>
 130                                                 </GridItem>
 131                                         </GridSection>
 132                                         <OnboardingProcedure genericFieldInfo={genericFieldInfo} onboardingMethod={onboardingMethod} onDataChanged={onDataChanged} />
 133                                 </Form>}
 134                         </div>
 135                 );
 136         }
 137
 138         getVendorList() {
 139                 let {finalizedLicenseModelList} =  this.props;
 140
 141                 return [{enum: '', title: i18n('please select...')}].concat(
 142                         sortByStringProperty(finalizedLicenseModelList, 'vendorName').map(vendor => {
 143                                 return {
 144                                         enum: vendor.id,
 145                                         title: vendor.vendorName
 146                                 };
 147                         })
 148                 );
 149         }
 150
 151         onSelectVendor(e) {
 152                 const selectedIndex = e.target.selectedIndex;
 153                 const vendorId = e.target.options[selectedIndex].value;
 154                 this.props.onDataChanged({vendorId},SP_CREATION_FORM_NAME);
 155         }
 156
 157         onSelectSubCategory(e) {
 158                 const selectedIndex = e.target.selectedIndex;
 159                 const subCategory = e.target.options[selectedIndex].value;
 160                 let {softwareProductCategories, onDataChanged} = this.props;
 161                 let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
 162                 onDataChanged({category, subCategory},SP_CREATION_FORM_NAME);
 163         }
 164
 165         submit() {
 166                 let  {data:softwareProduct, finalizedLicenseModelList} = this.props;
 167                 softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName;
 168                 this.props.onSubmit(softwareProduct);
 169         }
 170
 171         validateName(value) {
 172                 const {data: {id}, VSPNames} = this.props;
 173                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
 174
 175                 return !isExists ?  {isValid: true, errorText: ''} :
 176                         {isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
 177         }
 178
 179         validate() {
 180                 this.props.onValidateForm(SP_CREATION_FORM_NAME);
 181         }
 182 }
 183
 184 const OnboardingProcedure = ({onboardingMethod, onDataChanged, genericFieldInfo}) => {
 185         return(
 186                 <GridSection title={i18n('Onboarding procedure')}>
 187                         <GridItem colSpan={4}>
 188                                 <Input
 189                                         label={i18n('HEAT file')}
 190                                         overlayPos='top'
 191                                         isValid={genericFieldInfo.onboardingMethod.isValid}
 192                                         checked={onboardingMethod === onboardingMethodConst.HEAT}
 193                                         errorText={genericFieldInfo.onboardingMethod.errorText}
 194                                         onChange={() => onDataChanged({onboardingMethod:'HEAT'},SP_CREATION_FORM_NAME)}
 195                                         type='radio'
 196                                         data-test-id='new-vsp-creation-procedure-heat' />
 197                         </GridItem>
 198                         <GridItem colSpan={4}>
 199                                 <Input
 200                                         label={i18n('Manual')}
 201                                         overlayPos='bottom'
 202                                         checked={onboardingMethod === onboardingMethodConst.MANUAL}
 203                                         isValid={genericFieldInfo.onboardingMethod.isValid}
 204                                         errorText={genericFieldInfo.onboardingMethod.errorText}
 205                                         onChange={() => onDataChanged({onboardingMethod:'Manual'},SP_CREATION_FORM_NAME)}
 206                                         type='radio'
 207                                         data-test-id='new-vsp-creation-procedure-manual' />
 208                         </GridItem>
 209                 </GridSection>
 210         );
 211 };
 212
 213 export default SoftwareProductCreationView;