Ruby on Rails Dashboard partials

Question

I want to make a task-dasboard, but I have a few problems.

What I want to achieve: I want to show multiple partials on one page, that respond to eachother. When you go to the dashboard you have two columns. The first column shows you the lists with all tasks and the second column shows you the details of one of the tasks you have clicked on in the first column (or automaticly the last made task in the list)

Image to visualise what I want to achieve: https://gyazo.com/e87acf214e255817cdb03a22e3a35c4d

At this moment my files look like this:

application.html.erb

<div class="main-content">
<section id="tasks">
    <div class="wrapper">
      <%= render partial: 'task_lists/index', collection: @task_lists %>
    </div>
</section>

<section id="description">
  <%= render partial: 'task_lists/show', collection: @task_lists %>
</section>

<%= yield %>

The <%= render partial: 'task_lists/index', collection: @task_lists %> already works so every task is listed in one column. The problem is that <%= render partial: 'task_lists/show', collection: @task_lists %> , doesn't work.

This is the _show.html.erb where the 'broken' partial links to:

<div class="row">
<div class="task_image">
    <img src="../images/phone_img.png"></img>
</div>
<div class="task_heading">
    <h1><%= @task_list.title %></h1>
    <p class="user_info">For <%= @task_list.client_email %></p>
</div>

<div class="task_content">
  <%= render @task_list.task_items %>
</div>

<div class="task_finish">
    <div class="row">
        <p>Finish task</p>
    </div>
</div>

When I run the project, Rails says that the ID is undifined in the file _show.html.erb .

My question: How can I make that Rails automaticly picks the first task unless someone clicked on a other task? So when you come on the dashboard you see the tasklist in the first column and Rails automaticly picks the first task and shows the details of it ( _show.html.erb ) in the second column. When you click on a other task in the first column you will get to see the details of that task in the second column. Is this possible in Rails or with JQUERY/javascript?

I hope my question is clear, ohterwise let me know.

Thanks in advance.

Answer 1

I think you should pass only one task to the show partial instead of the list. You could do something like

<%= render partial: "task_list/show", object: @task_list.selected %>

Next to this you would need a way to identify the active/selected task (eg implement the selected method I just came up with). This could be a property on the task that gets set when a user clicks on a task perhaps?

Also, seeing your design, I think it would even be better if you do this in the frontend using javascript/css, but that might be a next step.

Hope this helps, otherwise let me know!