fix(node-select): Display order and seperator style

app/assets/stylesheets/alchemy/node-select.scss

@@ -10,15 +10,23 @@
   align-items: center;
   height: 21px;
 
-  .icon {
+  > alchemy-icon {
     margin: 0 8px 0 4px;
+  }
 
+  .icon {
     .select2-highlighted & {
       fill: $white;
     }
   }
 }
 
+.node-select--node-display_name,
+.node-select--node-ancestors {
+  display: inline-flex;
+  align-items: center;
+}
+
 .node-select--node-name {
   font-weight: bold;
 }

app/controllers/alchemy/api/nodes_controller.rb

@@ -9,7 +9,7 @@ def index
       @nodes = Node.all
       @nodes = @nodes.includes(:parent)
       @nodes = @nodes.where(language_id: params[:language_id]) if params[:language_id]
-      @nodes = @nodes.ransack(params[:filter]).result
+      @nodes = @nodes.ransack(params[:filter]).result.order(:lft)
 
       if params[:page]
         @nodes = @nodes.page(params[:page]).per(params[:per_page])

app/javascript/alchemy_admin/components/node_select.js

@@ -23,12 +23,14 @@ class NodeSelect extends RemoteSelect {
    */
   _renderListEntry(node) {
     const ancestors = node.ancestors.map((a) => a.name)
+    const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
+
     return `
       <div class="node-select--node">
         <alchemy-icon name="menu-2"></alchemy-icon>
         <div class="node-select--node-display_name">
           <span class="node-select--node-ancestors">
-            ${ancestors.join(" /&nbsp;")}
+            ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
           </span>
           <span class="node-select--node-name">
             ${node.name}

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

@@ -7,10 +7,11 @@
       <th class="tools"></th>
     </tr>
     <% nodes = @page.nodes.select(&:persisted?) %>
+    <% seperator = '<alchemy-icon name="arrow-right-s" style="vertical-align: text-bottom"></alchemy-icon>' %>
     <% if nodes.length > 0 %>
       <% nodes.each do |node| %>
         <tr class="even">
-          <td><%= "#{node.ancestors.map(&:name).join(" / ")} / #{node.name}" %></td>
+          <td><%== "#{node.ancestors.map(&:name).join(seperator)}#{seperator}<strong>#{node.name}</strong>" %></td>
           <td class="tools">
             <sl-tooltip content="<%= Alchemy.t("delete_node") %>">
               <%= link_to render_icon(:minus),

spec/features/admin/nodes_management_spec.rb

@@ -29,7 +29,7 @@ def add_menu_item
     add_menu_item
 
     within "#page_nodes table" do
-      expect(page).to have_content("Menu node Menu / A Page 1")
+      expect(page).to have_content("Menu node MenuA Page 1")
     end
     within "[panel='nodes']" do
       expect(page).to have_content("(1) Menu node")
@@ -59,7 +59,7 @@ def add_menu_item
       end
 
       within "#page_nodes table" do
-        expect(page).to_not have_content("Menu node Menu / A Page 1")
+        expect(page).to_not have_content("Menu node MenuA Page 1")
         expect(page).to have_content(Alchemy.t("No menu node for this page found"))
       end
       within "[panel='nodes']" do

spec/requests/alchemy/api/nodes_controller_spec.rb

@@ -17,6 +17,8 @@ module Alchemy
       context "with nodes present" do
         let!(:node) { create(:alchemy_node, name: "lol") }
         let!(:node2) { create(:alchemy_node, name: "yup") }
+        let!(:node3) { create(:alchemy_node, name: "foo", parent: node) }
+
         let(:result) { JSON.parse(response.body) }
 
         it "returns JSON" do
@@ -26,19 +28,21 @@ module Alchemy
           expect(result).to have_key("data")
         end
 
-        it "returns all nodes" do
+        it "returns all nodes ordered by nesting" do
           get alchemy.api_nodes_path(params: {format: :json})
-
-          expect(result["data"].size).to eq(2)
+          expect(result["data"].size).to eq(3)
+          expect(result["data"][0]).to match(hash_including("id" => node.id))
+          expect(result["data"][1]).to match(hash_including("id" => node3.id))
+          expect(result["data"][2]).to match(hash_including("id" => node2.id))
         end
 
         it "includes meta data" do
           get alchemy.api_nodes_path(params: {format: :json})
 
-          expect(result["data"].size).to eq(2)
+          expect(result["data"].size).to eq(3)
           expect(result["meta"]["page"]).to eq(1)
-          expect(result["meta"]["per_page"]).to eq(2)
-          expect(result["meta"]["total_count"]).to eq(2)
+          expect(result["meta"]["per_page"]).to eq(3)
+          expect(result["meta"]["total_count"]).to eq(3)
         end
 
         context "with page param given" do
@@ -52,7 +56,7 @@ module Alchemy
             expect(result["data"].size).to eq(1)
             expect(result["meta"]["page"]).to eq(2)
             expect(result["meta"]["per_page"]).to eq(1)
-            expect(result["meta"]["total_count"]).to eq(2)
+            expect(result["meta"]["total_count"]).to eq(3)
           end
         end