openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx

   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
  21 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  22 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  23 import LicenseAgreementEditor from './LicenseAgreementEditor.js';
  24 import {extractValue} from './LicenseAgreementConstants';
  25
  26 class LicenseAgreementListEditorView extends React.Component {
  27         static propTypes = {
  28                 vendorName: PropTypes.string,
  29                 licenseModelId: PropTypes.string.isRequired,
  30                 licenseAgreementList: PropTypes.array,
  31                 isReadOnlyMode: PropTypes.bool.isRequired,
  32                 isDisplayModal: PropTypes.bool,
  33                 isModalInEditMode: PropTypes.bool,
  34                 onAddLicenseAgreementClick: PropTypes.func,
  35                 onEditLicenseAgreementClick: PropTypes.func,
  36                 onDeleteLicenseAgreement: PropTypes.func,
  37         };
  38
  39         static defaultProps = {
  40                 licenseAgreementList: []
  41         };
  42
  43         state = {
  44                 localFilter: ''
  45         };
  46
  47         render() {
  48                 const {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
  49                 const {onAddLicenseAgreementClick} = this.props;
  50                 const {localFilter} = this.state;
  51
  52                 return (
  53                         <div className='license-model-list-editor license-agreement-list-editor'>
  54                                 <ListEditorView
  55                                         title={i18n('License Agreements')}
  56                                         plusButtonTitle={i18n('Add License Agreement')}
  57                                         onAdd={() => onAddLicenseAgreementClick(version)}
  58                                         filterValue={localFilter}
  59                                         onFilter={value => this.setState({localFilter: value})}
  60                                         isReadOnlyMode={isReadOnlyMode}>
  61                                         {this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version))}
  62                                 </ListEditorView>
  63                                 <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-agreement-modal'>
  64                                         <Modal.Header>
  65                                                 <Modal.Title>{`${isModalInEditMode ? i18n('Edit License Agreement') : i18n('Create New License Agreement')}`}</Modal.Title>
  66                                         </Modal.Header>
  67                                         <Modal.Body>
  68                                                 {
  69                                                         isDisplayModal && (
  70                                                                 <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} />
  71                                                         )
  72                                                 }
  73                                         </Modal.Body>
  74                                 </Modal>
  75                         </div>
  76                 );
  77         }
  78
  79         filterList() {
  80                 let {licenseAgreementList} = this.props;
  81                 let {localFilter} = this.state;
  82                 if (localFilter.trim()) {
  83                         const filter = new RegExp(escape(localFilter), 'i');
  84                         return licenseAgreementList.filter(({name = '', description = '', licenseTerm = ''}) => {
  85                                 return escape(name).match(filter) || escape(description).match(filter) || escape(extractValue(licenseTerm)).match(filter);
  86                         });
  87                 }
  88                 else {
  89                         return licenseAgreementList;
  90                 }
  91         }
  92
  93         renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
  94                 let {id, name, description, licenseTerm, featureGroupsIds = []} = licenseAgreement;
  95                 let {onEditLicenseAgreementClick, onDeleteLicenseAgreement} = this.props;
  96                 return (
  97                         <ListEditorItemView
  98                                 key={id}
  99                                 onSelect={() => onEditLicenseAgreementClick(licenseAgreement, version)}
 100                                 onDelete={() => onDeleteLicenseAgreement(licenseAgreement, version)}
 101                                 className='list-editor-item-view'
 102                                 isReadOnlyMode={isReadOnlyMode}>
 103                                 <div className='list-editor-item-view-field'>
 104                                         <div className='title'>{i18n('Name')}</div>
 105                                         <div className='text name'>{name}</div>
 106                                 </div>
 107                                 <div className='list-editor-item-view-field'>
 108                                         <div className='list-editor-item-view-field-tight'>
 109                                                 <div className='title'>{i18n('Type')}</div>
 110                                                 <div className='text type'>{extractValue(licenseTerm)}</div>
 111                                         </div>
 112                                         <div className='list-editor-item-view-field-tight'>
 113                                                 <div className='title'>{i18n('Feature')}</div>
 114                                                 <div className='title'>{i18n('Groups')}</div>
 115                                                 <div className='feature-groups-count'>{featureGroupsIds.length}</div>
 116                                         </div>
 117                                 </div>
 118                                 <div className='list-editor-item-view-field'>
 119                                         <div className='title'>{i18n('Description')}</div>
 120                                         <div className='text description'>{description}</div>
 121                                 </div>
 122                         </ListEditorItemView>
 123                 );
 124         }
 125 }
 126
 127 export default LicenseAgreementListEditorView;