refactor: add alchemy-picture-description-select component

Instead of an inline script tag we use a custom element
that handles the internal event handling much more reliable.

Signed-off-by: Thomas von Deyen <vondeyen@blish.cloud>

Author: tvdeyen

app/components/alchemy/admin/picture_description_select.rb

@@ -2,13 +2,13 @@ module Alchemy
   module Admin
     class PictureDescriptionSelect < ViewComponent::Base
       erb_template <<-ERB
-        <label class="inline-label">
-          <%= label %>
-          <%= select name_prefix, :language_id,
-            options_for_select(language_options, selected:), {},
-            id: "picture_description_select",
-            data: {url:} %>
-        </label>
+        <alchemy-picture-description-select url="<%= url %>">
+          <label class="inline-label">
+            <%= label %>
+            <%= select name_prefix, :language_id,
+              options_for_select(language_options, selected:) %>
+          </label>
+        </alchemy-picture-description-select>
       ERB
 
       def initialize(url:, selected:, name_prefix:)

app/javascript/alchemy_admin/components/index.js

@@ -25,6 +25,7 @@ import "alchemy_admin/components/uploader"
 import "alchemy_admin/components/overlay"
 import "alchemy_admin/components/page_publication_fields"
 import "alchemy_admin/components/page_select"
+import "alchemy_admin/components/picture_description_select"
 import "alchemy_admin/components/picture_thumbnail"
 import "alchemy_admin/components/preview_window"
 import "alchemy_admin/components/select"

app/javascript/alchemy_admin/components/picture_description_select.js

@@ -0,0 +1,26 @@
+class PictureDescriptionSelect extends HTMLElement {
+  constructor() {
+    super()
+    this.addEventListener("change", this)
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "change":
+        this.onChange()
+        break
+    }
+  }
+
+  onChange() {
+    const url = new URL(this.getAttribute("url"))
+    const select = this.querySelector("select")
+    url.searchParams.set("language_id", select.value)
+    Turbo.visit(url, { frame: "picture_descriptions" })
+  }
+}
+
+customElements.define(
+  "alchemy-picture-description-select",
+  PictureDescriptionSelect
+)

app/views/alchemy/admin/pictures/_picture_description_field.html.erb

@@ -14,17 +14,3 @@
       picture_description: @picture_description %>
   </turbo-frame>
 </div>
-
-<script>
-  (function ($) {
-    const select = $.getElementById("picture_description_select")
-
-    if (select) {
-      select.addEventListener("change", () => {
-        const url = new URL(select.dataset.url)
-        url.searchParams.set("language_id", select.value)
-        Turbo.visit(url, { frame: "picture_descriptions" })
-      })
-    }
-  })(document)
-</script>

spec/components/alchemy/admin/picture_description_select_spec.rb

@@ -28,7 +28,7 @@
 
       it "renders the select box with both languages" do
         expect(page).to have_select("Language", options: ["EN", "DE"], selected: "EN")
-        expect(page).to have_selector("select[data-url='/some/url']")
+        expect(page).to have_selector("alchemy-picture-description-select[url='/some/url']")
       end
     end
   end

spec/javascript/alchemy_admin/components/picture_description_select.spec.js

@@ -0,0 +1,35 @@
+import { vi } from "vitest"
+import { renderComponent } from "./component.helper"
+import "alchemy_admin/components/picture_description_select"
+
+describe("alchemy-picture-description-select", () => {
+  /**
+   *
+   * @type {HTMLElement | undefined}
+   */
+  let component = undefined
+
+  beforeEach(() => {
+    const html = `
+      <alchemy-picture-description-select url="http://example.com/some/url">
+        <select>
+          <option value="1"></option>
+          <option value="2" selected></option>
+        </select>
+      </alchemy-picture-description-select>
+    `
+    component = renderComponent("alchemy-picture-description-select", html)
+    global.Turbo = { visit: vi.fn() }
+  })
+
+  it("should use Turbo to reload the picture_descriptions frame", () => {
+    const select = component.querySelector("select")
+    const event = new Event("change", { bubbles: true })
+    select.dispatchEvent(event)
+
+    expect(Turbo.visit).toHaveBeenCalledWith(
+      new URL("http://example.com/some/url?language_id=2"),
+      { frame: "picture_descriptions" }
+    )
+  })
+})