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