From d71cde6c6bc98425f3b840005a9298f126f55459 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 8 Apr 2020 10:23:02 -0400
Subject: [PATCH] APIv4 Explorer - Improve display of limit & offset params

---
 Civi/Api4/Generic/AbstractQueryAction.php |  6 +++---
 ang/api4Explorer/Explorer.html            | 14 +++++++++++++-
 ang/api4Explorer/Explorer.js              |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/Civi/Api4/Generic/AbstractQueryAction.php b/Civi/Api4/Generic/AbstractQueryAction.php
index e58ab26659..41fa6f65d0 100644
--- a/Civi/Api4/Generic/AbstractQueryAction.php
+++ b/Civi/Api4/Generic/AbstractQueryAction.php
@@ -62,9 +62,9 @@ abstract class AbstractQueryAction extends AbstractAction {
   /**
    * Maximum number of $ENTITIES to return.
    *
-   * Defaults to unlimited.
+   * Defaults to `0` - unlimited.
    *
-   * Note: the Api Explorer sets this to 25 by default to avoid timeouts.
+   * Note: the Api Explorer sets this to `25` by default to avoid timeouts.
    * Change or remove this default for your application code.
    *
    * @var int
@@ -74,7 +74,7 @@ abstract class AbstractQueryAction extends AbstractAction {
   /**
    * Zero-based index of first $ENTITY to return.
    *
-   * Defaults to "0" - first $ENTITY found.
+   * Defaults to `0` - first $ENTITY found.
    *
    * @var int
    */
diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index ad35e38103..e34476a416 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -112,7 +112,19 @@
               <input class="collapsible-optgroups form-control" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoins}" placeholder="Add orderBy" />
             </div>
           </fieldset>
-
+          <fieldset ng-if="availableParams.limit && availableParams.offset">
+            <div class="api4-input form-inline">
+              <span ng-mouseenter="help('limit', availableParams.limit)" ng-mouseleave="help()">
+                <label for="api4-param-limit">limit<span class="crm-marker" ng-if="availableParams.limit.required"> *</span></label>
+                <input class="form-control" type="number" min="0" id="api4-param-limit" ng-model="params.limit"/>
+              </span>
+              <span ng-mouseenter="help('offset', availableParams.offset)" ng-mouseleave="help()">
+                <label for="api4-param-offset">offset<span class="crm-marker" ng-if="availableParams.offset.required"> *</span></label>
+                <input class="form-control" type="number" min="0" id="api4-param-offset" ng-model="params.offset"/>
+              </span>
+              <a href class="crm-hover-button" title="Clear" ng-click="clearParam('limit');clearParam('offset');" ng-show="!!params.limit || !!params.offset"><i class="crm-i fa-times"></i></a>
+            </div>
+          </fieldset>
           <fieldset ng-if="availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
             <legend>chain</legend>
             <div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="entities" main-entity="entity" >
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index f75443dcf4..a8f825af17 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -238,6 +238,9 @@
 
     $scope.isSpecial = function(name) {
       var specialParams = ['select', 'fields', 'action', 'where', 'values', 'defaults', 'orderBy', 'chain', 'groupBy'];
+      if ($scope.availableParams.limit && $scope.availableParams.offset) {
+        specialParams.push('limit', 'offset');
+      }
       return _.contains(specialParams, name);
     };
 
-- 
2.25.1