diff --git a/package-lock.json b/package-lock.json index 56c4421..5ad0112 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8902,6 +8902,15 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "multiselect-react-dropdown": { + "version": "1.5.7", + "resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-1.5.7.tgz", + "integrity": "sha512-bDlXYEzpV/5p5G5nIFRrZ/Ndf8CSYWliZ62n/5imfjLy0K2/dNx6sFmk4W/Phq83bzPUDK/RI4553yCk6YzZwg==", + "requires": { + "react": "^16.7.0", + "react-dom": "^16.7.0" + } + }, "mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", diff --git a/package.json b/package.json index 0f50af1..11aceb7 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "jszip": "^3.5.0", "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git", "lodash": "^4.17.15", + "multiselect-react-dropdown": "^1.5.7", "node-sass": "^4.14.1", "popper.js": "^1.16.1", "prop-types": "^15.7.2", diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index a69159d..ba6e413 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -17,6 +17,7 @@ import React from 'react'; import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; +import { Multiselect } from 'multiselect-react-dropdown' import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; import SelectFile from "../file/select-file"; @@ -28,12 +29,11 @@ class EditConfigDialog extends React.Component { super(props); this.state = { - selectedFile: null, name: '', icID: '', configuration: null, startParameters: this.props.config.startParameters, - selectedFileID: this.props.config.selectedFileID + fileIDs: this.props.config.fileIDs }; } @@ -52,9 +52,13 @@ class EditConfigDialog extends React.Component { 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 && - this.props.config.selectedFileID !== parseInt(this.state.selectedFileID)) { - data.selectedFileID = parseInt(this.state.selectedFileID, 10); + + 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 @@ -79,10 +83,19 @@ class EditConfigDialog extends React.Component { this.valid = this.isValid() } - handleSelectedFileChange(event){ - //console.log("Config file change to: ", event.target.value); - this.setState({selectedFileID: event.target.value}) + onFileSelect(selectedList, selectedItem) { + this.setState({ + fileIDs: selectedList + }) + this.valid = this.isValid() + } + + onFileRemove(selectedList, removedItem) { + + this.setState({ + fileIDs: selectedList + }) this.valid = this.isValid() } @@ -91,9 +104,7 @@ class EditConfigDialog extends React.Component { return this.state.name !== '' || this.state.icID !== '' || this.state.startParameters !== {} - || this.state.selectedFile != null || this.state.configuration != null - || this.state.selectedFileID !== 0; } resetState() { @@ -105,6 +116,15 @@ class EditConfigDialog extends React.Component { ); + 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}>
@@ -121,14 +141,14 @@ class EditConfigDialog extends React.Component { - this.handleSelectedFileChange(e)} - files={this.props.files} - value={this.state.selectedFileID} - scenarioID={this.props.config.scenarioID} - sessionToken={this.props.sessionToken} + this.onFileSelect(selectedList, selectedItem)} + onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)} + displayValue={'name'} + placeholder={'Select file(s)...'} /> diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 8d3495e..8e2ceda 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -396,12 +396,22 @@ class Scenario extends React.Component { * File modification methods ############################################## */ - getFileName(id) { - for (let file of this.state.files) { - if (file.id === id) { - return file.name; + getListOfFiles(fileIDs, type) { + + let fileList = ''; + + for (let id of fileIDs){ + for (let file of this.state.files) { + if (file.id === id && (type === 'all' || file.type.includes(type))) { + fileList = fileList + '\n' + file.name; + } } } + + + + + return fileList; } /* ############################################## @@ -428,7 +438,8 @@ class Scenario extends React.Component { this.onConfigChecked(index, event)} width='30' /> - this.getFileName(selectedFileID)} /> + this.getListOfFiles(fileIDs, 'all')} /> + this.getListOfFiles(fileIDs, 'xml')} />