0

In my Rails 7 (with bootstrap) app I need to create a table with all users transaction that has on each row an arrow that when clicked on, expands that row inside which is a new table (that's what I think it is - a new table). I think the attached design will better explain what I mean:

enter image description here

To achieved that I could try javascript with something like this https://jsfiddle.net/Wfxpu/180/ but I'm not sure if it's a modern approach. I'm wondering is it possible to a write something like this without any JS code using turbo maybe? or even pure HTML ?

Here is what I was trying to do:

# transaction controller
class TransactionsController < ApplicationController
  def index
    response = client.transactions.list(platform_id: current_user.platform_id, page: 1, per_page: 100)
    @transactions = response.body['data']
  end

  private

  def client
    @client ||= TestAPI::Client.new
  end
end

so then sample table would be:

# views/transactions/index
<table>
<% @transactions.each do |transaction| %>
  <tr><%= transaction.amount %></tr>
<% end %>
</table>
mr_muscle
  • 2,536
  • 18
  • 61

1 Answers1

0

You could try using a remote link_to as your "arrow" to invoke show_more action.

<%= link_to your_path, remote: true do %>
   your image
<% end %>

In your controller you would need to respond to that with

def show_more
  ...
  @data_to_show = some_database_call
  respond_to do |format|
      format.js
      ...
  end
end

then in show_more.js.erb you can run javascript using the data that you just received.

var content = document.querySelector("#hidden-section-1");
content.innerHTML = ""
content.insertAdjacentHTML("beforeend", 
  "<%= j render('layouts/your_template', data: @data_to_show) %>");

where layouts/your_template would be a template with all the stuff you want to show(the "other" table you mentioned)

<h1> merchant: <%= data.merchant %> <h1>
...
<p> transaction_id: <%= data.transaction_id %> </p>
...
Marelons
  • 150
  • 6
  • `remote: true` means AJAX isn’t it? So in Rails 7 ajax is deprecated I believe (well technically it's replaced by Turbo). – mr_muscle Sep 04 '22 at 15:58
  • Oh, thanks I didn't even realised when it changed. I'm using stimulus.js myself and having trouble working with remote forms in Rails 7, I need to have a look at turbo since it's required with stimulus – Marelons Sep 06 '22 at 07:25