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
|
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
import {optionsInputValues as licenseKeyGroupOptionsInputValues} from './LicenseKeyGroupsConstants.js';
import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
const LicenseKeyGroupPropType = React.PropTypes.shape({
id: React.PropTypes.string,
name: React.PropTypes.string,
description: React.PropTypes.string,
operationalScope: React.PropTypes.shape({
choices: React.PropTypes.array,
other: React.PropTypes.string
}),
type: React.PropTypes.string
});
class LicenseKeyGroupsEditorView extends React.Component {
static propTypes = {
data: LicenseKeyGroupPropType,
previousData: LicenseKeyGroupPropType,
isReadOnlyMode: React.PropTypes.bool,
onDataChanged: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired,
onCancel: React.PropTypes.func.isRequired
};
static defaultProps = {
data: {}
};
render() {
let {data = {}, onDataChanged, isReadOnlyMode} = this.props;
let {name, description, operationalScope, type} = data;
return (
<ValidationForm
ref='validationForm'
hasButtons={true}
onSubmit={ () => this.submit() }
onReset={ () => this.props.onCancel() }
labledButtons={true}
isReadOnlyMode={isReadOnlyMode}
className='license-key-groups-form'>
<div className='license-key-groups-form-row'>
<ValidationInput
onChange={name => onDataChanged({name})}
ref='name'
label={i18n('Name')}
value={name}
validations={{maxLength: 120, required: true}}
type='text'/>
<ValidationInput
isMultiSelect={true}
isRequired={true}
onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}})}
onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], other: operationalScope}})}
label={i18n('Operational Scope')}
validations={{required: true}}
multiSelectedEnum={operationalScope && operationalScope.choices}
otherValue={operationalScope && operationalScope.other}
values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}/>
</div>
<div className='license-key-groups-form-row'>
<ValidationInput
onChange={description => onDataChanged({description})}
ref='description'
label={i18n('Description')}
value={description}
validations={{maxLength: 1000, required: true}}
type='textarea'/>
<ValidationInput
isRequired={true}
onEnumChange={type => onDataChanged({type})}
selectedEnum={type}
label={i18n('Type')}
type='select'
validations={{required: true}}
values={licenseKeyGroupOptionsInputValues.TYPE}/>
</div>
</ValidationForm>
);
}
submit() {
const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup} = this.props;
this.props.onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
}
}
export default LicenseKeyGroupsEditorView;
|
