diff options
author | talig <talig@amdocs.com> | 2017-12-20 14:30:43 +0200 |
---|---|---|
committer | Vitaly Emporopulo <Vitaliy.Emporopulo@amdocs.com> | 2017-12-21 11:12:33 +0000 |
commit | 8e9c0653dd6c6862123c9609ae34e1206d86456e (patch) | |
tree | 5eeef00ec0677133baa439ca8d7ffd7aca4804b6 /openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx | |
parent | 785ebcc95de3e064e843bec04ba7a209d854fc7c (diff) |
Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
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 | 99 |
1 files changed, 99 insertions, 0 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 new file mode 100644 index 0000000000..aa39c87dd0 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx @@ -0,0 +1,99 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import PropTypes from 'prop-types'; +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: '' + }; + + 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; + + 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>); + } + + 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 SoftwareProductProcessesListView; |