import GridItem from 'nfvo-components/grid/GridItem.jsx';
const SoftwareProductProcessEditorPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- artifactName: PropTypes.string,
- type: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ artifactName: PropTypes.string,
+ type: PropTypes.string
});
-
-
class SoftwareProductProcessesEditorForm extends React.Component {
+ static propTypes = {
+ data: SoftwareProductProcessEditorPropType,
+ previousData: SoftwareProductProcessEditorPropType,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func,
+ onSubmit: PropTypes.func,
+ onCancel: PropTypes.func
+ };
+ state = {
+ dragging: false,
+ files: []
+ };
+ render() {
+ let {
+ data = {},
+ isReadOnlyMode,
+ onDataChanged,
+ onCancel,
+ genericFieldInfo,
+ optionsInputValues
+ } = this.props;
+ let { name, description, artifactName, type } = data;
- static propTypes = {
- data: SoftwareProductProcessEditorPropType,
- previousData: SoftwareProductProcessEditorPropType,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func,
- onSubmit: PropTypes.func,
- onCancel: PropTypes.func
- };
- state = {
- dragging: false,
- files: []
- };
-
- render() {
- let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
- let {name, description, artifactName, type} = data;
-
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm() }
- className='vsp-processes-editor'>
- <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
- <Dropzone
- className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
- onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
- onDragEnter={() => this.setState({dragging: true})}
- onDragLeave={() => this.setState({dragging: false})}
- multiple={false}
- disableClick={true}
- ref='processEditorFileInput'
- name='processEditorFileInput'>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name})}
- isValid={genericFieldInfo.name.isValid}
- isRequired={true}
- data-test-id='name'
- errorText={genericFieldInfo.name.errorText}
- label={i18n('Name')}
- value={name}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <label> </label>
- <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- name='vsp-process-description'
- groupClassName='vsp-process-description'
- onChange={description => onDataChanged({description})}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- label={i18n('Notes')}
- value={description}
- data-test-id='vsp-process-description'
- type='textarea'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <Input
- label={i18n('Artifacts')}
- value={artifactName}
- type='text'
- disabled/>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({type: val});}
- }
- value={type}
- label={i18n('Process Type')}
- className='process-type'
- data-test-id='process-type'
- isValid={genericFieldInfo.type.isValid}
- errorText={genericFieldInfo.type.errorText}
- type='select'>
- {optionsInputValues.PROCESS_TYPE.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- </GridSection>
- </Dropzone>
- </div>
- </Form>}
- </div>
- );
- }
-
- 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);
- }
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.props.onValidateForm()}
+ className="vsp-processes-editor">
+ <div
+ className={`vsp-processes-editor-data${
+ isReadOnlyMode ? ' disabled' : ''
+ }`}>
+ <Dropzone
+ className={`vsp-process-dropzone-view ${
+ this.state.dragging ? 'active-dragging' : ''
+ }`}
+ onDrop={(acceptedFiles, rejectedFiles) =>
+ this.handleImportSubmit(
+ acceptedFiles,
+ rejectedFiles
+ )
+ }
+ onDragEnter={() =>
+ this.setState({ dragging: true })
+ }
+ onDragLeave={() =>
+ this.setState({ dragging: false })
+ }
+ multiple={false}
+ disableClick={true}
+ ref="processEditorFileInput"
+ name="processEditorFileInput">
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name })
+ }
+ isValid={
+ genericFieldInfo.name.isValid
+ }
+ isRequired={true}
+ data-test-id="name"
+ errorText={
+ genericFieldInfo.name.errorText
+ }
+ label={i18n('Name')}
+ value={name}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <label> </label>
+ <DraggableUploadFileBox
+ className="process-editor-file-box"
+ isReadOnlyMode={isReadOnlyMode}
+ onClick={() =>
+ this.refs.processEditorFileInput.open()
+ }
+ />
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ name="vsp-process-description"
+ groupClassName="vsp-process-description"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ isValid={
+ genericFieldInfo.description
+ .isValid
+ }
+ errorText={
+ genericFieldInfo.description
+ .errorText
+ }
+ label={i18n('Notes')}
+ value={description}
+ data-test-id="vsp-process-description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <Input
+ label={i18n('Artifacts')}
+ value={artifactName}
+ type="text"
+ disabled
+ />
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[
+ selectedIndex
+ ].value;
+ onDataChanged({ type: val });
+ }}
+ value={type}
+ label={i18n('Process Type')}
+ className="process-type"
+ data-test-id="process-type"
+ isValid={
+ genericFieldInfo.type.isValid
+ }
+ errorText={
+ genericFieldInfo.type.errorText
+ }
+ type="select">
+ {optionsInputValues.PROCESS_TYPE.map(
+ mtype => (
+ <option
+ key={mtype.enum}
+ value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ </GridSection>
+ </Dropzone>
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
- let updatedProcess = {
- ...process,
- formData
- };
- this.props.onSubmit({process: updatedProcess, previousProcess});
- }
+ 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, rejectedFiles) {
- if (files.length > 0) {
- let {onDataChanged} = this.props;
- this.setState({
- dragging: false,
- complete: '0',
- files
- });
- onDataChanged({artifactName: files[0].name});
- }
- else if (rejectedFiles.length > 0) {
- this.setState({
- dragging: false
- });
- if (DEBUG) {
- console.log('file was rejected.' + rejectedFiles[0].name);
- }
- }
- }
+ handleImportSubmit(files, rejectedFiles) {
+ if (files.length > 0) {
+ let { onDataChanged } = this.props;
+ this.setState({
+ dragging: false,
+ complete: '0',
+ files
+ });
+ onDataChanged({ artifactName: files[0].name });
+ } else if (rejectedFiles.length > 0) {
+ this.setState({
+ dragging: false
+ });
+ if (DEBUG) {
+ console.log('file was rejected.' + rejectedFiles[0].name);
+ }
+ }
+ }
}
export default SoftwareProductProcessesEditorForm;
Code Review / sdc.git / blobdiff