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

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