Gists for tutorial

_conversation.html.erb

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://placehold.it/64x64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">
      <%= conversation.originator.name %> <br>
      <small><b>Subject: </b><%= conversation.subject %></small><br>
      <small><b>Date: </b><%=  conversation.messages.last.created_at.strftime("%A, %b %d, %Y at %I:%M%p") %></small>
    </h4>
    <%= truncate conversation.messages.last.body, length: 145 %>
    <%= link_to "View", conversation_path(conversation)  %>
  </div>
</div>

_folder_view.html.erb

<div class="row">
  <div class="spacer"></div>
  <div class="col-md-12">
    <!-- we'll configure this to compose new conversations later -->
    <%= link_to "Compose", "#", class: "btn btn-success" %>
    <div class="spacer"></div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render 'mailbox/folders' %>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <!-- individual conversations will show here -->
      </div>
    </div>
  </div>

</div>

_folder_view_1.html.erb

<div class="row">
  <div class="spacer"></div>
  <div class="col-md-12">
    <%= link_to "Compose", new_conversation_path, class: "btn btn-success" %>
    <div class="spacer"></div>
  </div>
  <!-- [...] -->
</div>

_folder_view_2.html.erb

<div class="row">
  <!-- [...] -->
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <% if is_conversation %>
            <%= render 'conversations/form' %>
        <% else %>
        <!-- TODO -->
        <% end %>
      </div>
    </div>
  </div>

</div>

_folders.html.erb

<ul class="nav nav-pills nav-stacked">
  <li class="<%= active_page(:inbox) %>">
    <%= link_to mailbox_inbox_path do  %>
        <span class="label label-danger pull-right"><%=unread_messages_count%></span>
        <em class="fa fa-inbox fa-lg"></em>
        <span>Inbox</span>
    <% end %>
  </li>
  <li class="<%= active_page(:sent) %>">
    <%= link_to mailbox_sent_path do %>

        <em class="fa fa-paper-plane-o fa-lg"></em>
        <span>Sent</span>
    <% end %>
  </li>

  <li class="<%= active_page(:trash) %>">
    <%= link_to mailbox_trash_path do %>
        <em class="fa fa-trash-o fa-lg"></em>
        <span>Trash</span>
    <% end %>
  </li>
</ul>

_messages.html.erb

<% @receipts.each do |receipt| %>
    <% message = receipt.message %>
    <div class="media">
      <div class="media-left">
        <!-- user avators can go here -->
        <a href="#">
          <img class="media-object" src="http://placehold.it/64x64" alt="...">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">
          <%= message.sender.name %> <br>
          <small><b>Subject: </b><%= message.subject %></small><br>
          <small><b>Date: </b><%=  message.created_at.strftime("%A, %b %d, %Y at %I:%M%p") %></small>
        </h4>
        <%= message.body %>
      </div>
    </div>
<% end %>

_nav.html.erb

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Messenger", root_path, class: "navbar-brand" %>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><%= link_to "Login", "#" %></li>
        <li><%= link_to "Sign up", "#" %></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

_nav_0.html.erb

<!-- truncated -->
  <ul class="nav navbar-nav pull-right">
    <% if user_signed_in? %>
        <li><%= link_to "Hello, #{current_user.name}", "#" %></li>
        <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
    <% else %>
        <li class="active"><%= link_to "Login", new_user_session_path %></li>
        <li><%= link_to "Sign up", new_user_registration_path %></li>
    <% end %>
  </ul>
<!-- truncated -->

_nav_1.html.erb

<!-- [...] -->
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right">
        <% if user_signed_in? %>
            <li><%= link_to "Hello, #{current_user.name}", "#" %></li>
            <li><%= link_to "Inbox", mailbox_inbox_path %></li>
            <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
        <% else %>
            <li class="active"><%= link_to "Login", new_user_session_path %></li>
            <li><%= link_to "Sign up", new_user_registration_path %></li>
        <% end %>
      </ul>
    </div><!--/.nav-collapse -->
<!-- [...] -->

application.css.scss

 /* [...] */
 *
 *= require_tree .
 *= require chosen
 *= require_self
 */

@import 'bootstrap';
@import 'bootstrap/theme';

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Messenger</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'layouts/nav' %>

<% flash.each do |key, value| %>
    <div class="text-center <%= flash_class(key) %>">
      <%= value %>
    </div>
<% end %>

<div class="container">
  <%= yield %>
</div>


</body>
</html>

application.js

# [....]

//= require jquery
//= require jquery_ujs
//= require chosen-jquery
//= require turbolinks
//= require_tree .

application_controller.rb

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) << :name
    devise_parameter_sanitizer.for(:account_update) << :name
  end
end

application_controller_0.rb

class ApplicationController < ActionController::Base
  # [...]
  helper_method :mailbox
  
  private

  def mailbox
    @mailbox ||= current_user.mailbox
  end

  protected

  # [...]
end

application_controller_1.rb

class ApplicationController < ActionController::Base
  # [...]
  helper_method :mailbox, :conversation

  private
  # [...]
  def conversation
    @conversation ||= mailbox.conversations.find(params[:id])
  end

  protected
  # [...]
end

application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level.to_sym
      when :notice then "alert alert-success"
      when :info then "alert alert-info"
      when :alert then "alert alert-danger"
      when :warning then "alert alert-warning"
    end
  end
end

application_helper_0.rb

module ApplicationHelper
  # [...] 
  def active_page(active_page)
    @active == active_page ? "active" : ""
  end
end

conversation_show2.html.erb

<div class="row">
  <div class="spacer"></div>
  <div class="col-md-6">
    <%= link_to "Compose", new_conversation_path, class: "btn btn-success" %>
  </div>
  <div class="col-md-6 text-right">
    <% if conversation.is_trashed?(current_user) %>
        <%= link_to 'Untrash', untrash_conversation_path(conversation), class: 'btn btn-info', method: :post %>
    <% else %>
        <%= link_to 'Move to trash', trash_conversation_path(conversation), class: 'btn btn-danger', method: :post,
                    data: {confirm: 'Are you sure?'} %>
    <% end %>
  </div>
</div>

<div class="row">
  <div class="spacer"></div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render 'mailbox/folders' %>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render partial: 'messages' %>
      </div>
      <div class="panel-footer">
        <!-- Reply Form -->
        <%= form_for :message, url: reply_conversation_path(conversation) do |f| %>
            <div class="form-group">
              <%= f.text_area :body, placeholder: "Reply Message", rows: 4, class: "form-control" %>
            </div>
            <%= f.submit "Reply", class: 'btn btn-danger pull-right' %>
        <% end %>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

</div>

conversations.js

var ready;

ready = function(){
    // enable chosen js
    $('.chosen-select').chosen({
        no_results_text: 'No results matched'
    });
}

$(document).ready(ready);
// if using turbolinks
$(document).on("page:load",ready);

conversations_controller_0.rb

class ConversationsController < ApplicationController
  before_action :authenticate_user!

  def new
  end
end

conversations_controller_1.rb

class ConversationsController < ApplicationController
  before_action :authenticate_user!

  def new
  end

  def create
    recipients = User.where(id: conversation_params[:recipients])
    conversation = current_user.send_message(recipients, conversation_params[:body], conversation_params[:subject]).conversation
    flash[:success] = "Your message was successfully sent!"
    redirect_to conversation_path(conversation)
  end

  def show
    @receipts = conversation.receipts_for(current_user)
    # mark conversation as read
    conversation.mark_as_read(current_user)
  end


  private

  def conversation_params
    params.require(:conversation).permit(:subject, :body,recipients:[])
  end
end

conversations_controller_2.rb

class ConversationsController < ApplicationController
  before_action :authenticate_user!
  # [...]

  def reply
    current_user.reply_to_conversation(conversation, message_params[:body])
    flash[:notice] = "Your reply message was successfully sent!"
    redirect_to conversation_path(conversation)
  end

  private
  # [...]

  def message_params
    params.require(:message).permit(:body, :subject)
  end
end

conversations_controller_3.rb

class ConversationsController < ApplicationController
  before_action :authenticate_user!
  # [...]
  
  def trash
    conversation.move_to_trash(current_user)
    redirect_to mailbox_inbox_path
  end

  def untrash
    conversation.untrash(current_user)
    redirect_to mailbox_inbox_path
  end

  private
  # [..]
end

conversations_form.html.erb

<%= form_for :conversation, url: :conversations, html: { class: "" } do |f| %>
    <div class="form-group">
      <%= f.label :recipients %>
      <%= f.select(:recipients, User.all.collect {|p| [ p.name, p.id ] }, {}, { multiple: true , class: "form-control" })%>
    </div>
    <div class="form-group">
      <%= f.label :subject %>
      <%= f.text_field :subject, placeholder: "Subject", class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :message %>
      <%= f.text_area :body, class: 'form-control',placeholder: "Type your message here", rows: 4  %>
    </div>

    <%= f.submit "Send Message", class: "btn btn-success" %>

<% end %>

conversations_form1.html.erb

<%= form_for :conversation, url: :conversations, html: { class: "" } do |f| %>
    <div class="form-group">
      <%= f.label :recipients %>
      <%= f.select(:recipients, User.all.collect {|p| [ p.name, p.id ] }, {}, { multiple: true , class: "chosen-select form-control" })%>
    </div>
    <!--[...]-->
    <%= f.submit "Send Message", class: "btn btn-success" %>

<% end %>

conversations_new.html.erb

<%= render partial: 'mailbox/folder_view', locals: { is_conversation: true } %>

conversations_show.html.erb

<div class="row">
  <div class="spacer"></div>
  <div class="col-md-12">
    <%= link_to "Compose", new_conversation_path, class: "btn btn-success" %>
    <div class="spacer"></div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render 'mailbox/folders' %>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render partial: 'messages' %>
      </div>
    </div>
  </div>

</div>

conversations_show_1.html.erb

<div class="row">
   <!--[...]-->

  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <%= render partial: 'messages' %>
      </div>
      <div class="panel-footer">
        <!-- Reply Form -->
        <%= form_for :message, url: reply_conversation_path(conversation) do |f| %>
            <div class="form-group">
              <%= f.text_area :body, placeholder: "Reply Message", rows: 4, class: "form-control" %>
            </div>
            <%= f.submit "Reply", class: 'btn btn-danger pull-right' %>
        <% end %>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

</div>

folder_view1.html.erb

<div class="row">
 <!--[...]-->
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-body">
        <% if is_conversation %>
            <%= render 'conversations/form' %>
        <% else %>
            <%= render partial: 'conversations/conversation', collection: messages %>
        <% end %>
      </div>
    </div>
  </div>
</div>

Gemfile_0

gem 'bootstrap-sass'
gem 'devise'
gem 'mailboxer'

Gemfile_1

# [...]
gem 'chosen-rails'

inbox.html.erb

<%= render partial: 'mailbox/folder_view' %>

inbox1.html.erb

<%= render partial: 'mailbox/folder_view', locals: { is_conversation: false, messages: @inbox } %>

mailbox_controller.rb

class MailboxController < ApplicationController
  before_action :authenticate_user!

  def inbox
    @inbox = mailbox.inbox
    @active = :inbox
  end

  def sent
    @sent = mailbox.sentbox
    @active = :sent
  end

  def trash
    @trash = mailbox.trash
    @active = :trash
  end

end

mailbox_helper.rb

module MailboxHelper
  def unread_messages_count
    # how to get the number of unread messages for the current user
    # using mailboxer
    mailbox.inbox(:unread => true).count(:id, :distinct => true)
  end
end

mailboxer.rb

Mailboxer.setup do |config|
  # [...]

  #Configures the methods needed by mailboxer
  config.email_method = :mailboxer_email
  config.name_method = :mailboxer_name

  # [...] 
end

mailboxes_view_files.html.erb

<%= render partial: 'mailbox/folder_view', locals: { is_conversation: false } %>

registrations_edit.html.erb

<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>

    <div class="form-group">
      <%= f.label :name %>
      <%= f.text_field :name, class: "form-control" %>
    </div>
    <!-- [....] -->

    <%= f.submit "Update", class: "btn btn-primary" %>

<% end %>
<!-- [...] -->

registrations_new.html.erb

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="form-group">
      <%= f.label :name %>
      <%= f.text_field :name, class: "form-control" %>
    </div>

     <!-- [.....] -->
    <%= f.submit "Sign up", class: "btn btn-primary" %>
<% end %>

routes_0.rb

Rails.application.routes.draw do
  root 'welcome#index'
end

routes_1.rb

Rails.application.routes.draw do
  devise_for :users
  root 'welcome#index'

  # mailbox folder routes
  get "mailbox/inbox" => "mailbox#inbox", as: :mailbox_inbox
  get "mailbox/sent" => "mailbox#sent", as: :mailbox_sent
  get "mailbox/trash" => "mailbox#trash", as: :mailbox_trash
end

routes_2.rb

Rails.application.routes.draw do
  # [...]
  
  # conversations
  resources :conversations do
    member do
      post :reply
      post :trash
      post :untrash
    end
  end
end

sent.html.erb

<%= render partial: 'mailbox/folder_view' %>

sent1.html.erb

<%= render partial: 'mailbox/folder_view', locals: { is_conversation: false, messages: @sent } %>

trash.html.erb

<%= render partial: 'mailbox/folder_view' %>

trash1.html.erb

<%= render partial: 'mailbox/folder_view', locals: { is_conversation: false, messages: @trash } %>

user.rb

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  acts_as_messageable

  def mailboxer_name
    self.name
  end

  def mailboxer_email(object)
    self.email
  end
end