From 292c16482a46456439dfe7b0d2717906036057bd Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 8 Apr 2020 14:37:55 -0400
Subject: [PATCH] APIv4 Explorer - Use standard widget for SELECT

---
 ang/api4Explorer/Explorer.html | 16 ++++++++++++----
 ang/api4Explorer/Explorer.js   |  4 ++--
 css/api4-explorer.css          |  4 ++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index cfcfb14971..02b125fcfb 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -50,10 +50,18 @@
             </label>
             <a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="params[name] !== null"><i class="crm-i fa-times"></i></a>
           </div>
-          <div class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select && !isSelectRowCount()">
-            <label for="api4-param-select">select<span class="crm-marker" ng-if="availableParams.select.required"> *</span></label>
-            <input class="collapsible-optgroups form-control" ng-list crm-ui-select="{data: selectFieldsAndJoins, multiple: true}" placeholder="*" id="api4-param-select" ng-model="params.select" style="width: 85%;"/>
-          </div>
+          <fieldset class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select && !isSelectRowCount()">
+            <legend>select<span class="crm-marker" ng-if="availableParams.select.required"> *</span></legend>
+            <div ng-model="params.select" ui-sortable="{axis: 'y'}">
+              <div class="api4-input form-inline" ng-repeat="item in params.select">
+                <i class="crm-i fa-arrows"></i>
+                <input class="collapsible-optgroups form-control" ng-model="item" crm-ui-select="{data: selectFieldsAndJoins, allowClear: true, placeholder: 'Field'}" />
+              </div>
+            </div>
+            <div class="api4-input form-inline">
+              <input class="collapsible-optgroups form-control" ng-model="controls.select" crm-ui-select="{data: selectFieldsAndJoins}" placeholder="Add select" />
+            </div>
+          </fieldset>
           <div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()"ng-if="availableParams.fields">
             <label for="api4-param-fields">fields<span class="crm-marker" ng-if="availableParams.fields.required"> *</span></label>
             <input class="form-control" ng-list crm-ui-select="{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index 57cc5d60f0..9d6d26a075 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -377,7 +377,7 @@
               deep: format === 'json'
             });
           }
-          if (typeof objectParams[name] !== 'undefined' || name === 'groupBy') {
+          if (typeof objectParams[name] !== 'undefined' || name === 'groupBy' || name === 'select') {
             $scope.$watch('params.' + name, function(values) {
               // Remove empty values
               _.each(values, function(clause, index) {
@@ -390,7 +390,7 @@
               var field = value;
               $timeout(function() {
                 if (field) {
-                  if (name === 'groupBy') {
+                  if (name === 'groupBy' || name === 'select') {
                     $scope.params[name].push(field);
                   } else {
                     var defaultOp = _.cloneDeep(objectParams[name]);
diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index bd309c33b7..8dcc817cf6 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -143,6 +143,10 @@
   display: inline-block;
 }
 
+#bootstrap-theme.api4-explorer-page i.fa-arrows {
+  cursor: move;
+}
+
 #bootstrap-theme.api4-explorer-page .api4-clause-badge {
   width: 55px;
   display: inline-block;
-- 
2.25.1