From f68fc02e570a3ec9494159810d514325b53525a5 Mon Sep 17 00:00:00 2001
From: Anand Chitipothu <anandology@gmail.com>
Date: Sun, 5 Dec 2021 01:29:48 +0530
Subject: [PATCH] style: improved the ux of approve/reject flow

Issue #271
---
 school/www/cohorts/subgroup.html | 37 ++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/school/www/cohorts/subgroup.html b/school/www/cohorts/subgroup.html
index eca37463..ae8d3fba 100644
--- a/school/www/cohorts/subgroup.html
+++ b/school/www/cohorts/subgroup.html
@@ -81,7 +81,7 @@
         <td>{{loop.index}}</td>
         <td class="timestamp">{{r.creation}}</td>
         <td>{{r.email}}</td>
-        <td
+        <td class="actions"
           data-name="{{r.name}}"
           data-email="{{r.email}}">
           <a class="action-approve" href="#">Approve</a> | <a class="action-reject" href="#">Reject</a></td>
@@ -107,7 +107,7 @@
         <td>{{loop.index}}</td>
         <td class="timestamp">{{r.creation}}</td>
         <td>{{r.email}}</td>
-        <td
+        <td class="actions"
           data-name="{{r.name}}"
           data-email="{{r.email}}">
           <a class="action-undo" href="#">Undo</a></td>
@@ -157,40 +157,45 @@ $(function() {
   });
 
   $(".action-approve").click(function() {
+    var el = $(this).parent().parent();
     var name = $(this).parent().data("name");
     var email = $(this).parent().data("email");
 
     frappe.confirm(
       `Are you sure to accept ${email} to this subgroup?`,
       function() {
-        run_action("school.lms.api.approve_cohort_join_request", name);
+        run_action("school.lms.api.approve_cohort_join_request", name, el, "approved", "Approved");
       }
     );
   });
 
   $(".action-reject").click(function() {
+    var el = $(this).parent().parent();
     var name = $(this).parent().data("name");
     var email = $(this).parent().data("email");
     frappe.confirm(`Are you sure to reject <strong>${email}</strong> from joining this subgroup?`, function() {
-      run_action("school.lms.api.reject_cohort_join_request", name);
+      run_action("school.lms.api.reject_cohort_join_request", name, el, "rejected", "Rejected!");
     });
   });
 
   $(".action-undo").click(function() {
+    var el = $(this).parent().parent();
     var name = $(this).parent().data("name");
     var email = $(this).parent().data("email");
     frappe.confirm(`Are you sure to undo the rejection of <strong>${email}</strong>?`, function() {
-      run_action("school.lms.api.undo_reject_cohort_join_request", name);
+      run_action("school.lms.api.undo_reject_cohort_join_request", name, el, "undo-reject", "Reject Undone!");
     });
   });
 
-  function run_action(method, join_request) {
+  function run_action(method, join_request, elem, classname, label) {
     frappe.call(method, {
       join_request: join_request,
     })
     .then(r => {
       if (r.message.ok) {
-        window.location.reload();
+        $(elem)
+          .addClass(classname)
+          .find("td.actions").html(label);
       }
       else {
         frappe.msgprint(r.message.error);
@@ -200,3 +205,21 @@ $(function() {
 });
 </script>
 {% endblock %}
+
+{% block style %}
+<style type="text/css">
+tr.approved {
+  background:#c3e6cb;
+  color: #155724;
+}
+
+tr.rejected {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+tr.undo-reject {
+  background:#d6d8d9;
+}
+</style>
+{% endblock %}