Add in filterrific for filtering. (rubyforgood#336)

Gemfile

@@ -8,13 +8,15 @@ gem "bootstrap", "~> 4.5.0"
 gem "bugsnag"
 gem "devise"
 gem "devise_invitable"
+gem "filterrific"
 gem "flipper"
 gem "flipper-active_record"
 gem "flipper-ui"
 gem "font-awesome-rails"
 gem "font-ionicons-rails"
 gem "jbuilder", "~> 2.5"
 gem "jquery-rails", "~> 4.3", ">= 4.3.1"
+gem "kaminari"
 gem "mini_racer"
 gem "pg"
 gem "prawn-rails"

Gemfile.lock

@@ -151,6 +151,7 @@ GEM
  faker (2.12.0)
  i18n (>= 1.6, < 2)
  ffi (1.12.2)
+ filterrific (5.2.1)
  flipper (0.17.2)
  flipper-active_record (0.17.2)
  activerecord (>= 4.2, < 7)
@@ -191,6 +192,18 @@ GEM
  rails-dom-testing (>= 1, < 3)
  railties (>= 4.2.0)
  thor (>= 0.14, < 2.0)
+ kaminari (1.2.1)
+ activesupport (>= 4.1.0)
+ kaminari-actionview (= 1.2.1)
+ kaminari-activerecord (= 1.2.1)
+ kaminari-core (= 1.2.1)
+ kaminari-actionview (1.2.1)
+ actionview
+ kaminari-core (= 1.2.1)
+ kaminari-activerecord (1.2.1)
+ activerecord
+ kaminari-core (= 1.2.1)
+ kaminari-core (1.2.1)
  launchy (2.5.0)
  addressable (~> 2.7)
  letter_opener (1.7.0)
@@ -327,10 +340,10 @@ GEM
  unicode-display_width (>= 1.4.0, < 2.0)
  rubocop-ast (0.0.3)
  parser (>= 2.7.0.1)
- rubocop-rails (2.5.2)
- activesupport
+ rubocop-rails (2.6.0)
+ activesupport (>= 4.2.0)
  rack (>= 1.1)
- rubocop (>= 0.72.0)
+ rubocop (>= 0.82.0)
  rubocop-rspec (1.40.0)
  rubocop (>= 0.68.1)
  ruby-progressbar (1.10.1)
@@ -434,6 +447,7 @@ DEPENDENCIES
  email_spec
  factory_bot_rails
  faker
+ filterrific
  flipper
  flipper-active_record
  flipper-ui
@@ -442,6 +456,7 @@ DEPENDENCIES
  guard-rspec
  jbuilder (~> 2.5)
  jquery-rails (~> 4.3, >= 4.3.1)
+ kaminari
  letter_opener
  listen (>= 3.0.5, < 3.3)
  mini_racer

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
+//= link filterrific/filterrific-spinner.gif
 //= link_tree ../images
 //= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css

app/assets/javascripts/application.js

@@ -11,13 +11,18 @@
 // about supported directives.
 //
 //= require jquery3
+//= require filterrific/filterrific-jquery
 //= require rails-ujs
 //= require activestorage
 //= require bootstrap
 //= require popper
 //= require main
 //= require_tree .
 
+$( document ).ready(function() {
+ Filterrific.init();
+});
+
 function timeoutWindow() {
  window.setTimeout(function () {
  // When the user is given an error message, we should not auto-hide it so that

app/controllers/children_controller.rb

@@ -3,20 +3,24 @@ class ChildrenController < ApplicationController
  before_action :authenticate_user!
 
  def index
- @children = current_partner.children
- .includes(:family)
- .order(active: :desc, last_name: :asc)
- .class_filter(filter_params)
+ @filterrific = initialize_filterrific(
+ current_partner.children
+ .includes(:family)
+ .order(active: :desc, last_name: :asc),
+ params[:filterrific]
+ ) || return
+ @children = @filterrific.find.page(params[:page])
 
  respond_to do |format|
+ format.js
  format.html
  format.csv do
  render(csv: @children.map(&:to_csv))
  end
  end
- @family = @children.collect(&:family).compact.uniq.sort
- @selected_family = filter_params[:from_family]
- @selected_children_first_name = filter_params[:from_children]
+ @family = current_partner.children
+  .includes(:family)
+  .order(active: :desc, last_name: :asc).collect(&:family).compact.uniq.sort
  end
 
  def show
@@ -90,10 +94,4 @@ def child_params
  child_lives_with: []
  )
  end
-
- def filter_params
- return {} unless params.key?(:filters)
-
- params.require(:filters).slice(:from_family, :from_children)
- end
 end

app/helpers/application_helper.rb

@@ -25,11 +25,11 @@ def valid_items_for_select_tag(items, picked_up_item_diaperid, item_ordered_diap
 
  def partner_status_badge(partner)
  if @partner.partner_status == "verified"
- content_tag :span, partner.partner_status, class: %w(badge badge-pill badge-primary float-right)
+ tag.span partner.partner_status, class: %w(badge badge-pill badge-primary float-right)
  elsif @partner.partner_status == "recertification_required"
- content_tag :span, partner.partner_status, class: %w(badge badge-pill badge-danger float-right)
+ tag.span partner.partner_status, class: %w(badge badge-pill badge-danger float-right)
  else
- content_tag :span, partner.partner_status, class: %w(badge badge-pill badge-info float-right)
+ tag.span partner.partner_status, class: %w(badge badge-pill badge-info float-right)
  end
  end
 

app/models/child.rb

@@ -36,6 +36,20 @@ class Child < ApplicationRecord
  }
  scope :active, -> { where(active: true) }
 
+ filterrific(
+ available_filters: [
+ :search_names,
+ :search_families,
+ :search_active
+ ],
+ )
+
+ scope :search_names, ->(query) { where('first_name ilike ? OR last_name ilike ?', "%#{query}%", "%#{query}%") }
+ scope :search_active, ->(query) { query.zero? ? nil : where(active: true) }
+ scope :search_families, ->(query) {
+ where("concat_ws(' ', families.guardian_first_name, families.guardian_last_name) ILIKE ?", "%#{query}%")
+ }
+
  CSV_HEADERS = %w[
  id first_name last_name date_of_birth gender child_lives_with race agency_child_id
  health_insurance comments created_at updated_at family_id item_needed_diaperid active archived

app/views/children/_list.html.erb

@@ -0,0 +1,29 @@
+<table class="table table-striped">
+ <thead>
+ <tr>
+ <th scope="col">Last Name</th>
+ <th scope="col">First Name</th>
+ <th scope="col">Date of Birth</th>
+ <th scope="col">Active</th>
+ <th scope="col">Guardian</th>
+ <th scope="col">Comments</th>
+ <th scope="col"></th>
+ <th scope="col"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <% @children.each do |child| %>
+ <tr>
+ <td><%= child.last_name %></td>
+ <td><%= child.first_name %></td>
+ <td><%= child.date_of_birth %></td>
+ <td><%= child.active ? "Yes" : "No" %></td>
+ <td><%= child.family.guardian_display_name %></td>
+ <td><%= child.comments %></td>
+ <td><%= link_to 'View Child Details', child, class: "btn btn-sm btn-info" %></td>
+ <td><%= link_to 'Edit Child Details', edit_child_path(child), class: "btn btn-sm btn-success pull-right" %>
+ </td>
+ </tr>
+ <% end %>
+ </tbody>
+</table>

app/views/children/index.html.erb

@@ -30,72 +30,62 @@
  <h3 class="card-title">Filters</h3>
  </div>
  <div class="card-body">
- <%= form_tag(children_path, method: :get) do |f| %>
+ <%= form_for_filterrific @filterrific, remote: true do |f| %>
  <div class="row">
- <% if @family.present? %>
- <div class="form-group col-lg-4 col-md-4 col-sm-6 col-xs-12">
- <%= label_tag "by Guardian Name", "Guardian Name" %>
- <%= collection_select(:filters, :from_family, @family || {}, :id, :guardian_display_name, {include_blank: true, selected: @selected_family}, class: "form-control") %>
- </div>
- <% end %>
- <% if @children.present? %>
- <div class="form-group col-lg-4 col-md-4 col-sm-6 col-xs-12">
- <%= label_tag "by Children First Name", "Child's First Name" %>
- <%= collection_select(:filters, :from_children, @children || {}, :id, :first_name, {include_blank: true, selected: @selected_children_first_name}, class: "form-control") %>
- </div>
- <% end %>
+ <div class="col-3">
+ <%= f.label :search_names, "Search By Child Name" %>
+ <%= f.text_field(
+ :search_names,
+ class: 'filterrific-periodically-observed form-control'
+ ) %>
+ </div>
+ <div class="col-3">
+ <%= f.label :search_families, "Search By Guardian Name" %>
+ <%= f.text_field(
+ :search_families,
+ class: 'filterrific-periodically-observed form-control'
+ ) %>
+ </div>
+ <div class="col-3">
+ <%= f.label :search_comments, "Show Active Only?" %>
+ <%= f.check_box(
+ :search_active,
+ class: 'filterrific-periodically-observed form-control'
+ ) %>
+ </div>
+ <div class="col-3">
+ <%= render_filterrific_spinner %>
+ </div>
  </div>
  </div><!-- /.row -->
  <div class="card-footer">
- <%= filter_button %>
- <%= cancel_button_to children_path %>
+ <%= link_to(
+ 'Reset Search',
+ reset_filterrific_url,
+ class: 'btn btn-danger'
+ ) %>
  <span class="float-right">
  <%= link_to 'Export a CSV file', children_path(nil, format: :csv), class: "btn btn-info" %>
  </span>
- <% end # form %>
+ <% end %>
 
  </div>
-
- <!-- /.card -->
  </div>
  </div>
- <!-- /.row -->
- </div><!-- /.container-fluid -->
+ </div>
  </div>
  <div class="container-fluid">
  <div class="row">
  <div class="col-12">
  <!-- Default box -->
  <div class="card">
  <div class="card-body p-0">
- <table class="table table-striped">
- <thead>
- <tr>
- <th scope="col">Last Name</th>
- <th scope="col">First Name</th>
- <th scope="col">Date of Birth</th>
- <th scope="col">Active</th>
- <th scope="col">Guardian</th>
- <th scope="col">Comments</th>
- <th scope="col"></th>
- <th scope="col"></th>
- </tr>
- </thead>
- <tbody>
- <% @children.each do |child| %>
- <tr>
- <td><%= child.last_name %></td>
- <td><%= child.first_name %></td>
- <td><%= child.date_of_birth %></td>
- <td><%= child.active ? "Yes" : "No" %></td>
- <td><%= child.family.guardian_display_name %></td>
- <td><%= child.comments %></td>
- <td><%= link_to 'View Child Details', child, class: "btn btn-sm btn-info" %></td>
- <td><%= link_to 'Edit Child Details', edit_child_path(child), class: "btn btn-sm btn-success pull-right" %>
- </td>
- <% end %>
- </tbody>
- </table>
+ <div id="filterrific_results">
+ <%= render(
+ partial: 'children/list',
+ locals: {children: @children}
+ ) %>
+ </div>
  </div>
  </div>
  </div>

app/views/children/index.js.erb

@@ -0,0 +1,4 @@
+<% js = escape_javascript(
+ render(partial: 'children/list', locals: { children: @children })
+) %>
+$("#filterrific_results").html("<%= js %>");

config/initializers/kaminari_config.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+Kaminari.configure do |config|
+ # config.default_per_page = 25
+ # config.max_per_page = nil
+ # config.window = 4
+ # config.outer_window = 0
+ # config.left = 0
+ # config.right = 0
+ # config.page_method_name = :page
+ # config.param_name = :page
+ # config.max_pages = nil
+ # config.params_on_first_page = false
+end

spec/features/child_feature_spec.rb

@@ -48,9 +48,9 @@
  create(:child, first_name: "Arthur", family: family)
 
  click_link "Children"
- select "Arthur", from: "filters[from_children]"
- click_button "Filter"
- expect(page).to have_css("table tbody tr", count: 1)
+ fill_in "Search By Child Name", with: "Arthur"
+ expect(page).to have_text("Arthur")
+ expect(page).to_not have_text("Zeno")
  end
 
  scenario "User can see a list of children filtered by guardian name" do
@@ -63,9 +63,11 @@
  create(:child, first_name: "Louis", family: other_family)
 
  click_link "Children"
- select "Miles Morales", from: "filters[from_family]"
- click_button "Filter"
+ fill_in "Search By Guardian Name", with: "Morales"
  expect(page).to have_css("table tbody tr", count: 2)
+ expect(page).to have_text("Zeno")
+ expect(page).to have_text("Arthur")
+ expect(page).to_not have_text("Louis")
  end
 
  describe "Show View" do