HYP-300 - Improved and fixed UI updates when completing a sign-up step

app/projects/api.py

@@ -15,6 +15,7 @@
 from django.http import QueryDict
 from django.shortcuts import get_object_or_404
 from django.shortcuts import redirect
+from django.shortcuts import render
 from dal import autocomplete
 
 from contact.views import email_send
@@ -774,7 +775,7 @@ def submit_user_permission_request(request):
 
     # Check if there are administrators to notify.
     if project.project_supervisors is None or project.project_supervisors == "":
-        return HttpResponse(200)
+        return render(request, 'projects/signup/request-access.html', {"panel": {"additional_context": {"requested_access": True}}})
 
     # Convert the comma separated string of emails into a list.
     supervisor_emails = project.project_supervisors.split(",")
@@ -798,7 +799,7 @@ def submit_user_permission_request(request):
     except Exception as e:
         logger.exception(e)
 
-    return HttpResponse(200)
+    return render(request, 'projects/signup/request-access.html', {"panel": {"additional_context": {"requested_access": True}}})
 
 
 

app/projects/views.py

@@ -603,19 +603,27 @@ def setup_panel_request_access(self, context):
         if not self.project.requires_authorization or self.project.has_teams:
             return
 
-        # This step is never completed, it is usually the last step.
-        step_status = self.get_step_status('request_access', False)
-
         # If the user does not have a participant record, they have not yet requested access.
         requested_access = self.participant is not None
 
+        # Check for a prior current step which is possible even when this step is complete
+        # due to rejection of signed agreement forms
+        prior_current_step = next((s for s in context["setup_panels"] if s.status == SIGNUP_STEP_CURRENT_STATUS ), None)
+
+        # This step is never completed, it is usually the last step.
+        step_status = self.get_step_status('request_access', requested_access and not prior_current_step)
+
+        # Always show expanded when completed, unless a prior step is current
+        expanded = requested_access and not prior_current_step
+
         panel = DataProjectSignupPanel(
             title='Request Access',
             bootstrap_color='default',
             template='projects/signup/request-access.html',
             status=step_status,
             additional_context={
-                'requested_access': requested_access
+                'requested_access': requested_access,
+                'expanded': expanded,
             }
         )
 

app/templates/projects/project.html

@@ -69,7 +69,7 @@ <h2 class="panel-title">
                     </div>
                 </h2>
             </div>
-            {% if panel.status == SIGNUP_STEP_CURRENT_STATUS or panel.status == SIGNUP_STEP_PERMANENT_STATUS %}
+            {% if panel.status == SIGNUP_STEP_CURRENT_STATUS or panel.status == SIGNUP_STEP_PERMANENT_STATUS or panel.additional_context.expanded %}
             <div class="panel-body">
                 {% include panel.template %}
             </div>
@@ -235,8 +235,15 @@ <h4 class="modal-title" id="signed-agreement-form-completed-modal-title">Tasks</
         contentType: false
       }).done(function(){
 
+        // Notify
         notify('success', "Agreement form submitted!", 'thumbs-up');
-        submit_button.replaceWith("<h3><span class='label label-success'>Form saved.</span></h3>");
+
+        // Reset button and update to indicate success
+        $(submit_button).button("reset");
+        setTimeout(function() {
+          // Do this in a timeout since Bootstrap's 'button' function breaks jQuery methods in same iteration
+          $(submit_button).html("Form Saved &nbsp;<i class='fa fa-check'></i>").prop("disabled", "disabled").toggleClass("btn-primary btn-success");
+        }, 0);
 
         // Refresh the page so the user does not see this button again
         setTimeout(function(){
@@ -299,8 +306,16 @@ <h4 class="modal-title" id="signed-agreement-form-completed-modal-title">Tasks</
         $.post($(this).attr('action'), formFields + "&" + $('input[name=agreement_text]').serialize(), function(res){
             // $("#loading").hide();
         }).done(function() {
-            notify('success', "Agreement form submitted!", 'thumbs-up');
-            submit_button.replaceWith("<h3><span class='label label-success'>Form saved.</span></h3>");
+
+          // Notify
+          notify('success', "Agreement form submitted!", 'thumbs-up');
+
+          // Reset button and update to indicate success
+          $(submit_button).button("reset");
+          setTimeout(function() {
+            // Do this in a timeout since Bootstrap's 'button' function breaks jQuery methods in same iteration
+            $(submit_button).html("Form Saved &nbsp;<i class='fa fa-check'></i>").prop("disabled", "disabled").toggleClass("btn-primary btn-success");
+          }, 0);
 
             // Refresh the page so the user does not see this button again
             setTimeout(function(){

app/templates/projects/signup/request-access.html

@@ -3,7 +3,10 @@
 {% if panel.additional_context.requested_access %}
     Your request is being reviewed. Please use the 'Contact Us' link for any further questions.
 {% else %}
-    <form name="access_request_form" action="{% url 'projects:submit_user_permission_request' %}" method="post">
+    <form name="access_request_form" method="post" enctype="multipart/form-data"
+          ic-post-to="{% url 'projects:submit_user_permission_request' %}"
+          ic-on-success="onAccessRequestSuccess()"
+          ic-on-error="onAccessRequestError()">
         <fieldset>
             <div class="row">
                 <div class="col-md-12">
@@ -16,9 +19,9 @@
             <div class="row">
                 <div class="col-md-12">
                     <div class="form-group">
-                        <button type="submit" class="btn btn-primary">Request Access</button>
-                        <img name="loading" id="loading" src="{% static 'gears.svg' %}" style="display:none;">
-                        <div id="status" style="color: green; font-size: 1.5em;"></div>
+                        <button id="request-access-submit-button" type="submit" class="btn btn-primary">Request Access
+                            <span id="request-access-indicator" style="display: none; margin-left: 5px;" class="ic-indicator fa fa-spinner fa-spin"></span>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -28,22 +31,22 @@
 {% endif %}
 
 <script type="application/javascript">
-    $('form[name=access_request_form]').submit(function(e){
-        e.preventDefault();
-
-        $("#loading").show();
-
-        $.post($(this).attr('action'), $(this).serialize(), function(res){
-            $("#loading").hide();
-        }).done(function() {
-            $("#status").text("Access request submitted! Refreshing page...");
-
-            // Refresh the page so the user does not see the Request Access button again
-            setTimeout(function(){
-                location.reload();
-            },2000);
-        }).fail(function() {
-            $("#status").text("Access request failed.");
-        });
-    });
+
+  function onAccessRequestSuccess() {
+
+    // Update button
+    $('#request-access-submit-button').html('Request submitted!&nbsp;&nbsp;<i class=\'fa fa-check\'></i>').prop('disabled', true).toggleClass('btn-primary btn-success')
+
+    // Notify
+    notify('success', 'Access request submitted', 'thumbs-up');
+
+    // Update panel class
+    $(".container").find(".current-step-header").toggleClass("current-step-header completed-step-header");
+  }
+
+  function onAccessRequestError() {
+
+    // Notify
+    notify('danger', 'Access request failed, please contact support or try again', 'exclamation-sign');
+  }
 </script>