From 2a68b84a0950629255f915c1cd611a8c05df7e26 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 8 Jan 2020 22:22:37 -0500
Subject: [PATCH] Support index param as array in api explorer

---
 ang/api4Explorer/Explorer.html |  2 +-
 ang/api4Explorer/Explorer.js   | 18 ++++++++++++------
 css/api4-explorer.css          |  3 +--
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index 927513a5b9..24326c6956 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -20,7 +20,7 @@
           <div class="form-inline">
             <input class="collapsible-optgroups form-control" ng-model="entity" ng-disabled="!entities.length" ng-class="{loading: !entities.length}" crm-ui-select="{placeholder: ts('Entity'), data: entities}" />
             <input class="collapsible-optgroups form-control" ng-model="action" ng-disabled="!entity || !actions.length" ng-class="{loading: entity && !actions.length}" crm-ui-select="{placeholder: ts('Action'), data: actions}" />
-            <input class="form-control api4-index" ng-model="index" ng-mouseenter="help('index', indexHelp)" ng-mouseleave="help()" placeholder="{{ ts('Index') }}" />
+            <input class="form-control api4-index" type="search" ng-model="index" ng-mouseenter="help('index', indexHelp)" ng-mouseleave="help()" placeholder="{{ ts('Index') }}" />
             <button class="btn btn-success pull-right" crm-icon="fa-bolt" ng-disabled="!entity || !action || loading" ng-click="execute()">{{ ts('Execute') }}</button>
           </div>
         </div>
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index 982f618d3f..a37c12ad60 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -187,6 +187,7 @@
         $scope.params.select = [];
       } else {
         $scope.params.select = ['row_count'];
+        $scope.index = '';
         if ($scope.params.limit == 25) {
           $scope.params.limit = 0;
         }
@@ -359,7 +360,7 @@
         entity = $scope.entity,
         action = $scope.action,
         params = getParams(),
-        index = isInt($scope.index) ? +$scope.index : $scope.index,
+        index = isInt($scope.index) ? +$scope.index : parseYaml($scope.index),
         result = 'result';
       if ($scope.entity && $scope.action) {
         if (action.slice(0, 3) === 'get') {
@@ -429,12 +430,17 @@
           }
         });
         code.oop += "\n  ->execute()";
-        if (_.isNumber(index)) {
+        if (isSelectRowCount) {
+          code.oop += "\n  ->count()";
+        } else if (_.isNumber(index)) {
           code.oop += !index ? '\n  ->first()' : (index === -1 ? '\n  ->last()' : '\n  ->itemAt(' + index + ')');
         } else if (index) {
-          code.oop += "\n  ->indexBy('" + index + "')";
-        } else if (isSelectRowCount) {
-          code.oop += "\n  ->count()";
+          if (_.isString(index) || (_.isPlainObject(index) && !index[0] && !index['0'])) {
+            code.oop += "\n  ->indexBy('" + (_.isPlainObject(index) ? _.keys(index)[0] : index) + "')";
+          }
+          if (_.isArray(index) || _.isPlainObject(index)) {
+            code.oop += "\n  ->column('" + (_.isArray(index) ? index[0] : _.values(index)[0]) + "')";
+          }
         }
         code.oop += ";\n";
         if (!_.isNumber(index) && !isSelectRowCount) {
@@ -474,7 +480,7 @@
       $scope.loading = true;
       $http.post(CRM.url('civicrm/ajax/api4/' + $scope.entity + '/' + $scope.action, {
         params: angular.toJson(getParams()),
-        index: $scope.index
+        index: isInt($scope.index) ? +$scope.index : parseYaml($scope.index)
       }), null, {
         headers: {
           'X-Requested-With': 'XMLHttpRequest'
diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index 2171d003e8..3ce3f37d9a 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -146,12 +146,11 @@
 
 #bootstrap-theme.api4-explorer-page .api4-operator,
 #bootstrap-theme.api4-explorer-page .api4-chain-index,
-#bootstrap-theme.api4-explorer-page .api4-index,
 #bootstrap-theme.api4-explorer-page .api4-chain-action {
   width: 90px;
 }
 #bootstrap-theme.api4-explorer-page .api4-chain-params {
-  width: calc(100% - 386px);
+  width: calc(100% - 390px);
 }
 
 #bootstrap-theme.api4-explorer-page .api4-add-where-group-menu {
-- 
2.25.1