openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx

   1 /*!
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  20 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  21 import Input from 'nfvo-components/input/validation/Input.jsx';
  22 import { SP_ENTITLEMENT_POOL_FORM } from '../EntitlementPoolsConstants.js';
  23 import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
  24 import { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js';
  25 import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx';
  26
  27 export const EntitlementPoolsFormContent = ({
  28     data,
  29     genericFieldInfo,
  30     onDataChanged,
  31     validateName,
  32     thresholdValueValidation,
  33     validateStartDate
  34 }) => {
  35     let {
  36         name,
  37         description,
  38         thresholdUnits,
  39         thresholdValue,
  40         increments,
  41         startDate,
  42         expiryDate,
  43         manufacturerReferenceNumber,
  44         id,
  45         versionUUID
  46     } = data;
  47     return (
  48         <GridSection hasLastColSet>
  49             <GridItem colSpan={2}>
  50                 <Input
  51                     onChange={name =>
  52                         onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
  53                             name: validateName
  54                         })
  55                     }
  56                     isValid={genericFieldInfo.name.isValid}
  57                     isRequired={true}
  58                     errorText={genericFieldInfo.name.errorText}
  59                     label={i18n('Name')}
  60                     value={name}
  61                     data-test-id="create-ep-name"
  62                     type="text"
  63                 />
  64             </GridItem>
  65             <GridItem colSpan={2} lastColInRow>
  66                 <Input
  67                     onChange={e => {
  68                         // setting the unit to the correct value
  69                         const selectedIndex = e.target.selectedIndex;
  70                         const val = e.target.options[selectedIndex].value;
  71                         onDataChanged(
  72                             { thresholdUnits: val },
  73                             SP_ENTITLEMENT_POOL_FORM
  74                         );
  75                         // TODO make sure that the value is valid too
  76                         if (thresholdValue && thresholdValue !== '') {
  77                             onDataChanged(
  78                                 { thresholdValue: thresholdValue },
  79                                 SP_ENTITLEMENT_POOL_FORM,
  80                                 { thresholdValue: thresholdValueValidation }
  81                             );
  82                         }
  83                     }}
  84                     value={thresholdUnits}
  85                     label={i18n('Threshold Units')}
  86                     data-test-id="create-ep-threshold-units"
  87                     isValid={genericFieldInfo.thresholdUnits.isValid}
  88                     errorText={genericFieldInfo.thresholdUnits.errorText}
  89                     groupClassName="bootstrap-input-options"
  90                     className="input-options-select"
  91                     type="select">
  92                     {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
  93                         mtype => (
  94                             <option key={mtype.enum} value={mtype.enum}>{`${
  95                                 mtype.title
  96                             }`}</option>
  97                         )
  98                     )}
  99                 </Input>
 100             </GridItem>
 101             <GridItem colSpan={2} stretch>
 102                 <Input
 103                     onChange={description =>
 104                         onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
 105                     }
 106                     isValid={genericFieldInfo.description.isValid}
 107                     errorText={genericFieldInfo.description.errorText}
 108                     label={i18n('Description')}
 109                     value={description}
 110                     data-test-id="create-ep-description"
 111                     type="textarea"
 112                 />
 113             </GridItem>
 114             <GridItem colSpan={2} lastColInRow>
 115                 <Input
 116                     className="entitlement-pools-form-row-threshold-value"
 117                     onChange={thresholdValue =>
 118                         onDataChanged(
 119                             { thresholdValue },
 120                             SP_ENTITLEMENT_POOL_FORM,
 121                             {
 122                                 thresholdValue: thresholdValueValidation
 123                             }
 124                         )
 125                     }
 126                     label={i18n('Threshold Value')}
 127                     isValid={genericFieldInfo.thresholdValue.isValid}
 128                     errorText={genericFieldInfo.thresholdValue.errorText}
 129                     data-test-id="create-ep-threshold-value"
 130                     value={thresholdValue}
 131                     type="text"
 132                 />
 133                 <Input
 134                     onChange={increments =>
 135                         onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
 136                     }
 137                     label={i18n('Increments')}
 138                     value={increments}
 139                     data-test-id="create-ep-increments"
 140                     type="text"
 141                 />
 142             </GridItem>
 143
 144             <GridItem colSpan={2}>
 145                 <Input
 146                     className="entitlement-pools-form-row-threshold-value"
 147                     onChange={manufacturerReferenceNumber =>
 148                         onDataChanged(
 149                             { manufacturerReferenceNumber },
 150                             SP_ENTITLEMENT_POOL_FORM
 151                         )
 152                     }
 153                     isValid={
 154                         genericFieldInfo.manufacturerReferenceNumber.isValid
 155                     }
 156                     isRequired={true}
 157                     errorText={
 158                         genericFieldInfo.manufacturerReferenceNumber.errorText
 159                     }
 160                     label={i18n('Manufacturer Reference Number')}
 161                     data-test-id="create-ep-manufacturerReferenceNumber-value"
 162                     value={manufacturerReferenceNumber}
 163                     type="text"
 164                     groupClassName="no-bottom-margin"
 165                 />
 166             </GridItem>
 167             <GridItem colSpan={2} lastColInRow>
 168                 <div className="date-section">
 169                     <Input
 170                         groupClassName="no-bottom-margin"
 171                         type="date"
 172                         label={i18n('Start Date')}
 173                         value={startDate}
 174                         dateFormat={DATE_FORMAT}
 175                         startDate={startDate}
 176                         endDate={expiryDate}
 177                         onChange={startDate =>
 178                             onDataChanged(
 179                                 {
 180                                     startDate: startDate
 181                                         ? startDate.format(DATE_FORMAT)
 182                                         : ''
 183                                 },
 184                                 SP_ENTITLEMENT_POOL_FORM,
 185                                 { startDate: validateStartDate }
 186                             )
 187                         }
 188                         isValid={genericFieldInfo.startDate.isValid}
 189                         errorText={genericFieldInfo.startDate.errorText}
 190                         selectsStart
 191                     />
 192                     <Input
 193                         groupClassName="no-bottom-margin"
 194                         type="date"
 195                         label={i18n('Expiry Date')}
 196                         value={expiryDate}
 197                         dateFormat={DATE_FORMAT}
 198                         startDate={startDate}
 199                         endDate={expiryDate}
 200                         onChange={expiryDate => {
 201                             onDataChanged(
 202                                 {
 203                                     expiryDate: expiryDate
 204                                         ? expiryDate.format(DATE_FORMAT)
 205                                         : ''
 206                                 },
 207                                 SP_ENTITLEMENT_POOL_FORM
 208                             );
 209                             onDataChanged(
 210                                 { startDate },
 211                                 SP_ENTITLEMENT_POOL_FORM,
 212                                 {
 213                                     startDate: validateStartDate
 214                                 }
 215                             );
 216                         }}
 217                         isValid={genericFieldInfo.expiryDate.isValid}
 218                         errorText={genericFieldInfo.expiryDate.errorText}
 219                         selectsEnd
 220                     />
 221                 </div>
 222             </GridItem>
 223             {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}
 224         </GridSection>
 225     );
 226 };
 227
 228 EntitlementPoolsFormContent.propTypes = {
 229     data: PropTypes.object,
 230     genericFieldInfo: PropTypes.object,
 231     onDataChanged: PropTypes.func,
 232     validateName: PropTypes.func,
 233     thresholdValueValidation: PropTypes.func,
 234     validateStartDate: PropTypes.func
 235 };
 236
 237 export default EntitlementPoolsFormContent;