Adding filter bar
[aai/sparky-fe.git] / src / editAttributes / changeAttributeForm / ChangeAttributeForm.jsx
1 /*
2  * ============LICENSE_START===================================================
3  * SPARKY (AAI UI service)
4  * ============================================================================
5  * Copyright © 2017 AT&T Intellectual Property.
6  * Copyright © 2017 Amdocs
7  * All rights reserved.
8  * ============================================================================
9  * Licensed under the Apache License, Version 2.0 (the "License");
10  * you may not use this file except in compliance with the License.
11  * You may obtain a copy of the License at
12  *
13  *      http://www.apache.org/licenses/LICENSE-2.0
14  *
15  * Unless required by applicable law or agreed to in writing, software
16  * distributed under the License is distributed on an "AS IS" BASIS,
17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18  * See the License for the specific language governing permissions and
19  * limitations under the License.
20  * ============LICENSE_END=====================================================
21  *
22  * ECOMP and OpenECOMP are trademarks
23  * and service marks of AT&T Intellectual Property.
24  */
25
26 import React, {Component} from 'react';
27 import {Field, Fields, reduxForm, propTypes} from 'redux-form';
28 import i18n from 'utils/i18n/i18n';
29
30 import {
31   LABEL_NODE_URI,
32   LABEL_PROV_STATUS,
33   LABEL_ATTRIBUTES,
34   LABEL_IN_MAINT,
35   LABEL_IS_CLOSED_LOOP,
36   BUTTON_SUBMIT,
37   BUTTON_CLEAR,
38   NO_VALUE_SELECTED,
39   PREPROV,
40   NVTPROV,
41   DECOM,
42   PROV,
43   CAPPED,
44   RETIRED,
45   TRUE,
46   FALSE
47 } from './ChangeAttributeFormConstants.js';
48 import validate from './validate.js';
49
50 class ChangeAttributeForm extends Component {
51
52   static propTypes = {
53     ...propTypes
54   };
55
56   renderTextField = ({input, label, type, meta: {touched, error}}) => (
57     <div className='attribute-field'>
58       <label>{label}</label>
59       <div>
60         <input {...input} placeholder={label} type={type}
61                           onBlur={() => input.value === '' ? input.onBlur(' ') : input.onBlur()}/>
62         {touched && ((error && <span className='error-message'>{error}</span>))}
63       </div>
64     </div>
65   );
66
67
68   booleanOptions = [
69     <option value={NO_VALUE_SELECTED}>{i18n(NO_VALUE_SELECTED)}</option>,
70     <option value='true'>{i18n(TRUE)}</option>,
71     <option value='false'>{i18n(FALSE)}</option>
72   ];
73
74   provStatusOptions = [
75     <option value={NO_VALUE_SELECTED}>{i18n(NO_VALUE_SELECTED)}</option>,
76     <option value={PREPROV}>{PREPROV}</option>,
77     <option value={NVTPROV}>{NVTPROV}</option>,
78     <option value={PROV}>{PROV}</option>,
79     <option value={CAPPED}>{CAPPED}</option>,
80     <option value={DECOM}>{DECOM}</option>,
81     <option value={RETIRED}>{RETIRED}</option>
82   ];
83
84   renderAttributeFields = (fields) => (
85     <div>
86       <div className='centre'>
87         {(fields.provStatus.meta.touched ||
88         fields.inMaint.meta.touched ||
89         fields.isClosedLoopDisabled.meta.touched) &&
90         fields.provStatus.meta.error &&
91         <span className='error-message'>{fields.provStatus.meta.error}</span>}
92       </div>
93       <div className='attribute-field'>
94         <label>{LABEL_PROV_STATUS}</label>
95         <div>
96           <select {...fields.provStatus.input}>
97             {this.provStatusOptions}
98           </select>
99         </div>
100       </div>
101       <div className='attribute-field'>
102         <label>{LABEL_IN_MAINT}</label>
103         <div>
104           <select {...fields.inMaint.input}>
105             {this.booleanOptions}
106           </select>
107         </div>
108       </div>
109       <div className='attribute-field'>
110         <label>{LABEL_IS_CLOSED_LOOP}</label>
111         <div>
112           <select {...fields.isClosedLoopDisabled.input}>
113             {this.booleanOptions}
114           </select>
115         </div>
116       </div>
117     </div>
118   );
119
120   render() {
121     const {
122                           handleSubmit,
123                           buttonSelected,
124                           pristine,
125                           reset,
126                           submitting} = this.props;
127
128     return (
129       <form onSubmit={handleSubmit}>
130         <Field name='uri' type='text' component={this.renderTextField}
131                label={i18n(LABEL_NODE_URI)}/>
132         <div className='centre'><h2>{i18n(LABEL_ATTRIBUTES)}</h2></div>
133         <Fields names={['provStatus', 'inMaint', 'isClosedLoopDisabled']}
134                 component={this.renderAttributeFields}/>
135         <div className='centre'>
136           <button type='submit'
137                   disabled={pristine || submitting}
138                   onClick={() => {
139                                                                             buttonSelected();
140                                                                           }}>
141                           {i18n(BUTTON_SUBMIT)}
142           </button>
143           <button type='button'
144                   disabled={pristine || submitting}
145                   onClick={() => {
146                                                                             reset();
147                                                                             buttonSelected();
148                                                                           }}>
149                           {i18n(BUTTON_CLEAR)}
150           </button>
151         </div>
152       </form>
153     );
154   }
155 }
156
157 export default reduxForm({
158   form: 'changeAttributeForm',
159   validate
160 })(ChangeAttributeForm);
161

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use