Merge pull request #2762 from afrisalyp/cf14

#2762 Disable update milestone button if no changes.

Author: maxceem

src/projects/detail/components/timeline/Form/Form.jsx

@@ -28,6 +28,8 @@ class Form extends React.Component {
     this.setFormValid = this.setFormValid.bind(this)
     this.setFormInvalid = this.setFormInvalid.bind(this)
     this.submitForm = this.submitForm.bind(this)
+    this.changeForm = this.changeForm.bind(this)
+
   }
 
   setFormValid() {
@@ -44,13 +46,19 @@ class Form extends React.Component {
     onSubmit(values)
   }
 
+  changeForm(values) {
+    const { onChange } = this.props
+
+    if (onChange) onChange(values)
+  }
+
   render() {
     const {
       cancelButtonTitle,
       fields,
       onCancelClick,
       submitButtonTitle,
-      title,
+      title
     } = this.props
     const { isValid } = this.state
 
@@ -60,6 +68,7 @@ class Form extends React.Component {
         onInvalid={this.setFormInvalid}
         onValid={this.setFormValid}
         onValidSubmit={this.submitForm}
+        onChange={this.changeForm}
       >
         <div styleName="title">{title}</div>
         <div styleName="rows">
@@ -98,7 +107,7 @@ class Form extends React.Component {
           </button>
           <button
             type="submit"
-            disabled={!isValid}
+            disabled={!isValid || this.props.disableSubmitButton}
             className="tc-btn tc-btn-primary"
           >
             {submitButtonTitle}
@@ -112,6 +121,7 @@ class Form extends React.Component {
 Form.defaultProps = {
   cancelButtonTitle: 'Cancel',
   submitButtonTitle: 'Submit',
+  disableSubmitButton: false
 }
 
 Form.propTypes = {
@@ -122,8 +132,10 @@ Form.propTypes = {
   })).isRequired,
   onCancelClick: PT.func.isRequired,
   onSubmit: PT.func.isRequired,
+  onChange: PT.func,
   submitButtonTitle: PT.string,
   title: PT.string.isRequired,
+  disableSubmitButton: PT.bool
 }
 
 export default Form

src/projects/detail/components/timeline/Milestone/Milestone.jsx

@@ -45,12 +45,14 @@ class Milestone extends React.Component {
     this.completeFinalFixesMilestone = this.completeFinalFixesMilestone.bind(this)
     this.extendMilestone = this.extendMilestone.bind(this)
     this.submitFinalFixesRequest = this.submitFinalFixesRequest.bind(this)
+    this.milestoneEditorChanged = this.milestoneEditorChanged.bind(this)
 
     this.state = {
       activeMenu: '',
       isHoverHeader: false,
       isEditing: false,
-      isMobileEditing: false
+      isMobileEditing: false,
+      disableSubmit: true
     }
   }
 
@@ -90,7 +92,7 @@ class Milestone extends React.Component {
   }
 
   closeEditForm() {
-    this.setState({ isEditing: false, isMobileEditing: false })
+    this.setState({ isEditing: false, isMobileEditing: false, disableSubmit: true })
   }
 
   toggleMobileEditLink() {
@@ -103,6 +105,33 @@ class Milestone extends React.Component {
     updateMilestone(milestone.id, values)
   }
 
+  milestoneEditorChanged(values) {
+    if (!this.props.milestone) {
+      if (this.state.disableSubmit) {
+        this.setState({ disableSubmit: false })
+      }
+      return
+    }
+    for (const key in values) {
+      if (values.hasOwnProperty(key)) {
+        const element = values[key]
+        let compareElement = this.props.milestone[key]
+        if (!(compareElement instanceof String)) {
+          compareElement = compareElement.toString()
+        }
+        if (element !== compareElement) {
+          if (this.state.disableSubmit) {
+            this.setState({ disableSubmit: false })
+          }
+          return
+        }
+      }
+    }
+    if (!this.state.disableSubmit) {
+      this.setState({ disableSubmit: true })
+    }
+  }
+
   updateMilestoneContent(contentProps, metaDataProps) {
     const { updateMilestone, milestone } = this.props
 
@@ -247,8 +276,10 @@ class Milestone extends React.Component {
         }]}
         onCancelClick={this.closeEditForm}
         onSubmit={this.updateMilestoneWithData}
+        onChange={this.milestoneEditorChanged}
         submitButtonTitle="Update milestone"
         title="Milestone Properties"
+        disableSubmitButton={this.state.disableSubmit}
       />
     )
     return (