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