From b0fddfba1488df79294f9d33e527c737885c852f Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 29 Apr 2021 16:05:01 +0200
Subject: [PATCH] standardize 'New Dialog', creating new entity

---
 .../dialogs/new-dialog.js}                    | 37 ++++---
 src/componentconfig/config-table.js           | 99 ++++++++++---------
 src/dashboard/dashboard-table.js              | 14 ++-
 src/result/new-result.js                      | 77 ---------------
 src/result/result-table.js                    | 14 ++-
 5 files changed, 91 insertions(+), 150 deletions(-)
 rename src/{dashboard/new-dashboard.js => common/dialogs/new-dialog.js} (68%)
 delete mode 100644 src/result/new-result.js

diff --git a/src/dashboard/new-dashboard.js b/src/common/dialogs/new-dialog.js
similarity index 68%
rename from src/dashboard/new-dashboard.js
rename to src/common/dialogs/new-dialog.js
index 5cc8a3e..8c7b44f 100644
--- a/src/dashboard/new-dashboard.js
+++ b/src/common/dialogs/new-dialog.js
@@ -18,49 +18,47 @@
 import React from 'react';
 import { Form } from 'react-bootstrap';
 
-import Dialog from '../common/dialogs/dialog';
-
-class NewDashboardDialog extends React.Component {
-  valid: false;
+import Dialog from './dialog';
 
+class NewDialog extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      name: ''
+      value: ''
     }
   }
 
   onClose(canceled) {
     if (canceled === false) {
-      if (this.valid) {
-        this.props.onClose(this.state);
-      }
+      this.props.onClose(this.state);
     } else {
       this.props.onClose();
     }
   }
 
   handleChange(e) {
+    console.log(e)
+
     this.setState({ [e.target.id]: e.target.value });
   }
 
   resetState() {
-    this.setState({ name: '' });
+    this.setState({ value: '' });
   }
 
   validateForm(target) {
     // check all controls
-    var name = true;
+    var inputGiven = true;
 
-    if (this.state.name === '') {
-      name = false;
+    if (this.state.value === '') {
+      inputGiven = false;
     }
 
-    this.valid = name;
+    this.valid = inputGiven;
 
     // return state to control
-    if (target === 'name') return name ? "success" : "error";
+    if (target === 'value') return inputGiven ? "success" : "error";
 
     return "success";
   }
@@ -68,17 +66,18 @@ class NewDashboardDialog extends React.Component {
   render() {
     return (
       <Dialog
+        size="md"
         show={this.props.show}
-        title="New Dashboard"
+        title={this.props.title}
         buttonTitle="Add"
         onClose={(c) => this.onClose(c)}
         onReset={() => this.resetState()}
         valid={this.valid}
       >
         <Form>
-          <Form.Group controlId="name" valid={this.validateForm('name')}>
-            <Form.Label>Name</Form.Label>
-            <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+          <Form.Group controlId="value" valid={this.validateForm('value')}>
+            <Form.Label>{this.props.inputLabel}</Form.Label>
+            <Form.Control type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={(e) => this.handleChange(e)} />
             <Form.Control.Feedback />
           </Form.Group>
         </Form>
@@ -87,4 +86,4 @@ class NewDashboardDialog extends React.Component {
   }
 }
 
-export default NewDashboardDialog;
+export default NewDialog;
diff --git a/src/componentconfig/config-table.js b/src/componentconfig/config-table.js
index b86332a..abe8b50 100644
--- a/src/componentconfig/config-table.js
+++ b/src/componentconfig/config-table.js
@@ -15,11 +15,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, {Component} from "react";
+import React, { Component } from "react";
 import FileSaver from 'file-saver';
 import IconButton from "../common/icon-button";
 import Table from "../common/table";
 import TableColumn from "../common/table-column";
+import NewDialog from "../common/dialogs/new-dialog";
 import DeleteDialog from "../common/dialogs/delete-dialog";
 import AppDispatcher from "../common/app-dispatcher";
 import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
@@ -37,21 +38,21 @@ class ConfigTable extends Component {
       editConfigModal: false,
       modalConfigData: {},
       modalConfigIndex: 0,
+      newConfigModal: false,
       deleteConfigModal: false,
       importConfigModal: false,
-      newConfig:  false,
       selectedConfigs: [],
       ExternalICInUse: false,
-      editOutputSignalsModal:  false,
-      editInputSignalsModal:  false,
+      editOutputSignalsModal: false,
+      editInputSignalsModal: false,
     }
   }
 
-  static getDerivedStateFromProps(props, state){
+  static getDerivedStateFromProps(props, state) {
 
     let ExternalICInUse = false
 
-    for (let config of props.configs){
+    for (let config of props.configs) {
       for (let component of props.ics) {
         if ((config.icID === component.id) && (component.managedexternally === true)) {
           ExternalICInUse = true;
@@ -65,26 +66,27 @@ class ConfigTable extends Component {
     };
   }
 
-  addConfig() {
-    const config = {
-      scenarioID: this.props.scenario.id,
-      name: 'New Component Configuration',
-      icID: this.props.ics.length > 0 ? this.props.ics[0].id : null,
-      startParameters: {},
-    };
+  closeNewConfigModal(data) {
+    this.setState({ newConfigModal: false });
 
-    AppDispatcher.dispatch({
-      type: 'configs/start-add',
-      data: config,
-      token: this.props.sessionToken
-    });
-
-    this.setState({ newConfig: true });
+    if (data) {
+      const config = {
+        scenarioID: this.props.scenario.id,
+        name: data.value,
+        icID: this.props.ics.length > 0 ? this.props.ics[0].id : null,
+        startParameters: {},
+      };
 
+      AppDispatcher.dispatch({
+        type: 'configs/start-add',
+        data: config,
+        token: this.props.sessionToken
+      });
+    }
   }
 
   closeEditConfigModal(data) {
-    this.setState({ editConfigModal: false, newConfig: false });
+    this.setState({ editConfigModal: false });
 
     if (data) {
       AppDispatcher.dispatch({
@@ -312,27 +314,27 @@ class ConfigTable extends Component {
         {/*Component Configurations table*/}
         <h2 style={this.props.tableHeadingStyle}>Component Configurations
           <span className='icon-button'>
-          <IconButton
-            childKey={0}
-            tooltip='Add Component Configuration'
-            onClick={() => this.addConfig()}
-            icon='plus'
-            disabled={this.props.locked}
-            hidetooltip={this.props.locked}
-            buttonStyle={buttonStyle}
-            iconStyle={iconStyle}
-          />
-          <IconButton
-            childKey={1}
-            tooltip='Import Component Configuration'
-            onClick={() => this.setState({ importConfigModal: true })}
-            icon='upload'
-            disabled={this.props.locked}
-            hidetooltip={this.props.locked}
-            buttonStyle={buttonStyle}
-            iconStyle={iconStyle}
-          />
-        </span>
+            <IconButton
+              childKey={0}
+              tooltip='Add Component Configuration'
+              onClick={() => this.setState({ newConfigModal: true })}
+              icon='plus'
+              disabled={this.props.locked}
+              hidetooltip={this.props.locked}
+              buttonStyle={buttonStyle}
+              iconStyle={iconStyle}
+            />
+            <IconButton
+              childKey={1}
+              tooltip='Import Component Configuration'
+              onClick={() => this.setState({ importConfigModal: true })}
+              icon='upload'
+              disabled={this.props.locked}
+              hidetooltip={this.props.locked}
+              buttonStyle={buttonStyle}
+              iconStyle={iconStyle}
+            />
+          </span>
         </h2>
         <Table data={this.props.configs}>
           <TableColumn
@@ -404,9 +406,9 @@ class ConfigTable extends Component {
             <ICAction
               ics={this.props.ics}
               configs={this.props.configs}
-              selectedConfigs = {this.state.selectedConfigs}
-              snapshotConfig = {(index) => this.copyConfig(index)}
-              token = {this.props.sessionToken}
+              selectedConfigs={this.state.selectedConfigs}
+              snapshotConfig={(index) => this.copyConfig(index)}
+              token={this.props.sessionToken}
               actions={[
                 { id: '0', title: 'Start', data: { action: 'start' } },
                 { id: '1', title: 'Stop', data: { action: 'stop' } },
@@ -432,6 +434,13 @@ class ConfigTable extends Component {
           onClose={data => this.importConfig(data)}
           ics={this.props.ics}
         />
+        <NewDialog
+          show={this.state.newConfigModal}
+          title="New Component Configuration"
+          inputLabel="Name"
+          placeholder="Enter name"
+          onClose={data => this.closeNewConfigModal(data)}
+        />
         <DeleteDialog
           title="component configuration"
           name={this.state.modalConfigData.name}
diff --git a/src/dashboard/dashboard-table.js b/src/dashboard/dashboard-table.js
index 45db0c7..75f4435 100644
--- a/src/dashboard/dashboard-table.js
+++ b/src/dashboard/dashboard-table.js
@@ -20,11 +20,11 @@ import FileSaver from 'file-saver';
 import IconButton from "../common/icon-button";
 import Table from "../common/table";
 import TableColumn from "../common/table-column";
-import NewDashboardDialog from "./new-dashboard";
 import EditDashboardDialog from "./edit-dashboard";
 import ImportDashboardDialog from "./import-dashboard";
 import DeleteDialog from "../common/dialogs/delete-dialog";
 import AppDispatcher from "../common/app-dispatcher";
+import NewDialog from "../common/dialogs/new-dialog";
 
 class DashboardTable extends Component {
 
@@ -43,15 +43,15 @@ class DashboardTable extends Component {
   closeNewDashboardModal(data) {
     this.setState({ newDashboardModal: false });
     if (data) {
-      // TODO: 'newDashboard' not used, check this
-      let newDashboard = data;
+      let newDashboard = {};
+      newDashboard["name"] = data.value;
       // add default grid value and scenarioID
       newDashboard["grid"] = 15;
       newDashboard["scenarioID"] = this.props.scenario.id;
 
       AppDispatcher.dispatch({
         type: 'dashboards/start-add',
-        data,
+        data: newDashboard,
         token: this.props.sessionToken,
       });
     }
@@ -218,10 +218,14 @@ class DashboardTable extends Component {
           />
         </Table>
 
-        <NewDashboardDialog
+        <NewDialog
           show={this.state.newDashboardModal}
+          title="New Dashboard"
+          inputLabel="Name"
+          placeholder="Enter name"
           onClose={data => this.closeNewDashboardModal(data)}
         />
+
         <EditDashboardDialog
           show={this.state.dashboardEditModal}
           dashboard={this.state.modalDashboardData}
diff --git a/src/result/new-result.js b/src/result/new-result.js
deleted file mode 100644
index 2529d02..0000000
--- a/src/result/new-result.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-import React from 'react';
-import { Form } from 'react-bootstrap';
-
-import Dialog from '../common/dialogs/dialog';
-
-class NewResultDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-        ConfigSnapshots: '',
-        Description: '',
-        ResultFileIDs: [],
-    }
-  }
-
-  onClose(canceled) {
-    if (canceled === false) {
-        this.props.onClose(this.state);
-    } else {
-      this.props.onClose();
-    }
-  }
-
-  handleChange(e) {
-    this.setState({ [e.target.id]: e.target.value });
-  }
-
-  resetState() {
-    this.setState({
-        ConfigSnapshots: '',
-        Description: '',
-        ResultFileIDs: [],
-     });
-  }
-
-  render() {
-    return (
-      <Dialog
-        show={this.props.show}
-        title="New Result"
-        buttonTitle="Add"
-        onClose={(c) => this.onClose(c)}
-        onReset={() => this.resetState()}
-        valid={true}
-      >
-        <Form>
-          <Form.Group controlId="Description">
-            <Form.Label>Description</Form.Label>
-            <Form.Control type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
-            <Form.Control.Feedback />
-          </Form.Group>
-        </Form>
-      </Dialog>
-    );
-  }
-}
-
-export default NewResultDialog;
diff --git a/src/result/result-table.js b/src/result/result-table.js
index 96dd765..f50707c 100644
--- a/src/result/result-table.js
+++ b/src/result/result-table.js
@@ -26,7 +26,7 @@ import TableColumn from "../common/table-column";
 import DeleteDialog from "../common/dialogs/delete-dialog";
 import EditResultDialog from "./edit-result";
 import ResultConfigDialog from "./result-configs-dialog";
-import NewResultDialog from "./new-result";
+import NewDialog from "../common/dialogs/new-dialog";
 
 class ResultTable extends Component {
 
@@ -79,10 +79,13 @@ class ResultTable extends Component {
   closeNewResultModal(data) {
     this.setState({ newResultModal: false });
     if (data) {
-      data["scenarioID"] = this.props.scenario.id;
+      let newResult = { ConfigSnapshots: '', ResultFileIDs: [] };
+      newResult["scenarioID"] = this.props.scenario.id;
+      newResult["Description"] = data.value;
+
       AppDispatcher.dispatch({
         type: 'results/start-add',
-        data,
+        data: newResult,
         token: this.props.sessionToken,
       });
     }
@@ -245,8 +248,11 @@ class ResultTable extends Component {
           resultNo={this.state.modalResultConfigsIndex}
           onClose={this.closeResultConfigSnapshots.bind(this)}
         />
-        <NewResultDialog
+        <NewDialog
           show={this.state.newResultModal}
+          title="New Result"
+          inputLabel="Description"
+          placeholder="Enter description"
           onClose={data => this.closeNewResultModal(data)}
         />
       </div>