openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3
   4 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   5 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   6 import {optionsInputValues as licenseKeyGroupOptionsInputValues} from './LicenseKeyGroupsConstants.js';
   7 import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
   8
   9 const LicenseKeyGroupPropType = React.PropTypes.shape({
  10         id: React.PropTypes.string,
  11         name: React.PropTypes.string,
  12         description: React.PropTypes.string,
  13         operationalScope: React.PropTypes.shape({
  14                 choices: React.PropTypes.array,
  15                 other: React.PropTypes.string
  16         }),
  17         type: React.PropTypes.string
  18 });
  19
  20 class LicenseKeyGroupsEditorView extends React.Component {
  21         static propTypes = {
  22                 data: LicenseKeyGroupPropType,
  23                 previousData: LicenseKeyGroupPropType,
  24                 isReadOnlyMode: React.PropTypes.bool,
  25                 onDataChanged: React.PropTypes.func.isRequired,
  26                 onSubmit: React.PropTypes.func.isRequired,
  27                 onCancel: React.PropTypes.func.isRequired
  28         };
  29
  30         static defaultProps = {
  31                 data: {}
  32         };
  33
  34         render() {
  35                 let {data = {}, onDataChanged, isReadOnlyMode} = this.props;
  36                 let {name, description, operationalScope, type} = data;
  37                 return (
  38                         <ValidationForm
  39                                 ref='validationForm'
  40                                 hasButtons={true}
  41                                 onSubmit={ () => this.submit() }
  42                                 onReset={ () => this.props.onCancel() }
  43                                 labledButtons={true}
  44                                 isReadOnlyMode={isReadOnlyMode}
  45                                 className='license-key-groups-form'>
  46                                 <div className='license-key-groups-form-row'>
  47                                         <ValidationInput
  48                                                 onChange={name => onDataChanged({name})}
  49                                                 ref='name'
  50                                                 label={i18n('Name')}
  51                                                 value={name}
  52                                                 validations={{maxLength: 120, required: true}}
  53                                                 type='text'/>
  54                                         <ValidationInput
  55                                                 isMultiSelect={true}
  56                                                 isRequired={true}
  57                                                 onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}})}
  58                                                 onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], other: operationalScope}})}
  59                                                 label={i18n('Operational Scope')}
  60                                                 validations={{required: true}}
  61                                                 multiSelectedEnum={operationalScope && operationalScope.choices}
  62                                                 otherValue={operationalScope && operationalScope.other}
  63                                                 values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}/>
  64                                 </div>
  65                                 <div className='license-key-groups-form-row'>
  66                                         <ValidationInput
  67                                                 onChange={description => onDataChanged({description})}
  68                                                 ref='description'
  69                                                 label={i18n('Description')}
  70                                                 value={description}
  71                                                 validations={{maxLength: 1000, required: true}}
  72                                                 type='textarea'/>
  73                                                 <ValidationInput
  74                                                         isRequired={true}
  75                                                         onEnumChange={type => onDataChanged({type})}
  76                                                         selectedEnum={type}
  77                                                         label={i18n('Type')}
  78                                                         type='select'
  79                                                         validations={{required: true}}
  80                                                         values={licenseKeyGroupOptionsInputValues.TYPE}/>
  81                                         </div>
  82                         </ValidationForm>
  83                 );
  84         }
  85
  86         submit() {
  87                 const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup} = this.props;
  88                 this.props.onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
  89         }
  90 }
  91
  92 export default LicenseKeyGroupsEditorView;