From 8ffa138720fcfb3553b0a106671eb10085ff94c2 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 21 Apr 2014 14:45:10 -0700
Subject: [PATCH] Api Explorer - add support for chaining

---
 CRM/Admin/Page/APIExplorer.php           | 12 +++++++
 templates/CRM/Admin/Page/APIExplorer.js  | 31 ++++++++++++----
 templates/CRM/Admin/Page/APIExplorer.tpl | 46 +++++++++++++++++-------
 3 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/CRM/Admin/Page/APIExplorer.php b/CRM/Admin/Page/APIExplorer.php
index 912425ca33..3ea21f5d65 100644
--- a/CRM/Admin/Page/APIExplorer.php
+++ b/CRM/Admin/Page/APIExplorer.php
@@ -42,6 +42,18 @@ class CRM_Admin_Page_APIExplorer extends CRM_Core_Page {
     CRM_Utils_System::setTitle(ts('API explorer and generator'));
     CRM_Core_Resources::singleton()->addScriptFile('civicrm', 'templates/CRM/Admin/Page/APIExplorer.js');
     $this->assign('operators', CRM_Core_DAO::acceptedSQLOperators());
+    $this->assign('actions', array(
+      'get',
+      'create',
+      'delete',
+      'getfields',
+      'getactions',
+      'getcount',
+      'getsingle',
+      'getvalue',
+      'getoptions',
+      'getlist',
+    ));
     return parent::run();
   }
 
diff --git a/templates/CRM/Admin/Page/APIExplorer.js b/templates/CRM/Admin/Page/APIExplorer.js
index 5a066f5dbf..a800d45c33 100644
--- a/templates/CRM/Admin/Page/APIExplorer.js
+++ b/templates/CRM/Admin/Page/APIExplorer.js
@@ -5,12 +5,23 @@
     fields = [],
     options = {},
     params = {},
-    fieldTpl = _.template($('#api-param-tpl').html());
+    fieldTpl = _.template($('#api-param-tpl').html()),
+    chainTpl = _.template($('#api-chain-tpl').html());
 
   function addField(name) {
     $('#api-params').append($(fieldTpl({name: name || ''})));
     var $row = $('tr:last-child', '#api-params');
-    $('.api-param-name', $row).select2({data: fields}).change();
+    $('.api-param-name', $row).crmSelect2({data: fields}).change();
+  }
+
+  function addChainField() {
+    $('#api-params').append($(chainTpl({})));
+    var $row = $('tr:last-child', '#api-params');
+    $('.api-chain-entity', $row).crmSelect2({
+      formatSelection: function(item) {
+        return '<span class="icon ui-icon-link"></span> API ' + item.text;
+      }
+    });
   }
 
   function getFields() {
@@ -58,7 +69,7 @@
       text: ts('Other') + '...'
     });
     $('#api-params').empty();
-    $('#api-params-add').show();
+    $('#api-param-buttons').show();
     if (required.length) {
       _.each(required, addField);
     } else {
@@ -162,7 +173,11 @@
       var $row = $(this).closest('tr'),
         val = evaluate($(this).val(), $(this).is('.select2-offscreen')),
         name = $('input.api-param-name', $row).val(),
-        op = $('select.api-param-op', $row).val();
+        op = $('select.api-param-op', $row).val() || '=';
+      // Special syntax for api chaining
+      if (!name && $('select.api-chain-entity', $row).val()) {
+        name = 'api.' + $('select.api-chain-entity', $row).val() + '.' + $('select.api-chain-action', $row).val();
+      }
       if (name && val !== undefined) {
         params[name] = op === '=' ? val : {};
         if (op !== '=') {
@@ -273,10 +288,10 @@
           buildParams();
         } else {
           $('#api-params, #api-generated pre').empty();
-          $('#api-params-add, #api-params-table thead').hide();
+          $('#api-param-buttons, #api-params-table thead').hide();
         }
       })
-      .on('change keyup', 'input.api-param-checkbox, input.api-param-value, input.api-param-name, select.api-param-op', buildParams)
+      .on('change keyup', 'input.api-param-checkbox, input.api-param-value, input.api-param-name, #api-params select', buildParams)
       .on('submit', submit);
     $('#api-params')
       .on('change', '.api-param-name', toggleOptions)
@@ -286,8 +301,12 @@
         buildParams();
       });
     $('#api-params-add').on('click', function(e) {
+      e.preventDefault();
       addField();
+    });
+    $('#api-chain-add').on('click', function(e) {
       e.preventDefault();
+      addChainField();
     });
     $('#api-entity').change();
   });
diff --git a/templates/CRM/Admin/Page/APIExplorer.tpl b/templates/CRM/Admin/Page/APIExplorer.tpl
index 2e50b551cb..38484f6dd1 100644
--- a/templates/CRM/Admin/Page/APIExplorer.tpl
+++ b/templates/CRM/Admin/Page/APIExplorer.tpl
@@ -60,6 +60,10 @@
   #api-result {
     overflow: auto;
   }
+  .select2-choice .icon {
+    margin-top: .2em;
+    background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-2786C2.png");
+  }
   {/literal}
 </style>
 
@@ -75,16 +79,9 @@
   &nbsp;&nbsp;
   <label for="api-action">{ts}Action{/ts}:</label>
   <select class="crm-form-select crm-select2" id="api-action" name="action">
-    <option value="get" selected="selected">get</option>
-    <option value="create" title="used to update as well, if id is set">create</option>
-    <option value="delete">delete</option>
-    <option value="getfields">getfields</option>
-    <option value="getactions">getactions</option>
-    <option value="getcount">getcount</option>
-    <option value="getsingle">getsingle</option>
-    <option value="getvalue">getvalue</option>
-    <option value="getoptions">getoptions</option>
-    <option value="getlist">getlist</option>
+    {foreach from=$actions item='act'}
+      <option value="{$act}">{$act}</option>
+    {/foreach}
   </select>
   &nbsp;&nbsp;
 
@@ -107,8 +104,9 @@
     </thead>
     <tbody id="api-params"></tbody>
   </table>
-  <div>
-    <a href="#" class="crm-hover-button" id="api-params-add" style="display: none;"><span class="icon ui-icon-plus"></span>{ts}Add Parameter{/ts}</a>
+  <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-chain-add"><span class="icon ui-icon-link"></span>{ts}Chain API Call{/ts}</a>
   </div>
   <div id="api-generated-wraper">
     <table id="api-generated" border=1>
@@ -141,4 +139,28 @@
     </td>
   </tr>
 </script>
+
+<script type="text/template" id="api-chain-tpl">
+  <tr class="api-chain-row">
+    <td>
+      <select style="width: 100%;" class="crm-form-select api-chain-entity" placeholder="{ts}Entity{/ts}">
+        <option value=""></option>
+        {foreach from=$entities.values item=entity}
+          <option value="{$entity}">{$entity}</option>
+        {/foreach}
+      </select>
+    </td>
+    <td>
+      <select class="crm-form-select api-chain-action">
+        {foreach from=$actions item='act'}
+          <option value="{$act}">{$act}</option>
+        {/foreach}
+    </select>
+    </td>
+    <td>
+      <input style="width: 85%;" class="crm-form-text api-param-value" value="{ldelim}{rdelim}" placeholder="{ts}Api Params{/ts}"/>
+      <a class="crm-hover-button api-param-remove" href="#"><span class="icon ui-icon-close"></span></a>
+    </td>
+  </tr>
+</script>
 {/strip}
-- 
2.25.1