0

En un formulario de compra, agrego el producto mas los datos de requisito del mismo, sin embargo, necesito que dicho formulario de compra me acepte mas de un producto en el mismo, esto podria lograrlo usando nested form + la gema de cocoon, sin embargo, los atributos pertenecen al mismo modelo, por lo que la logica mas rapida que se me viene es crear 2 modelos distintos, para luego estar replicando los campos, sin embargo, no se si existe una manera de replicar dichos campos sin la necesidad de crear un modelo aparte que solo me servira para anidarlos posteriormente, comparto el codigo esencial del problema:

Formulario de compra

<div id="form-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        Producto      
      </div>

      <%= form_with(model: @input, remote: true) do |form| %>

        <div class="modal-body">
          <div class="row">
            <!-- Errors -->
            <div class="col-sm-12">
              <% if @input.errors.any? %>
                <div id="error_explanation">
                  <h2><%= pluralize(@input.errors.count, "error") %> prohibited this input from being saved:</h2>
                  <ul>
                  <% @input.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                  <% end %>
                  </ul>
                </div>
              <% end %>
            </div>
            <!-- Fields -->  
            <div class="col-sm-12">
              <div class="form-group">
                <% form.label :invoice %>
                <%= form.text_field :invoice, placeholder: "Codigo de la factura", class: "form-control" %>    
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <% form.label :product_id %>
                <%= form.collection_select :product_id, Product.all, :id, :code, { :include_blank => "Seleccionar producto" }, required: true, class: "form-control" %>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <% form.label :quantity %>
                <%= form.text_field :quantity, placeholder: "Cantidad", class: "form-control" %>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <% form.label :precio %>
                <%= form.text_field :price, placeholder: "Precio", class: "form-control" %>                    
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <% form.label :utilidad %>
                <%= form.text_field :utility, placeholder: "Porcentaje de utilidad", class: "form-control" %>      
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <% form.label :customer %>
                <%= form.text_field :provider, placeholder: "Proveedor", class: "form-control" %>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <%= form.submit "Enviar", class: "btn btn-primary" %>
        </div>

      <% end %>

    </div>
  </div>
</div>

Modelo Compra(Input)

class Input < ApplicationRecord

    belongs_to :product

    validates :quantity, numericality: true
    validates :invoice, uniqueness: true

end

Modelo Productos

class Product < ApplicationRecord

    has_many :inputs

end

Migración Compra

class CreateInputs < ActiveRecord::Migration[5.2]
  def change
    create_table :inputs do |t|
      t.string :invoice
      t.integer :product_id
      t.float :quantity
      t.float :price
      t.float :utility
      t.string :provider

      t.timestamps
    end
  end
end

Migración producto

class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.string :code
      t.string :name

      t.timestamps
    end
  end
end

Basicamente necesito replicar todos los campos de Compra(Input), a excepcion del numero de factura(Invoice), sin embargo como vuelvo a mencionar, todos estos atributos pertenecen al mismo modelo, por lo que no se de que manera deberia manejar esto al no poseer 2 modelos distintos que se aniden, agradezco su sugerencias

1 respuesta 1

0

No entiendo muy bien que intentas hacer con los campos dinamicos , pero te voy a compartir como los trabajo yo.

Si usas postgres puedes usar un campo como tipo jsonb. En tu migracion (en este caso proyectos) iria asi:

class AddColumnCamposToProyecto < ActiveRecord::Migration[5.1]
  def change
    add_column :proyectos, :campos, :jsonb #, null: false, default: {}
    add_index :proyectos, :campos, using: :gin
  end
end

Luego para hacer que se creen dinamicamente puedes usar vue js, yo lo use con rails 5 y webpack este es mi codigo en vue js para agregar y eliminar campos dinamicamente

esto se crea en: app/javascript/components/multi-text.vue

<template>
  <div class="multi-text">
  <h5>Campos customizables</h5>
  <p>Hacer click sobre los (label) para editar el nombre de el campo </p>
    <form >
      <div class="form-inputs">  
        <div class="row" v-for="(campo, index) in campos" :key="index">
            <div class="col-sm-2">
              <label v-show = "campo.editable == false" @click = "campo.editable = true"> {{campo.nombre}}</label>
              <input v-show="campo.editable == true"
                type="text"
                placeholder="valor" 
                class="form-control" 
                v-model="campo.nombre"
                v-on:keyup = "sinCaracteresEspeciales($event,campo)"
                v-on:blur= "campo.editable=false;campo.soltoTecla=true"

              />
            </div>
             <div class="col-sm-2 ">
              <input 
                 type="text"
                 placeholder="valor" 
                 class="form-control" 
                 v-model="campo.valor"
              />
            </div>

           <div class="col-sm-2">
              <button
                type="button"
                class="btn-sm btn-danger"
                title = "Quitar"
                @click.prevent="deleteValue(index)"
                v-show="numeroCampos > 1"
                >
              <i class="fa fa-trash"></i>
            </button>
           </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <button
              type="button"
              class="btn-sm btn-primary"
              title = "Añadir"
              @click.prevent="addValue"
              >
              <i class="fa fa-plus"></i> 
            </button>
             <button
               type="button"
               class="btn-sm btn-primary"
               title ="Guardar"
               @click.prevent="guardarCambios"
            >
              <i class="fa fa-save"> Guardar</i>
            </button>
          </div>
        </div>
      </div>
    </form> 
      <!--  <pre> {{ $data | json }} </pre>  -->
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    props: ['rutaSaveCampos','camposProyecto'],
    // return empty data until init complete async
    data() {
      return {    
          campos: [{nombre: "(label)", valor: "", editable: false,soltoTecla: false}],
          errors: [],
          resultado: ""
        };
    },
    created(){
      if (this.camposProyecto) {
        const campos_de_proyecto = JSON.parse(this.camposProyecto);
        this.campos = campos_de_proyecto.lista;
      }
    },
    computed: {
      numeroCampos: function(){
        return this.campos.length;
      }
    },
    methods: {
      deleteValue: function(index) {
        this.campos.splice(index, 1);
        //this.$emit('input', this.campos);
      },
      addValue: function() {
        this.campos.push( { nombre: '(label)', valor: '', editable: false, soltoTecla: false} );
        //this.$emit('input', this.campos);
      },
      guardarCambios: function(){
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        axios.post(this.rutaSaveCampos,{
          dataCampos: this.campos,
          authenticity_token: token
        }).then(response => {
           this.resultado= response.data;
           if (this.resultado == "ok") {
             toastr.success("Campos Guardados"); 
           }

         })
        .catch(e => {
          this.errors.push(e);
          toastr.error(e);
        })
      },
      sinCaracteresEspeciales(event,campo){
        //reemplaza caracters especiales a excepcion de numeros, letras, espacio o ñ y Ñ
        //event.target.value = event.target.value.replace(/[^ña-zA-ÑZ0-9 ]/g, '')
        campo.nombre =event.target.value.replace(/[^ña-zA-ÑZ0-9 ]/g, '')
      }    
    }

  }
</script>

Luego si estas usando turbolinks 5 con vue tienes un adaptador en tu codigo ubicado en app/javascript/packs/multi-text.js iria esto

import Vue from 'vue/dist/vue.esm'
import MyComponent from '../app.vue'
import MultiText from '../components/multi_text.vue'

/*
Si quiere tener como acceso global o seteas en la variale windo
window.Vue = Vue;
window.MultiText = MultiText;
*/

    import TurbolinksAdapter from 'vue-turbolinks';
    Vue.use(TurbolinksAdapter)
    document.addEventListener('turbolinks:load', () => {
      var element= document.getElementById("este");
      if (element!=null) {
        var vueapp = new Vue({
          el: element,
          components: { MultiText}
        });
      }
    });

Luego en tu vista lo invocarias asi

 <div id="este">
      <multi-text 
        ruta-save-campos="<%= guardar_campos_proyectos_path(@proyecto) if @proyecto.id.present? %>"
        campos-proyecto= "<%= @proyecto.campos.to_json if @proyecto.campos.present? %>" > 
      <multi-text/> 
    </div>

Y finalmente el controlador para guardar tus campos tendrias un metodo asi:

def guardar_campos
    data_campos = params[:dataCampos].to_json(:only =>[:nombre, :valor])
    hash_data = Hash.new
    # Añadimos el array de los datos a el hash 
    hash_data = {"lista": JSON.parse(data_campos).to_a}

    if @proyecto.update_attributes(campos: hash_data )
      render json: :ok
    else
      render json: @proyecto.errors
    end
    authorize @proyecto
  end

Espero te sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.