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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React, { Component } from 'react';
  17 import PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22 import SequenceDiagram from './SequenceDiagram.jsx';
  23
  24 class FlowsListEditorView extends Component {
  25     static propTypes = {
  26         flowList: PropTypes.array,
  27         currentFlow: PropTypes.object,
  28         isCheckedOut: PropTypes.bool,
  29         shouldShowWorkflowsEditor: PropTypes.bool,
  30         readonly: PropTypes.bool,
  31
  32         onAddWorkflowClick: PropTypes.func,
  33         onEditFlowDetailsClick: PropTypes.func,
  34         onEditFlowDiagramClick: PropTypes.func,
  35         onDeleteFlowClick: PropTypes.func,
  36         onSequenceDiagramSaveClick: PropTypes.func,
  37         onSequenceDiagramCloseClick: PropTypes.func
  38     };
  39
  40     state = {
  41         localFilter: ''
  42     };
  43
  44     render() {
  45         let CurrentView = null;
  46         if (this.props.shouldShowWorkflowsEditor) {
  47             CurrentView = this.renderWorkflowsEditor();
  48         } else {
  49             CurrentView = this.renderSequenceDiagramTool();
  50         }
  51
  52         return CurrentView;
  53     }
  54
  55     renderWorkflowsEditor() {
  56         let { onAddWorkflowClick, isCheckedOut } = this.props;
  57         const { localFilter } = this.state;
  58
  59         return (
  60             <div className="workflows license-agreement-list-editor">
  61                 <ListEditorView
  62                     plusButtonTitle={i18n('Add Workflow')}
  63                     onAdd={onAddWorkflowClick}
  64                     filterValue={localFilter}
  65                     onFilter={filter => this.setState({ localFilter: filter })}
  66                     isReadOnlyMode={!isCheckedOut}>
  67                     {this.filterList().map(flow =>
  68                         this.renderWorkflowListItem(flow, isCheckedOut)
  69                     )}
  70                 </ListEditorView>
  71             </div>
  72         );
  73     }
  74
  75     renderSequenceDiagramTool() {
  76         let {
  77             onSequenceDiagramSaveClick,
  78             onSequenceDiagramCloseClick,
  79             currentFlow
  80         } = this.props;
  81         return (
  82             <SequenceDiagram
  83                 onSave={sequenceDiagramModel =>
  84                     onSequenceDiagramSaveClick({
  85                         ...currentFlow,
  86                         sequenceDiagramModel
  87                     })
  88                 }
  89                 onClose={onSequenceDiagramCloseClick}
  90                 model={currentFlow.sequenceDiagramModel}
  91             />
  92         );
  93     }
  94
  95     filterList() {
  96         let { flowList } = this.props;
  97         let { localFilter } = this.state;
  98         if (localFilter.trim()) {
  99             const filter = new RegExp(escape(localFilter), 'i');
 100             return flowList.filter(({ name = '', description = '' }) => {
 101                 return (
 102                     escape(name).match(filter) ||
 103                     escape(description).match(filter)
 104                 );
 105             });
 106         } else {
 107             return flowList;
 108         }
 109     }
 110
 111     renderWorkflowListItem(flow, isCheckedOut) {
 112         let { uniqueId, artifactName, description } = flow;
 113         let {
 114             onEditFlowDetailsClick,
 115             onEditFlowDiagramClick,
 116             onDeleteFlowClick
 117         } = this.props;
 118         return (
 119             <ListEditorItemView
 120                 key={uniqueId}
 121                 onSelect={() => onEditFlowDetailsClick(flow)}
 122                 onDelete={() => onDeleteFlowClick(flow)}
 123                 onEdit={() => onEditFlowDiagramClick(flow)}
 124                 className="list-editor-item-view"
 125                 isCheckedOut={isCheckedOut}>
 126                 <div className="list-editor-item-view-field">
 127                     <div className="title">{i18n('Name')}</div>
 128                     <div className="text name">{artifactName}</div>
 129                 </div>
 130                 <div className="list-editor-item-view-field">
 131                     <div className="title">{i18n('Description')}</div>
 132                     <div className="text description">{description}</div>
 133                 </div>
 134             </ListEditorItemView>
 135         );
 136     }
 137 }
 138
 139 export default FlowsListEditorView;