Merge pull request #687 from OpenClinica/feature/finish-later-partici…

…pate-674 added ‘Finish Later' button in fieldsubmission Participate views, kobotoolbox#674
OpenClinica · Jul 12, 2023 · 7f68bda · 7f68bda
2 parents df24dbb + 20efd14
commit 7f68bda
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 7 deletions.
diff --git a/app/views/styles/component/_common-oc.scss b/app/views/styles/component/_common-oc.scss
@@ -300,10 +300,13 @@ $secondary-color: #eeeeee;
                         margin-left: 6px;
                     }
 
-                    // show save-draft button on every page
-                    &#save-draft {
+                    // show save-draft and exit-form button on every page
+                    &#save-draft{
                         display: inline-block;
                     }
+                    &#exit-form{
+                        display: block;
+                    }
                 }
 
                 .previous-page,
@@ -316,7 +319,8 @@ $secondary-color: #eeeeee;
                 }
 
                 #complete-form,
-                #close-form {
+                #close-form,
+                #exit-form {
                     min-width: 140px;
                 }
 
@@ -336,6 +340,7 @@ $secondary-color: #eeeeee;
                 }
 
                 #close-form,
+                #exit-form,
                 #save-draft,
                 #submit-form,
                 #validate-form,
@@ -367,7 +372,8 @@ $secondary-color: #eeeeee;
                     }
                 }
 
-                #close-form ~ #complete-form {
+                #close-form ~ #complete-form,
+                #exit-form ~ #close-form {
                     display: block;
                     margin: 0 30% 20px 30%;
                     order: 4;

diff --git a/app/views/surveys/component/_form-footer.pug b/app/views/surveys/component/_form-footer.pug
@@ -26,8 +26,11 @@ section.form-footer
               .option-wrapper: label
                 input.ignore(type='checkbox', name='next-prompt')
                 span.option-label #{nextPrompt}
-          if closeButton
-            button(id="close-form", class=`btn ${completeButton ? 'btn-default' : 'btn-primary'} ${participant ? 'participant' : ''}`, data-i18n='alert.default.button')= t('alert.default.button')
+          if participant
+            button(id="exit-form", class="btn btn-default participant", data-i18n='formfooter.exit.btn')= t('formfooter.exit.btn')
+            button(id="close-form", class="btn btn-primary participant", data-i18n='formfooter.done.btn')= t('formfooter.done.btn')
+          else if closeButton
+            button(id="close-form", class=`btn ${completeButton ? 'btn-default' : 'btn-primary'}`, data-i18n='alert.default.button')= t('alert.default.button')
           if completeButton
             button(id="complete-form", class=`btn btn-primary`)
               if !closeButton

diff --git a/app/views/surveys/dev.pug b/app/views/surveys/dev.pug
@@ -30,7 +30,7 @@ block content
     window.addEventListener('message', receiveMessage, false);
     function receiveMessage(event){
       const data = JSON.parse(event.data);
-      // TODO in real life, check origin! if (event.origin !== "http://enk.to:8080") return;
+      // TODO in real life, for security reasons, check origin! -> if (event.origin !== "http://enk.to:8080") return;
       console.log('data received from iframe', data);
       console.log('origin of message', event.origin);
       console.log('source of message', event.source);

diff --git a/locales/src/en/translation.json b/locales/src/en/translation.json
@@ -263,6 +263,12 @@
         },
         "validate": {
             "btn": "Validate"
+        },
+        "exit": {
+            "btn": "Finish Later"
+        },
+        "done": {
+            "btn": "I'm done"
         }
     },
     "geopicker": {

diff --git a/public/js/src/module/controller-webform-oc.js b/public/js/src/module/controller-webform-oc.js
@@ -1465,6 +1465,14 @@ function _setButtonEventHandlers(survey) {
         });
     }
 
+    const exitButton = document.querySelector('button#exit-form');
+    if (exitButton) {
+        exitButton.addEventListener('click', () => {
+            document.dispatchEvent(events.Exit());
+            _redirect(100);
+        });
+    }
+
     $('button#validate-form:not(.disabled)').click(function () {
         if (typeof form !== 'undefined') {
             const $button = $(this);
@@ -1627,6 +1635,11 @@ function _setButtonEventHandlers(survey) {
             rc.postEventAsMessageToParentWindow
         );
 
+        document.addEventListener(
+            events.Exit().type,
+            rc.postEventAsMessageToParentWindow
+        );
+
         form.view.html.addEventListener(events.PageFlip().type, postHeartbeat);
         form.view.html.addEventListener(events.AddRepeat().type, postHeartbeat);
         form.view.html.addEventListener(events.Heartbeat().type, postHeartbeat);

diff --git a/public/js/src/module/event.js b/public/js/src/module/event.js
@@ -24,6 +24,10 @@ events.Close = function () {
     return new CustomEvent('close', { bubbles: true });
 };
 
+events.Exit = function () {
+    return new CustomEvent('exit', { bubbles: true });
+};
+
 events.SignatureRequested = function () {
     return new CustomEvent('signature-request', { bubbles: true });
 };