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.
AlchemyCMS · Sep 22, 2023 · 9693bd8 · 9693bd8
1 parent b088ea1
commit 9693bd8
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 95 deletions.
diff --git a/app/views/alchemy/admin/nodes/_form.html.erb b/app/views/alchemy/admin/nodes/_form.html.erb
@@ -1,48 +1,47 @@
-<%= alchemy_form_for([:admin, node]) 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] },
-      include_blank: false,
-      input_html: { class: 'alchemy_selectbox' } %>
-  <% else %>
-    <% if node.root? %>
-      <%= f.input :name %>
+<%= 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] },
+        include_blank: false,
+        input_html: { class: 'alchemy_selectbox' } %>
     <% else %>
-      <%= f.input :name, input_html: {
-        autofocus: true,
-        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' } %>
-      <%= f.input :url, input_html: { disabled: node.page }, hint: Alchemy.t(:node_url_hint) %>
-      <%= f.input :title %>
-      <%= f.input :nofollow %>
-      <%= f.input :external %>
-      <%= f.hidden_field :parent_id %>
+      <% if node.root? %>
+        <%= f.input :name %>
+      <% else %>
+        <%= f.input :name, input_html: {
+          autofocus: true,
+          value: node.page && node.read_attribute(:name).blank? ? nil : node.name,
+          placeholder: node.page ? node.page.name : nil
+        } %>
+        <%= 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 %>
+        <%= f.input :external %>
+        <%= f.hidden_field :parent_id %>
+      <% end %>
     <% end %>
-  <% end %>
-  <%= f.hidden_field :language_id %>
-  <%= f.submit button_label %>
+    <%= f.hidden_field :language_id %>
+    <%= f.submit button_label %>
 <% 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
@@ -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
@@ -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
@@ -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
@@ -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) { create(: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