openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx

   1 import React from 'react';
   2 import ValidationTabs from 'nfvo-components/input/validation/ValidationTabs.jsx';
   3 import ValidationTab from 'nfvo-components/input/validation/ValidationTab.jsx';
   4 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
   5 import Button from 'react-bootstrap/lib/Button.js';
   6
   7 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   8 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
   9 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
  10 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  11 import ListEditorViewItem from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  12 import i18n from 'nfvo-utils/i18n/i18n.js';
  13
  14 import {state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js';
  15
  16 const FeatureGroupsPropType = React.PropTypes.shape({
  17         id: React.PropTypes.string,
  18         name: React.PropTypes.string,
  19         description: React.PropTypes.string,
  20         partNumber: React.PropTypes.string,
  21         entitlementPoolsIds: React.PropTypes.array(React.PropTypes.string),
  22         licenseKeyGroupsIds: React.PropTypes.array(React.PropTypes.string)
  23 });
  24
  25 class FeatureGroupEditorView extends React.Component {
  26
  27
  28         static propTypes = {
  29                 data: FeatureGroupsPropType,
  30                 previousData: FeatureGroupsPropType,
  31                 isReadOnlyMode: React.PropTypes.bool,
  32
  33                 onSubmit: React.PropTypes.func,
  34                 onCancel: React.PropTypes.func,
  35
  36                 selectedTab: React.PropTypes.number,
  37                 onTabSelect: React.PropTypes.func,
  38
  39                 selectedEntitlementPoolsButtonTab: React.PropTypes.number,
  40                 selectedLicenseKeyGroupsButtonTab: React.PropTypes.number,
  41                 onEntitlementPoolsButtonTabSelect: React.PropTypes.func,
  42                 onLicenseKeyGroupsButtonTabSelect: React.PropTypes.func,
  43
  44                 entitlementPoolsList: DualListboxView.propTypes.availableList,
  45                 licenseKeyGroupsList: DualListboxView.propTypes.availableList
  46         };
  47
  48
  49         static defaultProps = {
  50                 data: {},
  51                 selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
  52                 selectedEntitlementPoolsButtonTab: FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS,
  53                 selectedLicenseKeyGroupsButtonTab: FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS
  54         };
  55
  56         state = {
  57                 localEntitlementPoolsListFilter: '',
  58                 localLicenseKeyGroupsListFilter: ''
  59         };
  60
  61
  62         render() {
  63                 let {selectedTab, onTabSelect, isReadOnlyMode} = this.props;
  64                 return (
  65                         <ValidationForm
  66                                 ref='validationForm'
  67                                 hasButtons={true}
  68                                 onSubmit={ () => this.submit() }
  69                                 onReset={ () => this.props.onCancel() }
  70                                 labledButtons={true}
  71                                 isReadOnlyMode={isReadOnlyMode}
  72                                 name='feature-group-validation-form'
  73                                 className='feature-group-form'>
  74                                 <ValidationTabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect}>
  75                                         {this.renderGeneralTab()}
  76                                         {this.renderEntitlementPoolsTab()}
  77                                         {this.renderLicenseKeyGroupsTab()}
  78                                 </ValidationTabs>
  79
  80                         </ValidationForm>
  81                 );
  82         }
  83
  84         submit() {
  85                 const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
  86                 this.props.onSubmit(previousFeatureGroup, featureGroup);
  87         }
  88
  89         renderGeneralTab() {
  90                 let {data = {}, onDataChanged} = this.props;
  91                 let {name, description, partNumber} = data;
  92                 return (
  93                         <ValidationTab eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')}>
  94                                 <div>
  95                                         <ValidationInput
  96                                                 groupClassName='field-section'
  97                                                 onChange={name => onDataChanged({name})}
  98                                                 ref='name'
  99                                                 label={i18n('Name')}
 100                                                 value={name}
 101                                                 name='feature-group-name'
 102                                                 validations={{maxLength: 120, required: true}}
 103                                                 type='text'/>
 104                                         <ValidationInput
 105                                                 groupClassName='field-section'
 106                                                 className='description-field'
 107                                                 onChange={description => onDataChanged({description})}
 108                                                 ref='description'
 109                                                 label={i18n('Description')}
 110                                                 value={description}
 111                                                 name='feature-group-description'
 112                                                 validations={{maxLength: 1000, required: true}}
 113                                                 type='textarea'/>
 114                                         <ValidationInput
 115                                                 groupClassName='field-section'
 116                                                 onChange={partNumber => onDataChanged({partNumber})}
 117                                                 label={i18n('Part Number')}
 118                                                 value={partNumber}
 119                                                 validations={{required: true}}
 120                                                 type='text'/>
 121                                 </div>
 122                         </ValidationTab>
 123                 );
 124         }
 125
 126         renderEntitlementPoolsTab() {
 127                 let {selectedEntitlementPoolsButtonTab, onEntitlementPoolsButtonTabSelect, entitlementPoolsList} = this.props;
 128                 if (entitlementPoolsList.length > 0) {
 129                         return (
 130                                 <ValidationTab
 131                                         eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
 132                                         title={i18n('Entitlement Pools')}>
 133                                         <ButtonGroup>
 134                                                 {
 135                                                         this.renderButtonsTab(
 136                                                                 FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS,
 137                                                                 selectedEntitlementPoolsButtonTab,
 138                                                                 i18n('Associated Entitlement Pools'),
 139                                                                 onEntitlementPoolsButtonTabSelect
 140                                                         )
 141                                                 }
 142                                                 {
 143                                                         this.renderButtonsTab(
 144                                                                 FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS,
 145                                                                 selectedEntitlementPoolsButtonTab,
 146                                                                 i18n('Available Entitlement Pools'),
 147                                                                 onEntitlementPoolsButtonTabSelect
 148                                                         )
 149                                                 }
 150                                         </ButtonGroup>
 151                                         {this.renderEntitlementPoolsButtonTabContent(selectedEntitlementPoolsButtonTab)}
 152                                 </ValidationTab>
 153                         );
 154                 } else {
 155                         return (
 156                                 <ValidationTab
 157                                         eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
 158                                         title={i18n('Entitlement Pools')}>
 159                                         <p>{i18n('There is no available entitlement pools.')}</p>
 160                                 </ValidationTab>
 161                         );
 162                 }
 163         }
 164
 165         renderLicenseKeyGroupsTab() {
 166                 let {selectedLicenseKeyGroupsButtonTab, onLicenseKeyGroupsButtonTabSelect, licenseKeyGroupsList} = this.props;
 167                 if (licenseKeyGroupsList.length > 0) {
 168                         return (
 169                                 <ValidationTab
 170                                         eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS}
 171                                         title={i18n('License Key Groups')}>
 172                                         <ButtonGroup>
 173                                                 {
 174                                                         this.renderButtonsTab(
 175                                                                 FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS,
 176                                                                 selectedLicenseKeyGroupsButtonTab,
 177                                                                 i18n('Associated License Key Groups'),
 178                                                                 onLicenseKeyGroupsButtonTabSelect
 179                                                         )
 180                                                 }
 181                                                 {
 182                                                         this.renderButtonsTab(
 183                                                                 FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS,
 184                                                                 selectedLicenseKeyGroupsButtonTab,
 185                                                                 i18n('Available License Key Groups'),
 186                                                                 onLicenseKeyGroupsButtonTabSelect
 187                                                         )
 188                                                 }
 189                                         </ButtonGroup>
 190                                         {this.renderLicenseKeyGroupsTabContent(selectedLicenseKeyGroupsButtonTab)}
 191                                 </ValidationTab>
 192                         );
 193                 } else {
 194                         return (
 195                                 <ValidationTab
 196                                         eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS}
 197                                         title={i18n('License Key Groups')}>
 198                                         <p>{i18n('There is no available license key groups')}</p>
 199                                 </ValidationTab>);
 200                 }
 201         }
 202
 203         renderButtonsTab(buttonTab, selectedButtonTab, title, onClick) {
 204                 const isSelected = buttonTab === selectedButtonTab;
 205                 return (
 206                         <Button
 207                                 className='button-tab'
 208                                 active={isSelected}
 209                                 onClick={() => !isSelected && onClick(buttonTab)}>
 210                                 { title }
 211                         </Button>
 212                 );
 213         }
 214
 215         renderEntitlementPoolsButtonTabContent(selectedFeatureGroupsButtonTab) {
 216                 const {entitlementPoolsList = [], data: {entitlementPoolsIds = []}} = this.props;
 217                 let dualBoxTitle = {
 218                         left: i18n('Available Entitlement Pools'),
 219                         right: i18n('Selected Entitlement Pools')
 220                 };
 221
 222                 if (entitlementPoolsList.length) {
 223                         const {localEntitlementPoolsListFilter} = this.state;
 224                         let selectedEntitlementPools = entitlementPoolsIds.map(entitlementPoolId => entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId));
 225
 226                         switch (selectedFeatureGroupsButtonTab) {
 227                                 case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS:
 228                                         if (selectedEntitlementPools.length) {
 229                                                 return (
 230                                                         <ListEditorView
 231                                                                 className='thinner-list'
 232                                                                 filterValue={localEntitlementPoolsListFilter}
 233                                                                 onFilter={localEntitlementPoolsListFilter => this.setState({localEntitlementPoolsListFilter})}>
 234                                                                 {this.filterAssociatedItems(selectedEntitlementPools, localEntitlementPoolsListFilter)
 235                                                                         .map(entitlementPool => this.renderAssociatedListItem(entitlementPool
 236                                                                                 , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS))}
 237                                                         </ListEditorView>
 238                                                 );
 239                                         }
 240                                         else {
 241                                                 return (
 242                                                         <div>
 243                                                                 <br/>{i18n('There are currently no entitlement pools associated with this feature group. Click "Available Entitlement Pools" to associate.')}
 244                                                         </div>
 245                                                 );
 246                                         }
 247                                 case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS:
 248                                         return (
 249                                                 <DualListboxView
 250                                                         filterTitle={dualBoxTitle}
 251                                                         selectedValuesList={entitlementPoolsIds}
 252                                                         availableList={entitlementPoolsList}
 253                                                         onChange={ selectedValuesList => this.props.onDataChanged( { entitlementPoolsIds: selectedValuesList } )}/>
 254                                         );
 255                         }
 256                 }
 257         }
 258
 259         renderLicenseKeyGroupsTabContent(selectedFeatureGroupsButtonTab) {
 260                 const {licenseKeyGroupsList = [], data: {licenseKeyGroupsIds = []}} = this.props;
 261                 let dualBoxFilterTitle = {
 262                         left: i18n('Available License Key Groups'),
 263                         right: i18n('Selected License Key Groups')
 264                 };
 265
 266                 if (licenseKeyGroupsList.length) {
 267                         const {localLicenseKeyGroupsListFilter} = this.state;
 268                         let selectedLicenseKeyGroups = licenseKeyGroupsIds.map(licenseKeyGroupId => licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId));
 269
 270                         switch (selectedFeatureGroupsButtonTab) {
 271                                 case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS:
 272                                         if (selectedLicenseKeyGroups.length) {
 273                                                 return (
 274                                                         <ListEditorView
 275                                                                 className='thinner-list'
 276                                                                 filterValue={localLicenseKeyGroupsListFilter}
 277                                                                 onFilter={localLicenseKeyGroupsListFilter => this.setState({localLicenseKeyGroupsListFilter})}>
 278                                                                 {this.filterAssociatedItems(selectedLicenseKeyGroups, localLicenseKeyGroupsListFilter)
 279                                                                         .map(licenseKeyGroup => this.renderAssociatedListItem(licenseKeyGroup
 280                                                                                 , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS))}
 281                                                         </ListEditorView>
 282                                                 );
 283                                         } else {
 284                                                 return (
 285                                                         <div className='no-items-msg'>
 286                                                                 {i18n('There are currently no license key groups associated with this feature group. Click "Available License Key Groups" to associate.')}
 287                                                         </div>
 288                                                 );
 289                                         }
 290                                 case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS:
 291                                         return (
 292                                                 <DualListboxView
 293                                                         filterTitle={dualBoxFilterTitle}
 294                                                         selectedValuesList={this.props.data.licenseKeyGroupsIds}
 295                                                         availableList={this.props.licenseKeyGroupsList}
 296                                                         onChange={ selectedValuesList => this.props.onDataChanged( { licenseKeyGroupsIds: selectedValuesList } )}/>
 297                                         );
 298                         }
 299                 }
 300         }
 301
 302
 303         renderAssociatedListItem(listItem, itemType) {
 304                 let {isReadOnlyMode} = this.props;
 305                 return (
 306                         <ListEditorViewItem
 307                                 key={listItem.id}
 308                                 onDelete={() => this.deleteAssociatedItem(listItem.id, itemType)}
 309                                 isReadOnlyMode={isReadOnlyMode}>
 310                                 <div className='name'>{listItem.name}</div>
 311                                 <div className='description'>{listItem.description}</div>
 312                         </ListEditorViewItem>
 313                 );
 314         }
 315
 316         filterAssociatedItems(list, localList) {
 317                 if (localList) {
 318                         const filter = new RegExp(escape(localList), 'i');
 319                         return list.filter(({name = '', description = ''}) => name.match(filter) || description.match(filter));
 320                 }
 321                 else {
 322                         return list;
 323                 }
 324         }
 325
 326         deleteAssociatedItem(id, type) {
 327                 const {data: {licenseKeyGroupsIds = [], entitlementPoolsIds = []}} = this.props;
 328                 if (type === FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS) {
 329                         this.props.onDataChanged({licenseKeyGroupsIds: licenseKeyGroupsIds.filter(listId => listId !== id)});
 330                 } else {
 331                         this.props.onDataChanged({entitlementPoolsIds: entitlementPoolsIds.filter(listId => listId !== id)});
 332                 }
 333
 334         }
 335 }
 336
 337
 338 export default FeatureGroupEditorView;
 339