From c275764ea074fb8c445041e782c7a176d166a7ce Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 23 Apr 2014 21:44:23 -0700
Subject: [PATCH] Api explorer - add options selector

---
 api/v3/utils.php                         |  2 +-
 templates/CRM/Admin/Page/APIExplorer.js  | 56 ++++++++++++++++++++----
 templates/CRM/Admin/Page/APIExplorer.tpl | 26 ++++++++++-
 3 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/api/v3/utils.php b/api/v3/utils.php
index 781c36d892..eaf8b771bb 100644
--- a/api/v3/utils.php
+++ b/api/v3/utils.php
@@ -234,7 +234,7 @@ function civicrm_api3_create_success($values = 1, $params = array(), $entity = N
   }
   if(!empty($params['options']['metadata'])) {
     // we've made metadata an array but only supporting 'fields' atm
-    if(in_array('fields', $params['options']['metadata'])) {
+    if(in_array('fields', (array) $params['options']['metadata'])) {
       $fields = civicrm_api3($entity, 'getfields', array('action' => substr($action, 0, 3) == 'get' ? 'get' : 'create'));
       $result['metadata']['fields'] = $fields['values'];
     }
diff --git a/templates/CRM/Admin/Page/APIExplorer.js b/templates/CRM/Admin/Page/APIExplorer.js
index c5dea0a94c..36fe3ab2a9 100644
--- a/templates/CRM/Admin/Page/APIExplorer.js
+++ b/templates/CRM/Admin/Page/APIExplorer.js
@@ -8,6 +8,7 @@
     params = {},
     smartyStub,
     fieldTpl = _.template($('#api-param-tpl').html()),
+    optionsTpl = _.template($('#api-options-tpl').html()),
     returnTpl = _.template($('#api-return-tpl').html()),
     chainTpl = _.template($('#api-chain-tpl').html());
 
@@ -32,6 +33,26 @@
     }).change();
   }
 
+  /**
+   * Add a new "options" row
+   * @param name
+   */
+  function addOptionField(name) {
+    if ($('.api-options-row', '#api-params').length) {
+      $('.api-options-row:last', '#api-params').after($(optionsTpl({})));
+    } else {
+      $('#api-params').append($(optionsTpl({})));
+    }
+    var $row = $('.api-options-row:last', '#api-params');
+    $('.api-option-name', $row).crmSelect2({data: [
+      {id: 'limit', text: 'limit'},
+      {id: 'offset', text: 'offset'},
+      {id: 'sort', text: 'sort'},
+      {id: 'metadata', text: 'metadata'},
+      {id: '-', text: ts('Other') + '...'}
+    ]});
+  }
+
   /**
    * Add an "api chain" row
    */
@@ -45,7 +66,6 @@
       placeholder: '<span class="icon ui-icon-link"></span> ' + ts('Entity'),
       escapeMarkup: function(m) {return m}
     });
-
   }
 
   /**
@@ -142,6 +162,9 @@
     }
   }
 
+  /**
+   * Add/remove option list for selected field's pseudoconstant
+   */
   function toggleOptions() {
     var name = $(this).val(),
       $valField = $(this).closest('tr').find('.api-param-value');
@@ -156,10 +179,6 @@
     else if ($valField.data('select2')) {
       $valField.select2('destroy');
     }
-    if (name === '-') {
-      $(this).select2('destroy');
-      $(this).val('').focus();
-    }
   }
 
   /**
@@ -205,7 +224,7 @@
     var ret = '';
     if ($.isPlainObject(val)) {
       $.each(val, function(k, v) {
-        ret += (ret ? ',' : '') + "'" + k + "' => " + phpFormat(v);
+        ret += (ret ? ', ' : '') + "'" + k + "' => " + phpFormat(v);
       });
       return 'array(' + ret + ')';
     }
@@ -230,12 +249,16 @@
     return js;
   }
 
+  /**
+   * Create the params array from user input
+   * @param e
+   */
   function buildParams(e) {
     params = {};
     $('.api-param-checkbox:checked').each(function() {
       params[this.name] = 1;
     });
-    $('input.api-param-value').each(function() {
+    $('input.api-param-value, input.api-option-value').each(function() {
       var $row = $(this).closest('tr'),
         val = evaluate($(this).val(), $(this).is('.select2-offscreen')),
         name = $('input.api-param-name', $row).val(),
@@ -249,8 +272,15 @@
       if (!name && $('select.api-chain-entity', $row).val()) {
         name = 'api.' + $('select.api-chain-entity', $row).val() + '.' + $('select.api-chain-action', $row).val();
       }
+      // Special handling for options
+      if ($(this).is('.api-option-value')) {
+        op = $('input.api-option-name', $row).val();
+        if (op) {
+          name = 'options';
+        }
+      }
       if (name && val !== undefined) {
-        params[name] = op === '=' ? val : {};
+        params[name] = op === '=' ? val : (params[name] || {});
         if (op !== '=') {
           params[name][op] = val;
         }
@@ -376,6 +406,12 @@
       .on('submit', submit);
     $('#api-params')
       .on('change', '.api-param-name', toggleOptions)
+      .on('change', '.api-param-name, .api-option-name', function() {
+        if ($(this).val() === '-') {
+          $(this).select2('destroy');
+          $(this).val('').focus();
+        }
+      })
       .on('click', '.api-param-remove', function(e) {
         e.preventDefault();
         $(this).closest('tr').remove();
@@ -385,6 +421,10 @@
       e.preventDefault();
       addField();
     });
+    $('#api-option-add').on('click', function(e) {
+      e.preventDefault();
+      addOptionField();
+    });
     $('#api-chain-add').on('click', function(e) {
       e.preventDefault();
       addChainField();
diff --git a/templates/CRM/Admin/Page/APIExplorer.tpl b/templates/CRM/Admin/Page/APIExplorer.tpl
index efdcf37819..b2c25f24a1 100644
--- a/templates/CRM/Admin/Page/APIExplorer.tpl
+++ b/templates/CRM/Admin/Page/APIExplorer.tpl
@@ -52,13 +52,19 @@
     margin-top: .5em;
   }
   #api-explorer label {
-    display:inline;
+    display: inline;
     font-weight: bold;
   }
   #api-generated-wraper,
   #api-result {
     overflow: auto;
   }
+  #api-explorer .api-options-row + .api-options-row label {
+    display: none;
+  }
+  .api-options-row td:first-child {
+    text-align: right;
+  }
   .select2-choice .icon {
     margin-top: .2em;
     background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-2786C2.png");
@@ -112,6 +118,7 @@
   </table>
   <div id="api-param-buttons" style="display: none;">
     <a href="#" class="crm-hover-button" id="api-params-add"><span class="icon ui-icon-plus"></span>{ts}Add Parameter{/ts}</a>
+    <a href="#" class="crm-hover-button" id="api-option-add"><span class="icon ui-icon-gear"></span>{ts}Add Option{/ts}</a>
     <a href="#" class="crm-hover-button" id="api-chain-add"><span class="icon ui-icon-link"></span>{ts}Chain API Call{/ts}</a>
   </div>
   <div id="api-generated-wraper">
@@ -150,13 +157,28 @@
 <script type="text/template" id="api-return-tpl">
   <tr class="api-return-row">
     <td colspan="3">
-      <label for="api-return-value">{ts}Fields to return:{/ts}</label> &nbsp;
+      <label for="api-return-value">{ts}Fields to return{/ts}:</label> &nbsp;
       <input type="hidden" class="api-param-name" value="return" />
       <input style="width: 50%;" id="api-return-value" class="crm-form-text api-param-value api-input" placeholder="{ts}Leave blank for default{/ts}"/>
     </td>
   </tr>
 </script>
 
+<script type="text/template" id="api-options-tpl">
+  <tr class="api-options-row">
+    <td>
+      <label>{ts}Options{/ts}: &nbsp;</label>
+    </td>
+    <td>
+      <input class="crm-form-text api-option-name api-input" placeholder="{ts}Option{/ts}"/>
+    </td>
+    <td>
+      <input style="width: 85%;" class="crm-form-text api-option-value api-input" placeholder="{ts}Value{/ts}"/>
+      <a class="crm-hover-button api-param-remove" href="#"><span class="icon ui-icon-close"></span></a>
+    </td>
+  </tr>
+</script>
+
 <script type="text/template" id="api-chain-tpl">
   <tr class="api-chain-row">
     <td>
-- 
2.25.1