diff options
author | Michael Lando <ml636r@att.com> | 2017-02-19 12:57:33 +0200 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-02-19 13:47:13 +0200 |
commit | efa037d34be7b1570efdc767c79fad8d4005f10e (patch) | |
tree | cf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx | |
parent | f5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff) |
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx new file mode 100644 index 0000000000..2c8f243457 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx @@ -0,0 +1,123 @@ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; +import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; + +import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js'; + + +const SoftwareProductPropType = React.PropTypes.shape({ + id: React.PropTypes.string, + name: React.PropTypes.string, + description: React.PropTypes.string, + category: React.PropTypes.string, + subCategory: React.PropTypes.string, + vendorId: React.PropTypes.string +}); + +class SoftwareProductCreationView extends React.Component { + + static propTypes = { + data: SoftwareProductPropType, + finalizedLicenseModelList: React.PropTypes.array, + softwareProductCategories: React.PropTypes.array, + onDataChanged: React.PropTypes.func.isRequired, + onSubmit: React.PropTypes.func.isRequired, + onCancel: React.PropTypes.func.isRequired + }; + + render() { + let {softwareProductCategories, data = {}, onDataChanged, onCancel} = this.props; + let {name, description, vendorId, subCategory} = data; + + const vendorList = this.getVendorList(); + + return ( + <div className='software-product-creation-page'> + <ValidationForm + ref='validationForm' + hasButtons={true} + onSubmit={() => this.submit() } + onReset={() => onCancel() } + labledButtons={true}> + <div className='software-product-form-row'> + <div className='software-product-inline-section'> + <ValidationInput + value={name} + label={i18n('Name')} + ref='software-product-name' + onChange={name => onDataChanged({name})} + validations={{validateName: true, maxLength: 25, required: true}} + type='text' + className='field-section'/> + <ValidationInput + onEnumChange={vendorId => onDataChanged({vendorId})} + value={vendorId} + label={i18n('Vendor')} + values={vendorList} + validations={{required: true}} + type='select' + className='field-section'/> + <ValidationInput + label={i18n('Category')} + type='select' + value={subCategory} + onChange={subCategory => this.onSelectSubCategory(subCategory)} + validations={{required: true}} + className='options-input-category'> + <option key='' value=''>{i18n('please select…')}</option> + {softwareProductCategories.map(category => + category.subcategories && + <optgroup + key={category.name} + label={category.name}>{category.subcategories.map(sub => + <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)} + </optgroup>) + } + </ValidationInput> + </div> + <div className='software-product-inline-section'> + <ValidationInput + value={description} + label={i18n('Description')} + ref='description' + onChange={description => onDataChanged({description})} + validations={{freeEnglishText: true, maxLength: 1000, required: true}} + type='textarea' + className='field-section'/> + </div> + </div> + </ValidationForm> + </div> + ); + } + + getVendorList() { + let {finalizedLicenseModelList} = this.props; + + return [{enum: '', title: i18n('please select...')}].concat(finalizedLicenseModelList.map(vendor => { + return { + enum: vendor.id, + title: vendor.vendorName + }; + })); + } + + onSelectSubCategory(subCategory) { + let {softwareProductCategories, onDataChanged} = this.props; + let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories); + onDataChanged({category, subCategory}); + } + + create(){ + this.refs.validationForm.handleFormSubmit(new Event('dummy')); + } + + submit() { + const {data:softwareProduct, finalizedLicenseModelList} = this.props; + softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName; + this.props.onSubmit(softwareProduct); + } +} + +export default SoftwareProductCreationView; |