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