From 034850c8fe0efc72aff1d9872ae84c4436721e0e Mon Sep 17 00:00:00 2001 From: f Date: Mon, 25 Jun 2018 17:28:09 -0300 Subject: [PATCH] generar todos los valores de la tabla al editar #51 --- app/assets/javascripts/table_field.js | 27 ++++++-- app/assets/stylesheets/application.scss | 12 ++-- app/views/posts/_form.haml | 1 + app/views/posts/template_field/_table.haml | 71 ++++++++++++++-------- 4 files changed, 73 insertions(+), 38 deletions(-) diff --git a/app/assets/javascripts/table_field.js b/app/assets/javascripts/table_field.js index b22a7b5e..ede3fa2e 100644 --- a/app/assets/javascripts/table_field.js +++ b/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. - var _date = (new Date).getTime(); + // Encuentra todos los elementos con '[0]' en el nombre y les pone + // 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(); - - var _this = $(this); - var _group = _this.parents('.field-group').remove(); + $(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(); + }); }); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8947c22f..d274596e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -148,14 +148,12 @@ textarea.post-content { } } - .extra-groups { - .field-group { - border-top: 1px solid lightgray; - padding-top: 1rem; + .extra { + border-top: 1px solid lightgray; + padding-top: 1rem; - .remove-group { - display: inline-block; - } + .remove-group { + display: inline-block; } } } diff --git a/app/views/posts/_form.haml b/app/views/posts/_form.haml index b09d8c1c..8f7c0f32 100644 --- a/app/views/posts/_form.haml +++ b/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) diff --git a/app/views/posts/template_field/_table.haml b/app/views/posts/template_field/_table.haml index e2e3203f..3a3f4f58 100644 --- a/app/views/posts/template_field/_table.haml +++ b/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? - .clearfix - %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 - - template.nested_fields.each_slice(2).to_a.each do |group| - .form-row - - group.each do |nf| - .col - -# 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, '0', nf.key] - - else - - name = [template.key, nf.key] - - 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 + + -# El grupo individual, tenemos que crear uno si el post es nuevo, o + -# todos los que sean necesarios si estamos editando un post. + - if @post.new? + -# Creamos un array vacío solo para poder tener acceso a :each + - groups = [] + - else + -# Obtenemos todos los valores. Puede ser un Hash o un Array + - groups = @post.get_front_matter(template.key) + - groups.each_with_index do |group, i| + -# A partir del segundo grupo todos son extra + - classes = (i > 0) ? [template.key, 'extra'] : [template.key] + .field-group{class: classes.join(' ')} + -# Crear el botón de borrado si vamos a tener varias filas. + -# Luego por CSS ocultamos el primero. + - if template.array? + .clearfix + %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 + - template.nested_fields.each_slice(2).to_a.each do |col| + .form-row + - col.each do |nf| + .col + -# 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