0

Following a GoRails episode Using Rails 7.0.4.3 and Bootstrap 5, I created a turbo_frame dynamic table that adds rows when required to create a document (Quotation with different services to quote) It works fine, BUT the parent table style is not passed to the new rows. The setup is based on a nested attributes setting that is working fine, it is just the table style that's not right. This is my parent form view:

<%= form_with(model: quotation) do |form| %>
  <% if quotation.errors.any? %>
    <div style="color: red">
      <h2><%= pluralize(quotation.errors.count, "error") %> evitaron que se guardara el registro:</h2>

      <ul>
        <% quotation.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  
  <fieldset>
    <table class="show-table">
      <tr>
        <% %>
        <td>Cliente:</td>
        <td><%= @quotation.request.client.name %></td>
        <%= form.hidden_field :request_id %>
      </tr>
      <tr>
        <td><%= form.label :state, "Estatus:" %></td>
        <td><%= form.select :state, { en_proceso: 'en_proceso', enviada: 'enviada', facturada: 'facturada', comentada: 'comentada', fondos: 'fondos' }, prompt: 'Seleccione un estado'%></td>
        
      </tr>
      <tr>
        <td><%= form.label :total, "Total:" %></td>
        <td><%= form.text_field :total %></td>
      </tr>
      <tr>
        <td  class="botones"><%= form.submit "Guardar", class: "btn-lg success" %></td>
        <td><%= link_to "Add concepto", line_fields_quotations_path, data: { turbo_stream: true }, class: "btn-lg success" %></td>
      </tr>
    </table>
  </fieldset>

  <div id="lines" class="index-division">
    <table class="index-table">
        <thead>
          <th>Concepto</th>
          <th>Cantidad</th>
          <th>Precio Unitario</th>
        </thead>
        <tbody>
          <%= render partial: 'quote_line', collection: @quotation.quote_lines %>
        </tbody>
    </table>
  </div>
  
<% end %>

<% content_for :footer do %>
  <p id="notice"><%= notice %></p>
<% end %>

This is my _quote_line.html.erb

<tr>
  <%= fields_for "quotation[quote_lines_attributes][#{quote_line.persisted? ? quote_line.id : quote_line.object_id }]", quote_line do |ff| %>
    <td><%= ff.collection_select :quote_concept, QuotationConcept.all, :id, :name %></td>
    <td><%= ff.number_field :quantity %></td>
    <td><%= ff.number_field :unit_price %></td>
    <%= ff.hidden_field :id %>
  <% end %>
</tr>

And my line_fields.turbo_stream.erb

<%= turbo_stream.append "lines" do %>
  <%= render partial: "quote_line", locals: { quote_line: QuoteLine.new } %>
<% end %>

The resource's routes are set up like this:

resources :quotations do
    collection do
      get 'line_fields'
    end
  end

Table style is:

.show-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  border-style: hidden;
  box-shadow: 0 0 0 1px rgb(88, 182, 185);
  padding-top: 30px;
  padding-bottom: 30px;
  td.botones {
    text-align: center;
  }
  th, td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ccc;
  }
  thead tr {
    background-color: #8abee9;
    color: #ddd;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
}

I need help to figure out why the added rows are not getting the style, thank you in advance. I tried wrapping the <%= render partial: 'quote_line', collection: @quotation.quote_lines %>statement with <%= turbo_frame_tag 'someid' %> but it makes no difference, regarding style. This is how the app looks with the broken table... It works fine, I can save new lines with the quotation...

Table with one added row

I just found that the new row is added to the document OUT of the Table...Check... enter image description here

Luis Flores
  • 91
  • 3
  • 14

0 Answers0