diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx | 140 |
1 files changed, 73 insertions, 67 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx index aa39c87dd0..cee46abc69 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx @@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; - class SoftwareProductProcessesListView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; - - static propTypes = { - onAddProcess: PropTypes.func.isRequired, - onEditProcess: PropTypes.func.isRequired, - onDeleteProcess: PropTypes.func.isRequired, - isReadOnlyMode: PropTypes.bool.isRequired, - currentSoftwareProduct:PropTypes.object, - addButtonTitle: PropTypes.string - }; - - render() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props; + static propTypes = { + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct: PropTypes.object, + addButtonTitle: PropTypes.string + }; - return ( - <ListEditorView - plusButtonTitle={addButtonTitle} - 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>); - } + render() { + const { localFilter } = this.state; + let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props; - 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)}> + return ( + <ListEditorView + plusButtonTitle={addButtonTitle} + 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> + ); + } - <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> - ); - } + 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; + 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; - } - } + 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 SoftwareProductProcessesListView; |