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