[rentals] Use django-autocomplete-light for locker renter selection

This primarily to make the list of members not block/slow down
loading excessively, as it was currently doing

cmsmanage/settings/base.py

@@ -21,6 +21,8 @@ ALLOWED_HOSTS = []
 # Application definition
 
 INSTALLED_APPS = [
+    "dal",
+    "dal_select2",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",

cmsmanage/urls.py

@@ -24,6 +24,7 @@ urlpatterns = [
     path("", lambda request: redirect("/tasks/"), name="root"),
     path("tasks/", include("tasks.urls")),
     path("rentals/", include("rentals.urls")),
+    path("membershipworks/", include("membershipworks.urls")),
     path("paperwork/", include("paperwork.urls")),
     path("admin/", admin.site.urls),
     path(

membershipworks/urls.py

@@ -0,0 +1,13 @@
+from django.urls import path
+
+from .views import MemberAutocomplete
+
+app_name = "membershipworks"
+
+urlpatterns = [
+    path(
+        "member-autocomplete/",
+        MemberAutocomplete.as_view(),
+        name="member-autocomplete",
+    ),
+]

membershipworks/views.py

@@ -1,3 +1,14 @@
-from django.shortcuts import render
+from dal import autocomplete
 
-# Create your views here.
+from .models import Member
+
+
+class MemberAutocomplete(autocomplete.Select2QuerySetView):
+    model = Member
+    search_fields = ["account_name"]
+
+    def get_queryset(self):
+        if not self.request.user.has_perm("membershipworks.view_member"):
+            return Member.objects.none()
+        else:
+            return super().get_queryset()

pdm.lock

@@ -82,6 +82,14 @@ dependencies = [
     "python-ldap>=3.1",
 ]
 
+[[package]]
+name = "django-autocomplete-light"
+version = "3.9.4"
+summary = "Fresh autocompletes for Django"
+dependencies = [
+    "six",
+]
+
 [[package]]
 name = "django-debug-toolbar"
 version = "3.4.0"
@@ -349,7 +357,7 @@ summary = "Backport of pathlib-compatible object wrapper for zip files"
 
 [metadata]
 lock_version = "3.1"
-content_hash = "sha256:1512b8ed7599dc6338be0d66ce81da103c5fe1a100460e3702221a7badc089a6"
+content_hash = "sha256:fe264d6d6f3391ec02da7c52702e18abd7a4a86c9349b758ac930d4b89ac4091"
 
 [metadata.files]
 "asgiref 3.5.1" = [
@@ -409,6 +417,9 @@ content_hash = "sha256:1512b8ed7599dc6338be0d66ce81da103c5fe1a100460e3702221a7ba
     {file = "django_auth_ldap-4.0.0-py3-none-any.whl", hash = "sha256:94119c94981809124d3dc4bed974f71c7a980666896df626f556a88a5fe0b59c"},
     {file = "django-auth-ldap-4.0.0.tar.gz", hash = "sha256:276f79e624ce083ce13f161387f65ff1c0efe83ef8a42f2b9830d43317b15239"},
 ]
+"django-autocomplete-light 3.9.4" = [
+    {file = "django-autocomplete-light-3.9.4.tar.gz", hash = "sha256:0f6da75c1c7186698b867a467a8cdb359f0513fdd8e09288a0c2fb018ae3d94e"},
+]
 "django-debug-toolbar 3.4.0" = [
     {file = "django_debug_toolbar-3.4.0-py3-none-any.whl", hash = "sha256:42c1c2e9dc05bb57b53d641e3a6d131fc031b92377b34ae32e604a1fe439bb83"},
     {file = "django-debug-toolbar-3.4.0.tar.gz", hash = "sha256:ae6bec2c1ce0e6900b0ab0443e1427eb233d8e6f57a84a0b2705eeecb8874e22"},

pyproject.toml

@@ -17,6 +17,7 @@ dependencies = [
     "mdformat-tables~=0.4",
     "mysqlclient~=2.1",
     "bleach~=5.0",
+    "django-autocomplete-light~=3.9",
 ]
 requires-python = ">=3.9"
 

rentals/forms.py

@@ -1,5 +1,7 @@
 from django import forms
 
+from dal import autocomplete
+
 from rentals.models import LockerInfo
 
 
@@ -12,3 +14,11 @@ class LockerInfoForm(forms.ModelForm):
             "renter",
             "reserved",
         ]
+        widgets = {
+            "renter": autocomplete.ModelSelect2(
+                url="membershipworks:member-autocomplete",
+                attrs={
+                    "data-placeholder": "-- No Renter --",
+                },
+            )
+        }

rentals/templates/rentals/lockers.dj.html

@@ -1,5 +1,6 @@
 {% extends "base.dj.html" %}
 
+{% load static %}
 {% load widget_tweaks %}
 
 {% block title %}Lockers Index{% endblock %}
@@ -41,6 +42,14 @@
   .locker .door[data-available="False"] {
     background-color: hsl(24, 15%, 25%);;
   }
+
+  .form-floating .select2-container .select2-selection {
+    height: 3.5em;
+    padding: 1.625rem .25rem;
+  }
+  .form-floating .select2-container .select2-selection .select2-selection__rendered {
+    padding-right: 0.25rem;
+  }
   </style>
   {% for bank, units in locker_banks.items %}
     <div class="locker-bank" data-bank="{{ bank.slug }}">
@@ -124,5 +133,18 @@
     document.addEventListener('hide.bs.dropdown', (e) => {
       e.target.parentElement.querySelector('.dropdown-menu form').reset();
     });
+
+    // Set select2 parent element to the dropdown menu, to prevent bootstrap from
+    // hiding the menu when the select2 box is selected
+    document.addEventListener('show.bs.dropdown', (e) => {
+      let menu = $(e.target.parentElement).find('.dropdown-menu');
+      let select = menu.find('[data-autocomplete-light-function="select2"]');
+
+      let options = select.data('select2').options.options;
+      options.dropdownParent = menu;
+
+      select.select2(options);
+    });
   </script>
+  {{ form_media }}
 {% endblock %}

rentals/views.py

@@ -22,6 +22,7 @@ def lockerIndex(request):
 
     context = {
         "locker_banks": locker_banks,
+        "form_media": list(list(locker_banks.values())[0].values())[0][0].media,
     }
     return render(request, "rentals/lockers.dj.html", context)