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

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