Fix purchase form logic

games/static/js/add_purchase.js

@@ -25,18 +25,7 @@ function setupElementHandlers() {
 
 document.addEventListener("DOMContentLoaded", setupElementHandlers);
 document.addEventListener("htmx:afterSwap", setupElementHandlers);
-getEl("#id_type").onchange = () => {
+getEl("#id_type").addEventListener("change", () => {
   setupElementHandlers();
-};
-
-document.body.addEventListener("htmx:beforeRequest", function (event) {
-  // Assuming 'Purchase1' is the element that triggers the HTMX request
-  if (event.target.id === "id_games") {
-    var idEditionValue = document.getElementById("id_games").value;
-
-    // Condition to check - replace this with your actual logic
-    if (idEditionValue != "") {
-      event.preventDefault(); // This cancels the HTMX request
-    }
-  }
-});
+}
+);

games/static/js/utils.js

@@ -43,6 +43,7 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
         const targetElement = document.querySelector(syncItem.target);
 
         if (targetElement && valueToSync !== null) {
+          console.log(`Changing value of ${syncItem.target} to ${valueToSync}`)
           targetElement[syncItem.target_value] = valueToSync;
         }
       }
@@ -184,13 +185,17 @@ function disableElementsWhenValueNotEqual(
 function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
   return conditionalElementHandler([
     () => {
+      console.log(`${disableElementsWhenTrue.name}: triggered on ${targetSelect}`)
+      console.log(`Value of ${targetSelect} is ${targetValue}: ${getEl(targetSelect).value == targetValue}`)
       return getEl(targetSelect).value == targetValue;
     },
     elementList,
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: disabling ${el.id}`)
       el.disabled = "disabled";
     },
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: enabling ${el.id}`)
       el.disabled = "";
     },
   ]);

games/views/purchase.py

@@ -140,7 +140,7 @@ def add_purchase(request: HttpRequest, game_id: int = 0) -> HttpResponse:
 
     context["form"] = form
     context["title"] = "Add New Purchase"
-    # context["script_name"] = "add_purchase.js"
+    context["script_name"] = "add_purchase.js"
     return render(request, "add_purchase.html", context)
 
 
@@ -156,7 +156,7 @@ def edit_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
     context["title"] = "Edit Purchase"
     context["form"] = form
     context["purchase_id"] = str(purchase_id)
-    # context["script_name"] = "add_purchase.js"
+    context["script_name"] = "add_purchase.js"
     return render(request, "add_purchase.html", context)
 
 
@@ -208,7 +208,12 @@ def related_purchase_by_game(request: HttpRequest) -> HttpResponse:
     if isinstance(games, int) or isinstance(games, str):
         games = [games]
     form = PurchaseForm()
-    form.fields["related_purchase"].queryset = Purchase.objects.filter(
-        games__in=games, type=Purchase.GAME
-    ).order_by("games__sort_name")
+    qs = Purchase.objects.filter(games__in=games, type=Purchase.GAME).order_by(
+        "games__sort_name"
+    )
+
+    form.fields["related_purchase"].queryset = qs
+    first_option = qs.first()
+    if first_option:
+        form.fields["related_purchase"].initial = first_option.id
     return render(request, "partials/related_purchase_field.html", {"form": form})