"Save and continue editing" button on risk of bias form (#645)

* Added 'Save and continue' button to rob form * add a toast Co-authored-by: Andy Shapiro <[email protected]>
shapiromatron · Jul 12, 2022 · 0906eb7 · 0906eb7
1 parent eeb904d
commit 0906eb7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/frontend/riskofbias/robStudyForm/Root.js b/frontend/riskofbias/robStudyForm/Root.js
@@ -29,15 +29,35 @@ class Root extends Component {
                     })}
                     <div className="well">
                         <Completeness number={store.numIncompleteScores} />
-                        <button
-                            className="btn btn-primary space"
-                            type="button"
-                            onClick={store.submitScores}>
-                            Save changes
-                        </button>
-                        <button className="ml-3 btn btn-light" onClick={store.cancelSubmitScores}>
-                            Cancel
-                        </button>
+                        {store.changedSavedDiv ? (
+                            <div className="alert alert-info">
+                                <p className="mb-0">
+                                    <i className="fa fa-save mr-2" />
+                                    Changes saved!
+                                </p>
+                            </div>
+                        ) : null}
+                        <div className="d-flex justify-content-between">
+                            <button
+                                className="btn btn-primary"
+                                type="button"
+                                onClick={() => store.submitScores(false)}>
+                                Save and continue editing
+                            </button>
+                            <div>
+                                <button
+                                    className="btn btn-light mr-3"
+                                    onClick={store.cancelSubmitScores}>
+                                    Cancel
+                                </button>
+                                <button
+                                    className="btn btn-primary"
+                                    type="button"
+                                    onClick={() => store.submitScores(true)}>
+                                    Save and return
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </form>
             </div>

diff --git a/frontend/riskofbias/robStudyForm/store.js b/frontend/riskofbias/robStudyForm/store.js
@@ -142,7 +142,7 @@ class RobFormStore extends StudyRobStore {
     @action.bound cancelSubmitScores() {
         window.location.href = this.config.cancelUrl;
     }
-    @action.bound submitScores() {
+    @action.bound submitScores(redirect) {
         const payload = {
                 id: this.config.riskofbias.id,
                 scores: this.editableScores.map(score => {
@@ -172,7 +172,11 @@ class RobFormStore extends StudyRobStore {
         return fetch(url, opts)
             .then(response => {
                 if (response.ok) {
-                    window.location.href = this.config.cancelUrl;
+                    if (redirect) {
+                        window.location.href = this.config.cancelUrl;
+                    } else {
+                        this.setChangedSavedDiv();
+                    }
                 } else {
                     response.text().then(text => {
                         this.error = text;
@@ -183,6 +187,13 @@ class RobFormStore extends StudyRobStore {
                 this.error = error;
             });
     }
+    @observable changedSavedDiv = false;
+    @action.bound setChangedSavedDiv() {
+        this.changedSavedDiv = true;
+        setTimeout(() => {
+            this.changedSavedDiv = false;
+        }, 2000);
+    }
     @action.bound createScoreOverride(payload) {
         let url = `${this.config.riskofbias.scores_url}?assessment_id=${this.config.assessment_id}`,
             csrf = this.config.csrf,