lms/school/www/cohorts/subgroup.html

{% extends "www/cohorts/base.html" %}
{% block title %} Subgroup {{subgroup.title}} - {{ course.title }} {% endblock %}

{% block page_content %}
    <h2>{{subgroup.title}} <span class="badge badge-secondary">Subgroup</span></h2>

    <ul class="nav nav-tabs">
      {{ render_navitem("Mentors", "/mentors", stats.mentors, page=="mentors")}}
      {{ render_navitem("Students", "/students", stats.students, page=="students")}}
      {% if is_admin %}
        {{ render_navitem("Admin", "/admin", stats.join_requests, page=="admin")}}
      {% endif %}
      </ul>
    <div class="my-5">
    {% if page == "info" %}
      {{ render_info() }}
    {% elif page == "mentors" %}
      {{ render_mentors() }}
    {% elif page == "students" %}
      {{ render_students() }}
    {% elif page == "admin" %}
      {{ render_join_requests() }}
    {% endif %}
    </div>
{% endblock %}

{% macro render_info() %}
    {% if is_admin %}
    {% endif %}
{% endmacro %}

{% macro render_mentors() %}
    <h5>Mentors</h5>
    {% set mentors = subgroup.get_mentors() %}
    {% if mentors %}
      <div class="mentors-section">
      {% for m in mentors %}
        {{ widgets.MemberCard(member=m, show_course_count=False, dimension_class="") }}
      {% endfor %}
      </div>
    {% else %}
      <em>None found.</em>
    {% endif %}
{% endmacro %}


{% macro render_students() %}
  {% set students = subgroup.get_students() %}
  {% if students %}
  <div class="mentors-section">
    {% for student in students %}
      {{ widgets.MemberCard(member=student, show_course_count=False, dimension_class="") }}
    {% endfor %}
  </div>
  {% else %}
    <em>None found.</em>
  {% endif %}
{% endmacro %}


{% macro render_join_requests() %}
  <h5>Invite Link</h5>
  {% set link = subgroup.get_invite_link() %}
  <p><a href="{{ link }}" id="invite-link">{{link}}</a>
  <br>
  <a class="btn btn-seconday btn-sm" id="copy-to-clipboard">Copy to Clipboard</a>
  </p>

{% set join_requests = subgroup.get_join_requests() %}
  <h5>Pending Requests</h5>
  {% if join_requests %}
  <table class="table">
    <tr>
      <th>#</th>
      <th>When</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
    {% for r in join_requests %}
    <tr>
        <td>{{loop.index}}</td>
        <td class="timestamp">{{r.creation}}</td>
        <td>{{r.email}}</td>
        <td
          data-name="{{r.name}}"
          data-email="{{r.email}}">
          <a class="action-approve" href="#">Approve</a> | <a class="action-reject" href="#">Reject</a></td>
    </tr>
    {% endfor %}
  </table>
  {% else %}
    <p><em>There are no pending join requests.</em></p>
  {% endif %}
  {% set rejected_requests = subgroup.get_join_requests(status="Rejected") %}

  <h5>Rejected Requests</h5>
  {% if rejected_requests %}
    <table class="table">
      <tr>
        <th>#</th>
        <th>When</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    {% for r in rejected_requests %}
      <tr>
        <td>{{loop.index}}</td>
        <td class="timestamp">{{r.creation}}</td>
        <td>{{r.email}}</td>
        <td
          data-name="{{r.name}}"
          data-email="{{r.email}}">
          <a class="action-undo" href="#">Undo</a></td>
      </tr>
    {% endfor %}
    </table>
  {% else %}
    <p><em>There are no rejected requests.</em></p>
  {% endif %}
{% endmacro %}

{% macro render_navitem(title, link, count, active) %}
  <li class="nav-item">
    <a
      class="nav-link {{ 'active' if active }}"
      href="/courses/{{course.name}}/subgroups/{{cohort.slug}}/{{subgroup.slug}}{{link}}"
    >{{title}}
    {% if count != -1 %}
      <span
        class="badge {{'badge-primary' if active else 'badge-secondary'}}"
      >{{count}}</span>
    {% endif %}
    </a>
  </li>
{% endmacro %}


{% block script %}

<script type="text/javascript">
$(function() {
  $("#copy-to-clipboard").click(function() {
    var invite_link = $("#invite-link").text();
    navigator.clipboard.writeText(invite_link)
    .then(() => {
      $("#copy-to-clipboard").text("Copied!");
      setTimeout(
        () => $("#copy-to-clipboard").text("Copy to Clipboard"),
        500);
     });
  });

  $(".timestamp"). each(function() {
    var t = moment($(this).text());
    var dt = t.from(moment.now());
    $(this).text(dt);
  });

  $(".action-approve").click(function() {
    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);
      }
    );
  });

  $(".action-reject").click(function() {
    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);
    });
  });

  $(".action-undo").click(function() {
    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);
    });
  });

  function run_action(method, join_request) {
    frappe.call(method, {
      join_request: join_request,
    })
    .then(r => {
      if (r.message.ok) {
        window.location.reload();
      }
      else {
        frappe.msgprint(r.message.error);
      }
    });
  }
});
</script>
{% endblock %}