openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.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 import { extractUnits } from './EntitlementPoolsConstants';
  24
  25 class EntitlementPoolsListEditorView extends React.Component {
  26     static propTypes = {
  27         vendorName: PropTypes.string,
  28         licenseModelId: PropTypes.string.isRequired,
  29         entitlementPoolsList: PropTypes.array,
  30         isReadOnlyMode: PropTypes.bool.isRequired,
  31         isDisplayModal: PropTypes.bool,
  32         isModalInEditMode: PropTypes.bool,
  33         onAddEntitlementPoolClick: PropTypes.func,
  34         onEditEntitlementPoolClick: PropTypes.func,
  35         onDeleteEntitlementPool: PropTypes.func
  36     };
  37
  38     static defaultProps = {
  39         entitlementPoolsList: []
  40     };
  41
  42     state = {
  43         localFilter: ''
  44     };
  45
  46     render() {
  47         let { isReadOnlyMode, onAddEntitlementPoolClick } = this.props;
  48         const { localFilter } = this.state;
  49
  50         return (
  51             <div className="license-model-list-editor entitlement-pools-list-editor">
  52                 <ListEditorView
  53                     title={i18n('Entitlement Pools')}
  54                     plusButtonTitle={i18n('Add Entitlement Pool')}
  55                     onAdd={onAddEntitlementPoolClick}
  56                     filterValue={localFilter}
  57                     onFilter={value => this.setState({ localFilter: value })}
  58                     isReadOnlyMode={isReadOnlyMode}>
  59                     {this.filterList().map(entitlementPool =>
  60                         this.renderEntitlementPoolListItem(
  61                             entitlementPool,
  62                             isReadOnlyMode
  63                         )
  64                     )}
  65                 </ListEditorView>
  66             </div>
  67         );
  68     }
  69
  70     filterList() {
  71         let { entitlementPoolsList } = this.props;
  72         let { localFilter } = this.state;
  73         if (localFilter.trim()) {
  74             const filter = new RegExp(escape(localFilter), 'i');
  75             return entitlementPoolsList.filter(
  76                 ({ name = '', description = '' }) => {
  77                     return (
  78                         escape(name).match(filter) ||
  79                         escape(description).match(filter)
  80                     );
  81                 }
  82             );
  83         } else {
  84             return entitlementPoolsList;
  85         }
  86     }
  87
  88     renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
  89         let {
  90             id,
  91             name,
  92             description,
  93             thresholdValue,
  94             thresholdUnits,
  95             manufacturerReferenceNumber
  96         } = entitlementPool;
  97         let {
  98             onEditEntitlementPoolClick,
  99             onDeleteEntitlementPool
 100         } = this.props;
 101         return (
 102             <ListEditorItemView
 103                 key={id}
 104                 onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
 105                 onDelete={() => onDeleteEntitlementPool(entitlementPool)}
 106                 className="list-editor-item-view"
 107                 isReadOnlyMode={isReadOnlyMode}>
 108                 <div className="list-editor-item-view-field">
 109                     <div className="title">{i18n('Name')}</div>
 110                     <div>
 111                         <div className="textEllipses text name">{name}</div>
 112                     </div>
 113                 </div>
 114
 115                 <div className="list-editor-item-view-field">
 116                     <div className="title">{i18n('Entitlement')}</div>
 117                     <div className="entitlement-pools-count">
 118                         {thresholdValue &&
 119                             `${thresholdValue} ${extractUnits(thresholdUnits)}`}
 120                     </div>
 121                 </div>
 122                 <div className="list-editor-item-view-field">
 123                     <div className="title">
 124                         {i18n('Manufacturer Reference Number')}
 125                     </div>
 126                     <div className="text description">
 127                         {manufacturerReferenceNumber}
 128                     </div>
 129                 </div>
 130                 <div className="list-editor-item-view-field">
 131                     <div className="title">{i18n('Description')}</div>
 132                     <div className="text description">{description}</div>
 133                 </div>
 134             </ListEditorItemView>
 135         );
 136     }
 137 }
 138
 139 export default EntitlementPoolsListEditorView;
 140
 141 export function generateConfirmationMsg(entitlementPoolToDelete) {
 142     let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
 143     let msg = i18n('Are you sure you want to delete "{poolName}"?', {
 144         poolName: poolName
 145     });
 146     let subMsg =
 147         entitlementPoolToDelete &&
 148         entitlementPoolToDelete.referencingFeatureGroups &&
 149         entitlementPoolToDelete.referencingFeatureGroups.length > 0
 150             ? i18n(
 151                   'This entitlement pool is associated with one or more feature groups'
 152               )
 153             : '';
 154     return (
 155         <div>
 156             <p>{msg}</p>
 157             <p>{subMsg}</p>
 158         </div>
 159     );
 160 }