Add nodes to page dialog

Add a new menu tab to page configuration dialog. This is a shortcut to create a menu entry for the current page. It is also the first try to provide Turbo Frames inside of Alchemy, which is coming with a few challenges (flash messages, and updated tab headline).

app/assets/stylesheets/alchemy/forms.scss

@@ -169,7 +169,8 @@ form {
   }
 
   .inline-input {
-    @include clearfix;
+    align-items: center;
+    display: flex;
     margin: 0 -1 * $default-margin;
 
     .left-column,
@@ -179,12 +180,10 @@ form {
 
     .left-column {
       width: $form-right-width;
-      float: left;
     }
 
     .right-column {
       width: $form-left-width;
-      float: right;
     }
 
     button,

app/controllers/alchemy/admin/base_controller.rb

@@ -33,7 +33,7 @@ def leave
 
       # Disable layout rendering for xhr requests.
       def set_layout
-        request.xhr? ? false : "alchemy/admin"
+        (request.xhr? || turbo_frame_request?) ? false : "alchemy/admin"
       end
 
       # Handles exceptions

app/controllers/alchemy/admin/nodes_controller.rb

@@ -16,6 +16,32 @@ def new
         )
       end
 
+      def create
+        if turbo_frame_request?
+          @page = Alchemy::Page.find(resource_params[:page_id])
+          @node = @page.nodes.build(resource_params)
+          if @node.valid?
+            @node.save
+            flash_notice_for_resource_action(:create)
+          else
+            flash[:error] = @node.errors.full_messages.join(", ")
+          end
+        else
+          super
+        end
+      end
+
+      def destroy
+        if turbo_frame_request?
+          @node = Alchemy::Node.find(params[:id])
+          @page = @node.page
+          @page.nodes.delete(@node.id)
+          flash_notice_for_resource_action(:destroy)
+        else
+          super
+        end
+      end
+
       private
 
       def resource_params

app/views/alchemy/admin/nodes/_label.html.erb

@@ -0,0 +1 @@
+(<%= count %>) <%= Alchemy::Node.model_name.human(count: count) %>

app/views/alchemy/admin/nodes/_page_nodes.erb

@@ -0,0 +1,59 @@
+<%= turbo_frame_tag("page_nodes") do %>
+  <table class="list" id="connected_nodes">
+    <tr>
+      <th class="name">
+        <%= Alchemy::Node.model_name.human %>
+      </th>
+      <th class="tools"></th>
+    </tr>
+    <% nodes = @page.nodes.select(&:persisted?) %>
+    <% if nodes.length > 0 %>
+      <% nodes.each do |node| %>
+        <tr class="even">
+          <td><%= "#{node.ancestors.map(&:name).join(" / ")} / #{node.name}" %></td>
+          <td class="tools">
+            <sl-tooltip content="<%= Alchemy.t("delete_node") %>">
+              <%= link_to render_icon(:minus),
+                admin_node_path(node),
+                class: "icon_button",
+                data: { turbo_method: :delete, turbo_confirm: Alchemy.t('confirm_to_delete_node') } %>
+            </sl-tooltip>
+          </td>
+        </tr>
+      <% end %>
+    <% else %>
+      <tr class="even">
+        <td><%= Alchemy.t('No menu node for this page found') %></td>
+        <td class="tools"></td>
+      </tr>
+    <% end %>
+  </table>
+
+  <fieldset>
+    <legend><%= Alchemy.t('Create node on parent:') %></legend>
+
+    <%= alchemy_form_for([:admin, @page.nodes.build], id: "new_node_form") do |f| %>
+      <%= f.hidden_field :page_id, value: @page.id %>
+      <%= f.hidden_field :language_id, value: @page.language_id %>
+
+      <%= render Alchemy::Admin::NodeSelect.new(nil, url: alchemy.api_nodes_path(language_id: @page.language_id, include: :ancestors)) do %>
+        <%= f.text_field :parent_id, class: 'alchemy_selectbox full_width' %>
+      <% end %>
+
+      <div class="submit">
+        <button is="alchemy-button"><%= Alchemy.t(:create_node) %></button>
+      </div>
+    <% end %>
+  </fieldset>
+
+  <script type="module">
+    <% if flash.any? %>
+      <% key = flash.keys.first %>
+      Alchemy.growl("<%= flash[key] %>", "<%= key %>");
+      <% flash.delete(key) %>
+    <% end %>
+    document.querySelector('[panel="nodes"]').innerHTML = "<%= j render('alchemy/admin/nodes/label', count: nodes.length) %>"
+  </script>
+<% end %>
+
+

app/views/alchemy/admin/nodes/create.html.erb

@@ -0,0 +1 @@
+<%= render "page_nodes" %>

app/views/alchemy/admin/nodes/destroy.html.erb

@@ -0,0 +1 @@
+<%= render "page_nodes" %>

app/views/alchemy/admin/pages/configure.html.erb

@@ -2,12 +2,18 @@
   <sl-tab slot="nav" panel="page_properties">
     <%= Alchemy.t('Properties') %>
   </sl-tab>
+  <sl-tab slot="nav" panel="nodes">
+    <%= render 'alchemy/admin/nodes/label', count: @page.nodes.size %>
+  </sl-tab>
   <sl-tab slot="nav" panel="legacy_urls" id="legacy_urls_label">
     <%= render 'alchemy/admin/legacy_page_urls/label', count: @page.legacy_urls.size %>
   </sl-tab>
   <sl-tab-panel name="page_properties">
     <%= render 'form' %>
   </sl-tab-panel>
+  <sl-tab-panel name="nodes">
+    <%= render 'alchemy/admin/nodes/page_nodes' %>
+  </sl-tab-panel>
   <sl-tab-panel name="legacy_urls">
     <%= render 'legacy_urls' %>
   </sl-tab-panel>

config/locales/alchemy.en.yml

@@ -250,6 +250,7 @@ en:
     "Confirm new password": "Confirm new password"
     "Copy": "Copy"
     "Could not load Adobe Flash® Plugin!": "Could not load Adobe Flash® Plugin!"
+    "Create node on parent:": "Create node on parent:"
     "Currently locked pages": "Currently locked pages"
     "Default language has to be public": "Default language has to be public"
     "Delete image": "Delete image"
@@ -286,6 +287,7 @@ en:
     "New": "New"
     "New Element": "New element"
     "New page": "New page"
+    "No menu node for this page found": "No menu node for this page found"
     "No page links for this page found": "No page links for this page found"
     "New password": "New password"
     "New Tag": "New tag"
@@ -411,6 +413,7 @@ en:
     delete_node: "Delete this menu node"
     delete_page: "Delete this page"
     delete_tag: "Delete tag"
+    search_node: "Search menu node"
     document: "File"
     download_csv: "Download CSV"
     download_file: "Download file '%{filename}'"

spec/features/admin/nodes_management_spec.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe "Nodes management", type: :system, js: true do
+  before do
+    authorize_user(:as_admin)
+  end
+
+  let!(:a_page) { create(:alchemy_page) }
+  let!(:a_menu) { create(:alchemy_node, name: "Menu") }
+
+  def open_page_properties
+    visit admin_pages_path
+    expect(page.find("alchemy-overlay").style("display")["display"]).to have_content("none")
+    page.find("a[href='#{configure_admin_page_path(a_page)}']", wait: 10).click
+    find("[panel='nodes']").click
+  end
+
+  def add_menu_item
+    find("#new_node_form .select2-choice").click
+    find(".select2-result:first-child").click
+
+    click_button "Add a menu node"
+  end
+
+  it "lets a user add a menu node" do
+    open_page_properties
+    add_menu_item
+
+    within "#connected_nodes" do
+      expect(page).to have_content("Menu node Menu / A Page 1")
+    end
+    within "[panel='nodes']" do
+      expect(page).to have_content("(1) Menu node")
+    end
+  end
+
+  context "without parent id" do
+    it "displays error message" do
+      open_page_properties
+
+      click_button "Add a menu node"
+      within ".flash.error" do
+        expect(page).to have_content("Menu Type can't be blank")
+      end
+    end
+  end
+
+  context "with menu node present" do
+    before do
+      open_page_properties
+      add_menu_item
+    end
+
+    it "lets a user remove a menu node" do
+      page.accept_alert "Do you really want to delete this menu node?" do
+        click_link_with_tooltip("Delete this menu node")
+      end
+
+      within "#connected_nodes" do
+        expect(page).to_not have_content("Menu node Menu / A Page 1")
+        expect(page).to have_content(Alchemy.t("No menu node for this page found"))
+      end
+      within "[panel='nodes']" do
+        expect(page).to have_content("(0) Menu nodes")
+      end
+    end
+  end
+end

spec/features/admin/page_editing_feature_spec.rb

@@ -226,7 +226,7 @@
       it "saves the name" do
         within(".alchemy-dialog.modal") do
           find("input#page_name").set("name with some %!x^)'([@!{}]|/?:# characters")
-          find(".submit button").click
+          find(".edit_page .submit button").click
         end
         expect(page).to_not have_selector(".alchemy-dialog-overlay.open")
         expect(page).to have_selector("#sitemap a.sitemap_pagename_link", text: "name with some %!x^)'([@!{}]|/?:# characters")
@@ -240,7 +240,7 @@
         within(".alchemy-dialog.modal") do
           expect(page).to have_css("#s2id_page_parent_id")
           select2_search(new_parent.name, from: "Parent")
-          find(".submit button").click
+          find(".edit_page .submit button").click
         end
         expect(page).to_not have_selector(".alchemy-dialog-overlay.open")
         expect(page).to have_selector("#sitemap .sitemap_url", text: "/#{new_parent.urlname}/#{a_page.urlname}")