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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import Modal from 'nfvo-components/modal/Modal.jsx';
  21 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  22 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  23
  24 import FeatureGroupEditor from './FeatureGroupEditor.js';
  25
  26 class FeatureGroupListEditorView extends React.Component {
  27         static propTypes = {
  28                 vendorName: PropTypes.string,
  29                 licenseModelId: PropTypes.string.isRequired,
  30                 featureGroupsModal: PropTypes.shape({
  31                         show: PropTypes.bool,
  32                         editMode: PropTypes.bool
  33                 }),
  34                 isReadOnlyMode: PropTypes.bool.isRequired,
  35                 onAddFeatureGroupClick: PropTypes.func,
  36                 onEditFeatureGroupClick: PropTypes.func,
  37                 onDeleteFeatureGroupClick: PropTypes.func,
  38                 onCancelFeatureGroupsEditor: PropTypes.func,
  39                 featureGroupsList: PropTypes.array
  40         };
  41
  42         static defaultProps = {
  43                 featureGroupsList: [],
  44                 featureGroupsModal: {
  45                         show: false,
  46                         editMode: false
  47                 }
  48         };
  49
  50         state = {
  51                 localFilter: ''
  52         };
  53
  54         render() {
  55                 let {licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick, version} = this.props;
  56                 const {localFilter} = this.state;
  57                 return (
  58                         <div className='license-model-list-editor feature-groups-list-editor'>
  59                                 <ListEditorView
  60                                         title={i18n('Feature Groups')}
  61                                         plusButtonTitle={i18n('Add Feature Group')}
  62                                         filterValue={localFilter}
  63                                         onFilter={value => this.setState({localFilter: value})}
  64                                         onAdd={() => onAddFeatureGroupClick(version)}
  65                                         isReadOnlyMode={isReadOnlyMode}>
  66                                         {this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode, version))}
  67                                 </ListEditorView>
  68                                 {featureGroupsModal.show && <Modal show={featureGroupsModal.show} bsSize='large' animation={true}
  69                                                className='onborading-modal license-model-modal feature-group-modal'>
  70                                                 <Modal.Header>
  71                                                         <Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title>
  72                                                 </Modal.Header>
  73                                                 <Modal.Body>
  74                                                         <FeatureGroupEditor
  75                                                                 version={version}
  76                                                                 licenseModelId={licenseModelId}
  77                                                                 isReadOnlyMode={isReadOnlyMode}/>
  78                                                 </Modal.Body>
  79                                         </Modal>
  80                                 }
  81
  82                         </div>
  83                 );
  84         }
  85
  86
  87         renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
  88                 let {name, description, manufacturerReferenceNumber, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem;
  89                 return (
  90                         <ListEditorItemView
  91                                 key={listItem.id}
  92                                 onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
  93                                 onSelect={() => this.editFeatureGroupItem(listItem, version)}
  94                                 className='list-editor-item-view'
  95                                 isReadOnlyMode={isReadOnlyMode}>
  96                                 <div className='list-editor-item-view-field'>
  97                                         <div className='title'>{i18n('Name')}</div>
  98                                         <div className='text name'>{name}</div>
  99                                 </div>
 100
 101                                 <div className='list-editor-item-view-field smaller-field'>
 102                                         <div className='feature-groups-count-field'>
 103                                                 <div className='title'>{i18n('EP')}</div>
 104                                                 <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
 105                                         </div>
 106                                 </div>
 107                                 <div className='list-editor-item-view-field smaller-field'>
 108                                         <div className='feature-groups-count-field'>
 109                                                 <div className='title'>{i18n('LKG')}</div>
 110                                                 <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
 111                                         </div>
 112                                 </div>
 113
 114                                 <div className='list-editor-item-view-field'>
 115                                         <div className='feature-groups-count-field'>
 116                                                 <div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div>
 117                                                 <div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div>
 118                                         </div>
 119                                 </div>
 120
 121                                 <div className='list-editor-item-view-field'>
 122                                         <div className='title'>{i18n('Description')}</div>
 123                                         <div className='text description'>{description}</div>
 124                                 </div>
 125
 126
 127
 128                         </ListEditorItemView>
 129                 );
 130         }
 131
 132         filterList() {
 133                 let {featureGroupsList} = this.props;
 134                 let {localFilter} = this.state;
 135                 if (localFilter.trim()) {
 136                         const filter = new RegExp(escape(localFilter), 'i');
 137                         return featureGroupsList.filter(({name = '', description = ''}) => {
 138                                 return escape(name).match(filter) || escape(description).match(filter);
 139                         });
 140                 }
 141                 else {
 142                         return featureGroupsList;
 143                 }
 144         }
 145
 146         editFeatureGroupItem(featureGroup, version) {
 147                 this.props.onEditFeatureGroupClick(featureGroup, version);
 148         }
 149
 150         deleteFeatureGroupItem(featureGroup, version) {
 151                 this.props.onDeleteFeatureGroupClick(featureGroup, version);
 152         }
 153 }
 154
 155 export default FeatureGroupListEditorView;
 156
 157 export function generateConfirmationMsg(featureGroupToDelete) {
 158         let name = featureGroupToDelete ? featureGroupToDelete.name : '';
 159         let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
 160         let subMsg = featureGroupToDelete.referencingLicenseAgreements
 161         && featureGroupToDelete.referencingLicenseAgreements.length > 0 ?
 162                 i18n('This feature group is associated with one ore more license agreements') :
 163                 '';
 164         return (
 165                 <div>
 166                         <p>{msg}</p>
 167                         <p>{subMsg}</p>
 168                 </div>
 169         );
 170 }