Add element groups functionality for cleaning up editors

app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -36,6 +36,8 @@ Alchemy.ElementEditors =
     # Binds the custom SaveElement event
     @element_area.on "SaveElement.Alchemy", '.element-editor', (e, data) =>
       @onSaveElement(e, data)
+    @element_area.on "click", '[data-toggle-content-group]', (e) =>
+      @onToggleContentGroup(e)
     # Listen to postMessage messages from the preview frame
     window.addEventListener 'message', (e) =>
       @onMessage(e.data)
@@ -170,6 +172,12 @@ Alchemy.ElementEditors =
       Alchemy.Buttons.enable($element)
     true
 
+  # Toggle visibility of the content fields in the group
+  onToggleContentGroup: (event) ->
+    $group_div = $(event.currentTarget).closest('.content-group');
+    $group_div.toggleClass('expanded');
+    false
+
   # Event handlers
 
   onMessage: (data) ->

app/assets/stylesheets/alchemy/elements.scss

@@ -414,6 +414,37 @@
   }
 }
 
+.content-group {
+  width: 100%;
+  padding: $default-padding 0;
+  position: relative;
+  border-bottom: 1px solid $medium-gray;
+
+  &:last-child { border-bottom: none;}
+
+  .content-group-header { 
+    font-weight: bold;
+
+    .content-group-expand {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+    }
+  }
+
+  .content-group-contents { display: none; }
+
+  &.expanded {
+    .content-group-contents {
+      display: block;
+    }
+
+    .content-group-expand {
+      @extend .fa-minus;
+    }
+  }
+}
+
 .element-content-editors,
 .element-ingredient-editors {
   display: flex;
@@ -901,4 +932,4 @@ textarea.has_tinymce {
   position: absolute;
   right: 7px;
   top: 37px;
-}
+}

app/decorators/alchemy/element_editor.rb

@@ -36,6 +36,29 @@ def has_ingredients_defined?
       element.definition.fetch(:ingredients, []).any?
     end
 
+    # Returns the translated content/ingredient group for displaying in admin editor group headings
+    #
+    # Translate it in your locale yml file:
+    #
+    #   alchemy:
+    #     element_groups:
+    #       foo: Bar
+    #
+    # Optionally you can scope your ingredient role to an element:
+    #
+    #   alchemy:
+    #     element_groups:
+    #       article:
+    #         foo: Baz
+    #
+    def translated_group(group)
+      Alchemy.t(
+        group,
+        scope: "element_groups.#{element.name}",
+        default: Alchemy.t("element_groups.#{group}", default: group.humanize),
+      )
+    end
+
     # CSS classes for the element editor partial.
     def css_classes
       [

app/views/alchemy/admin/elements/_element.html.erb

@@ -23,15 +23,44 @@
         html: {id: "element_#{element.id}_form".html_safe, class: 'element-content'} do |f| %>
 
         <div id="element_<%= element.id %>_errors" class="element_errors"></div>
+
+        <!-- Ingredients -->
         <% if element.has_ingredients_defined? %>
           <div class="element-ingredient-editors">
-            <%= render element.ingredients, element_form: f %>
-          </div>
-        <% else %>
-          <div id="element_<%= element.id %>_content" class="element-content-editors">
-            <%= render element.contents %>
+            <%= render element.ingredients.select { |i| i.definition[:group].blank? }, element_form: f %>
+
+            <!-- Each ingredient group -->
+            <% element.ingredients.select { |i| i.definition[:group].present? }.group_by { |i| i.definition[:group] }.each do |group, ingredients| %>
+              <div class="content-group">
+                <%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %>
+                  <i class="content-group-expand icon fa-fw fa-plus fas"></i>
+                  <%= element.translated_group group %>
+                <% end %>
+                <%= content_tag :div, id: "element_#{element.id}_content_group_#{group.parameterize.underscore}", class: 'content-group-contents' do %>
+                  <%= render ingredients, element_form: f %>
+                <% end %>
+              </div>
+            <% end %>
           </div>
         <% end %>
+        <!-- Contents -->
+        <div id="element_<%= element.id %>_content" class="element-content-editors">
+          <%= render element.contents.select { |c| c.definition[:group].blank? } %>
+
+          <!-- Each content group -->
+          <% element.contents.select { |c| c.definition[:group].present? }.group_by { |c| c.definition[:group] }.each do |group, contents| %>
+            <div class="content-group">
+              <%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %>
+                <i class="content-group-expand icon fa-fw fa-plus fas"></i>
+                <%= element.translated_group group %>
+              <% end %>
+              <%= content_tag :div, id: "element_#{element.id}_content_group_#{group.parameterize.underscore}", class: 'content-group-contents' do %>
+                <%= render contents, element_form: f %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+
         <% if element.taggable? %>
           <div class="autocomplete_tag_list">
             <%= f.label :tag_list %>

spec/dummy/config/alchemy/elements.yml

@@ -261,3 +261,38 @@
     - role: text
       type: Richtext
       default: :lorem_ipsum
+
+- name: element_with_ingredient_groups
+  ingredients:
+    - role: title
+      type: Text
+    - role: description
+      type: Richtext
+      group: details
+    - role: width
+      type: Text
+      group: size
+    - role: height
+      type: Text
+      group: size
+    - role: key_words
+      type: Text
+      group: details
+
+- name: element_with_content_groups
+  contents:
+    - name: title
+      type: EssenceText
+    - name: description
+      type: EssenceRichtext
+      group: details
+    - name: width
+      type: EssenceText
+      group: size
+    - name: height
+      type: EssenceText
+      group: size
+    - name: key_words
+      type: EssenceText
+      group: details
+

spec/dummy/config/alchemy/page_layouts.yml

@@ -32,7 +32,9 @@
       left_column,
       old,
       all_you_can_eat_ingredients,
-      element_with_ingredients
+      element_with_ingredients,
+      element_with_ingredient_groups,
+      element_with_content_groups
     ]
   autogenerate: [all_you_can_eat, right_column, left_column]
 

spec/features/admin/edit_elements_feature_spec.rb

@@ -96,4 +96,42 @@
       end
     end
   end
+
+  {content: 'name', ingredient: 'role'}.each do |type, name_field|
+    describe "With an element that has #{type} groups" do
+      let(:element) { create(:alchemy_element, page: a_page, name: "element_with_#{type}_groups") }
+
+      scenario "collapsed #{type} groups shown", js: true do
+        # Need to be on page editor rather than just admin_elements in order to have JS interaction
+        visit alchemy.edit_admin_page_path(element.page)
+
+        # No group content initially visible
+        expect(page).not_to have_selector(".content-group-contents", visible: true)
+
+        page.find("a#content_group_details_header", text: 'Details').click
+        # 'Details' group content visible
+        expect(page).to have_selector("#element_#{element.id}_content_group_details", visible: true)
+        within("#element_#{element.id}_content_group_details") do
+          expect(page).to have_selector("[data-#{type}-#{name_field}='description']")
+          expect(page).to have_selector("[data-#{type}-#{name_field}='key_words']")
+        end
+        expect(page).to have_selector("#element_#{element.id}_content_group_details", visible: true)
+
+        # 'Size' group content not visible
+        expect(page).not_to have_selector("#element_#{element.id}_content_group_size", visible: true)
+
+        page.find("a#content_group_size_header", text: 'Size').click
+        # 'Size' group now visible
+        expect(page).to have_selector("#element_#{element.id}_content_group_size", visible: true)
+        within("#element_#{element.id}_content_group_size") do
+          expect(page).to have_selector("[data-#{type}-#{name_field}='width']")
+          expect(page).to have_selector("[data-#{type}-#{name_field}='height']")
+        end
+
+        page.find("a#content_group_size_header", text: 'Size').click
+        # 'Size' group hidden
+        expect(page).not_to have_selector("#element_#{element.id}_content_group_size", visible: true)
+      end
+    end
+  end
 end

spec/models/alchemy/site_spec.rb

@@ -309,6 +309,8 @@ module Alchemy
                   "old",
                   "all_you_can_eat_ingredients",
                   "element_with_ingredients",
+                  "element_with_ingredient_groups",
+                  "element_with_content_groups",
                 ],
               },
               {