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/controllers/alchemy/admin/nodes_controller.rb

@@ -16,6 +16,29 @@ def new
         )
       end
 
+      def create
+        if turbo_frame_request?
+          @node = Alchemy::Node.build(resource_params)
+          @page = @node.page
+          @node.save
+          flash_notice_for_resource_action(:create)
+        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,6 +25,7 @@ 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"

app/javascript/alchemy_admin/components/growl.js

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

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

@@ -0,0 +1,53 @@
+<%= 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.name %> <%= node.url %></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, @node_url ||= @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 class="with_icon">
+          <%= render_icon(:plus) %>
+          <%= Alchemy.t(:create_node) %>
+        </button>
+      </div>
+    <% end %>
+  </fieldset>
+  <alchemy-growl message="<%= flash[:notice] %>"></alchemy-growl>
+<% end %>
+
+

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

@@ -0,0 +1,4 @@
+<%= render "page_nodes" %>
+<script type="text/javascript" charset="utf-8">
+  Alchemy.growl()
+</script>

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">
+    (<%= @page.nodes.size %>) <%= Alchemy::Node.model_name.human(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"