openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.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 PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21
  22 const VersionPropType = PropTypes.shape({
  23         name: PropTypes.string,
  24         description: PropTypes.string,
  25         creationMethod: PropTypes.string
  26 });
  27
  28 class VersionsPageCreationView extends React.Component {
  29
  30         static propTypes = {
  31                 data: VersionPropType,
  32                 availableMethods: PropTypes.array,
  33                 onDataChanged: PropTypes.func.isRequired,
  34                 onSubmit: PropTypes.func.isRequired,
  35                 onCancel: PropTypes.func.isRequired
  36         };
  37
  38         render() {
  39                 let {data = {}, genericFieldInfo, baseVersion, onDataChanged, onCancel} = this.props;
  40                 let {additionalInfo: {OptionalCreationMethods}} = baseVersion;
  41                 let {description, creationMethod} = data;
  42
  43                 return (
  44                         <div className='version-creation-page'>
  45                                 { genericFieldInfo && <Form
  46                                         ref={(validationForm) => this.validationForm = validationForm}
  47                                         hasButtons={true}
  48                                         onSubmit={() => this.submit()}
  49                                         submitButtonText={i18n('Create')}
  50                                         onReset={() => onCancel()}
  51                                         labledButtons={true}
  52                                         isValid={this.props.isFormValid}
  53                                         formReady={this.props.formReady}
  54                                         onValidateForm={() => this.validate()}>
  55
  56                                         <div className='version-form-row'>
  57                                                 <Input
  58                                                         label={i18n('Version Category')}
  59                                                         value={creationMethod}
  60                                                         onChange={e => this.onSelectMethod(e)}
  61                                                         type='select'
  62                                                         overlayPos='bottom'
  63                                                         data-test-id='new-version-category'
  64                                                         isValid={genericFieldInfo.creationMethod.isValid}
  65                                                         errorText={genericFieldInfo.creationMethod.errorText}
  66                                                         isRequired>
  67                                                         <option key='' value=''>{i18n('Please select…')}</option>
  68                                                         {OptionalCreationMethods.map(method => <option key={method} value={method}>{i18n(method)}</option>)}
  69                                                 </Input>
  70                                         </div>
  71
  72                                         <div className='version-form-row'>
  73                                                 <Input
  74                                                         label={i18n('Description')}
  75                                                         value={description}
  76                                                         type='text'
  77                                                         overlayPos='bottom'
  78                                                         data-test-id='new-version-description'
  79                                                         isValid={genericFieldInfo.description.isValid}
  80                                                         errorText={genericFieldInfo.description.errorText}
  81                                                         onChange={description => onDataChanged({description})}
  82                                                         isRequired />
  83                                         </div>
  84
  85                                 </Form> }
  86                         </div>
  87                 );
  88         }
  89
  90         onSelectMethod(e) {
  91                 const selectedIndex = e.target.selectedIndex;
  92                 const creationMethod = e.target.options[selectedIndex].value;
  93                 this.props.onDataChanged({creationMethod});
  94         }
  95
  96         submit() {
  97                 let {baseVersion, data: {description, creationMethod}} = this.props;
  98                 this.props.onSubmit({baseVersion, payload: {description, creationMethod}});
  99         }
 100
 101         validate() {
 102                 this.props.onValidateForm();
 103         }
 104
 105 }
 106
 107 export default VersionsPageCreationView;
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142 /*
 143                                                 <div className='software-product-inline-section'>
 144                                                         <Input
 145                                                                 value={name}
 146                                                                 label={i18n('Name')}
 147                                                                 isRequired={true}
 148                                                                 onChange={name => onDataChanged({name},V_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
 149                                                                 isValid={genericFieldInfo.name.isValid}
 150                                                                 errorText={genericFieldInfo.name.errorText}
 151                                                                 type='text'
 152                                                                 className='field-section'
 153                                                                 data-test-id='new-vsp-name' />
 154                                                         <Input
 155                                                                 label={i18n('Vendor')}
 156                                                                 type='select'
 157                                                                 value={vendorId}
 158                                                                 isRequired={true}
 159                                                                 disabled={disableVendor}
 160                                                                 onChange={e => this.onSelectVendor(e)}
 161                                                                 isValid={genericFieldInfo.vendorId.isValid}
 162                                                                 errorText={genericFieldInfo.vendorId.errorText}
 163                                                                 className='input-options-select'
 164                                                                 groupClassName='bootstrap-input-options'
 165                                                                 data-test-id='new-vsp-vendor' >
 166                                                                 {vendorList.map(vendor =>
 167                                                                 <option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
 168                                                         </Input>
 169                                                         <Input
 170                                                                 label={i18n('Category')}
 171                                                                 type='select'
 172                                                                 value={subCategory}
 173                                                                 isRequired={true}
 174                                                                 onChange={e => this.onSelectSubCategory(e)}
 175                                                                 isValid={genericFieldInfo.subCategory.isValid}
 176                                                                 errorText={genericFieldInfo.subCategory.errorText}
 177                                                                 className='input-options-select'
 178                                                                 groupClassName='bootstrap-input-options'
 179                                                                 data-test-id='new-vsp-category' >
 180                                                                 <option key='' value=''>{i18n('please select…')}</option>
 181                                                                 {softwareProductCategories.map(category =>
 182                                                                         category.subcategories &&
 183                                                                         <optgroup
 184                                                                                 key={category.name}
 185                                                                                 label={category.name}>{category.subcategories.map(sub =>
 186                                                                                 <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
 187                                                                         </optgroup>)
 188                                                                 }
 189                                                         </Input>
 190                                                 </div>
 191                                                 <div className='software-product-inline-section'>
 192                                                         <Input
 193                                                                 value={description}
 194                                                                 label={i18n('Description')}
 195                                                                 isRequired={true}
 196                                                                 overlayPos='bottom'
 197                                                                 onChange={description => onDataChanged({description},V_CREATION_FORM_NAME)}
 198                                                                 isValid={genericFieldInfo.description.isValid}
 199                                                                 errorText={genericFieldInfo.description.errorText}
 200                                                                 type='textarea'
 201                                                                 className='field-section'
 202                                                                 data-test-id='new-vsp-description' />
 203                                                 </div>
 204                                         </div>
 205                                 </Form>}
 206                         </div>
 207                 );
 208         }
 209
 210         getAvailableMethodsList() {
 211                 let {availableMethods} =  this.props;
 212                 return [...availableMethods];
 213         }
 214
 215         onSelectVendor(e) {
 216                 const selectedIndex = e.target.selectedIndex;
 217                 const vendorId = e.target.options[selectedIndex].value;
 218                 this.props.onDataChanged({vendorId},V_CREATION_FORM_NAME);
 219         }
 220
 221         onSelectSubCategory(e) {
 222                 const selectedIndex = e.target.selectedIndex;
 223                 const subCategory = e.target.options[selectedIndex].value;
 224                 let {softwareProductCategories, onDataChanged} = this.props;
 225                 let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
 226                 onDataChanged({category, subCategory},V_CREATION_FORM_NAME);
 227         }
 228
 229         submit() {
 230                 let  {data:softwareProduct, finalizedLicenseModelList} = this.props;
 231                 softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name;
 232                 this.props.onSubmit(softwareProduct);
 233         }
 234
 235         validateName(value) {
 236                 const {data: {id}, VSPNames} = this.props;
 237                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
 238
 239                 return !isExists ?  {isValid: true, errorText: ''} :
 240                         {isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
 241         }
 242
 243         validate() {
 244                 this.props.onValidateForm(SP_CREATION_FORM_NAME);
 245         }
 246 }
 247
 248 export default SoftwareProductCreationView;
 249 */