Keeping filters state on pagination (#638)

* Keeping filters state on pagination * Fix Code Climates complaints. * Fixed active issue on ada filter buttons * Fixed undefined function problem when run rspec.
RefugeRestrooms · Oct 17, 2020 · e49263a · e49263a
1 parent 2cd6d56
commit e49263a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 32 deletions.
diff --git a/app/controllers/restrooms_controller.rb b/app/controllers/restrooms_controller.rb
@@ -3,6 +3,7 @@
 class RestroomsController < ApplicationController
   respond_to :html, :json
 
+  before_action :restrooms_filters, only: [:index]
   before_action :list_restrooms, only: [:index]
   before_action :find_restroom, only: [:show, :update, :edit, :destroy]
 
@@ -74,13 +75,28 @@ def update
   end
 
 private
+  def restrooms_filters
+    @filters =
+      params
+        .fetch(:filters, '')
+        .split(',')
+        .reduce({}) do |filters, filter|
+          filters[filter] = true if ['accessible', 'changing_table', 'unisex'].include?(filter)
+
+          filters
+        end
+  end
+
   def list_restrooms
-    @restrooms = Restroom.current.page(params[:page])
-    @restrooms = if params[:search].present? || params[:map] == "1"
-      @restrooms.near([params[:lat], params[:long]], 20, :order => 'distance')
-    else
-      @restrooms.reverse_order
-    end
+    @restrooms = Restroom.current.where(@filters).page(params[:page])
+    @restrooms =
+      if params[:search].present? || params[:map] == "1"
+        @restrooms.near([params[:lat], params[:long]], 20, :order => 'distance')
+      else
+        @restrooms.reverse_order
+      end
+
+    @restrooms = @restrooms.out_of_range? ? @restrooms.page(1) : @restrooms
   end
 
   def display_errors

diff --git a/app/javascript/packs/views/restrooms/restrooms.js b/app/javascript/packs/views/restrooms/restrooms.js
@@ -3,27 +3,57 @@
 // You can use CoffeeScript in this file: http://coffeescript.org/
 
 $(() => {
-  $('#ada_filter').click(function() {
-    if ($(this).hasClass("active")) {
-      $('.listItem.not_accessible').show();
-    } else {
-      $('.listItem.not_accessible').hide();
-    }
-  });
+  const filters = {
+    '#ada_filter': 'accessible',
+    '#unisex_filter': 'unisex',
+    '#changing_table_filter': 'changing_table'
+  };
 
-  $('#unisex_filter').click(function() {
-    if ($(this).hasClass("active")) {
-      $('.listItem.not_unisex').show();
-    } else {
-      $('.listItem.not_unisex').hide();
-    }
-  });
+  function getSearchParams() {
+    const { search: search } = location;
+    return new URLSearchParams(search);
+  }
+  function applyFilters(filters) {
+    const { origin: url, pathname: path } = location;
+    const searchParams = getSearchParams();
+    searchParams.set('filters', filters);
+    location = `${url}${path}?${searchParams.toString()}`
+  }
+
+  function getFilters() {
+    const searchParams = getSearchParams();
+    const filters = searchParams.get('filters') || '';
+    return filters.split(',').filter(filter => filter && filter.length > 0);
+  }
+
+  function removeFilter(toRemove) {
+    const filters =
+      getFilters()
+      .filter((filter) => filter != toRemove);
+
+    applyFilters(filters);
+  }
 
-  $('#changing_table_filter').click(function() {
-    if ($(this).hasClass("active")) {
-      $('.listItem.no_changing_table').show();
-    } else {
-      $('.listItem.no_changing_table').hide();
+  function addFilter(filter) {
+    let filters = getFilters();
+
+    if (filters.indexOf(filter) == -1) {
+      filters.push(filter);
     }
-  });
+
+    applyFilters(filters);
+  }
+
+  function addOnClickEvent(filterElementId) {
+    const filter = filters[filterElementId];
+    $(filterElementId).click(function() {
+      if ($(this).hasClass("active")) {
+        removeFilter(filter);
+      } else {
+        addFilter(filter);
+      }
+    });
+  }
+
+  Object.keys(filters).forEach(addOnClickEvent);
 });
diff --git a/app/views/restrooms/index.html.haml b/app/views/restrooms/index.html.haml
@@ -2,14 +2,14 @@
   .col-xs-12.headroom
     #filters.clearfix
       .btn-group{:data => {:toggle => "buttons"}}
-        %label#ada_filter.filter.btn.btn-light-purple.linkbutton{:title => t("restroom.accessible")}
-          %input{:type => "checkbox"}
+        %button#ada_filter.filter.btn.btn-light-purple.linkbutton{:title => t("restroom.accessible"), :class => ("active" if @filters.keys.include?('accessible'))}
+          %input{:type => "checkbox", :checked => @filters.keys.include?('accessible')}
           %i.fa.fa-wheelchair
-        %label#unisex_filter.filter.btn-light-purple.btn.linkbutton{:title => t("restroom.type.unisex")}
-          %input{:type => "checkbox"}
+        %button#unisex_filter.filter.btn-light-purple.btn.linkbutton{:title => t("restroom.type.unisex"), :class => ("active" if @filters.keys.include?('unisex'))}
+          %input{:type => "checkbox", :checked => @filters.keys.include?('unisex')}
           %i.fa.fa-transgender-alt
-        %label#changing_table_filter.filter.btn-light-purple.btn.linkbutton{:title => t("restroom.changing_table")}
-          %input{:type => "checkbox"}
+        %button#changing_table_filter.filter.btn-light-purple.btn.linkbutton{:title => t("restroom.changing_table"), :class => ("active" if @filters.keys.include?('changing_table'))}
+          %input{:type => "checkbox", :checked => @filters.keys.include?('changing_table')}
           %i.fa.fa-child
 
       .map-toggle-btn.mapToggle.linkbutton.btn-lg.btn-light-purple