openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.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 PropTypes from 'prop-types';
  18
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
  23
  24 const ComponentPropType = PropTypes.shape({
  25     id: PropTypes.string,
  26     name: PropTypes.string,
  27     displayName: PropTypes.string,
  28     description: PropTypes.string
  29 });
  30
  31 class SoftwareProductComponentsListView extends React.Component {
  32     state = {
  33         localFilter: ''
  34     };
  35
  36     static propTypes = {
  37         isReadOnlyMode: PropTypes.bool,
  38         componentsList: PropTypes.arrayOf(ComponentPropType),
  39         onComponentSelect: PropTypes.func
  40     };
  41
  42     render() {
  43         let { componentsList = [], isManual } = this.props;
  44         return (
  45             <div className="">
  46                 {(componentsList.length > 0 || isManual) &&
  47                     this.renderComponents()}
  48             </div>
  49         );
  50     }
  51
  52     renderComponents() {
  53         const { localFilter } = this.state;
  54         const {
  55             isManual,
  56             onAddComponent,
  57             isReadOnlyMode,
  58             version,
  59             currentSoftwareProduct: { id: softwareProductId },
  60             componentsList
  61         } = this.props;
  62         return (
  63             <ListEditorView
  64                 title={i18n('Virtual Function Components')}
  65                 filterValue={localFilter}
  66                 placeholder={i18n('Filter Components')}
  67                 onFilter={value => this.setState({ localFilter: value })}
  68                 isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
  69                 plusButtonTitle={i18n('Add Component')}
  70                 onAdd={
  71                     isManual && componentsList.length === 0
  72                         ? () => onAddComponent(softwareProductId, version)
  73                         : false
  74                 }
  75                 twoColumns>
  76                 {this.filterList().map(component =>
  77                     this.renderComponentsListItem(component)
  78                 )}
  79             </ListEditorView>
  80         );
  81     }
  82
  83     renderComponentsListItem(component) {
  84         let {
  85             id: componentId,
  86             name,
  87             displayName,
  88             description = ''
  89         } = component;
  90         let {
  91             currentSoftwareProduct: { id },
  92             onComponentSelect,
  93             version
  94         } = this.props;
  95         return (
  96             <ListEditorItemView
  97                 key={
  98                     name + Math.floor(Math.random() * (100 - 1) + 1).toString()
  99                 }
 100                 className="list-editor-item-view"
 101                 onSelect={() =>
 102                     onComponentSelect({ id, componentId, version })
 103                 }>
 104                 <ListEditorItemViewField>
 105                     <div className="name">{displayName}</div>
 106                 </ListEditorItemViewField>
 107                 <ListEditorItemViewField>
 108                     <div className="description">{description}</div>
 109                 </ListEditorItemViewField>
 110             </ListEditorItemView>
 111         );
 112     }
 113
 114     filterList() {
 115         let { componentsList = [] } = this.props;
 116
 117         let { localFilter } = this.state;
 118         if (localFilter.trim()) {
 119             const filter = new RegExp(escape(localFilter), 'i');
 120             return componentsList.filter(
 121                 ({ displayName = '', description = '' }) => {
 122                     return (
 123                         escape(displayName).match(filter) ||
 124                         escape(description).match(filter)
 125                     );
 126                 }
 127             );
 128         } else {
 129             return componentsList;
 130         }
 131     }
 132 }
 133
 134 export default SoftwareProductComponentsListView;