1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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;
|
