From d954941d9f6de7c39643dd9b768a42999a8ed160 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 28 Jan 2020 12:31:36 +0100
Subject: [PATCH] most widgets now editable again

---
 src/dashboard/dashboard.js              | 23 +++++++++++++++--------
 src/dashboard/widget-context-menu.js    |  2 +-
 src/widget/edit-widget-color-control.js |  2 +-
 src/widget/edit-widget-image-control.js |  6 +++---
 src/widget/edit-widget.js               |  6 ++++++
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 7180a81..b0e0f6f 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -56,6 +56,7 @@ class Dashboard extends Component {
     if (prevState == null) {
       prevState = {};
     }
+   
     const sessionToken = LoginStore.getState().token;
     let maxHeight = null;
     let dashboard = Map();
@@ -163,7 +164,7 @@ class Dashboard extends Component {
       modalData:  null,
       modalIndex:  null,
       widgetChangeData: [],
-      widgetAddData:[],
+      widgetAddData:prevState.widgetAddData || [],
 
       maxWidgetHeight: maxHeight || null,
       dropZoneHeight: maxHeight +80 || null,
@@ -298,6 +299,12 @@ class Dashboard extends Component {
   handleDrop(widget) {
     widget.dashboardID = this.state.dashboard.get('id');
     console.log(widget);
+    let tempChanges = this.state.widgetAddData;
+    tempChanges.push(widget);
+    console.log("handle drop. the temp changes: ");
+    console.log(tempChanges);
+
+    this.setState({ widgetAddData: tempChanges})
 
     AppDispatcher.dispatch({
       type: 'widgets/start-add',
@@ -305,10 +312,7 @@ class Dashboard extends Component {
       data: widget
     });
 
-    let tempChanges = this.state.widgetAddData;
-    tempChanges.push(widget);
-
-    this.setState({ widgetAddData: tempChanges})
+    
     /*let widgets = []; 
     widgets = this.state.dashboard.get('widgets');
 
@@ -428,15 +432,17 @@ class Dashboard extends Component {
   }
 
   cancelEditing() {
-    console.log("cancelEditing the add data: ");
-    console.log(this.state.widgetAddData);
+    //raw widget has no id -> cannot be deleted in its original form
+    /*
     this.state.widgetAddData.forEach( widget => {
       AppDispatcher.dispatch({
         type: 'widgets/start-remove',
         data: widget,
         token: this.state.sessionToken
       });
-    });
+    }); */
+    
+    
     AppDispatcher.dispatch({
       type: 'widgets/start-load',
       token: this.state.sessionToken,
@@ -462,6 +468,7 @@ class Dashboard extends Component {
 
 
   render() {
+    
     const widgets = this.state.dashboard.get('widgets');
     const grid = this.state.dashboard.get('grid');
     const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen });
diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js
index ae8c40f..1fa0967 100644
--- a/src/dashboard/widget-context-menu.js
+++ b/src/dashboard/widget-context-menu.js
@@ -113,7 +113,7 @@ class WidgetContextMenu extends React.Component {
   );
 
     return <div>
-    <MenuProvider id={'widgetMenu'+ this.props.index} style={{ border: '1px solid purple', display: 'inline-block' }}>
+    <MenuProvider id={'widgetMenu'+ this.props.index}>
     <Widget
               data={this.props.widget}
               simulation={this.props.simulation}
diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js
index 7b9443b..1d045bd 100644
--- a/src/widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget-color-control.js
@@ -44,7 +44,7 @@ class EditWidgetColorControl extends Component {
 
     this.state = {
       widget: {
-        customProperties:{}
+        
       }
     };
   }
diff --git a/src/widget/edit-widget-image-control.js b/src/widget/edit-widget-image-control.js
index fe0c433..8fdbe60 100644
--- a/src/widget/edit-widget-image-control.js
+++ b/src/widget/edit-widget-image-control.js
@@ -77,7 +77,7 @@ class EditImageWidgetControl extends React.Component {
     return <div>
       <FormGroup controlId="file">
         <FormLabel>Image</FormLabel>
-        <FormControl componentClass="select" value={this.state.widget.customProperties.file} onChange={(e) => this.props.handleChange(e)}>
+        <FormControl className="select" value={this.state.widget.customProperties.file} onChange={(e) => this.props.handleChange(e)}>
           {this.props.files.length === 0 ? (
             <option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
           ) : (
@@ -96,8 +96,8 @@ class EditImageWidgetControl extends React.Component {
         <FormControl type="file" onChange={(e) => this.setState({ fileList: e.target.files }) } />
       </FormGroup>
 
-      <ProgressBar striped active now={this.state.progress} label={`${this.state.progress}%`} />
-      <Button bsSize="small" onClick={this.startFileUpload}>Upload</Button>
+      <ProgressBar striped active={'true'} now={this.state.progress} label={`${this.state.progress}%`} />
+      <Button size='sm' onClick={this.startFileUpload}>Upload</Button>
     </div>;
   }
 }
diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js
index 621dc03..d56dae3 100644
--- a/src/widget/edit-widget.js
+++ b/src/widget/edit-widget.js
@@ -43,6 +43,12 @@ class EditWidgetDialog extends React.Component {
     };
   }
 
+  static getDerivedStateFromProps(props, state){
+    return {
+      temporal: props.widget
+    };
+  }
+
   
 
   onClose(canceled) {