Add Interested students

app/controllers/admin/minor.py

@@ -1,17 +1,30 @@
-from flask import render_template, g, abort
+from flask import render_template, g, abort, request, redirect, url_for
+
+from app.models.user import User
 
 from app.controllers.admin import admin_bp
 
-from app.logic.minor import getMinorInterest, getMinorProgress
+from app.logic.minor import getMinorInterest, getMinorProgress, toggleMinorInterest
 
-@admin_bp.route('/admin/cceMinor', methods=['GET'])
+@admin_bp.route('/admin/cceMinor', methods=['POST','GET'])
 def manageMinor():
+
     if not g.current_user.isAdmin:
         abort(403)
+
+    if request.method == 'POST':
+        interested_students = request.form.getlist('interestedStudents[]')
+
+        for i in interested_students:
+            user = User.get(username=i)
+            if not user.minorInterest:
+                toggleMinorInterest(i)    
+
 
     interestedStudentsList = getMinorInterest()
     interestedStudentEmailString = ';'.join([student['email'] for student in interestedStudentsList])
     sustainedEngagement = getMinorProgress()
+
 
     return render_template('/admin/cceMinor.html',
                             interestedStudentsList = interestedStudentsList,

app/static/js/manageVolunteers.js

@@ -91,7 +91,8 @@ $(document).ready(function() {
           url: `/addVolunteersToEvent/${eventId}`,
           type: "POST",
           data: {"selectedVolunteers": selectedVolunteers, "ajax": true},
-          success: function(s){
+          success:
+          function(s){
               location.reload()
           },
           error: function(request, status, error){

app/static/js/minorAdminPage.js

@@ -1,3 +1,4 @@
+import searchUser from './searchUser.js'
 function emailAllInterested(){
   // Read all student emails from the input as a string and put them in mailto format
   let interestedStudentEmails =  $("#interestedStudentEmails").val();
@@ -37,6 +38,65 @@ $(document).ready(function() {
 
 
 
+
+function getInterestedStudents() {
+  // get all the checkboxes and return a list of users who's
+  // checkboxes are selected
+  let checkboxesDisplayedInModal = $("#addInterestedStudentsModal input[type=checkbox]:checked")
+  let interestedStudentsList = []
+  checkboxesDisplayedInModal.each(function(index, checkbox){
+    interestedStudentsList.push(checkbox["value"])
+  })
+  return interestedStudentsList
+}
+
+function updateInterestedStudents(){
+  let interestedStudentList = getInterestedStudents()
+  let buttonContent = $("#addInterestedStudentsbtn").html()
+  if (interestedStudentList.length > 1) {
+    if (buttonContent.charAt(buttonContent.length-1) != "s") {
+      // make the button text plural if there are multiple users selected
+      $("#addInterestedStudentsbtn").html(buttonContent + "s")
+    }
+  } else if (buttonContent.charAt(buttonContent.length-1) == "s") {
+    // remove the s if it is plural and we have less than 2 volunteers
+    $("#addInterestedStudentsbtn").html(buttonContent.slice(0, -1))
+  }
+  // disable the submit button if there are no selectedCheckboxes
+  if (interestedStudentList.length == 0) {
+
+    $("#addInterestedStudentsbtn").prop("disabled", true)
+  } else {
+    $("#addInterestedStudentsbtn").prop("disabled", false)
+  }
+}
+
+var userlist = []
+function callback(selected) {
+  let user = $("#addStudentInput").val()
+  if (userlist.includes(selected["username"]) == false){
+      userlist.push(user)
+      let i = userlist.length;
+      $("#interestedStudentList").prepend("<li class id= 'interestedStudentElement"+i+"'> </li>")          
+      $("#interestedStudentElement"+i).append("<input  name = 'interestedStudents[]' type='checkbox' id= 'userlistCheckbox"+i+"' checked value='" + user +"' >  </input>",
+       "<label form for= 'userlistCheckbox"+i+"'>"+ selected["firstName"]+ " " + selected["lastName"] +"</label>")
+      $("#userlistCheckbox"+i).click(updateInterestedStudents)
+      updateInterestedStudents()
+  }
+  else {
+      msgFlash("User already selected.")
+  }
+}
+$("#addInterestedStudentsbtn").prop('disabled', true);
++
+$("#addInterestedStudentsModal").on("shown.bs.modal", function() {
+  $('#addStudentInput').focus();
+});
+
+$("#addStudentInput").on("input", function() {
+searchUser("addStudentInput", callback, true, "addInterestedStudentsModal");
+});
+
 $(document).ready(function() {
   $('#engagedStudentsTable').DataTable();
   $('#interestedStudentsTable').DataTable();

app/templates/admin/cceMinor.html

@@ -12,7 +12,6 @@
   {% endblock %}
 {% endblock %}
 {% block app_content %}
-
 <h1 class="text-center mb-5">CCE Minor Management</h1>
 <h2>CCE Minor Progress</h2>
 <table class="display" id="engagedStudentsTable">
@@ -50,6 +49,7 @@ <h2>CCE Minor Progress</h2>
         <h2>Interested Students</h2>
     </div>
     <div class="col-auto">
+        <a class="btn btn-success" role="button" href="#" data-bs-toggle="modal" data-bs-target="#addInterestedStudentsModal" style="margin:5px;">Add Students</a>
         <button class="btn btn-primary" id="emailAllInterested">Email All</button>
     </div>
 </div>
@@ -80,4 +80,36 @@ <h2>Interested Students</h2>
         <input id="interestedStudentEmails" hidden value="{{interestedStudentEmailString}}"/>
     </tbody>
 </table>
+
+<!-- #################  Modal  ################# -->
+
+<div class="modal fade float-start" id="addInterestedStudentsModal" tabindex="-1" aria-labelledby="addInterestedStudentsLbl" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{modalTitle}}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="input-group">
+            <div class="form-group input-group-x form-outline ui-widget" style="width:80%;">
+              <input type="input" id="addStudentInput" class="form-control" placeholder="Search" autocomplete="off"/>
+            </div>
+            <button type="button" class="btn btn-primary btn-sm">
+              <i class="bi bi-search ms-0"></i>
+            </button>
+          </div>         
+        </div>
+        <form action = "{{ url_for('admin.manageMinor')}}" method = 'POST'>
+            <ul 
+              class="list-unstyled mx-3 mt-2" id= "interestedStudentList">
+            </ul>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Close</button>
+            <button id="addInterestedStudentsbtn" type="submit" class="btn btn-success" disabled>Add Students</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 {% endblock %}