Starting a new Rails 4 : IV. Build an interface rails 4, bootstrap 3, ssl certificate, kaminari, destroy confirmation

April 11, 2013

Implementing the bootstrap menu
Table and labels
Refactoring view
Pagination with Kaminari
TIP : SSL Certificate error
Kaminari config & views
TIP : A modal destroy confirmation

First create another layout : for the moment we use the view/layouts/application.html.haml copy it to home.html.haml, so we’ve got a different layout for the home page and the rest of the app.

application.html.haml :

      %body
        = render 'shared/navbar'
        .container
          = render 'shared/flash_message'
          = yield

And create the views/shared/_navbar.html.haml :

    .navbar.navbar-static-top
      .container
        = link_to "Four","#", :class=> 'navbar-brand'
        %ul.nav
          %li.dropdown
            = link_to "#", :class => "dropdown-toggle", "data-toggle"=>"dropdown" do
              User
              %b.caret
            %ul.dropdown-menu
              %li= link_to 'list', '#'
              %li= link_to 'test', '#'
              %li.divider
              %li.nav-header= "Users"
              %li= link_to 'list', users_path
        %ul.nav.pull-right
          %li
            = link_to about_path  do
              %span{:class => "glyphicon glyphicon-search"}
          %li.dropdown
            = link_to "#", "data-toggle"=>"dropdown", :class => "btn dropdown-toggle" do
              %span{:class => "glyphicon glyphicon-user"}
              = current_user.username
              %b.caret
            %ul.dropdown-menu
              %li= link_to "Logout", logout_path
              %li= link_to "Profile", user_path(current_user)
              %li.divider
              %li= link_to "Change password",""

It’s done :)

Table and labels

Just modify %table.table.table-condensed in views/users/index.html.haml for a better look.

And replace the %td= user.active by :

    %td
      - if !user.active
        %span.label.label-warning= "Not active"

for a label test.

Refactoring view

There a lot of solution for a standard view (even some gem), use some tags like table, p, dl/dt/dd … For the moment I choose the easiest : p, with some helper for proper rending of a blank element.

In application\helper.rb :

    def nbsp(obj)
      obj.to_s.blank? ? raw('&nbsp;') : obj
    end

And my view users/show.haml.haml :

    %h1 User Detail

    .row.well
      .col-span-3
        %div{:style => 'text-align:right;list-style-type:none;font-weight:bold;'}
          %p Username :
          %p Lastname :
          %p Identity :
          %p Email :
          %p Birthdate :
          %p Active :
      .col-span-8
        %div{:style => 'list-style-type:none;'}
          %p= @user.username 
          %p= nbsp @user.lastname
          %p= nbsp @user.identity
          %p= @user.email
          %p= nbsp @user.birthdate
          %p
            - if !@user.active
              %span.label.label-warning= "Not active" 
            - else
              %span.label.label-success= "Active" 


    = link_to 'Edit', edit_user_path(@user)
    \|
    = link_to 'Back', users_path

Pagination with Kaminari

Ok, lets build some fakes users for the list view.

First install kaminari (there other like will_paginate who work well also) : gem i kaminari and declare it in the gemfile.

Generate the configuration file rails g kaminari:config and rails g kaminari:views bootstrap … If you’re starting with Ruby, you may have a strange SSL error …

TIP : SSL Certificate error

The solution : https://gist.github.com/fnichol/867550 follow the instruction (copy the certificate file, declare an enviroment variable), and it’s work :) Thanks !!

Kaminari config & views

So now we have the config file config/initializers/kaminari_config.rb to change the whole pagination configuration if you want. And the views files in app/views/kaminari.

Just for adapt to bootstrap pagination, change apps/views/kaminari/_paginator.html.haml from :

    = paginator.render do
      .pagination
        %ul
          = ...

    = paginator.render do
      %ul.pagination
        = ...

Add a = paginate @users in your view file and modify the controller methods with @users = User.all.page(params[:page]).per(2) (the per(2) is for testing purpose, drop it after).

TIP : A modal destroy confirmation

And at the end of this day, a short tips come from here https://gist.github.com/postpostmodern/1862479, just drop the file in your assets javascript folder with this modification for bootstrap 3 :

    # Override Rails handling of confirmation

    $.rails.allowAction = (element) ->
      # The message is something like "Are you sure?"
      message = element.data('confirm')
      # If there's no message, there's no data-confirm attribute, 
      # which means there's nothing to confirm
      return true unless message
      # Clone the clicked element (probably a delete link) so we can use it in the dialog box.
      $link = element.clone()
        # We don't necessarily want the same styling as the original link/button.
        .removeAttr('class')
        # We don't want to pop up another confirmation (recursion)
        .removeAttr('data-confirm')
        # We want a button
        .addClass('btn').addClass('btn-danger')
        # We want it to sound confirmy
        .html("Yes, I'm positively certain.")

      # Create the modal box with the message
      modal_html = """
                    <div class="modal fade" id="myModal">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3>#{message}</h3>
                          </div>
                          <div class="modal-body">
                            <p>Be certain, sonny.</p>
                          </div>
                          <div class="modal-footer">
                            <a data-dismiss="modal" class="btn">Cancel</a>
                          </div>
                        </div>
                      </div>
                    </div>
                   """
      $modal_html = $(modal_html)
      # Add the new button to the modal box
      $modal_html.find('.modal-footer').append($link)
      # Pop it up
      $modal_html.modal()
      # Prevent the original link from working
      return false