src/editAttributes/changeAttributeForm/ChangeAttributeForm.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 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 import React, {Component} from 'react';
  22 import {Field, Fields, reduxForm, propTypes} from 'redux-form';
  23 import i18n from 'utils/i18n/i18n';
  24
  25 import {
  26   LABEL_NODE_URI,
  27   LABEL_PROV_STATUS,
  28   LABEL_ATTRIBUTES,
  29   LABEL_IN_MAINT,
  30   LABEL_IS_CLOSED_LOOP,
  31   BUTTON_SUBMIT,
  32   BUTTON_CLEAR,
  33   NO_VALUE_SELECTED,
  34   PREPROV,
  35   NVTPROV,
  36   DECOM,
  37   PROV,
  38   CAPPED,
  39   RETIRED,
  40   TRUE,
  41   FALSE
  42 } from './ChangeAttributeFormConstants.js';
  43 import validate from './validate.js';
  44
  45 class ChangeAttributeForm extends Component {
  46
  47   static propTypes = {
  48     ...propTypes
  49   };
  50
  51   renderTextField = ({input, label, type, meta: {touched, error}}) => (
  52     <div className='attribute-field'>
  53       <label>{label}</label>
  54       <div>
  55         <input {...input} placeholder={label} type={type}
  56                           onBlur={() => input.value === '' ? input.onBlur(' ') : input.onBlur()}/>
  57         {touched && ((error && <span className='error-message'>{error}</span>))}
  58       </div>
  59     </div>
  60   );
  61
  62
  63   booleanOptions = [
  64     <option value={NO_VALUE_SELECTED}>{i18n(NO_VALUE_SELECTED)}</option>,
  65     <option value='true'>{i18n(TRUE)}</option>,
  66     <option value='false'>{i18n(FALSE)}</option>
  67   ];
  68
  69   provStatusOptions = [
  70     <option value={NO_VALUE_SELECTED}>{i18n(NO_VALUE_SELECTED)}</option>,
  71     <option value={PREPROV}>{PREPROV}</option>,
  72     <option value={NVTPROV}>{NVTPROV}</option>,
  73     <option value={PROV}>{PROV}</option>,
  74     <option value={CAPPED}>{CAPPED}</option>,
  75     <option value={DECOM}>{DECOM}</option>,
  76     <option value={RETIRED}>{RETIRED}</option>
  77   ];
  78
  79   renderAttributeFields = (fields) => (
  80     <div>
  81       <div className='centre'>
  82         {(fields.provStatus.meta.touched ||
  83         fields.inMaint.meta.touched ||
  84         fields.isClosedLoopDisabled.meta.touched) &&
  85         fields.provStatus.meta.error &&
  86         <span className='error-message'>{fields.provStatus.meta.error}</span>}
  87       </div>
  88       <div className='attribute-field'>
  89         <label>{LABEL_PROV_STATUS}</label>
  90         <div>
  91           <select {...fields.provStatus.input}>
  92             {this.provStatusOptions}
  93           </select>
  94         </div>
  95       </div>
  96       <div className='attribute-field'>
  97         <label>{LABEL_IN_MAINT}</label>
  98         <div>
  99           <select {...fields.inMaint.input}>
 100             {this.booleanOptions}
 101           </select>
 102         </div>
 103       </div>
 104       <div className='attribute-field'>
 105         <label>{LABEL_IS_CLOSED_LOOP}</label>
 106         <div>
 107           <select {...fields.isClosedLoopDisabled.input}>
 108             {this.booleanOptions}
 109           </select>
 110         </div>
 111       </div>
 112     </div>
 113   );
 114
 115   render() {
 116     const {
 117                           handleSubmit,
 118                           buttonSelected,
 119                           pristine,
 120                           reset,
 121                           submitting} = this.props;
 122
 123     return (
 124       <form onSubmit={handleSubmit}>
 125         <Field name='uri' type='text' component={this.renderTextField}
 126                label={i18n(LABEL_NODE_URI)}/>
 127         <div className='centre'><h2>{i18n(LABEL_ATTRIBUTES)}</h2></div>
 128         <Fields names={['provStatus', 'inMaint', 'isClosedLoopDisabled']}
 129                 component={this.renderAttributeFields}/>
 130         <div className='centre'>
 131           <button type='submit'
 132                   disabled={pristine || submitting}
 133                   onClick={() => {
 134                                                                             buttonSelected();
 135                                                                           }}>
 136                           {i18n(BUTTON_SUBMIT)}
 137           </button>
 138           <button type='button'
 139                   disabled={pristine || submitting}
 140                   onClick={() => {
 141                                                                             reset();
 142                                                                             buttonSelected();
 143                                                                           }}>
 144                           {i18n(BUTTON_CLEAR)}
 145           </button>
 146         </div>
 147       </form>
 148     );
 149   }
 150 }
 151
 152 export default reduxForm({
 153   form: 'changeAttributeForm',
 154   validate
 155 })(ChangeAttributeForm);
 156