openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx

   1 import React from 'react';
   2 import Dropzone from 'react-dropzone';
   3 import classnames from 'classnames';
   4
   5 import i18n from 'nfvo-utils/i18n/i18n.js';
   6 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   7 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   8
   9 const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
  10         id: React.PropTypes.string,
  11         name: React.PropTypes.string,
  12         description: React.PropTypes.string,
  13         artifactName: React.PropTypes.string
  14 });
  15
  16 class SoftwareProductProcessesEditorView extends React.Component {
  17
  18         state = {
  19                 dragging: false,
  20                 files: []
  21         };
  22
  23         static propTypes = {
  24                 data: SoftwareProductProcessEditorPropType,
  25                 previousData: SoftwareProductProcessEditorPropType,
  26                 isReadOnlyMode: React.PropTypes.bool,
  27                 onDataChanged: React.PropTypes.func,
  28                 onSubmit: React.PropTypes.func,
  29                 onClose: React.PropTypes.func
  30         };
  31
  32         render() {
  33                 let {data = {}, isReadOnlyMode, onDataChanged, onClose} = this.props;
  34                 let {name, description, artifactName} = data;
  35                 return (
  36                         <ValidationForm
  37                                 ref='validationForm'
  38                                 hasButtons={true}
  39                                 labledButtons={true}
  40                                 isReadOnlyMode={isReadOnlyMode}
  41                                 onSubmit={ () => this.submit() }
  42                                 onReset={ () => onClose() }
  43                                 className='vsp-processes-editor'>
  44                                 <div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
  45                                         <Dropzone
  46                                                 className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})}
  47                                                 onDrop={files => this.handleImportSubmit(files)}
  48                                                 onDragEnter={() => this.setState({dragging: true})}
  49                                                 onDragLeave={() => this.setState({dragging: false})}
  50                                                 multiple={false}
  51                                                 disableClick={true}
  52                                                 ref='processEditorFileInput'
  53                                                 name='processEditorFileInput'
  54                                                 accept='*.*'>
  55                                                 <div className='row'>
  56                                                         <div className='col-md-6'>
  57                                                                 <ValidationInput
  58                                                                         onChange={name => onDataChanged({name})}
  59                                                                         label={i18n('Name')}
  60                                                                         value={name}
  61                                                                         validations={{validateName: true, maxLength: 120, required: true}}
  62                                                                         type='text'/>
  63                                                                 <ValidationInput
  64                                                                         label={i18n('Artifacts')}
  65                                                                         value={artifactName}
  66                                                                         type='text'
  67                                                                         disabled/>
  68                                                         </div>
  69                                                         <div className='col-md-6'>
  70                                                                 <div className='file-upload-box'>
  71                                                                         <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
  72                                                                         <div className='or-text'>{i18n('or')}</div>
  73                                                                         <div className='upload-btn primary-btn' onClick={() => this.refs.processEditorFileInput.open()}>
  74                                                                                 <span className='primary-btn-text'>{i18n('Select file')}</span>
  75                                                                         </div>
  76                                                                 </div>
  77                                                         </div>
  78                                                 </div>
  79                                                 <ValidationInput
  80                                                         onChange={description => onDataChanged({description})}
  81                                                         label={i18n('Notes')}
  82                                                         value={description}
  83                                                         name='vsp-process-description'
  84                                                         className='vsp-process-description'
  85                                                         validations={{maxLength: 1000}}
  86                                                         type='textarea'/>
  87                                         </Dropzone>
  88                                 </div>
  89                         </ValidationForm>
  90                 );
  91         }
  92
  93         submit() {
  94                 const {data: process, previousData: previousProcess} = this.props;
  95                 let {files} = this.state;
  96                 let formData = false;
  97                 if (files.length) {
  98                         let file = files[0];
  99                         formData = new FormData();
 100                         formData.append('upload', file);
 101                 }
 102
 103                 let updatedProcess = {
 104                         ...process,
 105                         formData
 106                 };
 107                 this.props.onSubmit({process: updatedProcess, previousProcess});
 108         }
 109
 110
 111         handleImportSubmit(files) {
 112                 let {onDataChanged} = this.props;
 113                 this.setState({
 114                         dragging: false,
 115                         complete: '0',
 116                         files
 117                 });
 118                 onDataChanged({artifactName: files[0].name});
 119         }
 120 }
 121
 122 export default SoftwareProductProcessesEditorView;