openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.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 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
  23 class SoftwareProductProcessesListView extends React.Component {
  24     state = {
  25         localFilter: ''
  26     };
  27
  28     static propTypes = {
  29         onAddProcess: PropTypes.func.isRequired,
  30         onEditProcess: PropTypes.func.isRequired,
  31         onDeleteProcess: PropTypes.func.isRequired,
  32         isReadOnlyMode: PropTypes.bool.isRequired,
  33         currentSoftwareProduct: PropTypes.object,
  34         addButtonTitle: PropTypes.string
  35     };
  36
  37     render() {
  38         const { localFilter } = this.state;
  39         let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props;
  40
  41         return (
  42             <ListEditorView
  43                 plusButtonTitle={addButtonTitle}
  44                 filterValue={localFilter}
  45                 placeholder={i18n('Filter Process')}
  46                 onAdd={onAddProcess}
  47                 isReadOnlyMode={isReadOnlyMode}
  48                 title={i18n('Process Details')}
  49                 onFilter={value => this.setState({ localFilter: value })}>
  50                 {this.filterList().map(processes =>
  51                     this.renderProcessListItem(processes, isReadOnlyMode)
  52                 )}
  53             </ListEditorView>
  54         );
  55     }
  56
  57     renderProcessListItem(process, isReadOnlyMode) {
  58         let { id, name, description, artifactName = '' } = process;
  59         let {
  60             currentSoftwareProduct: { version },
  61             onEditProcess,
  62             onDeleteProcess
  63         } = this.props;
  64         return (
  65             <ListEditorItemView
  66                 key={id}
  67                 className="list-editor-item-view"
  68                 isReadOnlyMode={isReadOnlyMode}
  69                 onSelect={() => onEditProcess(process, isReadOnlyMode)}
  70                 onDelete={() => onDeleteProcess(process, version)}>
  71                 <div className="list-editor-item-view-field">
  72                     <div className="title">{i18n('Name')}</div>
  73                     <div className="name">{name}</div>
  74                 </div>
  75                 <div className="list-editor-item-view-field">
  76                     <div className="title">{i18n('Artifact name')}</div>
  77                     <div className="artifact-name">{artifactName}</div>
  78                 </div>
  79                 <div className="list-editor-item-view-field">
  80                     <div className="title">{i18n('Notes')}</div>
  81                     <div className="description">{description}</div>
  82                 </div>
  83             </ListEditorItemView>
  84         );
  85     }
  86
  87     filterList() {
  88         let { processesList } = this.props;
  89         let { localFilter } = this.state;
  90
  91         if (localFilter.trim()) {
  92             const filter = new RegExp(escape(localFilter), 'i');
  93             return processesList.filter(({ name = '', description = '' }) => {
  94                 return (
  95                     escape(name).match(filter) ||
  96                     escape(description).match(filter)
  97                 );
  98             });
  99         } else {
 100             return processesList;
 101         }
 102     }
 103 }
 104
 105 export default SoftwareProductProcessesListView;