From 384504f28675f2089cbfc2cd0cdbc19943facb29 Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:35:42 +0200
Subject: [PATCH 1/5] Allow boolean attributes in alchemy html element

The boolean values are attributes without an value like the default HTML standard e.g. disabled or checked. Also attributes with dashes are now casted to underscore.
---
 .../components/alchemy_html_element.js        | 42 +++++++++----------
 .../alchemy_admin/utils/string_conversions.js | 10 +++++
 .../components/alchemy_html_element.spec.js   | 28 ++++++++++++-
 .../utils/string_conversions.spec.js          | 11 +++++
 4 files changed, 69 insertions(+), 22 deletions(-)
 create mode 100644 app/javascript/alchemy_admin/utils/string_conversions.js
 create mode 100644 spec/javascript/alchemy_admin/utils/string_conversions.spec.js

diff --git a/app/javascript/alchemy_admin/components/alchemy_html_element.js b/app/javascript/alchemy_admin/components/alchemy_html_element.js
index 13d976cd2a..334642ffca 100644
--- a/app/javascript/alchemy_admin/components/alchemy_html_element.js
+++ b/app/javascript/alchemy_admin/components/alchemy_html_element.js
@@ -1,3 +1,5 @@
+import { toCamelCase } from "alchemy_admin/utils/string_conversions"
+
 export class AlchemyHTMLElement extends HTMLElement {
   static properties = {}
 
@@ -25,16 +27,16 @@ export class AlchemyHTMLElement extends HTMLElement {
    * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
    */
   connectedCallback() {
-    // parse the properties object and register property variables
-    Object.keys(this.constructor.properties).forEach((propertyName) => {
+    // parse the properties object and register property with the default values
+    Object.keys(this.constructor.properties).forEach((name) => {
       // if the options was given via the constructor, they should be prefer (e.g. new <WebComponentName>({title: "Foo"}))
-      if (this.options[propertyName]) {
-        this[propertyName] = this.options[propertyName]
-      } else {
-        this._updateProperty(propertyName, this.getAttribute(propertyName))
-      }
+      this[name] =
+        this.options[name] ?? this.constructor.properties[name].default
     })
 
+    // then process the attributes
+    this.getAttributeNames().forEach((name) => this._updateFromAttribute(name))
+
     // render the component
     this._updateComponent()
     this.connected()
@@ -54,8 +56,8 @@ export class AlchemyHTMLElement extends HTMLElement {
    * triggered by the browser, if one of the observed attributes is changing
    * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
    */
-  attributeChangedCallback(name, oldValue, newValue) {
-    this._updateProperty(name, newValue)
+  attributeChangedCallback(name) {
+    this._updateFromAttribute(name)
     this._updateComponent()
   }
 
@@ -96,23 +98,21 @@ export class AlchemyHTMLElement extends HTMLElement {
   }
 
   /**
-   * update the property value
-   * if the value is undefined the default value is used
+   * update the value from the given attribute
    *
-   * @param {string} propertyName
-   * @param {string} value
+   * @param {string} name
    * @private
    */
-  _updateProperty(propertyName, value) {
-    const property = this.constructor.properties[propertyName]
+  _updateFromAttribute(name) {
+    const attributeValue = this.getAttribute(name)
+    const propertyName = toCamelCase(name)
+    const isBooleanValue =
+      attributeValue.length === 0 || attributeValue === "true"
+
+    const value = isBooleanValue ? true : attributeValue
+
     if (this[propertyName] !== value) {
       this[propertyName] = value
-      if (
-        typeof property.default !== "undefined" &&
-        this[propertyName] === null
-      ) {
-        this[propertyName] = property.default
-      }
       this.changeComponent = true
     }
   }
diff --git a/app/javascript/alchemy_admin/utils/string_conversions.js b/app/javascript/alchemy_admin/utils/string_conversions.js
new file mode 100644
index 0000000000..07f2255076
--- /dev/null
+++ b/app/javascript/alchemy_admin/utils/string_conversions.js
@@ -0,0 +1,10 @@
+/**
+ * convert dashes and underscore strings into camelCase strings
+ * @param {string} str
+ * @returns {string}
+ */
+export function toCamelCase(str) {
+  return str
+    .split(/-|_/)
+    .reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1))
+}
diff --git a/spec/javascript/alchemy_admin/components/alchemy_html_element.spec.js b/spec/javascript/alchemy_admin/components/alchemy_html_element.spec.js
index 37d6c84b53..21c197c016 100644
--- a/spec/javascript/alchemy_admin/components/alchemy_html_element.spec.js
+++ b/spec/javascript/alchemy_admin/components/alchemy_html_element.spec.js
@@ -67,7 +67,9 @@ describe("AlchemyHTMLElement", () => {
         class Test extends AlchemyHTMLElement {
           static properties = {
             size: { default: "medium" },
-            color: { default: "currentColor" }
+            color: { default: "currentColor" },
+            longLongAttribute: { default: "foo" },
+            booleanType: { default: false }
           }
         }
       )
@@ -89,6 +91,30 @@ describe("AlchemyHTMLElement", () => {
       expect(component.size).toEqual("large")
     })
 
+    it("should cast dashes to camelcase", () => {
+      createComponent("test-camelcase")
+      component = renderComponent(
+        "test-camelcase",
+        `<test-camelcase long-long-attribute="bar"></test-camelcase>`
+      )
+      expect(component.longLongAttribute).toEqual("bar")
+    })
+
+    it("should support boolean types", () => {
+      createComponent("test-boolean")
+      component = renderComponent(
+        "test-boolean",
+        `<test-boolean boolean-type></test-boolean>`
+      )
+      expect(component.booleanType).toBeTruthy()
+
+      const second_component = renderComponent(
+        "test-boolean",
+        `<test-boolean></test-boolean>`
+      )
+      expect(second_component.booleanType).toBeFalsy()
+    })
+
     it("should observe an attribute change", () => {
       createComponent("test-color")
       expect(component.color).toEqual("currentColor")
diff --git a/spec/javascript/alchemy_admin/utils/string_conversions.spec.js b/spec/javascript/alchemy_admin/utils/string_conversions.spec.js
new file mode 100644
index 0000000000..1fc21a34c1
--- /dev/null
+++ b/spec/javascript/alchemy_admin/utils/string_conversions.spec.js
@@ -0,0 +1,11 @@
+import { toCamelCase } from "alchemy_admin/utils/string_conversions"
+
+describe("toCamelCase", () => {
+  it("convert dashes into camelCase", () => {
+    expect(toCamelCase("foo-bar-bazzz")).toEqual("fooBarBazzz")
+  })
+
+  it("convert underscore into camelCase", () => {
+    expect(toCamelCase("foo_bar")).toEqual("fooBar")
+  })
+})

From c09710d522fb9cf03ea98236ce56eebd3d65451d Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Tue, 19 Sep 2023 16:07:16 +0200
Subject: [PATCH 2/5] Add page select web component

Add page select component, which wraps the select2 initialization. The jquery - dependencies is only necessary for testing purposes to import jquery, which otherwise only available via Sprockets.
---
 app/javascript/alchemy_admin.js               |   1 +
 .../alchemy_admin/components/page_select.js   | 120 ++++++++++++++++++
 package.json                                  |   4 +-
 .../components/page_select.spec.js            |  80 ++++++++++++
 .../alchemy_admin/components/tinymce.spec.js  |   2 +-
 5 files changed, 205 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/alchemy_admin/components/page_select.js
 create mode 100644 spec/javascript/alchemy_admin/components/page_select.spec.js

diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index 786a407a8f..54a7df4915 100644
--- a/app/javascript/alchemy_admin.js
+++ b/app/javascript/alchemy_admin.js
@@ -25,6 +25,7 @@ $.fx.speeds._default = 400
 import "alchemy_admin/components/char_counter"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/overlay"
+import "alchemy_admin/components/page_select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tinymce"
 import "alchemy_admin/components/tooltip"
diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js
new file mode 100644
index 0000000000..1c4558a4a2
--- /dev/null
+++ b/app/javascript/alchemy_admin/components/page_select.js
@@ -0,0 +1,120 @@
+import { AlchemyHTMLElement } from "./alchemy_html_element"
+
+class PageSelect extends AlchemyHTMLElement {
+  static properties = {
+    allowClear: { default: false },
+    selection: { default: undefined },
+    placeholder: { default: "" },
+    queryParams: { default: "{}" },
+    url: { default: "" }
+  }
+
+  connected() {
+    this.input.classList.add("alchemy_selectbox")
+
+    const dispatchCustomEvent = (name, detail = {}) => {
+      this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
+    }
+
+    $(this.input)
+      .select2(this.select2Config)
+      .on("select2-open", (event) => {
+        // add focus to the search input. Select2 is handling the focus on the first opening,
+        // but it does not work the second time. One process in select2 is "stealing" the focus
+        // if the command is not delayed. It is an intermediate solution until we are going to
+        // move away from Select2
+        setTimeout(() => {
+          document.querySelector("#select2-drop .select2-input").focus()
+        }, 100)
+      })
+      .on("change", (event) => {
+        if (event.added) {
+          dispatchCustomEvent("Alchemy.PageSelect.PageAdded", event.added)
+        } else {
+          dispatchCustomEvent("Alchemy.PageSelect.PageRemoved")
+        }
+      })
+  }
+
+  get input() {
+    return this.getElementsByTagName("input")[0]
+  }
+
+  get select2Config() {
+    return {
+      placeholder: this.placeholder,
+      allowClear: this.allowClear,
+      initSelection: (_$el, callback) => {
+        if (this.selection) {
+          callback(JSON.parse(this.selection))
+        }
+      },
+      ajax: this.ajaxConfig,
+      formatSelection: this._renderResult,
+      formatResult: this._renderListEntry
+    }
+  }
+
+  /**
+   * Ajax configuration for Select2
+   * @returns {object}
+   */
+  get ajaxConfig() {
+    const data = (term, page) => {
+      return {
+        q: { name_cont: term, ...JSON.parse(this.queryParams) },
+        page: page
+      }
+    }
+
+    const results = (data) => {
+      const meta = data.meta
+      return {
+        results: data.pages,
+        more: meta.page * meta.per_page < meta.total_count
+      }
+    }
+
+    return {
+      url: this.url,
+      datatype: "json",
+      quietMillis: 300,
+      data,
+      results
+    }
+  }
+
+  /**
+   * result which is visible if a page was selected
+   * @param {object} page
+   * @returns {string}
+   * @private
+   */
+  _renderResult(page) {
+    return page.text || page.name
+  }
+
+  /**
+   * html template for each list entry
+   * @param {object} page
+   * @returns {string}
+   * @private
+   */
+  _renderListEntry(page) {
+    return `
+      <div class="page-select--page">
+        <div class="page-select--top">
+          <i class="icon far fa-file fa-lg"></i>
+          <span class="page-select--page-name">${page.name}</span>
+          <span class="page-select--page-urlname">${page.url_path}</span>
+        </div>
+        <div class="page-select--bottom">
+          <span class="page-select--site-name">${page.site.name}</span>
+          <span class="page-select--language-code">${page.language.name}</span>
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define("alchemy-page-select", PageSelect)
diff --git a/package.json b/package.json
index 459a0db1f5..0ba5634c68 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "jsdom-testing-mocks": "^1.11.0",
+    "jquery": "^2.2.4",
     "lodash-es": "^4.17.21",
     "prettier": "^3.0.0",
     "sortablejs": "^1.10.2",
@@ -25,7 +26,8 @@
       "Alchemy": {}
     },
     "moduleNameMapper": {
-      "alchemy_admin/(.*)": "<rootDir>/app/javascript/alchemy_admin/$1"
+      "alchemy_admin/(.*)": "<rootDir>/app/javascript/alchemy_admin/$1",
+      "vendor/(.*)": "<rootDir>/vendor/assets/javascripts/$1"
     },
     "testEnvironment": "jsdom",
     "roots": [
diff --git a/spec/javascript/alchemy_admin/components/page_select.spec.js b/spec/javascript/alchemy_admin/components/page_select.spec.js
new file mode 100644
index 0000000000..991953815a
--- /dev/null
+++ b/spec/javascript/alchemy_admin/components/page_select.spec.js
@@ -0,0 +1,80 @@
+import { renderComponent } from "./component.helper"
+
+// import jquery and append it to the window object
+import jQuery from "jquery"
+globalThis.$ = jQuery
+globalThis.jQuery = jQuery
+
+import "alchemy_admin/components/page_select"
+import("vendor/jquery_plugins/select2")
+
+describe("alchemy-page-select", () => {
+  /**
+   *
+   * @type {HTMLElement | undefined}
+   */
+  let component = undefined
+
+  describe("without configuration", () => {
+    beforeEach(() => {
+      const html = `
+        <alchemy-page-select>
+          <input type="text">
+        </alchemy-page-select>
+      `
+      component = renderComponent("alchemy-page-select", html)
+    })
+
+    it("should render the input field", () => {
+      expect(component.getElementsByTagName("input")[0]).toBeInstanceOf(
+        HTMLElement
+      )
+    })
+
+    it("should initialize Select2", () => {
+      expect(
+        component.getElementsByClassName("select2-container").length
+      ).toEqual(1)
+    })
+
+    it("should not show a remove 'button'", () => {
+      expect(
+        document.querySelector(".select2-container.select2-allowclear")
+      ).toBeNull()
+    })
+  })
+
+  describe("allow clear", () => {
+    beforeEach(() => {
+      const html = `
+        <alchemy-page-select allow-clear>
+          <input type="text">
+        </alchemy-page-select>
+      `
+      component = renderComponent("alchemy-page-select", html)
+    })
+
+    it("should show a remove 'button'", () => {
+      expect(component.allowClear).toBeTruthy()
+    })
+  })
+
+  describe("query params", () => {
+    beforeEach(() => {
+      const html = `
+        <alchemy-page-select query-params="{&quot;foo&quot;:&quot;bar&quot;}">
+          <input type="text">
+        </alchemy-page-select>
+      `
+      component = renderComponent("alchemy-page-select", html)
+    })
+
+    it("should receive query parameter", () => {
+      expect(JSON.parse(component.queryParams)).toEqual({ foo: "bar" })
+    })
+
+    it("should add the query parameter to the API call", () => {
+      expect(component.ajaxConfig.data("test").q.foo).toEqual("bar")
+    })
+  })
+})
diff --git a/spec/javascript/alchemy_admin/components/tinymce.spec.js b/spec/javascript/alchemy_admin/components/tinymce.spec.js
index adbfe5859c..c2386276b3 100644
--- a/spec/javascript/alchemy_admin/components/tinymce.spec.js
+++ b/spec/javascript/alchemy_admin/components/tinymce.spec.js
@@ -1,6 +1,6 @@
 import { renderComponent } from "./component.helper"
 import "alchemy_admin/components/tinymce"
-import "../../../../vendor/assets/javascripts/tinymce/tinymce.min"
+import "vendor/tinymce/tinymce.min"
 import { mockIntersectionObserver } from "jsdom-testing-mocks"
 
 describe("alchemy-tinymce", () => {

From 0dfd64a281157586bafc1fa8acd0147db70dd4d5 Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Tue, 19 Sep 2023 16:10:53 +0200
Subject: [PATCH 3/5] Add page select view component

Add a view component to make it easier to use the page select web component in erb views.
---
 app/components/alchemy/admin/page_select.rb   | 42 +++++++++
 .../alchemy/admin/page_select_spec.rb         | 85 +++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 app/components/alchemy/admin/page_select.rb
 create mode 100644 spec/components/alchemy/admin/page_select_spec.rb

diff --git a/app/components/alchemy/admin/page_select.rb b/app/components/alchemy/admin/page_select.rb
new file mode 100644
index 0000000000..f423d16c0f
--- /dev/null
+++ b/app/components/alchemy/admin/page_select.rb
@@ -0,0 +1,42 @@
+module Alchemy
+  module Admin
+    class PageSelect < ViewComponent::Base
+      delegate :alchemy, to: :helpers
+
+      def initialize(page = nil, url: nil, allow_clear: false, placeholder: Alchemy.t(:search_page), query_params: nil)
+        @page = page
+        @url = url
+        @allow_clear = allow_clear
+        @placeholder = placeholder
+        @query_params = query_params
+      end
+
+      def call
+        content_tag("alchemy-page-select", content, attributes)
+      end
+
+      private
+
+      def attributes
+        options = {
+          placeholder: @placeholder,
+          url: @url || alchemy.api_pages_path
+        }
+
+        options = options.merge({"allow-clear": @allow_clear}) if @allow_clear
+        options = options.merge({"query-params": @query_params.to_json}) if @query_params
+
+        if @page
+          selection = {
+            id: @page.id,
+            name: @page.name,
+            url_path: @page.url_path
+          }
+          options = options.merge({selection: selection.to_json})
+        end
+
+        options
+      end
+    end
+  end
+end
diff --git a/spec/components/alchemy/admin/page_select_spec.rb b/spec/components/alchemy/admin/page_select_spec.rb
new file mode 100644
index 0000000000..e92720fe2d
--- /dev/null
+++ b/spec/components/alchemy/admin/page_select_spec.rb
@@ -0,0 +1,85 @@
+require "rails_helper"
+
+RSpec.describe Alchemy::Admin::PageSelect, type: :component do
+  before do
+    render
+  end
+
+  context "without parameters" do
+    subject(:render) do
+      render_inline(described_class.new) { "Page Select Content" }
+    end
+
+    it "should render the component and render given block content" do
+      expect(page).to have_selector("alchemy-page-select")
+      expect(page).to have_text("Page Select Content")
+    end
+
+    it "should not allow clearing" do
+      expect(page).not_to have_selector("alchemy-page-select[allow-clear]")
+    end
+
+    it "should have the default placeholder" do
+      expect(page).to have_selector("alchemy-page-select[placeholder='Search page']")
+    end
+
+    it "should have the default page api - url" do
+      expect(page).to have_selector("alchemy-page-select[url='/api/pages']")
+    end
+
+    it "should not have a selection" do
+      expect(page).to_not have_selector("alchemy-page-select[selection]")
+    end
+  end
+
+  context "with page" do
+    let(:alchemy_page) { create(:alchemy_page, id: 123, name: "Test Page") }
+    subject(:render) do
+      render_inline(described_class.new(alchemy_page))
+    end
+
+    it "should have a serialized page information" do
+      expect(page).to have_selector('alchemy-page-select[selection="{\"id\":123,\"name\":\"Test Page\",\"url_path\":\"/test-page\"}"]')
+    end
+  end
+
+  context "with url" do
+    subject(:render) do
+      render_inline(described_class.new(nil, url: "/foo-bar"))
+    end
+
+    it "should have an url parameter" do
+      expect(page).to have_selector('alchemy-page-select[url="/foo-bar"]')
+    end
+  end
+
+  context "with allow clear" do
+    subject(:render) do
+      render_inline(described_class.new(nil, allow_clear: true))
+    end
+
+    it "should not have a allow_clear attribute" do
+      expect(page).to have_selector("alchemy-page-select[allow-clear]")
+    end
+  end
+
+  context "with custom placeholder" do
+    subject(:render) do
+      render_inline(described_class.new(nil, placeholder: "Custom Placeholder"))
+    end
+
+    it "should have a custom placeholder" do
+      expect(page).to have_selector("alchemy-page-select[placeholder='Custom Placeholder']")
+    end
+  end
+
+  context "with query parameter" do
+    subject(:render) do
+      render_inline(described_class.new(nil, query_params: {foo: :bar}))
+    end
+
+    it "should have serialized custom parameter" do
+      expect(page).to have_selector('alchemy-page-select[query-params="{\"foo\":\"bar\"}"]')
+    end
+  end
+end

From 0897c072b6e5c98240c7bd60b56d1663aec2ecc9 Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Tue, 19 Sep 2023 22:41:08 +0200
Subject: [PATCH 4/5] Replace alchemyPageSelect usage with alchemy-page-selct

Use the new web component to create the page selects. It was necessary to encapsulate the node form mechanic into an own component.
---
 app/views/alchemy/admin/nodes/_form.html.erb  | 39 +++++++++----------
 app/views/alchemy/admin/pages/_form.html.erb  | 19 ++-------
 .../admin/pages/_new_page_form.html.erb       | 19 ++-------
 .../alchemy/ingredients/_page_editor.html.erb | 26 ++++---------
 .../alchemy/ingredients/page_editor_spec.rb   |  6 +--
 5 files changed, 35 insertions(+), 74 deletions(-)

diff --git a/app/views/alchemy/admin/nodes/_form.html.erb b/app/views/alchemy/admin/nodes/_form.html.erb
index e8c1602b28..4175f37b2e 100644
--- a/app/views/alchemy/admin/nodes/_form.html.erb
+++ b/app/views/alchemy/admin/nodes/_form.html.erb
@@ -1,4 +1,4 @@
-<%= alchemy_form_for([:admin, node]) do |f| %>
+<%= alchemy_form_for([:admin, node], id: "node_form") do |f| %>
   <% if node.new_record? && node.root? %>
     <%= f.input :menu_type,
       collection: Alchemy::Language.current.available_menu_names.map { |n| [I18n.t(n, scope: [:alchemy, :menu_names]), n] },
@@ -13,7 +13,9 @@
         value: node.page && node.read_attribute(:name).blank? ? nil : node.name,
         placeholder: node.page ? node.page.name : nil
       } %>
-      <%= f.input :page_id, label: Alchemy::Page.model_name.human, input_html: { class: 'alchemy_selectbox' } %>
+      <%= render Alchemy::Admin::PageSelect.new(node.page, allow_clear: true) do %>
+        <%= f.input :page_id, label: Alchemy::Page.model_name.human %>
+      <% end %>
       <%= f.input :url, input_html: { disabled: node.page }, hint: Alchemy.t(:node_url_hint) %>
       <%= f.input :title %>
       <%= f.input :nofollow %>
@@ -26,23 +28,20 @@
 <% end %>
 
 <script>
-  $('#node_page_id').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    <% if node.page %>
-    initialSelection: {
-      id: <%= node.page_id %>,
-      text: "<%= node.page.name %>",
-      url_path: "<%= node.page.url_path %>"
-    }
-    <% end %>
-  }).on('change', function(e) {
-    if (e.val === '') {
-      $('#node_name').removeAttr('placeholder')
-      $('#node_url').val('').prop('disabled', false)
-    } else {
-      $('#node_name').attr('placeholder', e.added.name)
-      $('#node_url').val(e.added.url_path).prop('disabled', true)
-    }
+  const nodeName = document.getElementById("node_name")
+  const nodeUrl = document.getElementById("node_url")
+  const form = document.getElementById("node_form")
+
+  form.addEventListener("Alchemy.PageSelect.PageAdded", (event) => {
+    const page = event.detail
+    nodeName.setAttribute("placeholder", page.name)
+    nodeUrl.value = page.url_path
+    nodeUrl.setAttribute("disabled", "disabled")
+  })
+
+  form.addEventListener("Alchemy.PageSelect.PageRemoved", (event) => {
+    nodeName.removeAttribute("placeholder")
+    nodeUrl.value = ""
+    nodeUrl.removeAttribute("disabled")
   })
 </script>
diff --git a/app/views/alchemy/admin/pages/_form.html.erb b/app/views/alchemy/admin/pages/_form.html.erb
index c5e12b0617..f619d07e82 100644
--- a/app/views/alchemy/admin/pages/_form.html.erb
+++ b/app/views/alchemy/admin/pages/_form.html.erb
@@ -1,6 +1,8 @@
 <%= alchemy_form_for [:admin, @page], class: 'edit_page' do |f| %>
   <% unless @page.language_root? || @page.layoutpage %>
-    <%= f.input :parent_id, required: true, input_html: { class: 'alchemy_selectbox' } %>
+    <%= render Alchemy::Admin::PageSelect.new(@page.parent) do %>
+      <%= f.input :parent_id, required: true %>
+    <% end %>
   <% end %>
 
   <div class="input check_boxes">
@@ -52,18 +54,3 @@
 
   <%= f.submit Alchemy.t(:save) %>
 <% end %>
-
-<script>
-  $('#page_parent_id').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    allowClear: false,
-    <% if @page.parent %>
-    initialSelection: {
-      id: <%= @page.parent.id %>,
-      text: "<%= @page.parent.name %>",
-      url_path: "<%= @page.parent.url_path %>"
-    }
-    <% end %>
-  })
-</script>
diff --git a/app/views/alchemy/admin/pages/_new_page_form.html.erb b/app/views/alchemy/admin/pages/_new_page_form.html.erb
index b2d070fd54..9785cc00d4 100644
--- a/app/views/alchemy/admin/pages/_new_page_form.html.erb
+++ b/app/views/alchemy/admin/pages/_new_page_form.html.erb
@@ -3,7 +3,9 @@
     <%= f.hidden_field(:parent_id) %>
   <% else %>
     <% @page.parent = @current_language.root_page %>
-    <%= f.input :parent_id, as: :string, input_html: { class: 'alchemy_selectbox' } %>
+    <%= render Alchemy::Admin::PageSelect.new(@page.parent) do %>
+      <%= f.input :parent_id, as: :string %>
+    <% end %>
   <% end %>
   <%= f.hidden_field(:language_id) %>
   <%= f.hidden_field(:layoutpage) %>
@@ -17,18 +19,3 @@
   <%= f.input :name %>
   <%= f.submit Alchemy.t(:create) %>
 <% end %>
-
-<script>
-  $('input[type="text"]#page_parent_id').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    allowClear: false,
-    <% if @page.parent %>
-    initialSelection: {
-      id: <%= @page.parent.id %>,
-      text: "<%= @page.parent.name %>",
-      url_path: "<%= @page.parent.url_path %>"
-    }
-    <% end %>
-  })
-</script>
diff --git a/app/views/alchemy/ingredients/_page_editor.html.erb b/app/views/alchemy/ingredients/_page_editor.html.erb
index 99049ef698..1feaff3c68 100644
--- a/app/views/alchemy/ingredients/_page_editor.html.erb
+++ b/app/views/alchemy/ingredients/_page_editor.html.erb
@@ -3,23 +3,11 @@
   data: page_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, page_editor.ingredient) do |f| %>
     <%= ingredient_label(page_editor, :page_id) %>
-    <%= f.text_field :page_id,
-      value: page_editor.page&.id,
-      id: page_editor.form_field_id(:page_id),
-      class: 'alchemy_selectbox full_width' %>
-  <% end %>
-<% end %>
-
-<script>
-  $('#<%= page_editor.form_field_id(:page_id) %>').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    query_params: <%== page_editor.settings[:query_params].to_json %>,
-    <% if page_editor.page %>
-    initialSelection: {
-      id: <%= page_editor.page.id %>,
-      text: "<%= page_editor.page.name %>"
-    }
+    <%= render Alchemy::Admin::PageSelect.new(page_editor.page, allow_clear: true, query_params: page_editor.settings[:query_params]) do %>
+      <%= f.text_field :page_id,
+        value: page_editor.page&.id,
+        id: page_editor.form_field_id(:page_id),
+        class: 'full_width' %>
+      <% end %>
     <% end %>
-  })
-</script>
+<% end %>
diff --git a/spec/views/alchemy/ingredients/page_editor_spec.rb b/spec/views/alchemy/ingredients/page_editor_spec.rb
index ce7469a9fe..9ad911ac96 100644
--- a/spec/views/alchemy/ingredients/page_editor_spec.rb
+++ b/spec/views/alchemy/ingredients/page_editor_spec.rb
@@ -20,15 +20,15 @@
   it_behaves_like "an alchemy ingredient editor"
 
   it "renders a page input" do
-    is_expected.to have_css("input.alchemy_selectbox.full_width")
+    is_expected.to have_css("alchemy-page-select input")
   end
 
   context "with a page related to ingredient" do
-    let(:page) { Alchemy::Page.new(id: 1) }
+    let(:page) { build(:alchemy_page) }
     let(:ingredient) { Alchemy::Ingredients::Page.new(page: page, element: element, role: "role") }
 
     it "sets page id as value" do
-      is_expected.to have_css('input.alchemy_selectbox[value="1"]')
+      is_expected.to have_css("input[value=\"#{page.id}\"]")
     end
   end
 end

From 2435410a847ccffa3b2a74d43e3fa31b99f9fa2e Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Fri, 22 Sep 2023 08:44:05 +0200
Subject: [PATCH 5/5] Remove alchemyPageSelect - function

It is now replaced by the alchemy-page-select - web component. The page.hbs file is still in use, because there is another page selector in the Alchemy Link Dialog.
---
 app/assets/javascripts/alchemy/admin.js       |  1 -
 app/assets/javascripts/alchemy/page_select.js | 46 -------------------
 2 files changed, 47 deletions(-)
 delete mode 100644 app/assets/javascripts/alchemy/page_select.js

diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
index 58c968966e..569b200b76 100644
--- a/app/assets/javascripts/alchemy/admin.js
+++ b/app/assets/javascripts/alchemy/admin.js
@@ -27,5 +27,4 @@
 //= require alchemy/alchemy.list_filter
 //= require alchemy/alchemy.uploader
 //= require alchemy/alchemy.preview_window
-//= require alchemy/page_select
 //= require alchemy/node_select
diff --git a/app/assets/javascripts/alchemy/page_select.js b/app/assets/javascripts/alchemy/page_select.js
deleted file mode 100644
index a3d470067c..0000000000
--- a/app/assets/javascripts/alchemy/page_select.js
+++ /dev/null
@@ -1,46 +0,0 @@
-$.fn.alchemyPageSelect = function (options) {
-  var pageTemplate = HandlebarsTemplates.page
-
-  return this.select2({
-    placeholder: options.placeholder,
-    allowClear: options.hasOwnProperty("allowClear")
-      ? options.allowClear
-      : true,
-    minimumInputLength: 3,
-    initSelection: function (_$el, callback) {
-      if (options.initialSelection) {
-        callback(options.initialSelection)
-      }
-    },
-    ajax: {
-      url: options.url,
-      datatype: "json",
-      quietMillis: 300,
-      data: function (term, page) {
-        return {
-          q: $.extend(
-            {
-              name_cont: term
-            },
-            options.query_params
-          ),
-          page: page
-        }
-      },
-      results: function (data) {
-        var meta = data.meta
-
-        return {
-          results: data.pages,
-          more: meta.page * meta.per_page < meta.total_count
-        }
-      }
-    },
-    formatSelection: function (page) {
-      return page.text || page.name
-    },
-    formatResult: function (page) {
-      return pageTemplate({ page: page })
-    }
-  })
-}