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..2e277b1 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -17,9 +17,9 @@
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";
class EditConfigDialog extends React.Component {
valid = false;
@@ -28,12 +28,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 +51,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 +82,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 +103,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 +115,15 @@ class EditConfigDialog extends React.Component {
);
+ let configFileOptions = [];
+ for(let file of this.props.files) {
+ configFileOptions.push(
+ {name: file.name, id: file.id}
+ );
+ }
+
+
+
return (