Add grouped user UI to application page

pasapp/static/pasapp/css/applications.css

@@ -86,3 +86,43 @@
 .comment-date {
     opacity: 0.7;
 }
+
+.user-box {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: left;
+    margin-bottom: 1em;
+}
+
+.user-bubble {
+    display: inline-block;
+    font-weight: 500;
+    width: fit-content;
+
+    background-color: aliceblue;
+    border: 1px cornflowerblue solid;
+
+    border-radius: 4px;
+
+    padding: 4px;
+    margin: 0px 4px;
+}
+
+.user-bubble:hover {
+    border-style: dashed;
+}
+
+#user-error-notifier {
+    background-color: indianred;
+    color: white;
+    border: 1px crimson solid;
+    padding: 4px;
+    border-radius: 4px;
+    display: inline-block;
+    margin-bottom: 1em;
+}
+
+#user-error-notifier.hidden {
+    display: none;
+}
\ No newline at end of file

pasapp/static/pasapp/js/group_edit.js

+const userSet = new Set();
+
 function addUser() {
     const input = document.getElementById("user-entry");
     const userBox = document.getElementById("user-box");
     const errorBox = document.getElementById("user-error-notifier")
 
-    const currentInput = input.value;
-    if (students.has(currentInput)) {
-        userBox.innerHTML += "<p>" + currentInput + "</p>";
+    const username = input.value;
     input.value = "";
+
+    if (userSet.has(username)) {
+        errorBox.classList.remove('hidden');
+        errorBox.innerHTML = `⚠ ${username} has already been added.`;
+        return;
+    }
+
+    fetch(`/api/get_student/${username}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                errorBox.classList.remove('hidden');
+                errorBox.innerHTML = "⚠ " + data.error;
             } else {
-        errorBox.innerHTML = "(!) Could not find a student with that name.";
+                userBox.innerHTML += `<div class="user-bubble" onclick="removeUser(this,'${username}')">${data.name}</div>`;
+                userSet.add(username);
+                errorBox.classList.add('hidden');
             }
+        })
+        .catch(e => {
+            errorBox.classList.remove('hidden');
+            errorBox.innerHTML = `⚠ student "${username}" was not found.`;
+        });
+}
+
+function removeUser(item, username) {
+    userSet.delete(username);
+    item.remove();
+    updateForm()
+}
+
+function updateForm() {
+    const userForm = document.getElementById("id_additional_students");
+    userForm.value = [...userSet].join(' ');
 }
\ No newline at end of file

pasapp/static/pasapp/js/tag_edit.js

@@ -20,7 +20,6 @@ function addTag(list) {
                 return;
             }
         }
-        console.log("hello?");
         // If the category was not found
         let newInner = `<ul class="tagCategory ${tagCategorySlug}" meta="${tagCategory}">`
         newInner += `<h3>${tagCategory}</h3>`

pasapp/templates/pasapp/pages/create_application.html

 {% extends 'pasapp/templates/base_template.html' %} 
+{% load static %}
 
 {% block title %} Applying for {{project.title}} {% endblock %} 
 {% block imports %}
-<script>
-  const students = new Set();
-  {% for student in students %}
-  students.add({{student.username}})
-  {% endfor %}
-</script>
 <script src="{% static 'pasapp/js/group_edit.js' %}"></script>
 {% endblock %}
 {% block content %} 
@@ -16,9 +11,9 @@
     <form action="/project/{{project.id}}/apply/" method="post">
       {% csrf_token %} {{ form.as_p }}
       <p>Additional group members:
-        <input type="text" id="user-entry" placeholder="Type another student's name here..."><button type="button" onclick="addUser()">Add</button>
+        <input type="text" id="user-entry" placeholder="Enter a username..."><button type="button" onclick="addUser()">Add</button>
       </p>
-      <div id="user-error-notifier"></div>
+      <div id="user-error-notifier" class="hidden"></div>
       <div id="user-box" class="user-box"></div>
       <input type="submit" value="Apply" />
     </form>

pasapp/urls.py

@@ -32,5 +32,6 @@ urlpatterns = [
           views.update_professor_status, name='update_professor_status'),
      path('applications/add_comment/', views.add_comment, name='add_comment'),
      path('user/<str:username>/', views.profile_page, name='profile_page'),
+     path('api/get_student/<str:username>', views.get_student, name='get_student'),
      url(r'^favicon\.ico$', RedirectView.as_view(url='/static/pasapp/favicon.ico')),
 ]

pasapp/views.py

@@ -3,7 +3,7 @@ from django.contrib.auth.decorators import login_required, user_passes_test
 from django.contrib.auth.forms import AuthenticationForm
 from django.http.response import HttpResponseBadRequest, HttpResponseForbidden, HttpResponseServerError
 from django.shortcuts import get_object_or_404, redirect, render
-from django.http import HttpResponse
+from django.http import HttpResponse, JsonResponse
 from django.db.models import F, Q
 
 from pasapp.forms import ApplicationForm, NewProjectForm, NewUserForm,CommentForm
@@ -184,9 +184,7 @@ def apply(request, project_id):
             application.save()
             return redirect(f"/project/{project_id}/")
     form = ApplicationForm()
-    User = get_user_model()
-    students = User.objects.filter(groups__name='student').exclude(request.user)
-    context = {'project': project, 'students': students, 'form': form}
+    context = {'project': project, 'form': form}
     return render(request, 'pasapp/pages/create_application.html', contextWithHeader(context, request))
 
 
@@ -592,6 +590,15 @@ def profile_page(request, username):
         context = {'profileUser': profile_user, 'userTags': user_tags, 'tags': tags}
         return render(request, 'pasapp/pages/profile.html', contextWithHeader(context, request))
 
+def get_student(request, username):
+    if (username == request.user.username):
+        return JsonResponse({'error': 'You are already a member of this project.'})
+    User = get_user_model()
+    student = get_object_or_404(User, username=username)
+    if (is_student(student)):
+        return JsonResponse({'name': f'{student.first_name} {student.last_name}'})
+    return JsonResponse({'error': 'User is not a student.'})
+
 def login_view(request):
     '''
     Form page for logging a user in. Mostly used as a redirect if the user attempts to access