src/editAttributes/changeAttributeForm/ChangeAttributeForm.jsx

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