From a13d2873d8e893c20945cc10bfd1a98fe4a35228 Mon Sep 17 00:00:00 2001 From: kneeraj2000 Date: Mon, 3 Jul 2023 23:11:34 +0530 Subject: [PATCH 1/2] feat: adds spinners on loading for buttons --- static/js/accessRequestForm.js | 17 +++++++++ static/js/addUserToGroup.js | 17 +++++++++ static/js/createNewGroup.js | 19 +++++++++- static/js/failureActions.js | 34 ++++++++++++++++-- static/js/groupAccessRequestForm.js | 17 +++++++++ static/js/pendingRequests.js | 36 +++++++++++++++---- templates/EnigmaOps/accessRequestForm.html | 14 ++++++-- templates/EnigmaOps/addUserToGroupForm.html | 12 +++++-- templates/EnigmaOps/createNewGroup.html | 11 ++++-- templates/EnigmaOps/failureActions.html | 26 ++++++++++---- .../EnigmaOps/groupAccessRequestForm.html | 11 ++++-- templates/EnigmaOps/pendingRequests.html | 27 +++++++++----- 12 files changed, 208 insertions(+), 33 deletions(-) diff --git a/static/js/accessRequestForm.js b/static/js/accessRequestForm.js index 0dc56982..db922ee6 100644 --- a/static/js/accessRequestForm.js +++ b/static/js/accessRequestForm.js @@ -1,9 +1,24 @@ let submitted_forms = 0 +function handleButtonLoading(elem, status) { + if(status) { + elem.attr('disabled', true); + elem.html(""); + let newSpan = $("#submitButtonLoading").clone(true, true); + newSpan.removeClass("collapse"); + newSpan.appendTo(elem); + } else { + elem.attr('disabled', false); + elem.html("Submit request"); + } +} + function submitRequest(event, elem, multi, access_tag, accesses="") { event.preventDefault() form = $(elem) let actionUrl = form.attr('action'); + let button = $(form.find("button#submitButton")); + handleButtonLoading(button, true); $.ajax({ type: "POST", url: actionUrl, @@ -15,6 +30,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") { else { showNotification("failed", "Failed to send the request", "Something went wrong"); } + handleButtonLoading(button, false); } }).done(function(data, statusText, xhr) { let status = xhr.status; @@ -36,6 +52,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") { showRedirectModal("Request submitted"); } } + handleButtonLoading(button, false); }) } diff --git a/static/js/addUserToGroup.js b/static/js/addUserToGroup.js index 86f37b8e..8fb30061 100644 --- a/static/js/addUserToGroup.js +++ b/static/js/addUserToGroup.js @@ -113,10 +113,25 @@ const handleUserSelection = (elem) => { updateSelectedUser(); }; +function handleButtonLoading(elem, status) { + if(status) { + elem.attr('disabled', true); + elem.html(""); + let newSpan = $("#submitButtonLoading").clone(true, true); + newSpan.removeClass("collapse"); + newSpan.appendTo(elem); + } else { + elem.attr('disabled', false); + elem.html("Submit request"); + } +} + function submitRequest(event, elem) { event.preventDefault(); form = $(elem); let actionUrl = form.attr('action'); + let button = $(form.find("button#submitButton")); + handleButtonLoading(button, true); $.ajax({ type: "POST", url: actionUrl, @@ -128,6 +143,7 @@ function submitRequest(event, elem) { else { showNotification("failed", "Failed to send the request", "Something went wrong"); } + handleButtonLoading(button, false); } }).done(function(data, statusText, xhr) { let status = xhr.status; @@ -137,6 +153,7 @@ function submitRequest(event, elem) { else { showRedirectModal("Request submitted"); } + handleButtonLoading(button, false); }) }; diff --git a/static/js/createNewGroup.js b/static/js/createNewGroup.js index 9d5865f3..3d9bd4c0 100644 --- a/static/js/createNewGroup.js +++ b/static/js/createNewGroup.js @@ -197,6 +197,19 @@ function showRedirectModal(title, message="") { $("#modal-message").html(message); } +function handleButtonLoading(elem, status) { + if(status) { + elem.attr('disabled', true); + elem.html(""); + let newSpan = $("#submitButtonLoading").clone(true, true); + newSpan.removeClass("collapse"); + newSpan.appendTo(elem); + } else { + elem.attr('disabled', false); + elem.html("Submit request"); + } +} + function submitRequest() { const members = $('#member-selection-table').children('tr'); const emails = []; @@ -219,6 +232,8 @@ function submitRequest() { return; } else { + let button = $('#submitNewGroup'); + handleButtonLoading(button, true); $.ajax({ url: urlBuilder, type: "POST", @@ -231,7 +246,8 @@ function submitRequest() { "selectAllUsers": selectAllUsers, }, success: function (result) { - showRedirectModal("Request Submitted", result.status.msg) + showRedirectModal("Request Submitted", result.status.msg); + handleButtonLoading(button, false); }, error: function (XMLHttpRequest, textStatus, errorThrown) { if(XMLHttpRequest.responseJSON) { @@ -240,6 +256,7 @@ function submitRequest() { } else { showNotification("failed", "Something when wrong while creating the group, contact admin.", "Internal Error") } + handleButtonLoading(button, false); } }); } diff --git a/static/js/failureActions.js b/static/js/failureActions.js index bbb5542d..69dc5551 100644 --- a/static/js/failureActions.js +++ b/static/js/failureActions.js @@ -1,5 +1,31 @@ -function sendAPICall(requestId, url, messageId, desc) { - url =`${url}?requestId=${requestId}` +function handleButtonLoading(elem, status) { + let parentElem = $(elem.parentElem); + let text = $(elem).html(); + let button = $(elem); + if(status) { + parentElem.find("button#resolveButton").attr('disabled', true); + parentElem.find("button#declineButton").attr('disabled', true); + parentElem.find("button#actionButton").attr('disabled', true); + button.html(""); + let newSpan; + if (text == "Resolve") { + newSpan = $("#resolveButtonLoading").clone(true, true); + } else { + newSpan = $("#actionButtonLoading").clone(true, true); + } + newSpan.removeClass("collapse"); + newSpan.appendTo(button); + } else { + parentElem.find("button#resolveButton").attr('disabled', false); + parentElem.find("button#declineButton").attr('disabled', false); + parentElem.find("button#actionButton").attr('disabled', false); + button.html(text); + } +} + +function sendAPICall(elem, requestId, url, messageId, desc) { + url =`${url}?requestId=${requestId}`; + handleButtonLoading(elem, true); $.ajax({ url: url, error: (xhr, statusText, data) => { @@ -9,10 +35,12 @@ function sendAPICall(requestId, url, messageId, desc) { else { showNotification("failed", "Failed to send the request", "Something went wrong"); } + handleButtonLoading(elem, false); } }).done((data) => { showNotification("success", data["status_list"][0]["title"], data["status_list"][0]["msg"]); - updateStatus(desc, messageId, requestId) + updateStatus(desc, messageId, requestId); + handleButtonLoading(elem, false); }) } diff --git a/static/js/groupAccessRequestForm.js b/static/js/groupAccessRequestForm.js index 2b52d423..83dbf1f3 100644 --- a/static/js/groupAccessRequestForm.js +++ b/static/js/groupAccessRequestForm.js @@ -1,9 +1,24 @@ let submitted_forms = 0 +function handleButtonLoading(elem, status) { + if(status) { + elem.attr('disabled', true); + elem.html(""); + let newSpan = $("#submitButtonLoading").clone(true, true); + newSpan.removeClass("collapse"); + newSpan.appendTo(elem); + } else { + elem.attr('disabled', false); + elem.html("Submit request"); + } +} + function submitRequest(event, elem, multi, access_tag, accesses="") { event.preventDefault() form = $(elem) let actionUrl = form.attr('action'); + let button = $(form.find("button#submitButton")); + handleButtonLoading(button, true); $.ajax({ type: "POST", url: actionUrl, @@ -15,6 +30,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") { else { showNotification("failed", "Failed to send the request", "Something went wrong"); } + handleButtonLoading(button, false); } }).done(function(data, statusText, xhr) { let status = xhr.status; @@ -36,6 +52,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") { showRedirectModal("Request submitted"); } } + handleButtonLoading(button, false); }) } diff --git a/static/js/pendingRequests.js b/static/js/pendingRequests.js index 9a99dfdd..23b76c8d 100644 --- a/static/js/pendingRequests.js +++ b/static/js/pendingRequests.js @@ -1,7 +1,7 @@ function showDeclineModal(request_id, action, messageId) { $('#decline_modal').show(); $("#declineHeading").html("

"+request_id+"

") - $('#decline_modal').find("form").attr("onsubmit", `clickDeclineFinalButton('${request_id}', '${action}', '${messageId}');return false`) + $('#decline_modal').find("form").attr("onsubmit", `clickDeclineFinalButton(this, '${request_id}', '${action}', '${messageId}');return false`) } function closeDeclineModal() { @@ -10,20 +10,24 @@ function closeDeclineModal() { $('#decline_modal').hide(); } -const clickDeclineFinalButton = (requestId, action, messageId) => { +const clickDeclineFinalButton = (elem, requestId, action, messageId) => { closeDeclineModal(); const declineReason = $("#declineReasonText").val(); - const urlBuilder = `/decline/${action}/${requestId}` + const urlBuilder = `/decline/${action}/${requestId}`; + let button = $(elem); + handleButtonLoading(button, true); $.ajax({ url: urlBuilder, data: {"reason": declineReason}, error: function (XMLHttpRequest, textStatus, errorThrown) { if(XMLHttpRequest.responseJSON) { - showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"]) + showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"]); } + handleButtonLoading(button, true, "Decline"); } }).done(function (data) { - updateStatus(false, messageId, requestId) + updateStatus(false, messageId, requestId); + handleButtonLoading(button, true, "Decline"); }) } @@ -43,6 +47,19 @@ function setDeclineReason(reason) { $("#declineReasonText").val(reason); } +function handleButtonLoading(elem, status, text=null) { + if(status) { + elem.attr('disabled', true); + elem.html(""); + let svgElem = $("#buttonLoading").clone(true, true); + svgElem.removeClass("collapse"); + svgElem.appendTo(elem); + } else { + elem.attr('disabled', false); + elem.html(text); + } +} + function updateStatus(type, id, requestId) { const newMessageBox = $("#message-box").clone(true, true); const item = $(`#${id}`); @@ -62,16 +79,23 @@ function updateStatus(type, id, requestId) { $(`#${id}-actions`).hide(); } -function approveAccess(requestId, action, messageId) { +function approveAccess(elem, requestId, action, messageId) { const urlBuilder = `/accept_bulk/${action}?requestId=${encodeURIComponent(requestId)}` + let button = $(elem); + handleButtonLoading(button, true); + $(elem.parentElement).find("button#declineButton").attr('disabled', true); $.ajax({ url: urlBuilder, error: function (XMLHttpRequest, textStatus, errorThrown) { if(XMLHttpRequest.responseJSON) { showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"]) } + handleButtonLoading(button, false, "Accept"); + $(elem.parentElement).find("button#declineButton").attr('disabled', false); } }).done(() => { updateStatus(true, messageId, requestId); + handleButtonLoading(button, false, "Accept"); + $(elem.parentElement).find("button#declineButton").attr('disabled', false); }) } diff --git a/templates/EnigmaOps/accessRequestForm.html b/templates/EnigmaOps/accessRequestForm.html index d936596f..3a5e98bb 100644 --- a/templates/EnigmaOps/accessRequestForm.html +++ b/templates/EnigmaOps/accessRequestForm.html @@ -89,7 +89,9 @@

Module details

- + @@ -119,10 +121,18 @@

{{ each_access.formDesc }} Modul - + {% endfor %} {% endif %} + + + + +
-
+ {% csrf_token %} @@ -175,7 +175,7 @@

All group members

- + @@ -183,6 +183,14 @@

All group members

{% include "EnigmaOps/shared/redirect_to_dashboard.html" %} + + + + + + {% include "EnigmaOps/shared/notificationTemplate.html" %} {% endblock %} diff --git a/templates/EnigmaOps/createNewGroup.html b/templates/EnigmaOps/createNewGroup.html index 7b36e15e..13882743 100644 --- a/templates/EnigmaOps/createNewGroup.html +++ b/templates/EnigmaOps/createNewGroup.html @@ -215,11 +215,10 @@

Please select members from
-
@@ -244,6 +243,14 @@

Please select members from {% include "EnigmaOps/shared/redirect_to_dashboard.html" %} + + + + + + {% include "EnigmaOps/shared/notificationTemplate.html" %} {% endblock %} diff --git a/templates/EnigmaOps/failureActions.html b/templates/EnigmaOps/failureActions.html index 8dcc9785..b0180b17 100644 --- a/templates/EnigmaOps/failureActions.html +++ b/templates/EnigmaOps/failureActions.html @@ -101,9 +101,9 @@

{{request.request_id}}

- - - + + +
{% endfor %} @@ -171,9 +171,9 @@

{{request.request_id}}

- - - + + +
{% endfor %} @@ -201,6 +201,20 @@

The request - {{eachAccessDetails.requestId}} is + + + + + + + + + + + + {% include "EnigmaOps/shared/notificationTemplate.html" %} diff --git a/templates/EnigmaOps/groupAccessRequestForm.html b/templates/EnigmaOps/groupAccessRequestForm.html index 573f07c1..0ef1d386 100644 --- a/templates/EnigmaOps/groupAccessRequestForm.html +++ b/templates/EnigmaOps/groupAccessRequestForm.html @@ -93,7 +93,7 @@

Module details

- + @@ -121,11 +121,18 @@

{{ each_access.formDesc }} Modul - + {% endfor %} {% endif %} {% endif %} + + + + + {% endfor %} @@ -173,8 +173,8 @@

{{group.groupRequest.group_id}}
- - + +
{% endfor %} @@ -230,8 +230,8 @@

{{member.membership_id}}

- - + +
{% endfor %} @@ -305,8 +305,8 @@

{{eachRequest.club_id}}

- - + +
@@ -356,7 +356,7 @@

{{eachRequest.club_id}}

- +
@@ -380,6 +380,15 @@

The request - {{eachAccessDetails.requestId}} is + + + + + + + {% include "EnigmaOps/shared/notificationTemplate.html" %} From 38e2664708ba4b47a2a988a20789b2b512b8f33b Mon Sep 17 00:00:00 2001 From: kneeraj2000 Date: Mon, 3 Jul 2023 23:45:56 +0530 Subject: [PATCH 2/2] fix: fixes stylings of buttons --- static/js/failureActions.js | 2 +- templates/EnigmaOps/failureActions.html | 18 +++++++++--------- templates/EnigmaOps/pendingRequests.html | 8 ++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/static/js/failureActions.js b/static/js/failureActions.js index 69dc5551..f314fa55 100644 --- a/static/js/failureActions.js +++ b/static/js/failureActions.js @@ -1,5 +1,5 @@ function handleButtonLoading(elem, status) { - let parentElem = $(elem.parentElem); + let parentElem = $(elem.parentElement); let text = $(elem).html(); let button = $(elem); if(status) { diff --git a/templates/EnigmaOps/failureActions.html b/templates/EnigmaOps/failureActions.html index b0180b17..0ad6616f 100644 --- a/templates/EnigmaOps/failureActions.html +++ b/templates/EnigmaOps/failureActions.html @@ -59,7 +59,7 @@

Failure Actions

{% for request in grant_failures %}

{{request.request_id}}

- +
@@ -91,7 +91,7 @@

{{request.request_id}}

Requested by {{ request.user_identity.user }}
-
+
  • Resolve Instruction - check logs or email for issue. Run approval again.
    • @@ -102,8 +102,8 @@

    {{request.request_id}}

    - - + +
{% endfor %} @@ -129,7 +129,7 @@

{{request.request_id}}

{% for request in revoke_failures %}

{{request.request_id}}

- +
@@ -161,7 +161,7 @@

{{request.request_id}}

Requested by {{ request.user_identity.user }}
-
+
  • Resolve Instruction - check logs or email for issue. Run approval again.
    • @@ -171,9 +171,9 @@

    {{request.request_id}}

- - - + + +
{% endfor %} diff --git a/templates/EnigmaOps/pendingRequests.html b/templates/EnigmaOps/pendingRequests.html index 16086de6..2c37b92d 100644 --- a/templates/EnigmaOps/pendingRequests.html +++ b/templates/EnigmaOps/pendingRequests.html @@ -115,7 +115,7 @@

{{group.group_club_id}}

- +
{% endfor %} @@ -174,7 +174,7 @@

{{group.groupRequest.group_id}}
- +

{% endfor %} @@ -231,7 +231,7 @@

{{member.membership_id}}

- +
{% endfor %} @@ -306,7 +306,7 @@

{{eachRequest.club_id}}

- +