openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/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
  17 import React from 'react';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22 import {
  23     optionsInputValues as licenseKeyGroupOptionsInputValues,
  24     LKG_FORM_NAME
  25 } from '../LicenseKeyGroupsConstants.js';
  26 import { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js';
  27 import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
  28 import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx';
  29
  30 const LicenseKeyGroupFormContent = ({
  31     data,
  32     onDataChanged,
  33     genericFieldInfo,
  34     validateName,
  35     validateStartDate,
  36     thresholdValueValidation
  37 }) => {
  38     let {
  39         name,
  40         description,
  41         increments,
  42         type,
  43         thresholdUnits,
  44         thresholdValue,
  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 }, LKG_FORM_NAME, {
  57                             name: validateName
  58                         })
  59                     }
  60                     label={i18n('Name')}
  61                     data-test-id="create-lkg-name"
  62                     value={name}
  63                     isValid={genericFieldInfo.name.isValid}
  64                     errorText={genericFieldInfo.name.errorText}
  65                     isRequired={true}
  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 }, LKG_FORM_NAME);
  76                     }}
  77                     value={type}
  78                     label={i18n('Type')}
  79                     data-test-id="create-lkg-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                     {licenseKeyGroupOptionsInputValues.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 }, LKG_FORM_NAME)
  97                     }
  98                     label={i18n('Description')}
  99                     data-test-id="create-lkg-description"
 100                     value={description}
 101                     isValid={genericFieldInfo.description.isValid}
 102                     errorText={genericFieldInfo.description.errorText}
 103                     type="textarea"
 104                     overlayPos="bottom"
 105                 />
 106             </GridItem>
 107             <GridItem>
 108                 <Input
 109                     onChange={e => {
 110                         // setting the unit to the correct value
 111                         const selectedIndex = e.target.selectedIndex;
 112                         const val = e.target.options[selectedIndex].value;
 113                         onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME);
 114                         // TODO make sure that the value is valid too
 115                         onDataChanged(
 116                             { thresholdValue: thresholdValue },
 117                             LKG_FORM_NAME,
 118                             {
 119                                 thresholdValue: thresholdValueValidation
 120                             }
 121                         );
 122                     }}
 123                     value={thresholdUnits}
 124                     label={i18n('Threshold Units')}
 125                     data-test-id="create-ep-threshold-units"
 126                     isValid={genericFieldInfo.thresholdUnits.isValid}
 127                     errorText={genericFieldInfo.thresholdUnits.errorText}
 128                     groupClassName="bootstrap-input-options"
 129                     className="input-options-select"
 130                     type="select">
 131                     {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
 132                         mtype => (
 133                             <option key={mtype.enum} value={mtype.enum}>{`${
 134                                 mtype.title
 135                             }`}</option>
 136                         )
 137                     )}
 138                 </Input>
 139                 <Input
 140                     type="date"
 141                     label={i18n('Start Date')}
 142                     value={startDate}
 143                     dateFormat={DATE_FORMAT}
 144                     startDate={startDate}
 145                     endDate={expiryDate}
 146                     onChange={startDate =>
 147                         onDataChanged(
 148                             {
 149                                 startDate: startDate
 150                                     ? startDate.format(DATE_FORMAT)
 151                                     : ''
 152                             },
 153                             LKG_FORM_NAME,
 154                             { startDate: validateStartDate }
 155                         )
 156                     }
 157                     isValid={genericFieldInfo.startDate.isValid}
 158                     errorText={genericFieldInfo.startDate.errorText}
 159                     selectsStart
 160                 />
 161             </GridItem>
 162             <GridItem>
 163                 <Input
 164                     className="entitlement-pools-form-row-threshold-value"
 165                     onChange={thresholdValue =>
 166                         onDataChanged({ thresholdValue }, LKG_FORM_NAME, {
 167                             thresholdValue: thresholdValueValidation
 168                         })
 169                     }
 170                     label={i18n('Threshold Value')}
 171                     isValid={genericFieldInfo.thresholdValue.isValid}
 172                     errorText={genericFieldInfo.thresholdValue.errorText}
 173                     data-test-id="create-ep-threshold-value"
 174                     value={thresholdValue}
 175                     type="text"
 176                 />
 177                 <Input
 178                     type="date"
 179                     label={i18n('Expiry Date')}
 180                     value={expiryDate}
 181                     dateFormat={DATE_FORMAT}
 182                     startDate={startDate}
 183                     endDate={expiryDate}
 184                     onChange={expiryDate => {
 185                         onDataChanged(
 186                             {
 187                                 expiryDate: expiryDate
 188                                     ? expiryDate.format(DATE_FORMAT)
 189                                     : ''
 190                             },
 191                             LKG_FORM_NAME
 192                         );
 193                         onDataChanged({ startDate }, LKG_FORM_NAME, {
 194                             startDate: validateStartDate
 195                         });
 196                     }}
 197                     isValid={genericFieldInfo.expiryDate.isValid}
 198                     errorText={genericFieldInfo.expiryDate.errorText}
 199                     selectsEnd
 200                 />
 201             </GridItem>
 202             <GridItem colSpan={2}>
 203                 <Input
 204                     onChange={manufacturerReferenceNumber =>
 205                         onDataChanged(
 206                             { manufacturerReferenceNumber },
 207                             LKG_FORM_NAME
 208                         )
 209                     }
 210                     label={i18n('Manufacturer Reference Number')}
 211                     value={manufacturerReferenceNumber}
 212                     data-test-id="create-ep-mrn"
 213                     type="text"
 214                     groupClassName="no-bottom-margin"
 215                 />
 216             </GridItem>
 217
 218             <GridItem colSpan={2}>
 219                 <Input
 220                     onChange={increments =>
 221                         onDataChanged({ increments }, LKG_FORM_NAME)
 222                     }
 223                     label={i18n('Increments')}
 224                     value={increments}
 225                     data-test-id="create-ep-increments"
 226                     type="text"
 227                     groupClassName="no-bottom-margin"
 228                 />
 229             </GridItem>
 230             {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}
 231         </GridSection>
 232     );
 233 };
 234
 235 export default LicenseKeyGroupFormContent;