From 79aeccf317abc14b5eb04808496b1ad28636a4aa Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 18 May 2021 10:04:40 -0400
Subject: [PATCH] SearchKit - When editing a display, show a checkbox to toggle
 limit

Previously, limit was a number input which could be disabled by entering the number '0'.
That's less intuitive than a checkbox.
---
 .../crmSearchAdminDisplay.component.js        | 11 +++++++++++
 .../displays/searchAdminDisplayList.html      | 16 ++++++++++++----
 .../displays/searchAdminDisplayTable.html     | 19 +++++++++++++++----
 ext/search_kit/css/crmSearchAdmin.css         |  6 ++++++
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index f754d34cb6..e930f9097f 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -67,6 +67,17 @@
         },
       };
 
+      this.toggleLimit = function() {
+        if (ctrl.display.settings.limit) {
+          ctrl.display.settings.limit = 0;
+          if (ctrl.display.settings.pager) {
+            ctrl.display.settings.pager = false;
+          }
+        } else {
+          ctrl.display.settings.limit = CRM.crmSearchAdmin.defaultPagerSize;
+        }
+      };
+
       // Drag-n-drop settings for reordering columns
       this.sortableOptions = {
         connectWith: '.crm-search-admin-edit-columns',
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 362cde215a..3c778cfdb0 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -12,12 +12,20 @@
         {{ symbol.label }}
       </option>
     </select>
-  <div class="form-inline">
   </div>
-    <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
-    <input id="crm-search-admin-display-limit" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
+  <div class="form-inline">
+    <div class="checkbox-inline form-control">
+      <label>
+        <input type="checkbox" ng-checked="$ctrl.display.settings.limit" ng-click="$ctrl.parent.toggleLimit()">
+        <span>{{:: ts('Limit Results') }}</span>
+      </label>
+      <input id="crm-search-admin-display-limit" ng-if="$ctrl.display.settings.limit" type="number" min="1" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
+    </div>
     <div class="checkbox-inline form-control">
-      <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> <span>{{:: ts('Use Pager') }}</span></label>
+      <label ng-class="{disabled: !$ctrl.display.settings.limit}">
+        <input type="checkbox" ng-model="$ctrl.display.settings.pager" ng-disabled="!$ctrl.display.settings.limit">
+        <span>{{:: ts('Use Pager') }}</span>
+      </label>
     </div>
   </div>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 5264ceb1cb..c1c03ab816 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -1,13 +1,24 @@
 <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
-    <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
-    <input id="crm-search-admin-display-limit" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
     <div class="checkbox-inline form-control">
-      <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> <span>{{:: ts('Use Pager') }}</span></label>
+      <label>
+        <input type="checkbox" ng-checked="$ctrl.display.settings.limit" ng-click="$ctrl.parent.toggleLimit()">
+        <span>{{:: ts('Limit Results') }}</span>
+      </label>
+      <input id="crm-search-admin-display-limit" ng-if="$ctrl.display.settings.limit" type="number" min="1" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
     </div>
     <div class="checkbox-inline form-control">
-      <label><input type="checkbox" ng-model="$ctrl.display.settings.actions"> <span>{{:: ts('Enable Actions') }}</span></label>
+      <label ng-class="{disabled: !$ctrl.display.settings.limit}">
+        <input type="checkbox" ng-model="$ctrl.display.settings.pager" ng-disabled="!$ctrl.display.settings.limit">
+        <span>{{:: ts('Use Pager') }}</span>
+      </label>
+    </div>
+    <div class="checkbox-inline form-control">
+      <label>
+        <input type="checkbox" ng-model="$ctrl.display.settings.actions">
+        <span>{{:: ts('Enable Actions') }}</span>
+      </label>
     </div>
   </div>
 </fieldset>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 0bad2c7879..b4c9e4cb3d 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -134,6 +134,12 @@
 #bootstrap-theme.crm-search input[type=number] {
   width: 90px;
 }
+/* For display.settings.limit field */
+#bootstrap-theme.crm-search .checkbox-inline.form-control input[type=number] {
+  position: relative;
+  top: -5px;
+  right: -9px;
+}
 
 #bootstrap-theme.crm-search .api4-add-where-group-menu {
   min-width: 80px;
-- 
2.25.1