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