From e362bd2f6e12faf9eef869fb51ce568384bc4d55 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sun, 8 Aug 2021 09:30:23 -0400
Subject: [PATCH] SearchKit - Add optional search button to displays

This allows search displays to present a button to the user instead of running immediately
---
 .../displays/common/searchButtonConfig.html   | 13 ++++++++++
 .../displays/searchAdminDisplayList.html      |  1 +
 .../displays/searchAdminDisplayTable.html     |  1 +
 .../ang/crmSearchDisplay/SearchButton.html    |  5 ++++
 .../traits/searchDisplayBaseTrait.service.js  | 24 ++++++++++++++-----
 .../searchDisplaySortableTrait.service.js     |  4 +++-
 .../crmSearchDisplayList.html                 |  1 +
 .../crmSearchDisplayTable.html                |  7 +++---
 8 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/common/searchButtonConfig.html
 create mode 100644 ext/search_kit/ang/crmSearchDisplay/SearchButton.html

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchButtonConfig.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchButtonConfig.html
new file mode 100644
index 0000000000..64c67b8dee
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchButtonConfig.html
@@ -0,0 +1,13 @@
+<div class="input-group">
+  <div class="input-group-btn" title="{{:: ts('Should the search be run immediately, or wait for the user to click a button?') }}">
+    <button type="button" class="btn btn-outline-default" ng-click="$ctrl.display.settings.button = null" ng-class="{active: !$ctrl.display.settings.button}">
+      <i class="crm-i fa-{{ $ctrl.display.settings.button ? '' : 'check-' }}circle-o"></i>
+      {{:: ts('Auto-Run') }}
+    </button>
+    <button type="button" class="btn btn-outline-default" ng-click="$ctrl.display.settings.button = ts('Search')" ng-class="{active: $ctrl.display.settings.button}">
+      <i class="crm-i fa-{{ !$ctrl.display.settings.button ? '' : 'check-' }}circle-o"></i>
+      {{:: ts('Search Button') }}
+    </button>
+  </div>
+  <input type="text" ng-show="$ctrl.display.settings.button" ng-model="$ctrl.display.settings.button" ng-model-options="{updateOn: 'blur'}" class="form-control" title="{{:: ts('Search button text') }}" placeholder="{{:: ts('Search button text') }}">
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 3cbb992d93..5d733db80b 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -12,6 +12,7 @@
         {{ symbol.label }}
       </option>
     </select>
+    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
   </div>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 1fe4a157c7..c2961ecf25 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -7,6 +7,7 @@
         <span>{{:: ts('Enable Actions') }}</span>
       </label>
     </div>
+    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
   </div>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchDisplay/SearchButton.html b/ext/search_kit/ang/crmSearchDisplay/SearchButton.html
new file mode 100644
index 0000000000..542d61996d
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplay/SearchButton.html
@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary" ng-click="$ctrl.getResults()" ng-disabled="$ctrl.loading">
+  <i ng-if="$ctrl.loading" class="crm-i fa-spin fa-spinner"></i>
+  <i ng-if="!$ctrl.loading" class="crm-i fa-search"></i>
+  {{:: $ctrl.settings.button }}
+</button>
diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
index 733105f74f..62f8cd0d90 100644
--- a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
+++ b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
@@ -87,7 +87,9 @@
         this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : [];
 
         this.getResults = _.debounce(function() {
-          ctrl.runSearch();
+          $scope.$apply(function() {
+            ctrl.runSearch();
+          });
         }, 100);
 
         // If search is embedded in contact summary tab, display count in tab-header
@@ -107,12 +109,17 @@
           if (ctrl.onChangeFilters) {
             ctrl.onChangeFilters();
           }
-          ctrl.getResults();
+          if (!ctrl.settings.button) {
+            ctrl.getResults();
+          }
         }
 
         function onChangePageSize() {
           ctrl.page = 1;
-          ctrl.getResults();
+          // Only refresh if search has already been run
+          if (ctrl.results) {
+            ctrl.getResults();
+          }
         }
 
         if (this.afFieldset) {
@@ -139,10 +146,12 @@
 
       // Call SearchDisplay.run and update ctrl.results and ctrl.rowCount
       runSearch: function() {
-        var ctrl = this;
-        return crmApi4('SearchDisplay', 'run', ctrl.getApiParams()).then(function(results) {
+        var ctrl = this,
+          apiParams = this.getApiParams();
+        this.loading = true;
+        return crmApi4('SearchDisplay', 'run', apiParams).then(function(results) {
           ctrl.results = results;
-          ctrl.editing = false;
+          ctrl.editing = ctrl.loading = false;
           if (!ctrl.rowCount) {
             if (!ctrl.limit || results.length < ctrl.limit) {
               ctrl.rowCount = results.length;
@@ -153,6 +162,9 @@
               });
             }
           }
+        }, function(error) {
+          ctrl.results = [];
+          ctrl.editing = ctrl.loading = false;
         });
       },
       replaceTokens: function(value, row) {
diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplaySortableTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplaySortableTrait.service.js
index 15a89d8cb4..207da88e10 100644
--- a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplaySortableTrait.service.js
+++ b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplaySortableTrait.service.js
@@ -34,7 +34,9 @@
         } else {
           this.sort.push([col.key, dir]);
         }
-        this.getResults();
+        if (this.results || !this.settings.button) {
+          this.getResults();
+        }
       }
 
     };
diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
index 9d039ba19c..5428a7713d 100644
--- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
+++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
@@ -1,4 +1,5 @@
 <div class="crm-search-display crm-search-display-list">
+  <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
   <ol ng-if=":: $ctrl.settings.style === 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ol>
   <ul ng-if=":: $ctrl.settings.style !== 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ul>
   <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
index b711c5ee58..ed055562f9 100644
--- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
@@ -1,12 +1,13 @@
 <div class="crm-search-display crm-search-display-table">
-  <div class="form-inline" ng-if="$ctrl.settings.actions">
-    <crm-search-tasks entity="$ctrl.apiEntity" ids="$ctrl.selectedRows" refresh="$ctrl.getResults()"></crm-search-tasks>
+  <div class="form-inline">
+    <div class="btn-group" ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
+    <crm-search-tasks ng-if="$ctrl.settings.actions" entity="$ctrl.apiEntity" ids="$ctrl.selectedRows" refresh="$ctrl.getResults()"></crm-search-tasks>
   </div>
   <table>
     <thead>
       <tr>
         <th class="crm-search-result-select" ng-if=":: $ctrl.settings.actions">
-          <input type="checkbox" ng-checked="$ctrl.allRowsSelected" ng-click="$ctrl.selectAllRows()" >
+          <input type="checkbox" ng-disabled="$ctrl.loading || !$ctrl.results.length" ng-checked="$ctrl.allRowsSelected" ng-click="$ctrl.selectAllRows()" >
         </th>
         <th ng-repeat="col in $ctrl.settings.columns" ng-click="$ctrl.setSort(col, $event)" title="{{:: ts('Click to sort results (shift-click to sort by multiple).') }}">
           <i ng-if="col.type === 'field'" class="crm-i {{ $ctrl.getSort(col) }}"></i>
-- 
2.25.1