Show multiple selected files in component config table; add column for simulation model; allow for selection of multiple files per component config in edit dialog #234

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",

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",

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 {
             <option key={s.id} value={s.id}>{s.name}</option>
         );
 
+      let configFileOptions = [];
+      for(let file of this.props.files) {
+        configFileOptions.push(
+          {name: file.name, id: file.id}
+        );
+      }
+
+
+
         return (
             <Dialog show={this.props.show} title="Edit Component Configuration" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
                 <form>
@@ -121,14 +141,14 @@ class EditConfigDialog extends React.Component {
                       </FormControl>
                     </FormGroup>
 
-                    <SelectFile
-                      type='config'
-                      name='Configuration File'
-                      onChange={(e) => this.handleSelectedFileChange(e)}
-                      files={this.props.files}
-                      value={this.state.selectedFileID}
-                      scenarioID={this.props.config.scenarioID}
-                      sessionToken={this.props.sessionToken}
+                    <Multiselect
+                      options={configFileOptions}
+                      showCheckbox={true}
+                      selectedValues={this.state.fileIDs}
+                      onSelect={(selectedList, selectedItem) => this.onFileSelect(selectedList, selectedItem)}
+                      onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)}
+                      displayValue={'name'}
+                      placeholder={'Select file(s)...'}
                     />
 
                     <FormGroup controlId='startParameters'>

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 {
       <Table data={this.state.configs}>
         <TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
         <TableColumn title='Name' dataKey='name' />
-        <TableColumn title='Selected configuration file' dataKey='selectedFileID' modifier={(selectedFileID) => this.getFileName(selectedFileID)} />
+        <TableColumn title='Configuration file(s)' dataKey='fileIDs' modifier={(fileIDs) => this.getListOfFiles(fileIDs, 'all')} />
+        <TableColumn title='Model file(s)' dataKey='fileIDs' modifier={(fileIDs) => this.getListOfFiles(fileIDs, 'xml')} />
         <TableColumn
           title='# Output Signals'
           dataKey='outputLength'