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...
I just found that the new row is added to the document OUT of the Table...Check...