ENH Keep State and show Search field if any keywords are presented

silverstripe · Jul 25, 2022 · e5980dc · e5980dc
1 parent f3dad18
commit e5980dc
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 31 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/legacy/GridField.js b/client/src/legacy/GridField.js
@@ -19,9 +19,13 @@ $.entwine('ss', function($) {
         this.fixColumns();
         this.injectSearchButton(false);
       }
+
+      if (this.hasFilters()) {
+        this.injectSearchButton(true);
+      };
 
       if (this.is('.grid-field--lazy-loadable') && (
-        (this.closest('.ss-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
+        (this.closest('.ss-tabset, .cms-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
       ) {
         // If our GridField is not inside a tabset for an immidiate reload
         this.data('gridfield-lazy-load-state', 'ready');
@@ -142,6 +146,16 @@ $.entwine('ss', function($) {
       return JSON.parse(this.find(':input[name="' + this.data('name') + '[GridState]"]').val());
     },
 
+    /**
+     * @returns {Boolean}
+     */
+    hasFilters: function() {
+      if (this.getState().GridFieldFilterHeader) {
+        return true;
+      }
+      return false;
+    },
+
     needsColumnFix: function() {
       return (
         this.find('.grid-field__filter-header, .grid-field__search-holder').length &&
@@ -180,6 +194,21 @@ $.entwine('ss', function($) {
       if (hasLegacyFilterHeader) {
         this.find('.sortable-header th:last').html(content);
       }
+    },
+
+    keepStateInHistory: function() {
+      const newURLSceme = $(this).find('.gridfield-actionmenu__container').data('schema');
+      if (newURLSceme && newURLSceme.length > 0) {
+        newURLSceme.filter( e => {
+          if (e.type === 'link') {
+            const url = [window.location.origin, e.url].join('/');
+            const params = (new URL(url)).searchParams.toString();
+            const searchParam =  params ? '?' + params : '';
+            const historyState = $.extend({}, {path: window.location.pathname + searchParam}, this.getState());
+            history.replaceState(historyState, '', window.location.pathname + searchParam);
+          }
+        })
+      }
     }
   });
 
@@ -370,17 +399,6 @@ $.entwine('ss', function($) {
         triggerChange = false;
       }
 
-      const successCallback = function(data, status, response) {
-        const messageText = response.getResponseHeader('X-Message-Text');
-        const messageType = response.getResponseHeader('X-Message-Type');
-        if (messageText && messageType) {
-          var formEditError = $("#Form_EditForm_error");
-          formEditError.addClass(messageType);
-          formEditError.html(messageText);
-          formEditError.show();
-        }
-      };
-
       var data = [
         {
           name: this.attr('name'),
@@ -398,10 +416,21 @@ $.entwine('ss', function($) {
         });
       }
 
-      this.getGridField().reload(
-        { data },
-        successCallback
-      );
+      const gridField =  $(this).getGridField();
+      const successCallback = function(data, status, response) {
+        gridField.keepStateInHistory();
+
+        const messageText = response.getResponseHeader('X-Message-Text');
+        const messageType = response.getResponseHeader('X-Message-Type');
+        if (messageText && messageType) {
+          var formEditError = $("#Form_EditForm_error");
+          formEditError.addClass(messageType);
+          formEditError.html(messageText);
+          formEditError.show();
+        }
+      };
+
+      gridField.reload({ data }, successCallback );
 
       e.preventDefault();
     },
@@ -619,7 +648,12 @@ $.entwine('ss', function($) {
         });
       }
 
-      this.getGridField().reload({ data: ajaxData });
+      const gridField =  $(this).getGridField();
+      const successCallback = function() {
+        gridField.keepStateInHistory();
+      };
+
+      gridField.reload({ data: ajaxData }, successCallback);
     },
 
     search(data) {
@@ -646,7 +680,12 @@ $.entwine('ss', function($) {
         }
       }
 
-      this.getGridField().reload({ data: ajaxData });
+      const gridField =  $(this).getGridField();
+      const successCallback = function() {
+        gridField.keepStateInHistory();
+      };
+
+      gridField.reload({ data: ajaxData }, successCallback);
     },
 
     refresh() {
@@ -729,9 +768,13 @@ $.entwine('ss', function($) {
           });
         }
 
-        this.getGridField().reload({
-          data: ajaxData
-        });
+        const gridField =  $(this).getGridField();
+        const successCallback = function() {
+          gridField.keepStateInHistory();
+        };  
+
+        gridField.reload({ data: ajaxData }, successCallback);
+
         return false;
       }else{
         filterbtn.addClass('hover-alike');
@@ -783,7 +826,12 @@ $.entwine('ss', function($) {
 
         var gridfield = $(this).getGridField();
         gridfield.setState('GridFieldPaginator', {currentPage: newpage});
-        gridfield.reload();
+
+        const successCallback = function() {
+          gridfield.keepStateInHistory();
+        };
+
+        gridfield.reload({}, successCallback);
 
         return false;
       }

diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php
@@ -1196,10 +1196,15 @@ public function getRecord($id)
      */
     public function Breadcrumbs($unlinked = false)
     {
+        $params = $this->getRequest()->getVars();
+
         $items = new ArrayList(array(
             new ArrayData(array(
                 'Title' => $this->menu_title(),
-                'Link' => ($unlinked) ? false : $this->Link()
+                'Link' => ($unlinked) ? false : Controller::join_links(
+                    $this->Link(),
+                    '?' . http_build_query($params ?? [])
+                )
             ))
         ));
 

diff --git a/code/SecurityAdmin.php b/code/SecurityAdmin.php
@@ -2,6 +2,7 @@
 
 namespace SilverStripe\Admin;
 
+use SilverStripe\Control\Controller;
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Control\HTTPResponse;
 use SilverStripe\Core\Convert;
@@ -274,7 +275,11 @@ public function GroupImportForm()
      */
     public function Backlink()
     {
-        return false;
+        $params = $this->getRequest()->getVars();
+        return Controller::join_links(
+            $this->Link(),
+            '?' . http_build_query($params ?? [])
+        );
     }
 
     public function Breadcrumbs($unlinked = false)

diff --git a/tests/behat/features/gridfield-search.feature b/tests/behat/features/gridfield-search.feature
@@ -4,21 +4,53 @@ Feature: Search in GridField
   So that I see proper result and don't see warning
 
   Background:
-    Given the "Company" "Walmart"
-    And the "Company" "ExxonMobil"
-    And the "Company" "Test"
+    Given the "Company" "Walmart" with "Category"="Retail"
+    And the "Employee" "Alen" with "Company"="1"
+    And the "Employee" "Bill" with "Company"="1"
+    And the "Employee" "Ford" with "Company"="1"
+    And the "Company" "ExxonMobil" with "Category"="Oil"
+    And the "Company" "Test" with "Category"="Other" 
     And I am logged in with "ADMIN" permissions
     And I go to "/admin/test"
-
+ @run   
   Scenario: I can search and go to item
     When I press the "Open search and filter" button
     And I press the "Advanced" button
     Then I should see a "#Form_CompaniesSearchForm_Search_Name.no-change-track" element
     And I fill in "SearchBox__Name" with "Walmart"
     And I press the "Enter" key in the "SearchBox__Name" field
     Then I should see "Walmart" in the "#Form_EditForm" element
-    But I should not see "ExxonMobil" in the "#Form_EditForm" element
-    And I should not see "Test" in the "#Form_EditForm" element
+    But I should not see "ExxonMobil" in the ".col-Name" element
+    And I should not see "Test" in the ".col-Name" element
     And I click "Walmart" in the "#Form_EditForm" element
     Then I should see "Walmart"
     And I should see "Walmart" in the ".breadcrumbs-wrapper" element
+@run2
+  Scenario: I can navigate back and forward through the GridField
+    When I press the "Open search and filter" button
+      And I press the "Advanced" button
+      And I fill in "Search__Category" with "Retail"
+      And I press the "Enter" key in the "Search__Category" field
+    Then I should see "Walmart" in the "#Form_EditForm" element
+      But I should not see "ExxonMobil" in the ".col-Name" element
+      And I should not see "Test" in the ".col-Name" element
+      And I click "Walmart" in the "#Form_EditForm" element
+    Then I should see "Walmart"
+    Then I click "Employees" in the ".ui-tabs-nav" element
+      And I press the "Open search and filter" button
+      And I press the "Advanced" button
+      And I fill in "Search__Name" with "Alen"
+      And I press the "Enter" key in the "Search__Category" field
+    Then I should see "Alen" in the "#Form_ItemEditForm_Employees" element
+      And I click "Alen" in the "#Form_ItemEditForm_Employees" element
+      And I click "Walmart" in the ".breadcrumbs-wrapper" element
+      And I click "Employees" in the ".ui-tabs-nav" element
+    Then I should see "Alen" in the "#Form_ItemEditForm_Employees" element
+      But I should not see "Bill" in the ".col-Name" element
+      And I should not see "Ford" in the ".col-Name" element
+      And I should see an "#EmployeesSearch_searchbox" element
+    Then I click "Companies" in the ".breadcrumbs-wrapper" element
+      And I should see "Walmart" in the "#Form_EditForm" element
+      But I should not see "ExxonMobil" in the ".col-Name" element
+      And I should not see "Test" in the ".col-Name" element
+      And I should see an "#SilverStripe-FrameworkTest-Model-CompanySearch_searchbox" element