multiplicar los campos tablas #51

app/assets/javascripts/table_field.js

@@ -0,0 +1,38 @@
+$(document).on('turbolinks:load', function() {
+  $('.add-group').click(function(e) {
+    e.preventDefault();
+
+    var _this = $(this);
+    var _groups = _this.parents('.field-groups');
+    var _extra  = _groups.children('.extra-groups');
+    var _group_orig = _groups
+      .children('.field-group')
+      .first();
+
+    _group_orig.find('select.select2').select2('destroy');
+    var _group = _group_orig
+      .clone()
+      .appendTo(_extra);
+
+    // Encontrar todos los elementos con '[0]' en el nombre.
+    var _date  = (new Date).getTime();
+    _group.find('[name*="[0]"]').each(function(i, input) {
+      var _input = $(input);
+      var _name  = _input.attr('name');
+      _input.attr('name', _name.replace(/\[0\]/, `[${_date}]`));
+      _input.val('');
+    });
+
+    _group.find('.remove-group').click(function(e) {
+      e.preventDefault();
+
+      var _this = $(this);
+      var _group = _this.parents('.field-group').remove();
+    });
+
+    var _select2 = _group.find('.select2');
+    var _select2_opts = { theme: 'bootstrap', width: '' }
+    _select2.select2(_select2_opts);
+    _group_orig.find('.select2').select2(_select2_opts);
+  });
+});

app/assets/stylesheets/application.scss

@@ -140,3 +140,22 @@ textarea.post-content {
     }
   }
 }
+
+.field-groups {
+  .field-group {
+    .remove-group {
+      display: none
+    }
+  }
+
+  .extra-groups {
+    .field-group {
+      border-top: 1px solid lightgray;
+      padding-top: 1rem;
+
+      .remove-group {
+        display: inline-block;
+      }
+    }
+  }
+}

app/views/posts/template_field/_table.haml

@@ -1,12 +1,10 @@
-.field-items{class: template.key}
+.field-groups{class: template.key}
   - if template.array?
     %small.text-muted= t('posts.table')
-    .clearfix
+  .field-group{class: template.key}
-      %button.btn.btn-success= t('posts.row.add')
-  .field-item{class: template.key}
     - if template.array?
       .clearfix
-        %small.pull-right
+        %button.btn.btn-warning.btn-sm.pull-right.remove-group
           = fa_icon 'close', title: t('posts.row.del')
           = t('posts.row.del')
     -# Separar los campos en dos columnas
@@ -23,8 +21,13 @@
             - if @post.new?
               - value = nf.values
             - else
+              - binding.pry if nf.key.ends_with? '_publico'
               - value = @post.get_front_matter(template.key).try(:[], nf.key)
             = render 'posts/template_field/nested',
               template: nf,
               value: value,
               name: name
+  .extra-groups
+  - if template.array?
+    .clearfix
+      %button.btn.btn-success.btn-block.add-group= t('posts.row.add')