Django-Select2 for Materials now working

PH-Tools · Dec 16, 2024 · 6c79315 · 6c79315
1 parent 16334ce
commit 6c79315
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 55 deletions.
diff --git a/static/css/select2.css b/static/css/select2.css
@@ -0,0 +1,7 @@
+.select2-selection {
+    background-color: var(--cell-color) !important;
+    padding: 6px !important;
+    border-radius: 3px !important;
+    border: 1px solid #939799 !important;
+    height: 100% !important;
+}
diff --git a/webportal/forms.py b/webportal/forms.py
@@ -39,8 +39,8 @@ class Meta:
 
 class MaterialSearchForm(forms.Form):
     material = forms.ModelChoiceField(
-        queryset=Material.objects.none(),
-        widget=Select2Widget(attrs={"hx-trigger": "change"}),
+        queryset=Material.objects.all(),
+        widget=Select2Widget(),
         label="",
     )
 
@@ -51,3 +51,7 @@ def __init__(self, *args, **kwargs):
             self.fields["material"].queryset = Material.objects.filter(
                 user=self.request.user
             )
+        if prefix := kwargs.get("prefix", None):
+            self.prefix = prefix
+        if auto_id := kwargs.get("auto_id", None):
+            self.auto_id = auto_id
diff --git a/webportal/templates/select2_example.html b/webportal/templates/select2_example.html
diff --git a/webportal/templates/webportal/assemblies.html b/webportal/templates/webportal/assemblies.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-<div class="relative " id="assemblies-page">
+<div class="relative" id="assemblies-page">
 
     <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl flex items-center mb-4">
         <svg 
@@ -24,7 +24,7 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4
         Assemblies
     </h1>
 
-    <div id="assemblies-container" class="relative ">
+    <div id="assemblies-container" class="relative">
         <div id="assemblies-grid-container" class="flex flex-col md:grid md:grid-cols-5 md:gap-6">
 
             {% include 'webportal/partials/assemblies/sidebar.html' %}

diff --git a/webportal/templates/webportal/base.html b/webportal/templates/webportal/base.html
@@ -24,6 +24,7 @@
 
         <!-- Custom files -->
         <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
+        <link href="{% static 'css/select2.css' %}" rel="stylesheet" />
 
 
         <!-- Select2 Drop-down lists, include jQuery first -->
@@ -35,26 +36,45 @@
         {% block extra_head %}
 
         {% endblock %}
-    </head>
 
+
+
+    </head>
+
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+
 
         {% include 'webportal/partials/navbar.html' %}
-
+        
         <div class="max-w-screen-xl mx-auto p-4 ml-10">
+
 
             {% block content %}
             {% endblock %}
 
         </div>
-
+        
         <script>
-            // Initialize Select2
-            document.addEventListener('DOMContentLoaded', function () {
+            // Function to initialize Select2 (dropdowns with search)
+            function initializeSelect2() {
                 console.log('Select2 initialized');
                 $('.django-select2').select2();
+            }
+
+            // Initialize Select2 on page load
+            document.addEventListener('DOMContentLoaded', function () {
+                initializeSelect2();
+            });
+
+            // Re-initialize Select2 after HTMX content swap
+            // This is necessary because HTMX replaces the content of the page
+            // without reloading the page, so the Select2 elements need to be
+            // re-initialized after the content is swapped.
+            document.body.addEventListener('htmx:afterSwap', function (event) {
+                initializeSelect2();
             });
-        </script>        
+        </script>
+
     </body>
 
 </html>
diff --git a/webportal/templates/webportal/partials/assemblies/assembly.html b/webportal/templates/webportal/partials/assemblies/assembly.html
@@ -1,6 +1,6 @@
 <div id="assembly" class="col-span-4">
     {% if assembly %}
-
+            
         {% block assembly-name %}
             <div id="assembly-name" class="flex flex-1 mb-4">
                 <div class="flex flex-1 items-center">
@@ -35,12 +35,11 @@
                 </div>
 
                 <div id="assembly-cells">
-                    {% for layer in layers %}
+                    {% for layer, form in layers_and_forms %}
 
                         {% block layer %}
                             <div class="layer" id="layer-{{ layer.pk }}">
                                 <div class="flex flex-row items-center cell py-2" id="cell-{{ cell.pk }}">
-
                                     <a                                
                                         id="delete-layer-{{ assembly.pk }}"
                                         hx-delete="{% url 'delete-layer' assembly_pk=assembly.pk layer_pk=layer.pk %}"

diff --git a/webportal/views.py b/webportal/views.py
@@ -251,13 +251,15 @@ def assembly(request: WSGIRequest, pk: int | None) -> HttpResponse:
         this_assembly.layer_id_order.append(new_layer.id)
         this_assembly.save()
         layers = this_assembly.get_ordered_layers()
+    forms: list[MaterialSearchForm] = [
+        MaterialSearchForm(request=request, prefix=f"form_{layer.pk}")
+        for layer in layers
+    ]
     assembly_html = render_to_string(
         "webportal/partials/assemblies/assembly.html",
         context={
             "assembly": this_assembly,
-            "layers": layers,
-            "materials": Material.objects.filter(user=request.user),
-            "form": MaterialSearchForm(request=request, prefix=str(uuid.uuid4())[6:]),
+            "layers_and_forms": zip(layers, forms),
         },
     )
 
@@ -332,6 +334,9 @@ def add_layer(request: WSGIRequest, pk: int) -> HttpResponse:
             {
                 "layer": new_layer,
                 "assembly": this_assembly,
+                "form": MaterialSearchForm(
+                    request=request, prefix=f"form_{new_layer.pk}"
+                ),
             }
         ),
         request=request,
@@ -362,7 +367,6 @@ def update_layer_thickness(
     return HttpResponse(layer.thickness)
 
 
-@login_required
 def material_dropdown(request):
     # if request.htmx:
     #     materials = Material.objects.filter(
@@ -371,6 +375,12 @@ def material_dropdown(request):
     #     data = [{"id": material[0], "text": material[1]} for material in materials]
     #     return JsonResponse({"results": data})
 
-    form1 = MaterialSearchForm(request=request, prefix=str(uuid.uuid4())[6:])
-    form2 = MaterialSearchForm(request=request, prefix=str(uuid.uuid4())[6:])
-    return render(request, "select2_example.html", {"form1": form1, "form2": form2})
+    forms = [
+        MaterialSearchForm(request=request, prefix=str(uuid.uuid4())[6:])
+        for i in range(10)
+    ]
+
+    return HttpResponse(
+        render_to_string("select2_example.html", {"forms": forms}),
+        content_type="text/html",
+    )