diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx | 237 |
1 files changed, 138 insertions, 99 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx index 004cbebe5d..cb67856caa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx @@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -import Input from'nfvo-components/input/validation/Input.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; class SoftwareProductComponentsImageListView extends React.Component { - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props; - return( - <div className='vsp-components-image'> - <div className='image-data'> - <div> - { qgenericFieldInfo && <Form - formReady={null} - isValid={true} - onSubmit={() => this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - - <h3 className='section-title'>{i18n('Image')}</h3> - <div className='rows-section'> - <div className='row-flex-components'> - <div className='single-col'> - <Input - data-test-id='providedBy' - label={i18n('Image provided by')} - type='select' - isValid={qgenericFieldInfo['general/image/providedBy'].isValid} - errorText={qgenericFieldInfo['general/image/providedBy'].errorText} - value={dataMap['general/image/providedBy']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'general/image/providedBy' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - { qgenericFieldInfo['general/image/providedBy'].enum.map(proto => - <option value={proto.enum} key={proto.enum}>{proto.title}</option>) } - </Input> - </div> - <div className='empty-two-col' /> - </div> - </div> - - </Form> } - </div> - </div> - {this.renderImagesList()} + render() { + let { + dataMap, + onQDataChanged, + isReadOnlyMode, + qgenericFieldInfo + } = this.props; + return ( + <div className="vsp-components-image"> + <div className="image-data"> + <div> + {qgenericFieldInfo && ( + <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + <h3 className="section-title"> + {i18n('Image')} + </h3> + <div className="rows-section"> + <div className="row-flex-components"> + <div className="single-col"> + <Input + data-test-id="providedBy" + label={i18n( + 'Image provided by' + )} + type="select" + isValid={ + qgenericFieldInfo[ + 'general/image/providedBy' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'general/image/providedBy' + ].errorText + } + value={ + dataMap[ + 'general/image/providedBy' + ] + } + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[ + selectedIndex + ].value; + onQDataChanged({ + 'general/image/providedBy': val + }); + }}> + <option + key="placeholder" + value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo[ + 'general/image/providedBy' + ].enum.map(proto => ( + <option + value={proto.enum} + key={proto.enum}> + {proto.title} + </option> + ))} + </Input> + </div> + <div className="empty-two-col" /> + </div> + </div> + </Form> + )} + </div> + </div> + {this.renderImagesList()} </div> - ); - }; - - renderImagesList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddImage, isManual} = this.props; - - return ( - <ListEditorView - title={i18n('Images')} - filterValue={localFilter} - placeholder={i18n('Filter Images by Name')} - isReadOnlyMode={isReadOnlyMode} - onFilter={value => this.setState({localFilter: value})} - onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} - plusButtonTitle={i18n('Add Image')} - twoColumns> - {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))} - </ListEditorView> - ); - }; + ); + } + renderImagesList() { + const { localFilter } = this.state; + let { isReadOnlyMode, onAddImage, isManual } = this.props; - renderImagesListItem(image, isReadOnlyMode) { - let {id, fileName} = image; - let {onEditImageClick, isManual, onDeleteImage} = this.props; - return ( - <ListEditorItemView - key={id} - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditImageClick(image, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteImage(image) : null}> + return ( + <ListEditorView + title={i18n('Images')} + filterValue={localFilter} + placeholder={i18n('Filter Images by Name')} + isReadOnlyMode={isReadOnlyMode} + onFilter={value => this.setState({ localFilter: value })} + onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} + plusButtonTitle={i18n('Add Image')} + twoColumns> + {this.filterList().map(image => + this.renderImagesListItem(image, isReadOnlyMode) + )} + </ListEditorView> + ); + } - <ListEditorItemViewField> - <div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div> - </ListEditorItemViewField> - </ListEditorItemView> - ); - } + renderImagesListItem(image, isReadOnlyMode) { + let { id, fileName } = image; + let { onEditImageClick, isManual, onDeleteImage } = this.props; + return ( + <ListEditorItemView + key={id} + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditImageClick(image, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteImage(image) : null}> + <ListEditorItemViewField> + <div className="image-filename-cell"> + <span className="image-filename">{fileName}</span> + </div> + </ListEditorItemViewField> + </ListEditorItemView> + ); + } - filterList() { - let {imagesList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return imagesList.filter(({fileName = ''}) => { - return escape(fileName).match(filter); - }); - } - else { - return imagesList; - } - } + filterList() { + let { imagesList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return imagesList.filter(({ fileName = '' }) => { + return escape(fileName).match(filter); + }); + } else { + return imagesList; + } + } - save() { - let {onSubmit, qdata} = this.props; - return onSubmit(qdata); - } + save() { + let { onSubmit, qdata } = this.props; + return onSubmit(qdata); + } } export default SoftwareProductComponentsImageListView; |