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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Modal from 'nfvo-components/modal/Modal.jsx';
  19
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22
  23 import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
  24
  25
  26
  27 class SoftwareProductProcessesView extends React.Component {
  28
  29         state = {
  30                 localFilter: ''
  31         };
  32
  33         static propTypes = {
  34                 onAddProcess: React.PropTypes.func.isRequired,
  35                 onEditProcess: React.PropTypes.func.isRequired,
  36                 onDeleteProcess: React.PropTypes.func.isRequired,
  37                 isDisplayEditor: React.PropTypes.bool.isRequired,
  38                 isReadOnlyMode: React.PropTypes.bool.isRequired,
  39                 currentSoftwareProduct:React.PropTypes.object
  40         };
  41
  42         render() {
  43                 return (
  44                         <div className='software-product-landing-view-right-side vsp-processes-page'>
  45                                 {this.renderEditor()}
  46                                 {this.renderProcessList()}
  47                         </div>
  48                 );
  49         }
  50
  51         renderEditor() {
  52                 let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
  53                 return (
  54
  55                         <Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
  56                                 <Modal.Header>
  57                                         <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
  58                                 </Modal.Header>
  59                                 <Modal.Body className='edit-process-modal'>
  60                                         <SoftwareProductProcessesEditor softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
  61                                 </Modal.Body>
  62                         </Modal>
  63                 );
  64         }
  65
  66         renderProcessList() {
  67                 const {localFilter} = this.state;
  68                 let {onAddProcess, isReadOnlyMode} = this.props;
  69
  70                 return (
  71                         <ListEditorView
  72                                 plusButtonTitle={i18n('Add Process Details')}
  73                                 filterValue={localFilter}
  74                                 placeholder={i18n('Filter Process')}
  75                                 onAdd={onAddProcess}
  76                                 isReadOnlyMode={isReadOnlyMode}
  77                                 title={i18n('Process Details')}
  78                                 onFilter={value => this.setState({localFilter: value})}>
  79                                 {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
  80                         </ListEditorView>
  81                 );
  82         }
  83
  84         renderProcessListItem(process, isReadOnlyMode) {
  85                 let {id, name, description, artifactName = ''} = process;
  86                 let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
  87                 return (
  88                         <ListEditorItemView
  89                                 key={id}
  90                                 className='list-editor-item-view'
  91                                 isReadOnlyMode={isReadOnlyMode}
  92                                 onSelect={() => onEditProcess(process)}
  93                                 onDelete={() => onDeleteProcess(process, version)}>
  94
  95                                 <div className='list-editor-item-view-field'>
  96                                         <div className='title'>{i18n('Name')}</div>
  97                                         <div className='name'>{name}</div>
  98                                 </div>
  99                                 <div className='list-editor-item-view-field'>
 100                                         <div className='title'>{i18n('Artifact name')}</div>
 101                                         <div className='artifact-name'>{artifactName}</div>
 102                                 </div>
 103                                 <div className='list-editor-item-view-field'>
 104                                         <div className='title'>{i18n('Notes')}</div>
 105                                         <div className='description'>{description}</div>
 106                                 </div>
 107                         </ListEditorItemView>
 108                 );
 109         }
 110
 111         filterList() {
 112                 let {processesList} = this.props;
 113                 let {localFilter} = this.state;
 114
 115                 if (localFilter.trim()) {
 116                         const filter = new RegExp(escape(localFilter), 'i');
 117                         return processesList.filter(({name = '', description = ''}) => {
 118                                 return escape(name).match(filter) || escape(description).match(filter);
 119                         });
 120                 }
 121                 else {
 122                         return processesList;
 123                 }
 124         }
 125 }
 126
 127 export default SoftwareProductProcessesView;