openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.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 './SoftwareProductComponentProcessesEditor.js';
  24
  25 class SoftwareProductProcessesView extends React.Component {
  26
  27         state = {
  28                 localFilter: ''
  29         };
  30
  31         static propTypes = {
  32                 onAddProcess: React.PropTypes.func,
  33                 onEditProcessClick: React.PropTypes.func,
  34                 onDeleteProcessClick: React.PropTypes.func,
  35                 isDisplayModal: React.PropTypes.bool,
  36                 isModalInEditMode: React.PropTypes.bool,
  37                 onStorageSelect: React.PropTypes.func,
  38                 componentId: React.PropTypes.string,
  39                 softwareProductId: React.PropTypes.string,
  40                 currentSoftwareProduct: React.PropTypes.object
  41         };
  42
  43         render() {
  44                 return (
  45                         <div className='vsp-processes-page'>
  46                                 <div className='software-product-view'>
  47                                         <div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'>
  48                                                 {this.renderEditor()}
  49                                                 {this.renderProcessList()}
  50                                         </div>
  51                                 </div>
  52                         </div>
  53                 );
  54         }
  55
  56         renderEditor() {
  57                 let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
  58                 return (
  59                         <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
  60                                 <Modal.Header>
  61                                         <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
  62                                 </Modal.Header>
  63                                 <Modal.Body className='edit-process-modal'>
  64                                         <SoftwareProductProcessesEditor
  65                                                 componentId={componentId}
  66                                                 softwareProductId={softwareProductId}
  67                                                 version={version}
  68                                                 isReadOnlyMode={isReadOnlyMode}/>
  69                                 </Modal.Body>
  70                         </Modal>
  71
  72                 );
  73         }
  74
  75         renderProcessList() {
  76                 const {localFilter} = this.state;
  77                 let {onAddProcess, isReadOnlyMode} = this.props;
  78                 return (
  79                         <div className='processes-list'>
  80                                 <ListEditorView
  81                                         plusButtonTitle={i18n('Add Component Process Details')}
  82                                         filterValue={localFilter}
  83                                         placeholder={i18n('Filter Process')}
  84                                         onAdd={onAddProcess}
  85                                         isReadOnlyMode={isReadOnlyMode}
  86                                         title={i18n('Process Details')}
  87                                         onFilter={value => this.setState({localFilter: value})}>
  88                                         {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
  89                                 </ListEditorView>
  90                         </div>
  91                 );
  92         }
  93
  94         renderProcessListItem(process, isReadOnlyMode) {
  95                 let {id, name, description, artifactName = ''} = process;
  96                 let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} =  this.props;
  97                 return (
  98                         <ListEditorItemView
  99                                 key={id}
 100                                 className='list-editor-item-view'
 101                                 isReadOnlyMode={isReadOnlyMode}
 102                                 onSelect={() => onEditProcessClick(process)}
 103                                 onDelete={() => onDeleteProcessClick(process, version)}>
 104
 105                                 <div className='list-editor-item-view-field'>
 106                                         <div className='title'>{i18n('Name')}</div>
 107                                         <div className='name'>{name}</div>
 108                                 </div>
 109                                 <div className='list-editor-item-view-field'>
 110                                         <div className='title'>{i18n('Artifact name')}</div>
 111                                         <div className='artifact-name'>{artifactName}</div>
 112                                 </div>
 113                                 <div className='list-editor-item-view-field'>
 114                                         <div className='title'>{i18n('Notes')}</div>
 115                                         <div className='description'>{description}</div>
 116                                 </div>
 117                         </ListEditorItemView>
 118                 );
 119         }
 120
 121
 122         filterList() {
 123                 let {processesList} = this.props;
 124                 let {localFilter} = this.state;
 125                 if (localFilter.trim()) {
 126                         const filter = new RegExp(escape(localFilter), 'i');
 127                         return processesList.filter(({name = '', description = ''}) => {
 128                                 return escape(name).match(filter) || escape(description).match(filter);
 129                         });
 130                 }
 131                 else {
 132                         return processesList;
 133                 }
 134         }
 135 }
 136
 137 export default SoftwareProductProcessesView;