Add the ability to nest components in the CMS

Why:

We need to be able to include some component inside of other bigger
components and have them render a dynamic number of options.

This change addresses the need by:

Including some methods from the ArrayComponent class in the larger
Editor class so they are available to all inheriting classes.
Update the atomic_cms.js to be able to add subcomponents to parent
ones.

app/assets/javascripts/atomic_cms.js

@@ -143,11 +143,10 @@
             var $next = $($input.siblings('input'));
             $input.attr('name', null).val('');
 
-            return $input.on('change', function() {
+            $input.on('change', function() {
 
               var formData = new FormData(),
-                  fileData = event.target.files[0],
-                  next = $(event.target).next();
+                  fileData = event.target.files[0];
                   formData.append('file', fileData);
 
               $.ajax({
@@ -166,15 +165,31 @@
             });
           });
 
+          $editor.find('.add-children-sublist-item').each(function() {
+            var $input = $(this);
+            $input.attr('name', null).val('');
+            $input.click(function(e) {
+              e.preventDefault();
+              var component = $(this).siblings('.children-sublist').val();
+              if (component !== ''){
+                $scope.$broadcast('append', {
+                  href: component
+                });
+              }
+            });
+          });
+
           $editor.find(':input').each(function() {
-            if($(this).prop('type') === 'file') return;//guard clause, already processed file fields
+            //guard clause for handling alternatly handled inputs
+            if($(this).prop('type') === 'file') { return; }
+            if($(this).hasClass('children-sublist')) { return; }
 
             var $input = $(this);
             var fieldName = $input.attr('name').replace($scope.prefix, '').replace(/\[|\]/g, '');
 
             $input.attr('name', null).val($scope.preview[fieldName]);
 
-            return $input.on('keyup change', function() {
+            $input.on('keyup change', function() {
               $scope.$apply(function() {
                 $scope.preview[fieldName] = $input.val();
               });

app/components/array_component.rb

@@ -1,20 +1,11 @@
 class ArrayComponent < AtomicAssets::Component
-  def children
-    options[:children] ||= []
-  end
-
   def render
     children.map(&:render).reduce(:+)
   end
 
   def edit
     rtn = cms_fields
-    rtn << cms_array(:children) do
-      rtn2 = ""
-      children.each do |child|
-        rtn2 << cms_array_node { child.edit }
-      end
-      rtn2.html_safe
-    end
+    rtn << render_child_array
+    rtn.html_safe
   end
 end

app/controllers/atomic_cms/components_controller.rb

@@ -1,5 +1,7 @@
-class AtomicCms::ComponentsController < ApplicationController
-  def edit
-    render text: component(params[:id]).edit_array(!!params[:inline])
+module  AtomicCms
+  class ComponentsController < ApplicationController
+    def edit
+      render text: component(params[:id]).edit_array(!!params[:inline])
+    end
   end
 end

app/helpers/component_helper.rb

@@ -1,6 +1,8 @@
 module ComponentHelper
   def add_option(option, output = nil)
-    (output) ? output : option if option
+    return unless option
+    return output if output
+    option
   end
 
   def markdown(text)
@@ -13,6 +15,7 @@ def markdown_help_url
   end
 
   def render_children(children)
+    return children unless children.present? && children.is_a?(Array)
     children.map(&:render).reduce(:+)
   end
 end

app/views/components/_children_field.html.slim

@@ -0,0 +1,6 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  select.cms-field class="children-sublist"
+    option
+    = options_for_select(options[:collection], value)
+  a class="button add-children-sublist-item" Add

lib/atomic_cms/editor.rb

@@ -14,6 +14,20 @@ def edit_array(inline = false)
       end
     end
 
+    def render_child_array
+      cms_array(:children) do
+        rtn = ""
+        children.each do |child|
+          rtn << cms_array_node { child.edit }
+        end
+        rtn.html_safe
+      end
+    end
+
+    def children
+      options[:children] ||= []
+    end
+
     module ClassMethods
       def from_hash(params)
         h.component(params.delete(:template_name)).tap do |obj|

lib/atomic_cms/engine.rb

@@ -1,6 +1,5 @@
 module AtomicCms
   require 'paperclip'
-  require 'pry'
   class Engine < ::Rails::Engine
     isolate_namespace AtomicCms
 
@@ -11,7 +10,7 @@ class Engine < ::Rails::Engine
       g.helper false
     end
 
-    initializer 'atomic_cms.action_controller' do |_app|
+    initializer "atomic_cms.action_controller" do |_app|
       ActiveSupport.on_load :action_controller do
         helper AtomicCms::ComponentHelper
       end