Merge pull request #3066 from relldoesphp/CRM-14466
[civicrm-core.git] / templates / CRM / Admin / Page / APIExplorer.tpl
index 2e50b551cb5cb1d127fdbe74e45434b58ee5f72f..5b387b0d963942a7e838a43d679a1e3f0bdf2630 100644 (file)
 *}
 <style>
   {literal}
-  #api-result {
-    background: #d9d9d9;
+  #api-explorer pre {
+    line-height: 1.3em;
+    font-size: 11px;
+    margin: 0;
+    border: 0 none;
+  }
+  pre#api-result {
     padding:1em;
     max-height: 50em;
+    border: 1px solid lightgrey;
   }
   #api-params-table th:first-child,
   #api-params-table td:first-child {
     width: 35%;
   }
   #api-params-table td:first-child + td,
-  #api-params-table th:first-child + th {
-    width: 10em;
+  #api-params-table th:first-child + th,
+  #api-generated td:first-child {
+    width: 9em;
   }
   #api-params {
     min-height: 1em;
   #api-params .red-icon {
     margin-top: .5em;
   }
-  #api-generated td:first-child {
-    width: 10em;
-  }
   #api-explorer label {
-    display:inline;
+    display: inline;
     font-weight: bold;
   }
-  #api-explorer pre {
-    line-height: 1.3em;
-    font-size: 11px;
-    margin: 0;
-  }
   #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");
+  }
+  .select2-default .icon {
+    background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-52534D.png");
+    opacity: .8;
+  }
+  pre ol.linenums li {
+    list-style-type: decimal;
+    color: #CFCFCF;
+  }
+  pre ol.linenums li:hover {
+    color: #9c9c9c;
+  }
   {/literal}
 </style>
 
   </select>
   &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>
-  </select>
+  <input class="crm-form-text" id="api-action" name="action" value="get">
   &nbsp;&nbsp;
 
   <label for="debug-checkbox" title="{ts}Display debug output with results.{/ts}">
-    <input type="checkbox" class="crm-form-checkbox api-param-checkbox" id="debug-checkbox" name="debug" checked="checked" value="1" >debug
+    <input type="checkbox" class="crm-form-checkbox api-param-checkbox api-input" id="debug-checkbox" name="debug" value="1" >debug
   </label>
   &nbsp;|&nbsp;
 
   <label for="sequential-checkbox" title="{ts}Sequential is more compact format, well-suited for json and smarty.{/ts}">
-    <input type="checkbox" class="crm-form-checkbox api-param-checkbox" id="sequential-checkbox" name="sequential" checked="checked" value="1">sequential
+    <input type="checkbox" class="crm-form-checkbox api-param-checkbox api-input" id="sequential-checkbox" name="sequential" checked="checked" value="1">sequential
   </label>
 
   <table id="api-params-table">
     </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-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">
     <table id="api-generated" border=1>
       <caption>{ts}Code{/ts}</caption>
-      <tr><td>Rest</td><td><pre id="api-rest"></pre></td></tr>
-      <tr><td>Smarty</td><td><pre id="api-smarty" title='smarty syntax (for get actions)'></pre></td></tr>
-      <tr><td>Php</td><td><pre id="api-php" title='php syntax'></pre></td></tr>
-      <tr><td>Javascript</td><td><pre id="api-json" title='javascript syntax'></pre></td></tr>
+      <tr><td>Rest</td><td><pre class="prettyprint" id="api-rest"></pre></td></tr>
+      <tr><td>Smarty</td><td><pre class="prettyprint linenums" id="api-smarty" title='smarty syntax (for get actions)'></pre></td></tr>
+      <tr><td>Php</td><td><pre class="prettyprint linenums" id="api-php" title='php syntax'></pre></td></tr>
+      <tr><td>Javascript</td><td><pre class="prettyprint linenums" id="api-json" title='javascript syntax'></pre></td></tr>
     </table>
   </div>
   <input type="submit" value="{ts}Execute{/ts}" class="form-submit"/>
-<pre id="api-result">
+<pre id="api-result" class="linenums">
 {ts}The result of api calls are displayed in this area.{/ts}
 </pre>
 </form>
+
 {strip}
 <script type="text/template" id="api-param-tpl">
   <tr class="api-param-row">
-    <td><input style="width: 100%;" class="crm-form-text api-param-name" value="<%= name %>" placeholder="{ts}Parameter{/ts}" /></td>
+    <td><input style="width: 100%;" class="crm-form-text api-param-name api-input" value="<%= name %>" placeholder="{ts}Parameter{/ts}" /></td>
     <td>
       <select class="crm-form-select api-param-op">
         {foreach from=$operators item='op'}
       </select>
     </td>
     <td>
-      <input style="width: 85%;" class="crm-form-text api-param-value" placeholder="{ts}Value{/ts}"/>
+      <input style="width: 85%;" class="crm-form-text api-param-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-return-tpl">
+  <tr class="api-return-row">
+    <td colspan="3">
+      <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" style="width: 12em;" 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>
+      <select style="width: 100%;" class="crm-form-select api-chain-entity">
+        <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">
+        <option value="get">get</option>
+        <option value="getsingle">getsingle</option>
+        <option value="getcount">getcount</option>
+        <option value="create">create</option>
+        <option value="delete">delete</option>
+    </select>
+    </td>
+    <td>
+      <input style="width: 85%;" class="crm-form-text api-param-value api-input" 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>