feat: add searchable combo-box

fahari/common/forms.py

@@ -4,6 +4,7 @@
 
 from .dashboard import get_fahari_facilities_queryset
 from .models import Facility, FacilityAttachment, FacilityUser, Organisation, System
+from .widgets import SearchableComboBox
 
 
 class BaseModelForm(ModelForm):
@@ -101,6 +102,7 @@ class FacilityAttachmentForm(BaseModelForm):
     class Meta:
         model = FacilityAttachment
         fields = "__all__"
+        widgets = {"facility": SearchableComboBox()}
 
 
 class FacilityUserForm(BaseModelForm):
@@ -118,3 +120,4 @@ def __init__(self, *args, **kwargs):
     class Meta(BaseModelForm.Meta):
         model = FacilityUser
         fields = "__all__"
+        widgets = {"facility": SearchableComboBox()}

fahari/common/widgets.py

@@ -0,0 +1,20 @@
+"""
+Custom widgets to supplement/replace existing widgets.
+"""
+from django import forms
+
+
+class SearchableComboBox(forms.Select):
+    """A combo box with search capabilities.
+
+    This is suitable as a replacement for select with many options.
+    """
+
+    input_type = "select"
+    option_inherits_attrs = False
+
+    def build_attrs(self, base_attrs, extra_attrs=None):
+        # The `data-live-search` attribute is needed to enable the search
+        # functionality.
+        base_attrs.update({"data-live-search": "true"})
+        return super().build_attrs(base_attrs, extra_attrs)

fahari/ops/forms.py

@@ -6,6 +6,7 @@
 from fahari.common.dashboard import get_fahari_facilities_queryset
 from fahari.common.forms import BaseModelForm
 from fahari.common.models import FacilityUser
+from fahari.common.widgets import SearchableComboBox
 
 from .models import (
     ActivityLog,
@@ -35,6 +36,9 @@ def __init__(self, *args, **kwargs):
 
     class Meta(BaseModelForm.Meta):
         model = FacilitySystem
+        widgets = {
+            "facility": SearchableComboBox(),
+        }
 
 
 class FacilitySystemTicketForm(BaseModelForm):
@@ -68,6 +72,7 @@ def __init__(self, *args, **kwargs):
     class Meta(BaseModelForm.Meta):
         model = FacilitySystemTicket
         widgets = {
+            "facility_system": SearchableComboBox(),
             "raised": DateTimeInput(
                 attrs={
                     "readonly": "readonly",
@@ -139,6 +144,7 @@ def __init__(self, *args, **kwargs):
     class Meta(BaseModelForm.Meta):
         model = StockReceiptVerification
         widgets = {
+            "facility": SearchableComboBox(),
             "pack_size": TextInput(
                 attrs={
                     "size": 128,
@@ -236,6 +242,7 @@ class Meta(BaseModelForm.Meta):
                     "type": "date",
                 }
             ),
+            "site": SearchableComboBox(),
         }
 
 
@@ -262,6 +269,7 @@ def __init__(self, *args, **kwargs):
     class Meta(BaseModelForm.Meta):
         model = DailyUpdate
         widgets = {
+            "facility": SearchableComboBox(),
             "date": TextInput(
                 attrs={
                     "type": "date",

fahari/static/css/project.css

@@ -11447,3 +11447,7 @@ h3 {
 .row.align-header {
   display: grid !important;
 }
+
+.dropdown-menu.show {
+  max-width: 80%;
+}

fahari/static/js/project.js

@@ -12,4 +12,7 @@
     $(".navbar-collapse a").click(function() {
         $(".navbar-collapse").collapse("hide");
     });
+
+    // Initialize the bootstrap select plugin
+    $("select").selectpicker();
 })(jQuery);