openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx

   1 import React, {PropTypes, Component} from 'react';
   2
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4 import Modal from 'nfvo-components/modal/Modal.jsx';
   5
   6 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
   7 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
   8 import FlowRelatedView from './ImportantLogic.jsx';
   9 import FlowsEditorModal from './FlowsEditorModal.js';
  10 import SequenceDiagram from './SequenceDiagram.jsx';
  11
  12 class FlowsListEditorView extends Component {
  13
  14         static propTypes = {
  15                 flowList: PropTypes.array,
  16                 currentFlow: PropTypes.object,
  17                 isDisplayModal: PropTypes.bool,
  18                 isModalInEditMode: PropTypes.bool,
  19                 isCheckedOut: PropTypes.bool,
  20                 shouldShowWorkflowsEditor: PropTypes.bool,
  21
  22                 onAddWorkflowClick: PropTypes.func,
  23                 onEditFlowDetailsClick: PropTypes.func,
  24                 onEditFlowDiagramClick: PropTypes.func,
  25                 onDeleteFlowClick: PropTypes.func,
  26                 onSequenceDiagramSaveClick: PropTypes.func,
  27                 onSequenceDiagramCloseClick: PropTypes.func
  28         };
  29
  30         state = {
  31                 localFilter: ''
  32         };
  33
  34         render() {
  35                 let CurrentView = null;
  36                 if (this.props.shouldShowWorkflowsEditor) {
  37                         CurrentView = this.renderWorkflowsEditor();
  38                 }
  39                 else {
  40                         CurrentView = this.renderSequenceDiagramTool();
  41                 }
  42
  43                 return CurrentView;
  44         }
  45
  46         renderWorkflowsEditor() {
  47                 let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props;
  48                 const {localFilter} = this.state;
  49
  50                 return (
  51                         <div className='workflows license-agreement-list-editor'>
  52                                 <FlowRelatedView display={localFilter}/>
  53                                 <ListEditorView
  54                                         plusButtonTitle={i18n('Add Workflow')}
  55                                         onAdd={onAddWorkflowClick}
  56                                         filterValue={localFilter}
  57                                         onFilter={filter => this.setState({localFilter: filter})}
  58                                         isCheckedOut={isCheckedOut}>
  59                                         {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
  60                                 </ListEditorView>
  61
  62                                 {isDisplayModal && this.renderWorkflowEditorModal()}
  63
  64                         </div>
  65                 );
  66         }
  67
  68         renderWorkflowEditorModal() {
  69                 let { isDisplayModal, isModalInEditMode} = this.props;
  70                 return (
  71                         <Modal show={isDisplayModal} animation={true} className='workflows-editor-modal'>
  72                                 <Modal.Header>
  73                                         <Modal.Title>
  74                                                 {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
  75                                         </Modal.Title>
  76                                 </Modal.Header>
  77                                 <Modal.Body>
  78                                         <FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
  79                                 </Modal.Body>
  80                         </Modal>
  81                 );
  82         }
  83
  84         renderSequenceDiagramTool() {
  85                 let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
  86                 return (
  87                         <SequenceDiagram
  88                                 onSave={sequenceDiagramModel => onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})}
  89                                 onClose={onSequenceDiagramCloseClick}
  90                                 model={currentFlow.sequenceDiagramModel}/>
  91                 );
  92         }
  93
  94         filterList() {
  95                 let {flowList} = this.props;
  96                 let {localFilter} = this.state;
  97                 if (localFilter.trim()) {
  98                         const filter = new RegExp(escape(localFilter), 'i');
  99                         return flowList.filter(({name = '', description = ''}) => {
 100                                 return escape(name).match(filter) || escape(description).match(filter);
 101                         });
 102                 }
 103                 else {
 104                         return flowList;
 105                 }
 106         }
 107
 108         renderWorkflowListItem(flow, isCheckedOut) {
 109                 let {uniqueId, artifactName, description} = flow;
 110                 let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props;
 111                 return (
 112                         <ListEditorItemView
 113                                 key={uniqueId}
 114                                 onSelect={() => onEditFlowDetailsClick(flow)}
 115                                 onDelete={() => onDeleteFlowClick(flow)}
 116                                 onEdit={() => onEditFlowDiagramClick(flow)}
 117                                 className='list-editor-item-view'
 118                                 isCheckedOut={isCheckedOut}>
 119                                 <div className='list-editor-item-view-field'>
 120                                         <div className='title'>{i18n('Name')}</div>
 121                                         <div className='text name'>{artifactName}</div>
 122                                 </div>
 123                                 <div className='list-editor-item-view-field'>
 124                                         <div className='title'>{i18n('Description')}</div>
 125                                         <div className='text description'>{description}</div>
 126                                 </div>
 127                         </ListEditorItemView>
 128                 );
 129         }
 130
 131 }
 132
 133 export default FlowsListEditorView;