openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.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 Form from 'nfvo-components/input/validation/Form.jsx';
  19
  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 import Input from'nfvo-components/input/validation/Input.jsx';
  24
  25 class SoftwareProductComponentsImageListView extends React.Component {
  26         state = {
  27                 localFilter: ''
  28         };
  29
  30         render() {
  31                 let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props;
  32                 return(
  33                         <div className='vsp-components-image'>
  34                                 <div className='image-data'>
  35                                         <div>
  36                                                 { qgenericFieldInfo && <Form
  37                                                         formReady={null}
  38                                                         isValid={true}
  39                                                         onSubmit={() => this.save()}
  40                                                         isReadOnlyMode={isReadOnlyMode}
  41                                                         hasButtons={false}>
  42
  43                                                         <h3 className='section-title'>{i18n('Image')}</h3>
  44                                                         <div className='rows-section'>
  45                                                                 <div className='row-flex-components'>
  46                                                                         <div className='single-col'>
  47                                                                                 <Input
  48                                                                                         data-test-id='providedBy'
  49                                                                                         label={i18n('Image provided by')}
  50                                                                                         type='select'
  51                                                                                         isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
  52                                                                                         errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
  53                                                                                         value={dataMap['general/image/providedBy']}
  54                                                                                         onChange={(e) => {
  55                                                                                                 const selectedIndex = e.target.selectedIndex;
  56                                                                                                 const val = e.target.options[selectedIndex].value;
  57                                                                                                 onQDataChanged({'general/image/providedBy' : val});}
  58                                                                                         }>
  59                                                                                         <option key='placeholder' value=''>{i18n('Select...')}</option>
  60                                                                                         { qgenericFieldInfo['general/image/providedBy'].enum.map(proto =>
  61                                                                                                 <option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
  62                                                                                 </Input>
  63                                                                         </div>
  64                                                                         <div className='empty-two-col' />
  65                                                                 </div>
  66                                                         </div>
  67
  68                                                 </Form> }
  69                                         </div>
  70                                 </div>
  71                     {this.renderImagesList()}
  72             </div>
  73                 );
  74         };
  75
  76         renderImagesList() {
  77                 const {localFilter} = this.state;
  78                 let {isReadOnlyMode, onAddImage, isManual} = this.props;
  79
  80                 return (
  81                         <ListEditorView
  82                                 title={i18n('Images')}
  83                                 filterValue={localFilter}
  84                                 placeholder={i18n('Filter Images by Name')}
  85                                 isReadOnlyMode={isReadOnlyMode}
  86                                 onFilter={value => this.setState({localFilter: value})}
  87                                 onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
  88                                 plusButtonTitle={i18n('Add Image')}
  89                                 twoColumns>
  90                                 {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
  91                         </ListEditorView>
  92                 );
  93         };
  94
  95
  96         renderImagesListItem(image, isReadOnlyMode) {
  97                 let {id, fileName} = image;
  98                 let {onEditImageClick, isManual, onDeleteImage} =  this.props;
  99                 return (
 100                         <ListEditorItemView
 101                                 key={id}
 102                                 isReadOnlyMode={isReadOnlyMode}
 103                                 onSelect={() => onEditImageClick(image, isReadOnlyMode)}
 104                                 onDelete={isManual ? () => onDeleteImage(image) : null}>
 105
 106                                 <ListEditorItemViewField>
 107                                         <div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
 108                                 </ListEditorItemViewField>
 109                         </ListEditorItemView>
 110                 );
 111         }
 112
 113         filterList() {
 114                 let {imagesList} = this.props;
 115                 let {localFilter} = this.state;
 116                 if (localFilter.trim()) {
 117                         const filter = new RegExp(escape(localFilter), 'i');
 118                         return imagesList.filter(({fileName = ''}) => {
 119                                 return escape(fileName).match(filter);
 120                         });
 121                 }
 122                 else {
 123                         return imagesList;
 124                 }
 125         }
 126
 127         save() {
 128                 let {onSubmit, qdata} = this.props;
 129                 return onSubmit(qdata);
 130         }
 131 }
 132 export default SoftwareProductComponentsImageListView;