gerrit.onap Code Review - sdc.git/blob

   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 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 LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js';
  24 import InputOptions, {
  25     other as optionInputOther
  26 } from 'nfvo-components/input/validation/InputOptions.jsx';
  27 import { optionsInputValues } from './LicenseKeyGroupsConstants';
  28
  29 class LicenseKeyGroupsListEditorView extends React.Component {
  30     static propTypes = {
  31         vendorName: PropTypes.string,
  32         licenseModelId: PropTypes.string.isRequired,
  33         licenseKeyGroupsList: PropTypes.array,
  34         isReadOnlyMode: PropTypes.bool.isRequired,
  35         isDisplayModal: PropTypes.bool,
  36         isModalInEditMode: PropTypes.bool,
  37         onAddLicenseKeyGroupClick: PropTypes.func,
  38         onEditLicenseKeyGroupClick: PropTypes.func,
  39         onDeleteLicenseKeyGroupClick: PropTypes.func
  40     };
  41
  42     static defaultProps = {
  43         licenseKeyGroupsList: []
  44     };
  45
  46     state = {
  47         localFilter: ''
  48     };
  49
  50     render() {
  51         let {
  52             licenseModelId,
  53             isReadOnlyMode,
  54             isDisplayModal,
  55             isModalInEditMode,
  56             version
  57         } = this.props;
  58         let { onAddLicenseKeyGroupClick } = this.props;
  59         const { localFilter } = this.state;
  60
  61         return (
  62             <div className="license-model-list-editor license-key-groups-list-editor">
  63                 <ListEditorView
  64                     title={i18n('License Key Groups')}
  65                     plusButtonTitle={i18n('Add License Key Group')}
  66                     onAdd={onAddLicenseKeyGroupClick}
  67                     filterValue={localFilter}
  68                     onFilter={value => this.setState({ localFilter: value })}
  69                     isReadOnlyMode={isReadOnlyMode}>
  70                     {this.filterList().map(licenseKeyGroup =>
  71                         this.renderLicenseKeyGroupListItem(
  72                             licenseKeyGroup,
  73                             isReadOnlyMode
  74                         )
  75                     )}
  76                 </ListEditorView>
  77                 <Modal
  78                     show={isDisplayModal}
  79                     bsSize="large"
  80                     animation={true}
  81                     className="onborading-modal license-model-modal license-key-groups-modal">
  82                     <Modal.Header>
  83                         <Modal.Title>{`${
  84                             isModalInEditMode
  85                                 ? i18n('Edit License Key Group')
  86                                 : i18n('Create New License Key Group')
  87                         }`}</Modal.Title>
  88                     </Modal.Header>
  89                     <Modal.Body>
  90                         {isDisplayModal && (
  91                             <LicenseKeyGroupsEditor
  92                                 version={version}
  93                                 licenseModelId={licenseModelId}
  94                                 isReadOnlyMode={isReadOnlyMode}
  95                             />
  96                         )}
  97                     </Modal.Body>
  98                 </Modal>
  99             </div>
 100         );
 101     }
 102
 103     filterList() {
 104         let { licenseKeyGroupsList } = this.props;
 105         let { localFilter } = this.state;
 106         if (localFilter.trim()) {
 107             const filter = new RegExp(escape(localFilter), 'i');
 108             return licenseKeyGroupsList.filter(
 109                 ({ name = '', description = '', type = '' }) => {
 110                     return (
 111                         escape(name).match(filter) ||
 112                         escape(description).match(filter) ||
 113                         escape(type).match(filter)
 114                     );
 115                 }
 116             );
 117         } else {
 118             return licenseKeyGroupsList;
 119         }
 120     }
 121
 122     renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
 123         let {
 124             id,
 125             name,
 126             description,
 127             type,
 128             manufacturerReferenceNumber
 129         } = licenseKeyGroup;
 130         let {
 131             onEditLicenseKeyGroupClick,
 132             onDeleteLicenseKeyGroupClick
 133         } = this.props;
 134         return (
 135             <ListEditorItemView
 136                 key={id}
 137                 onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
 138                 onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
 139                 className="list-editor-item-view"
 140                 isReadOnlyMode={isReadOnlyMode}>
 141                 <div className="list-editor-item-view-field">
 142                     <div className="title">{i18n('Name')}</div>
 143                     <div className="text name">{name}</div>
 144                 </div>
 145
 146                 <div className="list-editor-item-view-field">
 147                     <div className="title">{i18n('Type')}</div>
 148                     <div className="text type">
 149                         {InputOptions.getTitleByName(optionsInputValues, type)}
 150                     </div>
 151                 </div>
 152                 <div className="list-editor-item-view-field">
 153                     <div className="title">
 154                         {i18n('Manufacturer Reference Number')}
 155                     </div>
 156                     <div className="text description">
 157                         {manufacturerReferenceNumber}
 158                     </div>
 159                 </div>
 160                 <div className="list-editor-item-view-field">
 161                     <div className="title">{i18n('Description')}</div>
 162                     <div className="text description">{description}</div>
 163                 </div>
 164             </ListEditorItemView>
 165         );
 166     }
 167
 168     extractValue(item) {
 169         if (item === undefined) {
 170             return '';
 171         } //TODO fix it sooner rather than later
 172
 173         return item
 174             ? item.choice === optionInputOther.OTHER
 175               ? item.other
 176               : InputOptions.getTitleByName(optionsInputValues, item.choice)
 177             : '';
 178     }
 179 }
 180
 181 export default LicenseKeyGroupsListEditorView;
 182
 183 export function generateConfirmationMsg(licenseKeyGroupToDelete) {
 184     let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
 185     let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
 186     let subMsg =
 187         licenseKeyGroupToDelete.referencingFeatureGroups &&
 188         licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
 189             ? i18n(
 190                   'This license key group is associated with one or more feature groups'
 191               )
 192             : '';
 193     return (
 194         <div>
 195             <p>{msg}</p>
 196             <p>{subMsg}</p>
 197         </div>
 198     );
 199 }