openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * 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
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22 import { extractValue } from './LicenseAgreementConstants';
  23
  24 class LicenseAgreementListEditorView extends React.Component {
  25     static propTypes = {
  26         vendorName: PropTypes.string,
  27         licenseModelId: PropTypes.string.isRequired,
  28         licenseAgreementList: PropTypes.array,
  29         isReadOnlyMode: PropTypes.bool.isRequired,
  30         isDisplayModal: PropTypes.bool,
  31         isModalInEditMode: PropTypes.bool,
  32         onAddLicenseAgreementClick: PropTypes.func,
  33         onEditLicenseAgreementClick: PropTypes.func,
  34         onDeleteLicenseAgreement: PropTypes.func
  35     };
  36
  37     static defaultProps = {
  38         licenseAgreementList: []
  39     };
  40
  41     state = {
  42         localFilter: ''
  43     };
  44
  45     render() {
  46         const { isReadOnlyMode, version } = this.props;
  47         const { onAddLicenseAgreementClick } = this.props;
  48         const { localFilter } = this.state;
  49
  50         return (
  51             <div className="license-model-list-editor license-agreement-list-editor">
  52                 <ListEditorView
  53                     title={i18n('License Agreements')}
  54                     plusButtonTitle={i18n('Add License Agreement')}
  55                     onAdd={() => onAddLicenseAgreementClick(version)}
  56                     filterValue={localFilter}
  57                     onFilter={value => this.setState({ localFilter: value })}
  58                     isReadOnlyMode={isReadOnlyMode}>
  59                     {this.filterList().map(licenseAgreement =>
  60                         this.renderLicenseAgreementListItem(
  61                             licenseAgreement,
  62                             isReadOnlyMode,
  63                             version
  64                         )
  65                     )}
  66                 </ListEditorView>
  67             </div>
  68         );
  69     }
  70
  71     filterList() {
  72         let { licenseAgreementList } = this.props;
  73         let { localFilter } = this.state;
  74         if (localFilter.trim()) {
  75             const filter = new RegExp(escape(localFilter), 'i');
  76             return licenseAgreementList.filter(
  77                 ({ name = '', description = '', licenseTerm = '' }) => {
  78                     return (
  79                         escape(name).match(filter) ||
  80                         escape(description).match(filter) ||
  81                         escape(extractValue(licenseTerm)).match(filter)
  82                     );
  83                 }
  84             );
  85         } else {
  86             return licenseAgreementList;
  87         }
  88     }
  89
  90     renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
  91         let {
  92             id,
  93             name,
  94             description,
  95             licenseTerm,
  96             featureGroupsIds = []
  97         } = licenseAgreement;
  98         let {
  99             onEditLicenseAgreementClick,
 100             onDeleteLicenseAgreement
 101         } = this.props;
 102         return (
 103             <ListEditorItemView
 104                 key={id}
 105                 onSelect={() =>
 106                     onEditLicenseAgreementClick(
 107                         licenseAgreement,
 108                         version,
 109                         isReadOnlyMode
 110                     )
 111                 }
 112                 onDelete={() =>
 113                     onDeleteLicenseAgreement(licenseAgreement, version)
 114                 }
 115                 className="list-editor-item-view"
 116                 isReadOnlyMode={isReadOnlyMode}>
 117                 <div className="list-editor-item-view-field">
 118                     <div className="title">{i18n('Name')}</div>
 119                     <div className="text name">{name}</div>
 120                 </div>
 121                 <div className="list-editor-item-view-field">
 122                     <div className="list-editor-item-view-field-tight">
 123                         <div className="title">{i18n('Type')}</div>
 124                         <div className="text type">
 125                             {extractValue(licenseTerm)}
 126                         </div>
 127                     </div>
 128                     <div className="list-editor-item-view-field-tight">
 129                         <div className="title">{i18n('Feature')}</div>
 130                         <div className="title">{i18n('Groups')}</div>
 131                         <div className="feature-groups-count">
 132                             {featureGroupsIds.length}
 133                         </div>
 134                     </div>
 135                 </div>
 136                 <div className="list-editor-item-view-field">
 137                     <div className="title">{i18n('Description')}</div>
 138                     <div className="text description">{description}</div>
 139                 </div>
 140             </ListEditorItemView>
 141         );
 142     }
 143 }
 144
 145 export default LicenseAgreementListEditorView;