Sorting views using data between two tables

Question

I am trying to sort data in my chatbox with data from two tables (kind of trying to make an events log place).

This is my chatbox:

Chatbox/Events Log

I want to sort the blue and green boxes based on date/time. Here's the code that I want to sort:

Code

Can you guide me on how to achieve this?

EDIT Updated Code:

Updated Code 3rd April Image

stats.html.erb file

<%
    @objects = (@solrs + @messages).sort_by &:created_at
%>

<% @objects.each do |obj| %>
  <% if obj.is_a? Solr %>
    <!-- Solrs Partial -->
    <%= render 'messages/solr' %>
  <% else %>
   <!-- Messages Partial -->
  <%= render @messages %>
  <% end %>
<% end %>  

Code Inside Solrs Partial

<% @solrs.each do |solr| %>

    <div class="row msg_container base_receive">  
        <div class="col-xs-10 col-md-10">
            <div class="messages msg_receive">
                <p class="">

                    Disease <b><%= solr.disease %></b> has been created with synonyms <b> <%= solr.synonym %></b> by <b><%= solr.user.first_name %> <%= solr.user.last_name %></b><br>

                </p>

                    <time> <%= solr.created_at.strftime("%d %b %4Y")%> • <%=solr.created_at.strftime("%I:%M%p")%></time>

            </div>
        </div>
    </div>

<% end %>  

Code Inside Messages Partial

<div class="row msg_container base_sent">
        <div class="col-md-1 col-xs-1">
        <p><em><%= message.user.first_name %>: </em></p>
    </div>

    <div class="col-md-10 col-xs-10">
        <div class="messages msg_sent">
            <p>
                <%= message.body %>
            </p>
            <time> <%= message.created_at.strftime("%d %b %4Y")%> • <%=message.created_at.strftime("%I:%M%p")%></time>
        </div>

    </div>
</div>

solr_controller file

def stats
        @messages = Message.custom_display
        @message = Message.new
        @solrs = Solr.all
        @users = User.all 
 end

Answer 1

To sort multiple models together, first create a collection of the two:

@objects = @solrs + @messages

then, use [sort_by](https://apidock.com/ruby/Enumerable/sort_by):

@objects.sort_by &:created_at -or- @objects.sort_by { |obj| obj.created_at }

Pretty sure you can wrap that in to one line like:

@objects = (@solrs + @messages).sort_by &:created_at

[is_a?](https://apidock.com/ruby/Object/is_a%3F) will let you treat each one individually, this SO question goes over this nicely

Example:

solr_controller.rb

def stats
  @messages = Message.includes(:user).custom_display
     @solrs = Solr.includes(:user).all
   @objects = (@solrs + @messages).sort_by &:created_at
end

[.includes](https://apidock.com/rails/ActiveRecord/QueryMethods/includes) will let you access the associated user without querying the database again. Here's a good article on it.

assuming you're in /views/messages, adjust if your file structure is different

/messages/stats.html.erb

<% @objects.each do |obj| %>
  <% if obj.is_a? Solr %>
    <%= render partial: 'solr', locals: { solr: obj } %>
  <% else %>
    <%= render partial: 'message', locals: { message: obj } %>
  <% end %>
<% end %>

/messages/_solr.html.erb

<div class="row msg_container base_receive">  
  <div class="col-xs-10 col-md-10">
    <div class="messages msg_receive">
      <p>
        Disease <b> <%= solr.disease %> </b> 
        has been created with synonyms <b> <%= solr.synonym %> </b> 
        by <b> <%= solr.user.first_name %> <%= solr.user.last_name %> </b>
        <br>
      </p>
      <time>
        <%= solr.created_at.strftime("%d %b %4Y") %> • 
        <%= solr.created_at.strftime("%I:%M%p") %>
      </time>
    </div>
  </div>
</div>

/messages/_message.html.erb

<div class="row msg_container base_sent">
  <div class="col-md-1 col-xs-1">
    <p> <em> <%= message.user.first_name %>: </em> </p>
  </div>
  <div class="col-md-10 col-xs-10">
    <div class="messages msg_sent">
      <p> <%= message.body %> </p>
      <time> 
        <%= message.created_at.strftime("%d %b %4Y") %> • 
        <%= message.created_at.strftime("%I:%M%p") %>
      </time>
    </div>
  </div>
</div>