From e90e12fc5c0990be3f2bb20b7670ccd8015002a4 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Thu, 28 May 2020 09:59:22 +0200 Subject: [PATCH] Fix for edit config, select-file; enable upload progress callback; fix startParams update --- src/common/api/rest-api.js | 2 +- src/componentconfig/edit-config.js | 24 ++++-- src/file/files-data-manager.js | 6 +- src/file/select-file.js | 126 +++++++++++++---------------- src/scenario/scenario.js | 10 ++- 5 files changed, 85 insertions(+), 83 deletions(-) diff --git a/src/common/api/rest-api.js b/src/common/api/rest-api.js index 9fa04f1..3bb18d1 100644 --- a/src/common/api/rest-api.js +++ b/src/common/api/rest-api.js @@ -125,7 +125,7 @@ class RestAPI { upload(url, data, token, progressCallback, scenarioID) { return new Promise(function (resolve, reject) { - const req = request.post(url + "?scenarioID=" + scenarioID).send(data); //.on('progress', progressCallback); + const req = request.post(url + "?scenarioID=" + scenarioID).send(data).on('progress', progressCallback); if (token != null) { req.set('Authorization', "Bearer " + token); diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index db81b14..a69159d 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -32,8 +32,8 @@ class EditConfigDialog extends React.Component { name: '', icID: '', configuration: null, - startParameters: {}, - selectedFileID:0 + startParameters: this.props.config.startParameters, + selectedFileID: this.props.config.selectedFileID }; } @@ -49,7 +49,7 @@ class EditConfigDialog extends React.Component { if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) { data.icID = parseInt(this.state.icID, 10); } - if(this.state.startParameters !== {} && this.props.config.startParameters !== this.state.startParameters){ + if(this.state.startParameters !== {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){ data.startParameters = this.state.startParameters; } if (parseInt(this.state.selectedFileID, 10) !== 0 && @@ -79,9 +79,9 @@ class EditConfigDialog extends React.Component { this.valid = this.isValid() } - handleSelectedFileChange(newFileID){ - console.log("Config file change to: ", newFileID); - this.setState({selectedFileID: newFileID}) + handleSelectedFileChange(event){ + //console.log("Config file change to: ", event.target.value); + this.setState({selectedFileID: event.target.value}) this.valid = this.isValid() } @@ -121,11 +121,19 @@ class EditConfigDialog extends React.Component { - this.handleSelectedFileChange(e)} value={this.state.selectedFileID} scenarioID={this.props.config.scenarioID}/> + this.handleSelectedFileChange(e)} + files={this.props.files} + value={this.state.selectedFileID} + scenarioID={this.props.config.scenarioID} + sessionToken={this.props.sessionToken} + /> Start Parameters - this.handleParameterChange(data)} /> + this.handleParameterChange(data)} /> diff --git a/src/file/files-data-manager.js b/src/file/files-data-manager.js index 6336c66..cc5cf4b 100644 --- a/src/file/files-data-manager.js +++ b/src/file/files-data-manager.js @@ -38,9 +38,9 @@ class FilesDataManager extends RestDataManager { token: token }); - /*if (finishedCallback) { - finishedCallback(); - }*/ + if (finishedCallback) { + finishedCallback(response.file.id); + } }).catch(error => { AppDispatcher.dispatch({ type: 'files/upload-error', diff --git a/src/file/select-file.js b/src/file/select-file.js index bceee4a..132caf9 100644 --- a/src/file/select-file.js +++ b/src/file/select-file.js @@ -16,56 +16,20 @@ ******************************************************************************/ import React from 'react'; -import { Container } from 'flux/utils'; -import { FormGroup, FormControl, FormLabel, Button, Col } from 'react-bootstrap'; - -import FileStore from './file-store'; -import LoginStore from '../user/login-store'; - +import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; -import Icon from "../common/icon"; class SelectFile extends React.Component { - static getStores() { - return [ FileStore, LoginStore ]; + + constructor() { + super(); + + this.state = { + uploadFile: null, + uploadProgress: 0 + } } - - static calculateState(prevState, props) { - - let files = FileStore.getState().filter((file) => { - return (file.scenarioID === props.scenarioID) - }); - - return { - files: files, - sessionToken: LoginStore.getState().token, - selectedFile: '', - uploadFile: null, - uploadProgress: 0 - }; - } - - /*componentDidMount() { - AppDispatcher.dispatch({ - type: 'files/start-load', - token: this.state.sessionToken - }); - }*/ - - static getDerivedStateFromProps(props, state){ - - - } - - handleChange(event) { - - // send file ID to callback - if (this.props.onChange != null) { - this.props.onChange(event.target.value); - } - }; - selectUploadFile(event) { this.setState({ uploadFile: event.target.files[0] }); }; @@ -78,39 +42,46 @@ class SelectFile extends React.Component { AppDispatcher.dispatch({ type: 'files/start-upload', data: formData, - token: this.state.sessionToken, - //progressCallback: this.updateUploadProgress, - //finishedCallback: this.clearProgress, + token: this.props.sessionToken, + progressCallback: this.updateUploadProgress, + finishedCallback: this.clearProgress, scenarioID: this.props.scenarioID, }); + + // TODO make sure that edit config dialog remains open after clicking "Upload" button }; - updateUploadProgress = (event) => {// TODO: this callback does not work properly (access to setState) + updateUploadProgress = (event) => { this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) }); }; - clearProgress = () => { // TODO this callback does not work properly (access to setState) - if (this.props.onChange != null) { - this.props.onChange(this.state.files[this.state.files.length - 1].id); + clearProgress = (newFileID) => { + /*if (this.props.onChange != null) { + let event = {} + event["target"] = {} + event.target["value"] = newFileID + this.props.onChange(event); } this.setState({ uploadProgress: 0 }); + */ + }; render() { let fileOptions; - if (this.state.files.length > 0){ - fileOptions = this.state.files.map(f => + if (this.props.files.length > 0){ + fileOptions = this.props.files.map(f => ); } else { - fileOptions = + fileOptions = } - /*const progressBarStyle = { + const progressBarStyle = { marginLeft: '100px', - marginTop: '-25px' - };*/ + marginTop: '-40px' + }; return
@@ -119,29 +90,44 @@ class SelectFile extends React.Component { - this.handleChange(event)}> + this.props.onChange(event)}> {fileOptions} - - this.selectUploadFile(event)} /> + + this.selectUploadFile(event)} /> - - - {/* - + + + - */} +
; } } -let fluxContainerConverter = require('../common/FluxContainerConverter'); -export default Container.create(fluxContainerConverter.convert(SelectFile), { withProps: true }); +export default SelectFile; diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index dde3116..27642e8 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -467,7 +467,15 @@ class Scenario extends React.Component {
- this.closeEditConfigModal(data)} config={this.state.modalConfigData} ics={this.state.ics} /> + this.closeEditConfigModal(data)} + config={this.state.modalConfigData} + ics={this.state.ics} + files={this.state.files} + sessionToken={this.state.sessionToken} + /> + this.importConfig(data)} ics={this.state.ics} /> this.closeDeleteConfigModal(c)} />