if the item has changed, save before we close the form

2 files changed, 35 insertions, 7 deletions

diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
index 2f6dad7..bfcc34f 100644
--- a/frontend/views/page/components/tile.edit.js
+++ b/frontend/views/page/components/tile.edit.js
@@ -41,11 +41,14 @@ class TileEdit extends Component {
         if (response.status === 'ok') {
           this.props.pageActions.updatePageTile(response.res)
         }
-        this.props.pageActions.hideEditTileForm()
-        this.props.tileActions.clearTemporaryTile()
       })
   }
 
+  handleClose() {
+    this.props.pageActions.hideEditTileForm()
+    this.props.tileActions.clearTemporaryTile()
+  }
+
   render() {
     const { tile } = this.state
     if (!tile) {
@@ -61,6 +64,7 @@ class TileEdit extends Component {
         graph={this.props.graph.show.res}
         page={this.props.page.show.res}
         onSubmit={this.handleSubmit.bind(this)}
+        onClose={this.handleClose.bind(this)}
       />
     )
   }
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index a59a433..0935538 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -79,6 +79,7 @@ class TileForm extends Component {
     title: "",
     submitTitle: "",
     errorFields: new Set([]),
+    modified: false,
   }
 
   componentDidMount() {
@@ -104,8 +105,19 @@ class TileForm extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.initialData !== prevProps.initialData) {
+    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
+      this.handleSubmit()
       this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
+      this.setState({
+        errorFields: new Set([]),
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    // if the item has changed, save before we close the form!
+    if (!this.props.isNew && this.state.modified) {
+      this.handleSubmit()
     }
   }
 
@@ -126,7 +138,7 @@ class TileForm extends Component {
       page_id: temporaryTile.page_id,
     })
     newTile.settings.align = temporaryTile.settings.align
-    this.setState({ errorFields: new Set([]) })
+    this.clearErrorField('type')
     this.props.tileActions.updateTemporaryTile(newTile)
   }
 
@@ -200,20 +212,28 @@ class TileForm extends Component {
       errorFields.delete(name)
       this.setState({
         errorFields,
+        modified: true,
+      })
+    } else if (!this.state.modified) {
+      this.setState({
+        errorFields,
+        modified: true,
       })
     }
   }
 
   handleSubmit(e) {
-    e.preventDefault()
-    const { isNew, temporaryTile, onSubmit } = this.props
+    if (e) e.preventDefault()
+    const { isNew, temporaryTile, onSubmit, onClose } = this.props
     const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
     const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
     const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
     const errorFields = requiredSettings.filter(key => !validData.settings[key])
     if (errorFields.length) {
       console.log('error', errorFields, validData)
-      this.setState({ errorFields: new Set(errorFields) })
+      if (e) {
+        this.setState({ errorFields: new Set(errorFields) })
+      }
     } else {
       if (isNew) {
         // side effect: set username if we're creating a new tile
@@ -224,6 +244,10 @@ class TileForm extends Component {
       }
       console.log('submit', validData)
       onSubmit(validData)
+      // if submitting after switching elements, don't close the form
+      if (e && onClose) {
+        onClose()
+      }
     }
   }