generar todos los valores de la tabla al editar #51

app/assets/javascripts/table_field.js

@@ -1,21 +1,31 @@
 $(document).on('turbolinks:load', function() {
+  // Permite agregar más filas a los campos nested? && array?
   $('.add-group').click(function(e) {
     e.preventDefault();
 
     var _this = $(this);
+    // Sube hasta la raíz del grupo
     var _groups = _this.parents('.field-groups');
+    // En este elemento se van a agregar los nuevos
     var _extra  = _groups.children('.extra-groups');
+    // El grupo a clonar es el primero, siempre con id 0
     var _group_orig = _groups
       .children('.field-group')
       .first();
 
+    // Deshabilita select2
     _group_orig.find('select.select2').select2('destroy');
+    // Luego clona el grupo agregándole la clase 'extra' para poder
+    // mostrar el botón de borrado y lo agrega al final del grupo extra
     var _group = _group_orig
       .clone()
+      .addClass('extra')
       .appendTo(_extra);
 
-    // Encontrar todos los elementos con '[0]' en el nombre.
+    // Encuentra todos los elementos con '[0]' en el nombre y les pone
-    var _date  = (new Date).getTime();
+    // un ID generado a partir del tiempo Unix.  De esta forma se crea
+    // un grupo que va a terminar en el mismo Hash de valores.
+    var _date = (new Date).getTime();
     _group.find('[name*="[0]"]').each(function(i, input) {
       var _input = $(input);
       var _name  = _input.attr('name');
@@ -23,16 +33,23 @@ $(document).on('turbolinks:load', function() {
       _input.val('');
     });
 
+    // Regenera el evento del botón de borrado
     _group.find('.remove-group').click(function(e) {
       e.preventDefault();
-
+      $(this).parents('.field-group').remove();
-      var _this = $(this);
-      var _group = _this.parents('.field-group').remove();
     });
 
+    // Regenera los select2
     var _select2 = _group.find('.select2');
     var _select2_opts = { theme: 'bootstrap', width: '' }
     _select2.select2(_select2_opts);
     _group_orig.find('.select2').select2(_select2_opts);
   });
+
+  // Este evento permite remover las filas que ya existen en un post
+  // editado
+  $('.remove-group').click(function(e) {
+    e.preventDefault();
+    $(this).parents('.field-group').remove();
+  });
 });

app/assets/stylesheets/application.scss

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

app/views/posts/_form.haml

@@ -82,6 +82,7 @@
           @post.get_front_matter(:lang).try(:dig, lang)),
           { class: 'form-control select2' }
         %small.text-muted.form-text= t('posts.lang_help')
+  -# Genera todos los campos de la plantilla
   - @post.template_fields.each do |template|
     - next unless type = template.type
     - value = @post.new? ? template.values : @post.get_front_matter(template)

app/views/posts/template_field/_table.haml

@@ -1,32 +1,51 @@
+-# Crea un contenedor para todos los campos agrupados
 .field-groups{class: template.key}
+  -# Si es un array de valores, indicar a las usuarias que pueden
+  -# agregar más campos
   - if template.array?
     %small.text-muted= t('posts.table')
-  .field-group{class: template.key}
+
-    - if template.array?
+  -# El grupo individual, tenemos que crear uno si el post es nuevo, o
-      .clearfix
+  -# todos los que sean necesarios si estamos editando un post.
-        %button.btn.btn-warning.btn-sm.pull-right.remove-group
+  - if @post.new?
-          = fa_icon 'close', title: t('posts.row.del')
+    -# Creamos un array vacío solo para poder tener acceso a :each
-          = t('posts.row.del')
+    - groups = []
-    -# Separar los campos en dos columnas
+  - else
-    - template.nested_fields.each_slice(2).to_a.each do |group|
+    -# Obtenemos todos los valores.  Puede ser un Hash o un Array
-      .form-row
+    - groups = @post.get_front_matter(template.key)
-        - group.each do |nf|
+  - groups.each_with_index do |group, i|
-          .col
+    -# A partir del segundo grupo todos son extra
-            -# Si el template es un array, quiere decir que esperamos un array de hashes.
+    - classes = (i > 0) ? [template.key, 'extra'] : [template.key]
-            -# El valor vacío luego es reemplazado por un id temporal
+    .field-group{class: classes.join(' ')}
-            - if template.array?
+      -# Crear el botón de borrado si vamos a tener varias filas.
-              - name = [template.key, '0', nf.key]
+      -# Luego por CSS ocultamos el primero.
-            - else
+      - if template.array?
-              - name = [template.key, nf.key]
+        .clearfix
-            - if @post.new?
+          %button.btn.btn-warning.btn-sm.pull-right.remove-group
-              - value = nf.values
+            = fa_icon 'close', title: t('posts.row.del')
-            - else
+            = t('posts.row.del')
-              - binding.pry if nf.key.ends_with? '_publico'
+      -# Separar los campos en dos columnas
-              - value = @post.get_front_matter(template.key).try(:[], nf.key)
+      - template.nested_fields.each_slice(2).to_a.each do |col|
-            = render 'posts/template_field/nested',
+        .form-row
-              template: nf,
+          - col.each do |nf|
-              value: value,
+            .col
-              name: name
+              -# Si el template es un array, quiere decir que esperamos un array de hashes.
+              -# El valor vacío luego es reemplazado por un id temporal
+              - if template.array?
+                - name = [template.key, i.to_s, nf.key]
+              - else
+                - name = [template.key, nf.key]
+              - if @post.new?
+                - value = nf.values
+              - else
+                -# Si el campo es un array, groups es un array de hashes
+                -# y group un hash.  De lo contrarios, groups va a ser un
+                -# Hash
+                - value = template.array? ? group[nf.key] : groups[nf.key]
+              = render 'posts/template_field/nested',
+                template: nf,
+                value: value,
+                name: name
   .extra-groups
   - if template.array?
     .clearfix