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 {
  23     optionsInputValues,
  24     SP_ENTITLEMENT_POOL_FORM
  25 } from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js';
  26 import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
  27 import { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js';
  28 import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx';
  29
  30 export const EntitlementPoolsFormContent = ({
  31     data,
  32     genericFieldInfo,
  33     onDataChanged,
  34     validateName,
  35     thresholdValueValidation,
  36     validateStartDate
  37 }) => {
  38     let {
  39         name,
  40         type,
  41         description,
  42         thresholdUnits,
  43         thresholdValue,
  44         increments,
  45         startDate,
  46         expiryDate,
  47         manufacturerReferenceNumber,
  48         id,
  49         versionUUID
  50     } = data;
  51     return (
  52         <GridSection hasLostColSet>
  53             <GridItem colSpan={2}>
  54                 <Input
  55                     onChange={name =>
  56                         onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
  57                             name: validateName
  58                         })
  59                     }
  60                     isValid={genericFieldInfo.name.isValid}
  61                     isRequired={true}
  62                     errorText={genericFieldInfo.name.errorText}
  63                     label={i18n('Name')}
  64                     value={name}
  65                     data-test-id="create-ep-name"
  66                     type="text"
  67                 />
  68             </GridItem>
  69             <GridItem colSpan={2}>
  70                 <Input
  71                     isRequired={true}
  72                     onChange={e => {
  73                         const selectedIndex = e.target.selectedIndex;
  74                         const val = e.target.options[selectedIndex].value;
  75                         onDataChanged({ type: val }, SP_ENTITLEMENT_POOL_FORM);
  76                     }}
  77                     value={type}
  78                     label={i18n('Type')}
  79                     data-test-id="create-ep-type"
  80                     isValid={genericFieldInfo.type.isValid}
  81                     errorText={genericFieldInfo.type.errorText}
  82                     groupClassName="bootstrap-input-options"
  83                     className="input-options-select"
  84                     overlayPos="bottom"
  85                     type="select">
  86                     {optionsInputValues.TYPE.map(type => (
  87                         <option key={type.enum} value={type.enum}>
  88                             {type.title}
  89                         </option>
  90                     ))}
  91                 </Input>
  92             </GridItem>
  93             <GridItem colSpan={2} stretch>
  94                 <Input
  95                     onChange={description =>
  96                         onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
  97                     }
  98                     isValid={genericFieldInfo.description.isValid}
  99                     errorText={genericFieldInfo.description.errorText}
 100                     label={i18n('Description')}
 101                     value={description}
 102                     data-test-id="create-ep-description"
 103                     type="textarea"
 104                 />
 105             </GridItem>
 106             <GridItem>
 107                 <Input
 108                     onChange={e => {
 109                         // setting the unit to the correct value
 110                         const selectedIndex = e.target.selectedIndex;
 111                         const val = e.target.options[selectedIndex].value;
 112                         onDataChanged(
 113                             { thresholdUnits: val },
 114                             SP_ENTITLEMENT_POOL_FORM
 115                         );
 116                         // TODO make sure that the value is valid too
 117                         if (thresholdValue && thresholdValue !== '') {
 118                             onDataChanged(
 119                                 { thresholdValue: thresholdValue },
 120                                 SP_ENTITLEMENT_POOL_FORM,
 121                                 { thresholdValue: thresholdValueValidation }
 122                             );
 123                         }
 124                     }}
 125                     value={thresholdUnits}
 126                     label={i18n('Threshold Units')}
 127                     data-test-id="create-ep-threshold-units"
 128                     isValid={genericFieldInfo.thresholdUnits.isValid}
 129                     errorText={genericFieldInfo.thresholdUnits.errorText}
 130                     groupClassName="bootstrap-input-options"
 131                     className="input-options-select"
 132                     type="select">
 133                     {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
 134                         mtype => (
 135                             <option key={mtype.enum} value={mtype.enum}>{`${
 136                                 mtype.title
 137                             }`}</option>
 138                         )
 139                     )}
 140                 </Input>
 141                 <Input
 142                     type="date"
 143                     label={i18n('Start Date')}
 144                     value={startDate}
 145                     dateFormat={DATE_FORMAT}
 146                     startDate={startDate}
 147                     endDate={expiryDate}
 148                     onChange={startDate =>
 149                         onDataChanged(
 150                             {
 151                                 startDate: startDate
 152                                     ? startDate.format(DATE_FORMAT)
 153                                     : ''
 154                             },
 155                             SP_ENTITLEMENT_POOL_FORM,
 156                             { startDate: validateStartDate }
 157                         )
 158                     }
 159                     isValid={genericFieldInfo.startDate.isValid}
 160                     errorText={genericFieldInfo.startDate.errorText}
 161                     selectsStart
 162                 />
 163             </GridItem>
 164             <GridItem>
 165                 <Input
 166                     className="entitlement-pools-form-row-threshold-value"
 167                     onChange={thresholdValue =>
 168                         onDataChanged(
 169                             { thresholdValue },
 170                             SP_ENTITLEMENT_POOL_FORM,
 171                             {
 172                                 thresholdValue: thresholdValueValidation
 173                             }
 174                         )
 175                     }
 176                     label={i18n('Threshold Value')}
 177                     isValid={genericFieldInfo.thresholdValue.isValid}
 178                     errorText={genericFieldInfo.thresholdValue.errorText}
 179                     data-test-id="create-ep-threshold-value"
 180                     value={thresholdValue}
 181                     type="text"
 182                 />
 183                 <Input
 184                     type="date"
 185                     label={i18n('Expiry Date')}
 186                     value={expiryDate}
 187                     dateFormat={DATE_FORMAT}
 188                     startDate={startDate}
 189                     endDate={expiryDate}
 190                     onChange={expiryDate => {
 191                         onDataChanged(
 192                             {
 193                                 expiryDate: expiryDate
 194                                     ? expiryDate.format(DATE_FORMAT)
 195                                     : ''
 196                             },
 197                             SP_ENTITLEMENT_POOL_FORM
 198                         );
 199                         onDataChanged({ startDate }, SP_ENTITLEMENT_POOL_FORM, {
 200                             startDate: validateStartDate
 201                         });
 202                     }}
 203                     isValid={genericFieldInfo.expiryDate.isValid}
 204                     errorText={genericFieldInfo.expiryDate.errorText}
 205                     selectsEnd
 206                 />
 207             </GridItem>
 208             <GridItem colSpan={2}>
 209                 <Input
 210                     className="entitlement-pools-form-row-threshold-value"
 211                     onChange={manufacturerReferenceNumber =>
 212                         onDataChanged(
 213                             { manufacturerReferenceNumber },
 214                             SP_ENTITLEMENT_POOL_FORM
 215                         )
 216                     }
 217                     isValid={
 218                         genericFieldInfo.manufacturerReferenceNumber.isValid
 219                     }
 220                     isRequired={true}
 221                     errorText={
 222                         genericFieldInfo.manufacturerReferenceNumber.errorText
 223                     }
 224                     label={i18n('Manufacturer Reference Number')}
 225                     data-test-id="create-ep-manufacturerReferenceNumber-value"
 226                     value={manufacturerReferenceNumber}
 227                     type="text"
 228                 />
 229             </GridItem>
 230             <GridItem colSpan={2}>
 231                 <Input
 232                     onChange={increments =>
 233                         onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
 234                     }
 235                     label={i18n('Increments')}
 236                     value={increments}
 237                     data-test-id="create-ep-increments"
 238                     groupClassName="no-bottom-margin"
 239                     type="text"
 240                 />
 241             </GridItem>
 242             {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}
 243         </GridSection>
 244     );
 245 };
 246
 247 EntitlementPoolsFormContent.propTypes = {
 248     data: PropTypes.object,
 249     genericFieldInfo: PropTypes.object,
 250     onDataChanged: PropTypes.func,
 251     validateName: PropTypes.func,
 252     thresholdValueValidation: PropTypes.func,
 253     validateStartDate: PropTypes.func
 254 };
 255
 256 export default EntitlementPoolsFormContent;