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.

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index f754d34cb6fa7520e5801badf554ed4f2e7d52a8..e930f9097f0c0a14e43872bf30b3d0af60626075 100644 (file)
--- 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 362cde215a3e9249770d8d16eac9c718878733c8..3c778cfdb02ff303243e0287eefd014a0b0523d7 100644 (file)
--- 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 5264ceb1cb6575f2d70db707b12e00794bfb0623..c1c03ab816eb7129ca762b47c0986da3d304b050 100644 (file)
--- 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 0bad2c7879e977d2b0e9f72697683cb584a52b14..b4c9e4cb3d9c570ef509138b80b2e39747c0b617 100644 (file)
--- 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;