openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.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 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  20 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  21
  22 import InputOptions, {
  23     other as optionInputOther
  24 } from 'nfvo-components/input/validation/InputOptions.jsx';
  25 import { optionsInputValues } from './LicenseKeyGroupsConstants';
  26
  27 class LicenseKeyGroupsListEditorView extends React.Component {
  28     static propTypes = {
  29         vendorName: PropTypes.string,
  30         licenseModelId: PropTypes.string.isRequired,
  31         licenseKeyGroupsList: PropTypes.array,
  32         isReadOnlyMode: PropTypes.bool.isRequired,
  33         onAddLicenseKeyGroupClick: PropTypes.func,
  34         onEditLicenseKeyGroupClick: PropTypes.func,
  35         onDeleteLicenseKeyGroupClick: PropTypes.func
  36     };
  37
  38     static defaultProps = {
  39         licenseKeyGroupsList: []
  40     };
  41
  42     state = {
  43         localFilter: ''
  44     };
  45
  46     render() {
  47         let { isReadOnlyMode } = this.props;
  48         let { onAddLicenseKeyGroupClick } = this.props;
  49         const { localFilter } = this.state;
  50
  51         return (
  52             <div className="license-model-list-editor license-key-groups-list-editor">
  53                 <ListEditorView
  54                     title={i18n('License Key Groups')}
  55                     plusButtonTitle={i18n('Add License Key Group')}
  56                     onAdd={onAddLicenseKeyGroupClick}
  57                     filterValue={localFilter}
  58                     onFilter={value => this.setState({ localFilter: value })}
  59                     isReadOnlyMode={isReadOnlyMode}>
  60                     {this.filterList().map(licenseKeyGroup =>
  61                         this.renderLicenseKeyGroupListItem(
  62                             licenseKeyGroup,
  63                             isReadOnlyMode
  64                         )
  65                     )}
  66                 </ListEditorView>
  67             </div>
  68         );
  69     }
  70
  71     filterList() {
  72         let { licenseKeyGroupsList } = this.props;
  73         let { localFilter } = this.state;
  74         if (localFilter.trim()) {
  75             const filter = new RegExp(escape(localFilter), 'i');
  76             return licenseKeyGroupsList.filter(
  77                 ({ name = '', description = '', type = '' }) => {
  78                     return (
  79                         escape(name).match(filter) ||
  80                         escape(description).match(filter) ||
  81                         escape(type).match(filter)
  82                     );
  83                 }
  84             );
  85         } else {
  86             return licenseKeyGroupsList;
  87         }
  88     }
  89
  90     renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
  91         let {
  92             id,
  93             name,
  94             description,
  95             type,
  96             manufacturerReferenceNumber
  97         } = licenseKeyGroup;
  98         let {
  99             onEditLicenseKeyGroupClick,
 100             onDeleteLicenseKeyGroupClick
 101         } = this.props;
 102         return (
 103             <ListEditorItemView
 104                 key={id}
 105                 onSelect={() =>
 106                     onEditLicenseKeyGroupClick(licenseKeyGroup, isReadOnlyMode)
 107                 }
 108                 onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
 109                 className="list-editor-item-view"
 110                 isReadOnlyMode={isReadOnlyMode}>
 111                 <div className="list-editor-item-view-field">
 112                     <div className="title">{i18n('Name')}</div>
 113                     <div className="text name">{name}</div>
 114                 </div>
 115
 116                 <div className="list-editor-item-view-field">
 117                     <div className="title">{i18n('Type')}</div>
 118                     <div className="text type">
 119                         {InputOptions.getTitleByName(optionsInputValues, type)}
 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     extractValue(item) {
 139         if (item === undefined) {
 140             return '';
 141         } //TODO fix it sooner rather than later
 142
 143         return item
 144             ? item.choice === optionInputOther.OTHER
 145               ? item.other
 146               : InputOptions.getTitleByName(optionsInputValues, item.choice)
 147             : '';
 148     }
 149 }
 150
 151 export default LicenseKeyGroupsListEditorView;
 152
 153 export function generateConfirmationMsg(licenseKeyGroupToDelete) {
 154     let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
 155     let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
 156     let subMsg =
 157         licenseKeyGroupToDelete.referencingFeatureGroups &&
 158         licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
 159             ? i18n(
 160                   'This license key group is associated with one or more feature groups'
 161               )
 162             : '';
 163     return (
 164         <div>
 165             <p>{msg}</p>
 166             <p>{subMsg}</p>
 167         </div>
 168     );
 169 }