terça-feira, 23 de maio de 2017

RAILS Faq HowTo Reference Sample Using scopes on Rails to Filter index page and Re-display filter inputs

1. Introduction

This post gathers information about FAQ-Frequently Asked Question, How To, technical document references and samples about these RAILS topics.

  • Using scopes on Rails to Filter index page and Re-display filter inputs


2. FAQ, HOWTO, REFERENCES, SAMPLES, etc

2.1. Create model scopes for each filter condition

# vim app/models/cluster_config.rb
class ClusterConfig < ApplicationRecord
  include Filterable
  scope :cluster_config, -> (id) { where id: id}
  scope :cluster_status, -> (cluster_status_id) { where cluster_status_id: cluster_status_id}
  scope :cluster_environment_type, -> (cluster_environment_type_id) { where cluster_environment_type_id: cluster_environment_type_id}
  scope :cluster_content_type, -> (cluster_content_type_id) { where cluster_content_type_id: cluster_content_type_id}
end


2.2. Implement generic filter on model concerns

# vim app/models/concerns/filterable.rb
module Filterable
  extend ActiveSupport::Concern
  module ClassMethods
    def filter(filtering_params)
      results = self.where(nil)
      filtering_params.each do |key, value|
        results = results.public_send(key, value) if value.present?
      end
      results
    end
  end
end


2.3. Implement filter on index controller

# vim app/controllers/cluster_configs_controller.rb
class ClusterConfigsController < ApplicationController
  before_action :set_cluster_config, only: [:show, :edit, :update, :destroy]
    :
  def index
    @cluster_configs = ClusterConfig.filter(params.slice(:cluster_config, :cluster_status, :cluster_environment_type, :cluster_content_type)).paginate(page: params[:page], per_page: 20)
  end
    :
  private
    def set_cluster_config
      @cluster_config = ClusterConfig.find(params[:id])
    end
    :
    def cluster_config_params
      params.require(:cluster_config).permit(:cluster_status_id, :cluster_environment_type_id, :cluster_content_type_id, :url_rest_service, :db_host, :db_port, :db_name, :dt_created, :dt_delivered, :obs)
    end
end


2.4. Implement filter on index viewer

# vim app/views/cluster_configs/index.html.erb
<h3>Filter by:</h3>
<%= form_for cluster_configs_path do %>
<div>
  Id: <%= text_field_tag 'cluster_config', '' %>
  Status Massa: <%= select("cluster_status", "cluster_status", ClusterStatus.all.map {|a| [a.cluster_status, a.id] }, { include_blank: true }) %>
  Environment Type: <%= select("cluster_environment_type", "cluster_environment_type", ClusterEnvironmentType.all.map {|a| [a.cluster_environment_type, a.id] }, { include_blank: true }) %>
  Content Type: <%= select("cluster_content_type", "cluster_content_type", ClusterContentType.all.map {|a| [a.cluster_content_type, a.id] }, { include_blank: true }) %>
  <br><br>
  <%= submit_tag 'Filter' %>
  <br><br>
</div>
<% end %>


2.5. Erro

Error when "Filter" submit button

ActionController::ParameterMissing in ClusterConfigsController#create
  param is missing or the value is empty: cluster_config
  Extracted source (around line #73):
    72: def cluster_config_params
    73:    params.require(:cluster_config).permit(:cluster_status_id, :cluster_environment_type_id, :cluster_content_type_id, :url_rest_service, :db_host, :db_port, :db_name, :dt_created, :dt_delivered, :obs)
    74: end
Request
Parameters:
{"utf8"=>"✓",
 "authenticity_token"=>"BF22bYvS/UXHOgeLLXeindCqWeXj41w/MxPE93cNoLBnaGwMhdC+HOuvvc6TCoteFHTsyyCZsoxO2j0kA4q/yA==",
 "cluster_config"=>"",
 "cluster_status"=>{"cluster_status"=>""},
 "cluster_environment_type"=>{"cluster_environment_type"=>""},
 "cluster_content_type"=>{"cluster_content_type"=>""},
 "commit"=>"Filter"}


3. References


segunda-feira, 22 de maio de 2017

RAILS Faq HowTo Reference Sample Bootstrap Navbar with RAILS

1. Introduction

This post gathers information about FAQ-Frequently Asked Question, How To, technical document references and samples about these RAILS topics.
* Bootstrap Navbar with RAILS


2. FAQ, HOWTO, REFERENCES, SAMPLES, etc

2.1. Bootstrap Navbar with RAILS

a) HOWTO

a.1) Setp #1: Find Gemfile configuration


  •  Open rubygems and search for "bootstrap-sass"

https://rubygems.org/
[ bootstrap-sass ] | Search

You should be redirect to https://rubygems.org/gems/bootstrap-sass
Copy gemfile command on the left corner, something like "gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'"
Edit ./Gemfile on your project root and add bootstrap-sass


a.2) Setp #2: Configure your project Gemfile

$ cd ~/myrailsproject
$ vim Gemfile
  :
# Josemarsilva - 2017-05-19 - http://www.rubydoc.info/gems/bootstrap-sass/3.3.7#a-ruby-on-rails
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'sass-rails', '~> 5.0'


a.3) Setp #3: Configure your project Gemfile and 

# bundle install


a.4) Step #4: Hide default "application.css" and configure "application.scss"

# mv  app/assets/stylesheets/application.css app/assets/stylesheets/application.css.hidden-by-bootstrap
# vim app/assets/stylesheets/application.scss
+----------------------------------------------------------------------------------------+
|// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"  |
|$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";                              |
|@import "bootstrap-sprockets";                                                          |
|@import "bootstrap";                                                                    |
+----------------------------------------------------------------------------------------+


a.5) Step #5: configure "application.js"

# vim app/assets/javascripts/application.js
+----------------------------------------------------------------------------------------+
|// JosemarSilva 2017-05-19 http://www.rubydoc.info/gems/bootstrap-sass/3.3.7            |
|//= require bootstrap                                                                   |
|//= require jquery                                                                      |
|//= require jquery_ujs                                                                  |
|//= require turbolinks                                                                  |
|//= require bootstrap-sprockets                                                         |
|//= require_tree .                                                                      |
+----------------------------------------------------------------------------------------+


a.6) Step #6: configure "app/views/layouts/application.html.erb"

# vim app/views/layouts/application.html.erb
+-------------------------------------------------------------------------------------------------+
|<!DOCTYPE html>                                                                                  |
|<html>                                                                                           |
|  <head>                                                                                         |
|    :                                                                                            |
|    <%= csrf_meta_tags %>                                                                        |
|    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %> |
|    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>               |
|    :                                                                                            |
|  </head>                                                                                        |
|    :                                                                                            |
|  <body>                                                                                         |
|    :                                                                                            |
|    <%= render '/staticpages/header' %>                                                          |
|    :                                                                                            |
|    <div class="container">                                                                      |
|      <%= yield %>                                                                               |
|    </div>                                                                                       |
|    :                                                                                            |
|  </body>                                                                                        |
|</html>                                                                                          |
+-------------------------------------------------------------------------------------------------+



a.7) Step #7: configure Navbar on header part template using bootstrap


  • Open Bootstrap Navbar documentation and copy example

http://getbootstrap.com/components/#navbar



  • Paste example into '_header.html.erb' part

# vim app/views/staticpages/_header.html.erb
+-------------------------------------------------------------------------------------------------+
| <nav class="navbar navbar-default">                                                             |
|  <div class="container-fluid">                                                                  |
|    <!-- Brand and toggle get grouped for better mobile display -->                              |
|    <div class="navbar-header">                                                                  |
|       :                                                                                         |
|      <ul class="nav navbar-nav navbar-right">                                                   |
|       :                                                                                         |
|      </ul>                                                                                      |
|    </div><!-- /.navbar-collapse -->                                                             |
|  </div><!-- /.container-fluid -->                                                               |
|</nav>                                                                                           |
+-------------------------------------------------------------------------------------------------+



b) REFERENCES