From 9d8e9c4364c60a72dda97ee021a583961e40f1c6 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Mon, 31 Aug 2020 09:36:32 +0200 Subject: [PATCH] Fixes a bug in editing component configurations (closes #252, closes #257) --- src/componentconfig/edit-config.js | 259 ++++++++++++++++------------- src/scenario/scenario.js | 6 +- 2 files changed, 141 insertions(+), 124 deletions(-) diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index 2e277b1..51c4761 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -22,142 +22,163 @@ import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; class EditConfigDialog extends React.Component { - valid = false; + valid = false; - constructor(props) { - super(props); + constructor(props) { + super(props); + this.state = { + name: '', + icID: '', + startParameters: {}, + selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config! + }; + } - this.state = { - name: '', - icID: '', - configuration: null, - startParameters: this.props.config.startParameters, - fileIDs: this.props.config.fileIDs - - }; - } - - - onClose(canceled) { - if (canceled === false) { - if (this.valid) { - let data = this.props.config; - if (this.state.name !== '' && this.props.config.name !== this.state.name) { - data.name = this.state.name; - } - if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) { - data.icID = parseInt(this.state.icID, 10); - } - if(this.state.startParameters !== {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){ - data.startParameters = this.state.startParameters; - } - - let IDs = [] - for(let e of this.state.fileIDs){ - IDs.push(e.id) - } - if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){ - data.fileIDs = IDs; - } - - //forward modified config to callback function - this.props.onClose(data) - } - } else { - this.props.onClose(); + onClose(canceled) { + if (canceled === false) { + if (this.valid) { + let data = this.props.config; + if (this.state.name !== '' && this.props.config.name !== this.state.name) { + data.name = this.state.name; + } + if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) { + data.icID = parseInt(this.state.icID, 10); + } + if(this.state.startParameters !== {} && + JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){ + data.startParameters = this.state.startParameters; } - } - handleChange(e) { - this.setState({ [e.target.id]: e.target.value }); - this.valid = this.isValid() - } + let IDs = [] + for(let e of this.state.selectedFiles){ + IDs.push(e.id) + } + if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){ + data.fileIDs = IDs; + } - handleParameterChange(data) { - if (data) { - this.setState({startParameters: data}); + //forward modified config to callback function + this.props.onClose(data) } - - - this.valid = this.isValid() + } else { + this.props.onClose(); } + } - onFileSelect(selectedList, selectedItem) { + handleChange(e) { + this.setState({ [e.target.id]: e.target.value }); + this.valid = this.isValid() + } - this.setState({ - fileIDs: selectedList - }) - this.valid = this.isValid() + handleParameterChange(data) { + if (data) { + this.setState({startParameters: data}); } + this.valid = this.isValid() + } - onFileRemove(selectedList, removedItem) { + onFileChange(selectedList, changedItem) { + this.setState({ + selectedFiles: selectedList + }) + this.valid = this.isValid() + } - this.setState({ - fileIDs: selectedList - }) - this.valid = this.isValid() - } - isValid() { - // input is valid if at least one element has changed from its initial value - return this.state.name !== '' - || this.state.icID !== '' - || this.state.startParameters !== {} - || this.state.configuration != null - } + isValid() { + // input is valid if at least one element has changed from its initial value + return this.state.name !== '' + || this.state.icID !== '' + || this.state.startParameters !== {} + } - resetState() { - //this.setState({}); - } + resetState() { - render() { - const ICOptions = this.props.ics.map(s => - - ); - - let configFileOptions = []; - for(let file of this.props.files) { - configFileOptions.push( - {name: file.name, id: file.id} - ); + // determine list of selected files incl id and filename + let selectedFiles = [] + for(let selectedFileID of this.props.config.fileIDs){ + for (let file of this.props.files){ + if (file.id === selectedFileID){ + selectedFiles.push({name: file.name, id: file.id}) + } } - - - - return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - - - - Infrastructure Component - this.handleChange(e)}> - {ICOptions} - - - - this.onFileSelect(selectedList, selectedItem)} - onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)} - displayValue={'name'} - placeholder={'Select file(s)...'} - /> - - - Start Parameters - this.handleParameterChange(data)} /> - - -
- ); } + + this.setState({ + name: this.props.config.name, + icID: this.props.config.icID, + startParameters: this.props.config.startParameters, + selectedFiles: selectedFiles, + }); + } + + + render() { + const ICOptions = this.props.ics.map(s => + + ); + + let configFileOptions = []; + for(let file of this.props.files) { + configFileOptions.push( + {name: file.name, id: file.id} + ); + } + + return ( + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > +
+ + Name + this.handleChange(e)} + /> + + + + + Infrastructure Component + this.handleChange(e)} + > + {ICOptions} + + + + this.onFileChange(selectedList, selectedItem)} + onRemove={(selectedList, removedItem) => this.onFileChange(selectedList, removedItem)} + displayValue={'name'} + placeholder={'Select file(s)...'} + /> + + + Start Parameters + this.handleParameterChange(data)} + /> + + +
+ ); + } } export default EditConfigDialog; diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index fcd1300..564f63c 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -90,7 +90,7 @@ class Scenario extends React.Component { deleteConfigModal: false, importConfigModal: false, - editConfigModal: false, + editConfigModal: prevState.editConfigModal || false, modalConfigData: (prevState.modalConfigData !== {} && prevState.modalConfigData !== undefined )? prevState.modalConfigData : {}, selectedConfigs: [], modalConfigIndex: 0, @@ -453,10 +453,6 @@ class Scenario extends React.Component { } } } - - - - return fileList; }