From 385446807da0bd2b6a5e27a43be4388008223d15 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 21 May 2021 15:28:18 +0200
Subject: [PATCH] Add a clear filters button

 - This button clear all stored filters and then update results
---
 .../admin/orders/controllers/orders_controller.js.coffee  | 5 +++++
 .../admin/services/query_persistence.js.coffee            | 3 +++
 app/assets/stylesheets/admin/components/table-filter.scss | 8 +++++---
 app/views/spree/admin/orders/_filters.html.haml           | 8 +++++---
 config/locales/en.yml                                     | 1 +
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee b/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee
index ea0034c405..5e32a602d2 100644
--- a/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee
+++ b/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee
@@ -30,6 +30,11 @@ angular.module("admin.orders").controller "ordersCtrl", ($scope, $timeout, Reque
       completed_at_not_null: true
     }
 
+  $scope.clearFilters = () ->
+    QueryPersistence.clearFilters()
+    $scope.setDefaults()
+    $scope.fetchResults()
+
   $scope.fetchResults = (page=1) ->
     startDateWithTime = $scope.appendStringIfNotEmpty($scope.q?.completed_at_gteq, ' 00:00:00')
     endDateWithTime = $scope.appendStringIfNotEmpty($scope.q?.completed_at_lteq, ' 23:59:59')
diff --git a/app/assets/javascripts/admin/services/query_persistence.js.coffee b/app/assets/javascripts/admin/services/query_persistence.js.coffee
index 0dad2341f6..0018151e42 100644
--- a/app/assets/javascripts/admin/services/query_persistence.js.coffee
+++ b/app/assets/javascripts/admin/services/query_persistence.js.coffee
@@ -25,3 +25,6 @@ angular.module("admin.indexUtils").factory 'QueryPersistence', (localStorageServ
         return true
 
       false
+
+    clearFilters: () ->
+      localStorageService.remove(@storageKey)
diff --git a/app/assets/stylesheets/admin/components/table-filter.scss b/app/assets/stylesheets/admin/components/table-filter.scss
index 51504e4589..5d7f2e7429 100644
--- a/app/assets/stylesheets/admin/components/table-filter.scss
+++ b/app/assets/stylesheets/admin/components/table-filter.scss
@@ -1,5 +1,4 @@
 #table-filter {
-
   .field {
     input[type="text"], input[type="phone"],
     input[type="email"], input[type="number"],
@@ -9,6 +8,9 @@
   }
 
   .actions {
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 20px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml
index bc39f719e9..8a789b8c64 100644
--- a/app/views/spree/admin/orders/_filters.html.haml
+++ b/app/views/spree/admin/orders/_filters.html.haml
@@ -53,6 +53,8 @@
             {class: "select2 fullwidth", multiple: true, 'ng-model' => 'q.order_cycle_id_in'})
     .clearfix
     .actions.filter-actions
-      %div
-        %a.button.icon-search{'ng-click' => 'fetchResults()'}
-          = t(:filter_results)
+      %a.button.icon-search{'ng-click' => 'fetchResults()'}
+        = t(:filter_results)
+      %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button"}
+        =  t(:clear_filters)
+          
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8ac5f28653..b4798a7513 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -330,6 +330,7 @@ en:
   no_pending_payments: "No pending payments"
   invalid_payment_state: "Invalid payment state: %{state}"
   filter_results: Filter Results
+  clear_filters: Clear filters
   quantity: Quantity
   pick_up: Pick up
   ok: Ok