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

   1 import React from 'react';
   2
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4 import Modal from 'nfvo-components/modal/Modal.jsx';
   5 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
   6 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
   7
   8 import FeatureGroupEditor from './FeatureGroupEditor.js';
   9 import FeatureGroupsConfirmationModal from './FeatureGroupsConfirmationModal.jsx';
  10
  11 class FeatureGroupListEditorView extends React.Component {
  12         static propTypes = {
  13                 vendorName: React.PropTypes.string,
  14                 licenseModelId: React.PropTypes.string.isRequired,
  15                 featureGroupsModal: React.PropTypes.shape({
  16                         show: React.PropTypes.bool,
  17                         editMode: React.PropTypes.bool
  18                 }),
  19                 isReadOnlyMode: React.PropTypes.bool.isRequired,
  20                 onAddFeatureGroupClick: React.PropTypes.func,
  21                 onEditFeatureGroupClick: React.PropTypes.func,
  22                 onDeleteFeatureGroupClick: React.PropTypes.func,
  23                 onCancelFeatureGroupsEditor: React.PropTypes.func,
  24                 featureGroupsList: React.PropTypes.array
  25         };
  26
  27         static defaultProps = {
  28                 featureGroupsList: [],
  29                 featureGroupsModal: {
  30                         show: false,
  31                         editMode: false
  32                 }
  33         };
  34
  35         state = {
  36                 localFilter: ''
  37         };
  38
  39         render() {
  40                 let {vendorName, licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick} = this.props;
  41                 const {localFilter} = this.state;
  42
  43                 return (
  44                         <div className='feature-groups-list-editor'>
  45                                 <ListEditorView
  46                                         title={i18n('Feature Groups for {vendorName} License Model', {vendorName})}
  47                                         plusButtonTitle={i18n('Add Feature Group')}
  48                                         filterValue={localFilter}
  49                                         onFilter={filter => this.setState({localFilter: filter})}
  50                                         onAdd={() => onAddFeatureGroupClick()}
  51                                         isReadOnlyMode={isReadOnlyMode}>
  52                                         {this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode))}
  53                                 </ListEditorView>
  54                                 <Modal show={featureGroupsModal.show} bsSize='large' animation={true} className='feature-group-modal'>
  55                                         <Modal.Header>
  56                                                 <Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title>
  57                                         </Modal.Header>
  58                                         <Modal.Body>
  59                                                 <FeatureGroupEditor
  60                                                         onCancel={() => this.closeFeatureGroupsEditor()}
  61                                                         licenseModelId={licenseModelId}
  62                                                         isReadOnlyMode={isReadOnlyMode}/>
  63                                         </Modal.Body>
  64                                 </Modal>
  65
  66                                 <FeatureGroupsConfirmationModal licenseModelId={licenseModelId}/>
  67
  68                         </div>
  69                 );
  70         }
  71
  72
  73         renderFeatureGroupListItem(listItem, isReadOnlyMode) {
  74                 let {name, description, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem;
  75                 return (
  76                         <ListEditorItemView
  77                                 key={listItem.id}
  78                                 onDelete={() => this.deleteFeatureGroupItem(listItem)}
  79                                 onSelect={() => this.editFeatureGroupItem(listItem)}
  80                                 className='list-editor-item-view'
  81                                 isReadOnlyMode={isReadOnlyMode}>
  82                                 <div className='list-editor-item-view-field'>
  83                                         <div className='title'>{i18n('Name')}</div>
  84                                         <div className='text name'>{name}</div>
  85                                 </div>
  86
  87                                 <div className='list-editor-item-view-field'>
  88                                         <div className='feature-groups-count-field'>
  89                                                 <div className='title'>{i18n('Entitlement')}</div>
  90                                                 <div className='title'>{i18n('Pools')}</div>
  91                                                 <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
  92                                         </div>
  93                                         <div className='feature-groups-count-field'>
  94                                                 <div className='title'>{i18n('License key')}</div>
  95                                                 <div className='title'>{i18n('Groups')}</div>
  96                                                 <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
  97                                         </div>
  98                                 </div>
  99
 100                                 <div className='list-editor-item-view-field'>
 101                                         <div className='title'>{i18n('Description')}</div>
 102                                         <div className='text description'>{description}</div>
 103                                 </div>
 104
 105                         </ListEditorItemView>
 106                 );
 107         }
 108
 109         filterList() {
 110                 let {featureGroupsList} = this.props;
 111                 let {localFilter} = this.state;
 112                 if (localFilter.trim()) {
 113                         const filter = new RegExp(escape(localFilter), 'i');
 114                         return featureGroupsList.filter(({name = '', description = ''}) => {
 115                                 return escape(name).match(filter) || escape(description).match(filter);
 116                         });
 117                 }
 118                 else {
 119                         return featureGroupsList;
 120                 }
 121         }
 122
 123         closeFeatureGroupsEditor() {
 124                 this.props.onCancelFeatureGroupsEditor();
 125         }
 126
 127         editFeatureGroupItem(featureGroup) {
 128                 this.props.onEditFeatureGroupClick(featureGroup);
 129         }
 130
 131         deleteFeatureGroupItem(featureGroup) {
 132                 this.props.onDeleteFeatureGroupClick(featureGroup);
 133         }
 134 }
 135
 136 export default FeatureGroupListEditorView;