diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx | 82 |
1 files changed, 10 insertions, 72 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx index 8f52434042..e2cb4edf74 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx @@ -14,14 +14,12 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Modal from 'nfvo-components/modal/Modal.jsx'; -import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; -import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; - import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js'; - +import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx'; class SoftwareProductProcessesView extends React.Component { @@ -31,25 +29,25 @@ class SoftwareProductProcessesView extends React.Component { }; static propTypes = { - onAddProcess: React.PropTypes.func.isRequired, - onEditProcess: React.PropTypes.func.isRequired, - onDeleteProcess: React.PropTypes.func.isRequired, - isDisplayEditor: React.PropTypes.bool.isRequired, - isReadOnlyMode: React.PropTypes.bool.isRequired, - currentSoftwareProduct:React.PropTypes.object + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isDisplayEditor: PropTypes.bool.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct:PropTypes.object }; render() { return ( <div className='software-product-landing-view-right-side vsp-processes-page'> {this.renderEditor()} - {this.renderProcessList()} + <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/> </div> ); } renderEditor() { - let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props; + let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props; return ( <Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'> @@ -62,66 +60,6 @@ class SoftwareProductProcessesView extends React.Component { </Modal> ); } - - renderProcessList() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode} = this.props; - - return ( - <ListEditorView - plusButtonTitle={i18n('Add Process Details')} - filterValue={localFilter} - placeholder={i18n('Filter Process')} - onAdd={onAddProcess} - isReadOnlyMode={isReadOnlyMode} - title={i18n('Process Details')} - onFilter={value => this.setState({localFilter: value})}> - {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} - </ListEditorView> - ); - } - - renderProcessListItem(process, isReadOnlyMode) { - let {id, name, description, artifactName = ''} = process; - let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props; - return ( - <ListEditorItemView - key={id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditProcess(process)} - onDelete={() => onDeleteProcess(process, version)}> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Artifact name')}</div> - <div className='artifact-name'>{artifactName}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Notes')}</div> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); - } - - filterList() { - let {processesList} = this.props; - let {localFilter} = this.state; - - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return processesList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return processesList; - } - } } export default SoftwareProductProcessesView; |