gerrit.onap Code Review - sdc.git/blob

   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 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                 ({
 110                     name = '',
 111                     description = '',
 112                     operationalScope = '',
 113                     type = ''
 114                 }) => {
 115                     return (
 116                         escape(name).match(filter) ||
 117                         escape(description).match(filter) ||
 118                         escape(this.extractValue(operationalScope)).match(
 119                             filter
 120                         ) ||
 121                         escape(type).match(filter)
 122                     );
 123                 }
 124             );
 125         } else {
 126             return licenseKeyGroupsList;
 127         }
 128     }
 129
 130     renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
 131         let { id, name, description, operationalScope, type } = licenseKeyGroup;
 132         let {
 133             onEditLicenseKeyGroupClick,
 134             onDeleteLicenseKeyGroupClick
 135         } = this.props;
 136         return (
 137             <ListEditorItemView
 138                 key={id}
 139                 onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
 140                 onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
 141                 className="list-editor-item-view"
 142                 isReadOnlyMode={isReadOnlyMode}>
 143                 <div className="list-editor-item-view-field">
 144                     <div className="title">{i18n('Name')}</div>
 145                     <div className="text name">{name}</div>
 146                 </div>
 147
 148                 <div className="list-editor-item-view-field">
 149                     <div className="title">{i18n('Operational Scope')}</div>
 150                     <div className="text operational-scope">
 151                         {operationalScope &&
 152                             this.getOperationalScopes(operationalScope)}
 153                     </div>
 154
 155                     <div className="title">{i18n('Type')}</div>
 156                     <div className="text type">
 157                         {InputOptions.getTitleByName(optionsInputValues, type)}
 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     getOperationalScopes(operationalScope) {
 169         if (
 170             operationalScope.choices &&
 171             operationalScope.choices.toString() === i18n(optionInputOther.OTHER)
 172         ) {
 173             return operationalScope.other;
 174         } else if (operationalScope.choices) {
 175             let allOpScopes = '';
 176             for (let opScope of operationalScope.choices) {
 177                 allOpScopes +=
 178                     allOpScopes === ''
 179                         ? InputOptions.getTitleByName(
 180                               optionsInputValues,
 181                               opScope
 182                           )
 183                         : `, ${InputOptions.getTitleByName(
 184                               optionsInputValues,
 185                               opScope
 186                           )}`;
 187             }
 188             return allOpScopes;
 189         } else {
 190             return '';
 191         }
 192     }
 193
 194     extractValue(item) {
 195         if (item === undefined) {
 196             return '';
 197         } //TODO fix it sooner rather than later
 198
 199         return item
 200             ? item.choice === optionInputOther.OTHER
 201               ? item.other
 202               : InputOptions.getTitleByName(optionsInputValues, item.choice)
 203             : '';
 204     }
 205 }
 206
 207 export default LicenseKeyGroupsListEditorView;
 208
 209 export function generateConfirmationMsg(licenseKeyGroupToDelete) {
 210     let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
 211     let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
 212     let subMsg =
 213         licenseKeyGroupToDelete.referencingFeatureGroups &&
 214         licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
 215             ? i18n(
 216                   'This license key group is associated with one or more feature groups'
 217               )
 218             : '';
 219     return (
 220         <div>
 221             <p>{msg}</p>
 222             <p>{subMsg}</p>
 223         </div>
 224     );
 225 }