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
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Modal from 'nfvo-components/modal/Modal.jsx';
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22
  23 import FeatureGroupEditor from './FeatureGroupEditor.js';
  24
  25 class FeatureGroupListEditorView extends React.Component {
  26         static propTypes = {
  27                 vendorName: React.PropTypes.string,
  28                 licenseModelId: React.PropTypes.string.isRequired,
  29                 featureGroupsModal: React.PropTypes.shape({
  30                         show: React.PropTypes.bool,
  31                         editMode: React.PropTypes.bool
  32                 }),
  33                 isReadOnlyMode: React.PropTypes.bool.isRequired,
  34                 onAddFeatureGroupClick: React.PropTypes.func,
  35                 onEditFeatureGroupClick: React.PropTypes.func,
  36                 onDeleteFeatureGroupClick: React.PropTypes.func,
  37                 onCancelFeatureGroupsEditor: React.PropTypes.func,
  38                 featureGroupsList: React.PropTypes.array
  39         };
  40
  41         static defaultProps = {
  42                 featureGroupsList: [],
  43                 featureGroupsModal: {
  44                         show: false,
  45                         editMode: false
  46                 }
  47         };
  48
  49         state = {
  50                 localFilter: ''
  51         };
  52
  53         render() {
  54                 let {licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick, version} = this.props;
  55                 const {localFilter} = this.state;
  56                 return (
  57                         <div className='feature-groups-list-editor'>
  58                                 <ListEditorView
  59                                         title={i18n('Feature Groups')}
  60                                         plusButtonTitle={i18n('Add Feature Group')}
  61                                         filterValue={localFilter}
  62                                         onFilter={value => this.setState({localFilter: value})}
  63                                         onAdd={() => onAddFeatureGroupClick(version)}
  64                                         isReadOnlyMode={isReadOnlyMode}>
  65                                         {this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode, version))}
  66                                 </ListEditorView>
  67                                 {featureGroupsModal.show && <Modal show={featureGroupsModal.show} bsSize='large' animation={true}
  68                                                className='onborading-modal license-model-modal feature-group-modal'>
  69                                                 <Modal.Header>
  70                                                         <Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title>
  71                                                 </Modal.Header>
  72                                                 <Modal.Body>
  73                                                         <FeatureGroupEditor
  74                                                                 version={version}
  75                                                                 licenseModelId={licenseModelId}
  76                                                                 isReadOnlyMode={isReadOnlyMode}/>
  77                                                 </Modal.Body>
  78                                         </Modal>
  79                                 }
  80
  81                         </div>
  82                 );
  83         }
  84
  85
  86         renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
  87                 let {name, description, manufacturerReferenceNumber, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem;
  88                 return (
  89                         <ListEditorItemView
  90                                 key={listItem.id}
  91                                 onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
  92                                 onSelect={() => this.editFeatureGroupItem(listItem, version)}
  93                                 className='list-editor-item-view'
  94                                 isReadOnlyMode={isReadOnlyMode}>
  95                                 <div className='list-editor-item-view-field'>
  96                                         <div className='title'>{i18n('Name')}</div>
  97                                         <div className='text name'>{name}</div>
  98                                 </div>
  99
 100                                 <div className='list-editor-item-view-field'>
 101                                         <div className='feature-groups-count-field'>
 102                                                 <div className='title'>{i18n('Entitlement')}</div>
 103                                                 <div className='title'>{i18n('Pools')}</div>
 104                                                 <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
 105                                         </div>
 106                                         <div className='feature-groups-count-field'>
 107                                                 <div className='title'>{i18n('License key')}</div>
 108                                                 <div className='title'>{i18n('Groups')}</div>
 109                                                 <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
 110                                         </div>
 111                                 </div>
 112
 113                                 <div className='list-editor-item-view-field'>
 114                                         <div className='feature-groups-count-field'>
 115                                                 <div className='title'>{i18n('Manufacturer Reference')}</div>
 116                                                 <div className='title'>{i18n('Number')}</div>
 117                                                 <div className='feature-groups-count-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}"?`);
 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 }