eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improved the ux of approve/reject flow

Browse Source 
Issue #271
This commit is contained in:
Anand Chitipothu
2021-12-05 01:29:48 +05:30
parent 0637b9c8f8
commit f68fc02e57
1 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
school/www/cohorts/subgroup.html
View File

@@ -81,7 +81,7 @@
<td>{{loop.index}}</td> <td>{{loop.index}}</td>
<td class="timestamp">{{r.creation}}</td> <td class="timestamp">{{r.creation}}</td>
<td>{{r.email}}</td> <td>{{r.email}}</td>
<td <td class="actions"
data-name="{{r.name}}" data-name="{{r.name}}"
data-email="{{r.email}}"> data-email="{{r.email}}">
<a class="action-approve" href="#">Approve</a> | <a class="action-reject" href="#">Reject</a></td> <a class="action-approve" href="#">Approve</a> | <a class="action-reject" href="#">Reject</a></td>
@@ -107,7 +107,7 @@
<td>{{loop.index}}</td> <td>{{loop.index}}</td>
<td class="timestamp">{{r.creation}}</td> <td class="timestamp">{{r.creation}}</td>
<td>{{r.email}}</td> <td>{{r.email}}</td>
<td <td class="actions"
data-name="{{r.name}}" data-name="{{r.name}}"
data-email="{{r.email}}"> data-email="{{r.email}}">
<a class="action-undo" href="#">Undo</a></td> <a class="action-undo" href="#">Undo</a></td>
@@ -157,40 +157,45 @@ $(function() {
}); });
$(".action-approve").click(function() { $(".action-approve").click(function() {
var el = $(this).parent().parent();
var name = $(this).parent().data("name"); var name = $(this).parent().data("name");
var email = $(this).parent().data("email"); var email = $(this).parent().data("email");
frappe.confirm( frappe.confirm(
`Are you sure to accept ${email} to this subgroup?`, `Are you sure to accept ${email} to this subgroup?`,
function() { 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() { $(".action-reject").click(function() {
var el = $(this).parent().parent();
var name = $(this).parent().data("name"); var name = $(this).parent().data("name");
var email = $(this).parent().data("email"); var email = $(this).parent().data("email");
frappe.confirm(`Are you sure to reject <strong>${email}</strong> from joining this subgroup?`, function() { 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() { $(".action-undo").click(function() {
var el = $(this).parent().parent();
var name = $(this).parent().data("name"); var name = $(this).parent().data("name");
var email = $(this).parent().data("email"); var email = $(this).parent().data("email");
frappe.confirm(`Are you sure to undo the rejection of <strong>${email}</strong>?`, function() { 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, { frappe.call(method, {
join_request: join_request, join_request: join_request,
}) })
.then(r => { .then(r => {
if (r.message.ok) { if (r.message.ok) {
window.location.reload(); $(elem)
.addClass(classname)
.find("td.actions").html(label);
} }
else { else {
frappe.msgprint(r.message.error); frappe.msgprint(r.message.error);
@@ -200,3 +205,21 @@ $(function() {
}); });
</script> </script>
{% endblock %} {% 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 %}