CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3
Peter Tretiakov
Peter Tretiakov

Reputation: 3410

Wrap and create divs with rails

I have a div with Tasks. Every Task is a separate form.

<div id="tasks">
    <form id="task">...(@task.date = 2013-08-25)...</form>
    <form id="task">...(@task.date = 2013-08-25)...</form>
    <form id="task">...(@task.date = 2013-08-24)...</form>
    <form id="task">...(@task.date = 2013-08-23)...</form>
    <form id="task">...(@task.date = 2013-08-23)...</form>
    <form id="task">...(@task.date = 2013-08-23)...</form>
    <form id="task">...(@task.date = 2013-08-21)...</form>
    <form id="task">...(@task.date = 2013-08-21)...</form>
</div>

I want to wrap Tasks with the same date in separate div and to add div with header info.

<div id="tasks">
    <div class="day_tasks">
        <div class="day_tasks_header">...</div>
        <form id="task">...(@task.date = 2013-08-25)...</form>
        <form id="task">...(@task.date = 2013-08-25)...</form>
    </div>
    <div class="day_tasks">
        <div class="day_tasks_header">...</div>
        <form id="task">...(@task.date = 2013-08-24)...</form>
    </div>
    <div class="day_tasks">
        <div class="day_tasks_header">...</div>
        <form id="task">...(@task.date = 2013-08-23)...</form>
        <form id="task">...(@task.date = 2013-08-23)...</form>
        <form id="task">...(@task.date = 2013-08-23)...</form>
    </div>
    <div class="day_tasks">
        <div class="day_tasks_header">...</div>
        <form id="task">...(@task.date = 2013-08-21)...</form>
        <form id="task">...(@task.date = 2013-08-21)...</form>
    </div>
</div>

It's possible to add a date to div's class name and to .wrapAll divs with the same class in separate div with jQuery, and then .prepend() a div with header info on the top of this separate div. But I don't want to put so much view logic from rails side to JS side.

Is it possible to do it with Rails?

My index.html.erb is rather simple:

<%= content_tag(:div, id: 'tasks') do %>
    <%= render @tasks %>
<% end %>

_task.html.erb is also a simple <%= form_for task ... %>

Upvotes: 0

Views: 55

Answers (1)

Shadwell
Shadwell

Reputation: 34774

There is a method group_by in ruby which I think would help you achieve this. You can group your tasks by date. You'll need to change your rendering approach slightly but, as you say, it'll be neater than doing it in javascript.

So, to group your tasks you can do:

grouped_tasks = @tasks.group_by(&:date)

Which will return you a hash mapping the date to the tasks that have that date, for example:

{ "2013-08-25" => [task1, task2],
  "2013-08-24" => [task3],
  "2013-08-23" => [task4, task5, task6],
  "2013-08-21" => [task7, task8] }

You can then iterate over the groupings to build up the view:

<div id="tasks">
  <% grouped_tasks.each do |date, tasks| %>
    <div class="day_tasks">
      <div class="day_tasks_header">...</div>
      <% tasks.each do |task| %>
        <%= form_for task ... %>
      <% end %>
    </div>
  <% end %>
</div>

Upvotes: 2

Related Questions