openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3 import Modal from 'nfvo-components/modal/Modal.jsx';
   4
   5 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
   6 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
   7
   8 import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js';
   9 import SoftwareProductComponentsProcessesConfirmationModal from './SoftwareProductComponentsProcessesConfirmationModal.jsx';
  10
  11 class SoftwareProductProcessesView extends React.Component {
  12
  13         state = {
  14                 localFilter: ''
  15         };
  16
  17         static propTypes = {
  18                 onAddProcess: React.PropTypes.func,
  19                 onEditProcessClick: React.PropTypes.func,
  20                 onDeleteProcessClick: React.PropTypes.func,
  21                 isDisplayModal: React.PropTypes.bool,
  22                 isModalInEditMode: React.PropTypes.bool,
  23                 onStorageSelect: React.PropTypes.func,
  24                 componentId: React.PropTypes.string,
  25                 softwareProductId: React.PropTypes.string
  26         };
  27
  28         render() {
  29                 let { softwareProductId, componentId} = this.props;
  30
  31                 return (
  32                         <div className='vsp-processes-page'>
  33                                 <div className='software-product-view'>
  34                                         <div className='software-product-landing-view-right-side flex-column'>
  35                                                 {this.renderEditor()}
  36                                                 {this.renderProcessList()}
  37                                         </div>
  38                                         <SoftwareProductComponentsProcessesConfirmationModal
  39                                                 componentId={componentId}
  40                                                 softwareProductId={softwareProductId}/>
  41                                 </div>
  42                         </div>
  43                 );
  44         }
  45
  46         renderEditor() {
  47                 let {softwareProductId, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
  48                 return (
  49                         <Modal show={isDisplayModal} bsSize='large' animation={true}>
  50                                 <Modal.Header>
  51                                         <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
  52                                 </Modal.Header>
  53                                 <Modal.Body className='edit-process-modal'>
  54                                         <SoftwareProductProcessesEditor
  55                                                 componentId={componentId}
  56                                                 softwareProductId={softwareProductId}
  57                                                 isReadOnlyMode={isReadOnlyMode}/>
  58                                 </Modal.Body>
  59                         </Modal>
  60
  61                 );
  62         }
  63
  64         renderProcessList() {
  65                 const {localFilter} = this.state;
  66                 let {onAddProcess, isReadOnlyMode} = this.props;
  67                 return (
  68                         <div className='processes-list'>
  69                                 <ListEditorView
  70                                         plusButtonTitle={i18n('Add Component Process Details')}
  71                                         filterValue={localFilter}
  72                                         placeholder={i18n('Filter Process')}
  73                                         onAdd={onAddProcess}
  74                                         isReadOnlyMode={isReadOnlyMode}
  75                                         onFilter={filter => this.setState({localFilter: filter})}>
  76                                         {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
  77                                 </ListEditorView>
  78                         </div>
  79                 );
  80         }
  81
  82         renderProcessListItem(process, isReadOnlyMode) {
  83                 let {id, name, description, artifactName = ''} = process;
  84                 let {onEditProcessClick, onDeleteProcessClick} =  this.props;
  85                 return (
  86                         <ListEditorItemView
  87                                 key={id}
  88                                 className='list-editor-item-view'
  89                                 isReadOnlyMode={isReadOnlyMode}
  90                                 onSelect={() => onEditProcessClick(process)}
  91                                 onDelete={() => onDeleteProcessClick(process)}>
  92
  93                                 <div className='list-editor-item-view-field'>
  94                                         <div className='title'>{i18n('Name')}</div>
  95                                         <div className='name'>{name}</div>
  96                                 </div>
  97                                 <div className='list-editor-item-view-field'>
  98                                         <div className='title'>{i18n('Artifact name')}</div>
  99                                         <div className='artifact-name'>{artifactName}</div>
 100                                 </div>
 101                                 <div className='list-editor-item-view-field'>
 102                                         <div className='title'>{i18n('Notes')}</div>
 103                                         <div className='description'>{description}</div>
 104                                 </div>
 105                         </ListEditorItemView>
 106                 );
 107         }
 108
 109
 110         filterList() {
 111                 let {processesList} = this.props;
 112                 let {localFilter} = this.state;
 113                 if (localFilter.trim()) {
 114                         const filter = new RegExp(escape(localFilter), 'i');
 115                         return processesList.filter(({name = '', description = ''}) => {
 116                                 return escape(name).match(filter) || escape(description).match(filter);
 117                         });
 118                 }
 119                 else {
 120                         return processesList;
 121                 }
 122         }
 123 }
 124
 125 export default SoftwareProductProcessesView;