Skip to content

Commit

Permalink
5847 surface common filters with helper (#5879)
Browse files Browse the repository at this point in the history 
* Move filter options outside of collapse block

* Fix select pseudo element positioning

* Group sticky filter options to left

* Fix bug where Hide button does not work after filtering

* Fix indentation of file

* Add #expand_filters helper to remove surface filters from collapse logic

* Refactor expand_filters helper and add tests

* Add system tests for exposing filters behavior
  • Loading branch information
@mononoken
mononoken authored Jul 7, 2024
1 parent dfd25c2 commit 8a1e07a
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 111 deletions.
7 changes: 7 additions & 0 deletions app/helpers/case_contacts_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ def show_volunteer_reimbursement(casa_cases)
end
end

def expand_filters?(surfaced_keys = %i[no_drafts sorted_by])
params.fetch(:filterrific, {})
.except(*surfaced_keys)
.reject { |_, value| value == "" }
.present?
end

private

def send_home
Expand Down
222 changes: 113 additions & 109 deletions app/views/case_contacts/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,139 +15,143 @@
</div>
</div>

<%= form_for_filterrific @filterrific, url: case_contacts_path do |f| %>
<%= form_for_filterrific @filterrific, url: case_contacts_path, html: {class: "my-4"} do |f| %>
<%= hidden_field_tag 'casa_case_id', params[:casa_case_id] %>
<div class="card-style my-4">
<div class="card-content d-flex justify-content-between align-items-end">
<div class="h4 btn-lg">Filter by</div>
<button href="#"
class="btn btn-lg btn-link"
type="button"
data-bs-toggle="collapse"
data-bs-target="#filter-card-body"
aria-expanded="false"
aria-controls="filter-card-body">
<div class="h4">Show / Hide</div>
</button>
</div>

<div class="card-content mb-10 ml-20 collapse" id="filter-card-body">
<div class="row">
<div class="col-12">
<h3 class="mt-10"><label>Draft status</label></h3>
</div>
<div class="col-md-4">
<div class="card-style">
<div class="card-content">
<div class="d-flex justify-content-between align-items-center">
<div class="h4 btn-lg">Filter by</div>
<button href="#"
class="btn btn-lg btn-link"
type="button"
data-bs-toggle="collapse"
data-bs-target="#filter-card-body"
aria-expanded="<%= expand_filters? %>>"
aria-controls="filter-card-body">
<div class="h4">Expand / Hide</div>
</button>
</div>
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
<div class="d-flex flex-column gap-3">
<div class="select-style-1 mb-0">
<%= f.label :sorted_by %>
<div class="select-position">
<%= f.select(:sorted_by, @filterrific.select_options[:sorted_by], {}, {class: ""}) %>
</div>
</div>
<div class="form-check checkbox-style">
<%= f.check_box :no_drafts, class: "form-check-input case-contact-contact-type" %>
<label class="form-check-label" for="filterrific_no_drafts">Hide drafts</label>
</div>
</div>
<div>
<%= button_tag( :class=> "btn-sm main-btn dark-btn") do %>
<i class="lni lni-funnel mr-10"></i> Filter
<% end %>
<%= link_to("Reset filters", reset_filterrific_url, class: "btn-sm main-btn dark-btn-outline btn-hove") %>
</div>
</div>
<div class="row">
<div class="col-12">
<h3 class="mt-10"><label>Date of contact</label></h3>
</div>
<div class="col-sm-6 input-style-1">
<%= f.label "Starting from", for: "filterrific_occurred_starting_at" %>
<%= f.date_field(:occurred_starting_at, class: "") %>
</div>
<div class="col-sm-6 input-style-1">
<%= f.label "Ending at", for: "filterrific_occurred_ending_at" %>
<%= f.date_field(:occurred_ending_at, class: "") %>
</div>
</div>

<% collapse_class = expand_filters? ? "collapse show" : "collapse" %>
<div class="card-content mb-10 ml-20 <%= collapse_class %>" id="filter-card-body">
<div class="row">
<div class="col-12">
<h3 class="mt-10"><label>Date of contact</label></h3>
</div>
<div class="col-sm-6 input-style-1">
<%= f.label "Starting from", for: "filterrific_occurred_starting_at" %>
<%= f.date_field(:occurred_starting_at, class: "") %>
</div>
<div class="row mb-4">
<div class="col-12">
<h3 class="mb-4"><label>Contact types</label></h3>
<div id="contact-type-form" class="">
<div class="row">
<% @current_organization_groups.each do |group| %>
<div class="col-md-4 justify-content-start pb-5">
<h5 class="mb-1"> <%= group.name %> </h5>
<% group.contact_types.each do |contact_type| %>
<div class="form-check checkbox-style">
<%=
f.check_box :contact_type,
{multiple: true, class: "form-check-input case-contact-contact-type"},
contact_type.id,
nil
%>
<label class="form-check-label" for="filterrific_contact_type_<%= contact_type.id %>">
<%= contact_type.name %>
</label>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="col-sm-6 input-style-1">
<%= f.label "Ending at", for: "filterrific_occurred_ending_at" %>
<%= f.date_field(:occurred_ending_at, class: "") %>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<h3 class="mb-4"><label>Contact types</label></h3>
<div id="contact-type-form" class="">
<div class="row">
<% @current_organization_groups.each do |group| %>
<div class="col-md-4 justify-content-start pb-5">
<h5 class="mb-1"> <%= group.name %> </h5>
<% group.contact_types.each do |contact_type| %>
<div class="form-check checkbox-style">
<%=
f.check_box :contact_type,
{multiple: true, class: "form-check-input case-contact-contact-type"},
contact_type.id,
nil
%>
<label class="form-check-label" for="filterrific_contact_type_<%= contact_type.id %>">
<%= contact_type.name %>
</label>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<div class="row align-items-end select-style-1 mb-10">
<div class="col-12">
<h3>Other filters</h3>
</div>
<div class="col-md-6 select-position pr-5">
<%= f.label :contact_medium %>
</div>
<div class="row align-items-end mb-10">
<div class="col-12">
<h3>Other filters</h3>
</div>
<div class="col-md-6 select-style-1 pr-5">
<%= f.label :contact_medium %>
<div class="select-position">
<%= f.select(:contact_medium, options_from_collection_for_select(contact_mediums, "value", "label"),
{include_blank: "Display all"},
{class: "select-style-1"}) %>
{include_blank: "Display all"}) %>
</div>
<div class="col-md-3 select-position pr-5">
<%= f.label :want_driving_reimbursement %>
</div>
<div class="col-md-3 select-style-1 pr-5">
<%= f.label :want_driving_reimbursement %>
<div class="select-position">
<%= f.select(:want_driving_reimbursement, @presenter.boolean_select_options,
{include_blank: "Display all"},
{class: "select-style-1"}) %>
</div>
<div class="col-md-3 select-position pr-5">
<%= f.label :contact_made %>
<%= f.select(:contact_made, @presenter.boolean_select_options,
{include_blank: "Display all"},
{class: "select-style-1"}) %>
{include_blank: "Display all"}) %>
</div>
</div>
<div class="row select-style-1">
<div class="col-md-6 select-position pr-5">
<%= f.label :sorted_by %>
<%= f.select(:sorted_by, @filterrific.select_options[:sorted_by], {}, {class: "select-style-1"}) %>
<div class="col-md-3 select-style-1 pr-5">
<%= f.label :contact_made %>
<div class="select-position">
<%= f.select(:contact_made, @presenter.boolean_select_options,
{include_blank: "Display all"}) %>
</div>
</div>
<div>
<%= button_tag( :class=> "btn-sm main-btn dark-btn") do %>
<i class="lni lni-funnel mr-10"></i> Filter
<% end %>
<%= link_to("Reset filters", reset_filterrific_url, class: "btn-sm main-btn dark-btn-outline btn-hove") %>
</div>
</div>
</div>
<% end %>
<% @presenter.case_contacts.each do |casa_case_id, data| %>
</div>
<% end %>
<% @presenter.case_contacts.each do |casa_case_id, data| %>
<div class="card-style-1 mb-5">
<div class="card-content">
<h3 class="mb-10"><%= @presenter.display_case_number(casa_case_id) %></h3>
<%= render partial: "case_contacts/case_contact", collection: data, as: :contact %>
</div>
</div>
<% end %>
<% if @presenter.case_contacts.empty? %>
<% if params.key?(:casa_case_id) %>
<div class="card-style-1 mb-5">
<div class="card-content">
<h3 class="mb-10"><%= @presenter.display_case_number(casa_case_id) %></h3>
<%= render partial: "case_contacts/case_contact", collection: data, as: :contact %>
<h3 class="mb-10"><%= @presenter.display_case_number(params[:casa_case_id].to_i) %></h3>
<%= params[:filterrific] ?
"No case contacts have been found." :
"You have no case contacts for this case. \
Please click New Case Contact button above to create a case contact for your youth!" %>
</div>
</div>
<% end %>
<% if @presenter.case_contacts.empty? %>
<% if params.key?(:casa_case_id) %>
<div class="card-style-1 mb-5">
<div class="card-content">
<h3 class="mb-10"><%= @presenter.display_case_number(params[:casa_case_id].to_i) %></h3>
<%= params[:filterrific] ?
"No case contacts have been found." :
"You have no case contacts for this case. \
Please click New Case Contact button above to create a case contact for your youth!" %>
</div>
</div>
<% else %>
<div class="card-style-1">
<div class="card-content">
<%= params[:filterrific] ?
"No case contacts have been found." :
"You have no case contacts for this case. \
Please click New Case Contact button above to create a case contact for your youth!" %>
</div>
<% else %>
<div class="card-style-1">
<div class="card-content">
<%= params[:filterrific] ?
"No case contacts have been found." :
"You have no case contacts for this case. \
Please click New Case Contact button above to create a case contact for your youth!" %>
</div>
<% end %>
</div>
<% end %>
<% end %>
23 changes: 23 additions & 0 deletions spec/helpers/case_contacts_helper_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,27 @@
expect(helper.show_volunteer_reimbursement(@casa_cases)).to eq(false)
end
end

describe "#expand_filters?" do
it "returns false if filterrific param does not exist" do
allow(helper).to receive(:params)
.and_return({})

expect(helper.expand_filters?).to eq(false)
end

it "returns false if filterrific contains only surfaced params" do
allow(helper).to receive(:params)
.and_return({filterrific: {surfaced_param: "true"}})

expect(helper.expand_filters?([:surfaced_param])).to eq(false)
end

it "returns true if filterrific contains any other key" do
allow(helper).to receive(:params)
.and_return({filterrific: {surfaced_param: "true", other_key: "value"}})

expect(helper.expand_filters?([:surfaced_param])).to eq(true)
end
end
end
55 changes: 53 additions & 2 deletions spec/system/case_contacts/index_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

sign_in volunteer
visit case_contacts_path
click_button "Show / Hide"
click_button "Expand / Hide"

fill_in "filterrific_occurred_starting_at", with: Time.zone.yesterday
fill_in "filterrific_occurred_ending_at", with: Time.zone.tomorrow
Expand Down Expand Up @@ -106,6 +106,57 @@
expect(page).to have_content casa_case.case_number
end
end

describe "by hide drafts" do
it "does not show draft contacts" do
create(:case_contact, creator: volunteer, casa_case: casa_case)
create(:case_contact, :started_status, creator: volunteer, casa_case: casa_case)

sign_in volunteer
visit case_contacts_path

check "Hide drafts"

click_button "Filter"

expect(page).not_to have_content "Draft"
end
end

describe "collapsing filter menu" do
before do
sign_in volunteer
visit case_contacts_path
end

it "displays sticky filters before clicking expand" do
expect(page).to have_field "Hide drafts", type: :checkbox
end

it "does not expand menu when filtering only by sticky filter" do
check "Hide drafts"

click_button "Filter"

expect(page).to have_field "Hide drafts", type: :checkbox
expect(page).not_to have_content "Other filters"
end

it "displays other filters when expanded" do
click_button "Expand / Hide"

expect(page).to have_content "Other filters"
end

it "does not hide menu when filtering by placement filter" do
click_button "Expand / Hide"
select "In Person", from: "Contact medium"

click_button "Filter"

expect(page).to have_content "Other filters"
end
end
end

describe "case contacts text color" do
Expand Down Expand Up @@ -167,7 +218,7 @@
expect(page).to_not have_text("Case 1 Notes")

# filtering to only show case 2
click_button "Show / Hide"
click_button "Expand / Hide"
fill_in "filterrific_occurred_starting_at", with: Time.zone.yesterday
fill_in "filterrific_occurred_ending_at", with: Time.zone.tomorrow
click_button "Filter"
Expand Down

0 comments on commit 8a1e07a

Please sign in to comment.