Implement search select component

games/static/js/add_purchase.js

@@ -1,20 +1,35 @@
-import {
-  syncSelectInputUntilChanged,
-  getEl,
-  disableElementsWhenTrue,
-  disableElementsWhenValueNotEqual,
-} from "./utils.js";
+import { getEl, disableElementsWhenTrue } from "./utils.js";
 
-let syncData = [
-  {
-    source: "#id_games",
-    source_value: "dataset.platform",
-    target: "#id_platform",
-    target_value: "value",
-  },
-];
+const RELATED_PURCHASE_URL = "/tracker/purchase/related-purchase-by-game";
 
-syncSelectInputUntilChanged(syncData, "form");
+// The games field is now a SearchSelect widget (a <div>, not a <select>), so we
+// react to its custom "search-select:change" event instead of syncing a select.
+document.addEventListener("search-select:change", (event) => {
+  if (event.detail.name !== "games") return;
+
+  // (a) Auto-fill platform from the clicked option's data-platform.
+  const last = event.detail.last;
+  const platformId = last && last.data ? last.data.platform : "";
+  if (platformId) {
+    const platformEl = getEl("#id_platform");
+    if (platformEl) platformEl.value = platformId;
+  }
+
+  // (b) Refresh #id_related_purchase for the currently selected games.
+  const query = event.detail.values
+    .map((value) => "games=" + encodeURIComponent(value))
+    .join("&");
+  fetch(RELATED_PURCHASE_URL + "?" + query, { credentials: "same-origin" })
+    .then((response) => {
+      if (response.status === 204) return null;
+      return response.text();
+    })
+    .then((html) => {
+      if (html === null) return;
+      const target = getEl("#id_related_purchase");
+      if (target) target.outerHTML = html;
+    });
+});
 
 function setupElementHandlers() {
   disableElementsWhenTrue("#id_type", "game", [
@@ -27,5 +42,4 @@ document.addEventListener("DOMContentLoaded", setupElementHandlers);
 document.addEventListener("htmx:afterSwap", setupElementHandlers);
 getEl("#id_type").addEventListener("change", () => {
   setupElementHandlers();
-}
-);
+});