WIP: 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/components/alchemy/admin/growl.rb

@@ -0,0 +1,25 @@
+module Alchemy
+  module Admin
+    class Growl < ViewComponent::Base
+      delegate :flash, to: :helpers
+      attr_reader :message, :type
+
+      def before_render
+        if flash.any?
+          key = flash.keys.first
+          @message = flash[key]
+          @type = key
+
+          # delete the flash entry if the component is used in a Turbo Frame which can otherwise lead to multiple flash messages after a page reload
+          flash.delete(key)
+        end
+      end
+
+      def call
+        return unless message
+
+        content_tag("alchemy-growl", nil, {message: message, type: type})
+      end
+    end
+  end
+end

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,34 @@ def new
         )
       end
 
+      def create
+        if turbo_frame_request?
+          @node = Alchemy::Node.build(resource_params)
+          @page = @node.page
+          if @node.valid?
+            @node.save
+            flash_notice_for_resource_action(:create)
+          else
+            flash[:error] = @node.errors.full_messages.join(", ")
+            @page.reload # reload the page to update the nodes collection
+          end
+        else
+          super
+        end
+      end
+
+      def destroy
+        if turbo_frame_request?
+          @node = Alchemy::Node.find(params[:id])
+          @page = @node.page
+          @node.destroy
+          @page.reload # reload the page to update the nodes collection
+          flash_notice_for_resource_action(:destroy)
+        else
+          super
+        end
+      end
+
       private
 
       def resource_params

app/javascript/alchemy_admin.js

@@ -25,12 +25,14 @@ import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/growl"
 import "alchemy_admin/components/ingredient_group"
 import "alchemy_admin/components/link_buttons"
 import "alchemy_admin/components/node_select"
 import "alchemy_admin/components/uploader"
 import "alchemy_admin/components/overlay"
 import "alchemy_admin/components/page_select"
+import "alchemy_admin/components/replace_template"
 import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tinymce"

app/javascript/alchemy_admin/components/growl.js

@@ -0,0 +1,17 @@
+export class Growl extends HTMLElement {
+  connectedCallback() {
+    if (this.message) {
+      Alchemy.growl(this.message, this.type)
+    }
+  }
+
+  get message() {
+    return this.getAttribute("message")
+  }
+
+  get type() {
+    return this.getAttribute("type") || "notice"
+  }
+}
+
+customElements.define("alchemy-growl", Growl)

app/javascript/alchemy_admin/components/replace_template.js

@@ -0,0 +1,26 @@
+export class ReplaceTemplate extends HTMLElement {
+  connectedCallback() {
+    const elementsToReplace = document.querySelectorAll(
+      `[data-replace-with="${this.for}"]`
+    )
+    if (elementsToReplace.length > 0) {
+      elementsToReplace.forEach((elementToReplace) => {
+        elementToReplace.innerHTML = this.template.innerHTML
+      })
+    } else {
+      console.log(
+        `Couldn't find element to replace for "${this.for}" - identifier!`
+      )
+    }
+  }
+
+  get template() {
+    return this.querySelector("template")
+  }
+
+  get for() {
+    return this.getAttribute("for")
+  }
+}
+
+customElements.define("alchemy-replace-template", ReplaceTemplate)

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

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

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

@@ -0,0 +1,55 @@
+<%= 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>
+    <% if @page.nodes.length > 0 %>
+      <% @page.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>
+  <%= render Alchemy::Admin::Growl.new %>
+  <alchemy-replace-template for="nodes_label">
+    <template>
+      <%= render 'alchemy/admin/nodes/label', count: @page.reload.nodes.size %>
+    </template>
+  </alchemy-replace-template>
+<% 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" data-replace-with="nodes_label">
+    <%= 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"

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}")