templates/CRM/Admin/Page/APIExplorer.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | Copyright CiviCRM LLC. All rights reserved.                        |
   4  |                                                                    |
   5  | This work is published under the GNU AGPLv3 license with some      |
   6  | permitted exceptions and without any warranty. For full license    |
   7  | and copyright information, see https://civicrm.org/licensing       |
   8  +--------------------------------------------------------------------+
   9 *}
  10 <style>
  11   {literal}
  12   #mainTabContainer pre {
  13     line-height: 14px;
  14     font-size: 11px;
  15     margin: 0;
  16     border: 0 none;
  17   }
  18   #mainTabContainer ul.ui-tabs-nav {
  19     font-size: 1.1em;
  20     margin-bottom: .6em;
  21   }
  22   pre#api-result {
  23     max-height: 50em;
  24   }
  25   pre#api-result,
  26   div#doc-result,
  27   pre#example-result {
  28     padding:1em;
  29     border: 1px solid lightgrey;
  30     margin-top: 1em;
  31     overflow: auto;
  32   }
  33   #api-params tr td {
  34     padding-top: 13px;
  35   }
  36   #api-params-table th:first-child,
  37   #api-params-table td:first-child {
  38     width: 35%;
  39     min-width: 190px;
  40   }
  41   #api-params-table td[colspan] {
  42     width: 100%;
  43   }
  44   #api-params-table td:first-child + td,
  45   #api-params-table th:first-child + th {
  46     width: 140px;
  47   }
  48   #api-params-table td:first-child + td select {
  49     width: 132px;
  50   }
  51   #api-params-table td:first-child + td + td,
  52   #api-params-table th:first-child + th + th {
  53     width: 65%
  54   }
  55   #api-params .api-sort-handle {
  56     margin-right: 10px;
  57     cursor: move;
  58   }
  59   #api-params tr td > .crm-i,
  60   #api-params tr td > a .crm-i {
  61     color: lightgrey;
  62   }
  63   #api-params tr:hover td > .crm-i,
  64   #api-params tr:hover td > a .crm-i {
  65     color: grey;
  66   }
  67   #api-params .api-and-or {
  68     margin-left: 1.2em;
  69     font-size: .8em;
  70     position: relative;
  71     top: 5px;
  72     width: 10em;
  73     margin-bottom: -9px;
  74   }
  75   #api-params .api-and-or > span {
  76     padding: 0 1em;
  77     background: white;
  78     cursor: pointer;
  79   }
  80   #api-params .api-or,
  81   #api-params tr.or .api-and {
  82     color: lightgrey;
  83   }
  84   #api-params tr.or .api-or {
  85     color: inherit;
  86   }
  87   #api-params .api-and-or .crm-i {
  88     transform: rotate(180deg);
  89   }
  90   #api-params tr.or .api-and-or .crm-i {
  91     transform: initial;
  92   }
  93   #api-params .api-and-or:hover .crm-i {
  94     color: #2786c2;
  95   }
  96   #api-params tr.or {
  97     border-top: 3px solid lightgrey;
  98     border-left: 3px solid lightgrey;
  99     border-right: 3px solid lightgrey;
 100   }
 101   #api-params tr.or + tr {
 102     border-left: 3px solid lightgrey;
 103     border-right: 3px solid lightgrey;
 104     border-bottom: 3px solid lightgrey;
 105   }
 106   #api-params tr.or + tr.or {
 107     border-top: none;
 108     border-bottom: none;
 109   }
 110   #api-generated td:first-child {
 111     width: 60px;
 112   }
 113   #api-params {
 114     min-height: 1em;
 115   }
 116   #api-params .red-icon {
 117     margin-top: .5em;
 118   }
 119   .api-param-remove {
 120     float: right;
 121   }
 122   #mainTabContainer label {
 123     display: inline;
 124     font-weight: bold;
 125   }
 126   #mainTabContainer label.api-checkbox-label {
 127     font-weight: normal;
 128   }
 129   #mainTabContainer h4 {
 130     font-weight: bold;
 131     font-size: 1.2em;
 132     margin: .2em .2em 0.5em;
 133   }
 134   #api-join {
 135     margin-top: 1em;
 136     font-size: .8em;
 137   }
 138   #api-join ul {
 139     margin: 0;
 140     padding: 0 0 0.25em 2.5em;
 141   }
 142   #api-join li > i {
 143     opacity: .5;
 144   }
 145   #api-join li.join-enabled > i {
 146     opacity: 1;
 147   }
 148   #api-join li.join-not-available {
 149     font-style: italic;
 150   }
 151   #api-generated-wraper,
 152   #api-result {
 153     overflow: auto;
 154   }
 155   #api-explorer .api-options-row + .api-options-row label {
 156     display: none;
 157   }
 158   .api-options-row td:first-child {
 159     text-align: right;
 160   }
 161   .select2-choice .icon {
 162     margin-top: .2em;
 163     background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-2786C2.png");
 164   }
 165   .select2-default .icon {
 166     background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-52534D.png");
 167     opacity: .8;
 168   }
 169   .api-field-desc {
 170     font-size: .8em;
 171     color: #828282;
 172     line-height: 1.3em;
 173   }
 174   .select2-highlighted .api-field-desc,
 175   .select2-highlighted .crm-marker {
 176     color: #fcfcfc;
 177   }
 178   .api-param-op[readonly] {
 179     width: 4em;
 180   }
 181   pre ol.linenums li {
 182     list-style-type: decimal;
 183     color: #CFCFCF;
 184   }
 185   pre ol.linenums li:hover {
 186     color: #828282;
 187     background-color: #f2f2f2;
 188   }
 189   pre li.L1, pre li.L3, pre li.L5, pre li.L7, pre li.L9,
 190   #api-generated td + td,
 191   #mainTabContainer pre {
 192     background-color: #f9f9f9;
 193   }
 194   .api-doc-code {
 195     margin-top: 1em;
 196     border-top: 1px solid #d3d3d3;
 197   }
 198   .api-doc-code .collapsible-title {
 199     font-weight: bold;
 200     margin-top: .5em;
 201   }
 202   .doc-filename {
 203     text-align: right;
 204     font-style: italic;
 205   }
 206   {/literal}
 207 </style>
 208
 209 <div class="crm-block crm-content-block">
 210 <div id="mainTabContainer">
 211   <ul>
 212     <li class="ui-corner-all" title="GUI to build and execute API calls">
 213       <a href="#explorer-tab"><i class="crm-i fa-search" aria-hidden="true"></i> {ts}Explorer{/ts}</a>
 214     </li>
 215     <li class="ui-corner-all" title="Auto-generated examples from the test suite">
 216       <a href="#examples-tab"><i class="crm-i fa-book" aria-hidden="true"></i> {ts}Examples{/ts}</a>
 217     </li>
 218     <li class="ui-corner-all" title="API source-code and code-level documentation">
 219       <a href="#docs-tab"><i class="crm-i fa-code" aria-hidden="true"></i> {ts}Code Docs{/ts}</a>
 220     </li>
 221   </ul>
 222
 223   <div id="explorer-tab">
 224     <div class="crm-block crm-form-block">
 225     <form id="api-explorer">
 226       <label for="api-entity">{ts}Entity{/ts}:</label>
 227       <select class="crm-form-select big required" id="api-entity" name="entity">
 228         <option value="" selected="selected">{ts}Choose{/ts}...</option>
 229         {crmAPI entity="Entity" var="entities"}
 230         {foreach from=$entities.values item=entity}
 231           <option value="{$entity}" {if !empty($entities.deprecated) && in_array($entity, $entities.deprecated)}class="strikethrough"{/if}>
 232             {$entity}
 233           </option>
 234         {/foreach}
 235       </select>
 236       &nbsp;&nbsp;
 237       <label for="api-action">{ts}Action{/ts}:</label>
 238       <input class="crm-form-text" id="api-action" name="action" value="get">
 239       &nbsp;&nbsp;
 240
 241       <label for="debug-checkbox" class="api-checkbox-label" title="{ts}Display debug output with results.{/ts}">
 242         <input type="checkbox" class="crm-form-checkbox api-param-checkbox api-input" id="debug-checkbox" name="debug" value="1" >debug
 243       </label>
 244       &nbsp;|&nbsp;
 245
 246       <label for="sequential-checkbox" class="api-checkbox-label" title="{ts}Sequential is more compact format, well-suited for json and smarty.{/ts}">
 247         <input type="checkbox" class="crm-form-checkbox api-param-checkbox api-input" id="sequential-checkbox" name="sequential" checked="checked" value="1">sequential
 248       </label>
 249
 250       <div id="api-join" class="crm-form-block crm-collapsible collapsed" style="display:none;">
 251         <h4 class="collapsible-title">{ts}Join on:{/ts} {help id='api-join'}</h4>
 252         <div></div>
 253       </div>
 254
 255       <table id="api-params-table">
 256         <thead style="display: none;">
 257           <tr>
 258             <th>{ts}Name{/ts} {help id='param-name'}</th>
 259             <th>{ts}Operator{/ts} {help id='param-op'}</th>
 260             <th>{ts}Value{/ts} {help id='param-value'}</th>
 261           </tr>
 262         </thead>
 263         <tbody id="api-params"></tbody>
 264       </table>
 265       <div id="api-param-buttons" style="display: none;">
 266         <a href="#" class="crm-hover-button" id="api-params-add"><i class="crm-i fa-plus" aria-hidden="true"></i> {ts}Add Parameter{/ts}</a>
 267         <a href="#" class="crm-hover-button" id="api-option-add"><i class="crm-i fa-cog" aria-hidden="true"></i> {ts}Add Option{/ts}</a>
 268         <a href="#" class="crm-hover-button" id="api-chain-add"><i class="crm-i fa-link" aria-hidden="true"></i> {ts}Chain API Call{/ts}</a>
 269         {help id="api-chain"}
 270       </div>
 271       <div id="api-generated-wraper">
 272         <table id="api-generated" border=1>
 273           <caption>{ts}Code{/ts}</caption>
 274           <tr><td>Rest</td><td><pre id="api-rest"></pre></td></tr>
 275           <tr><td>Smarty</td><td><pre class="linenums" id="api-smarty" title='smarty syntax (for get actions)'></pre></td></tr>
 276           <tr><td>Php</td><td><pre class="linenums" id="api-php" title='php syntax'></pre></td></tr>
 277           <tr><td>Javascript</td><td><pre class="linenums" id="api-json" title='javascript syntax'></pre></td></tr>
 278           <tr><td><a href="https://github.com/civicrm/cv" target="_blank">cv</a></td><td><pre id="api-cv" title='cv cli syntax'></pre></td></tr>
 279           {if $config->userSystem->is_drupal}
 280             <tr><td><a href="http://www.drush.org/" target="_blank">drush</a></td><td><pre id="api-drush" title='drush syntax'></pre></td></tr>
 281           {/if}
 282           {if $config->userSystem->is_wordpress}
 283             <tr><td><a href="http://wp-cli.org/" target="_blank">wp-cli</a></td><td><pre id="api-wpcli" title='wp-cli syntax'></pre></td></tr>
 284           {/if}
 285         </table>
 286       </div>
 287       <div class="crm-submit-buttons">
 288         <span class="crm-button">
 289           <i class="crm-i fa-bolt" aria-hidden="true"></i> <input type="submit" value="{ts}Execute{/ts}" class="crm-form-submit" accesskey="S" title="{ts}Execute API call and display results{/ts}"/>
 290         </span>
 291       </div>
 292
 293 <pre id="api-result" class="linenums">
 294 {ts}Results are displayed here.{/ts}
 295 </pre>
 296     </form>
 297   </div>
 298   </div>
 299
 300   <div id="examples-tab">
 301     <div class="crm-block crm-form-block">
 302     <form id="api-examples">
 303       <label for="example-entity">{ts}Entity{/ts}:</label>
 304       <select class="crm-form-select big required" id="example-entity" name="entity">
 305         <option value="" selected="selected">{ts}Choose{/ts}...</option>
 306         {foreach from=$examples item=entity}
 307           <option value="{$entity}" {if !empty($entities.deprecated) && in_array($entity, $entities.deprecated)}class="strikethrough"{/if}>
 308             {$entity}
 309           </option>
 310         {/foreach}
 311       </select>
 312       &nbsp;&nbsp;
 313       <label for="example-action">{ts}Example{/ts}:</label>
 314       <select class="crm-form-select big crm-select2" id="example-action" name="action">
 315         <option value="" selected="selected">{ts}Choose{/ts}...</option>
 316       </select>
 317 <pre id="example-result" class="linenums lang-php" placeholder="{ts escape='html'}Results are displayed here.{/ts}">
 318 {ts}Results are displayed here.{/ts}
 319 </pre>
 320     </form>
 321   </div>
 322   </div>
 323
 324   <div id="docs-tab">
 325     <div class="crm-block crm-form-block">
 326     <form id="api-docs">
 327       <label for="doc-entity">{ts}Entity{/ts}:</label>
 328       <select class="crm-form-select big required" id="doc-entity" name="entity">
 329         <option value="" selected="selected">{ts}Choose{/ts}...</option>
 330         {foreach from=$entities.values item=entity}
 331           <option value="{$entity}" {if !empty($entities.deprecated) && in_array($entity, $entities.deprecated)}class="strikethrough"{/if}>
 332             {$entity}
 333           </option>
 334         {/foreach}
 335       </select>
 336       &nbsp;&nbsp;
 337       <label for="doc-action">{ts}Action{/ts}:</label>
 338       <select class="crm-form-select big crm-select2" id="doc-action" name="action">
 339         <option value="" selected="selected">{ts}Choose{/ts}...</option>
 340       </select>
 341       <div id="doc-result">
 342         {ts}Results are displayed here.{/ts}
 343       </div>
 344     </form>
 345     </div>
 346   </div>
 347 </div>
 348 </div>
 349 {strip}
 350 <script type="text/template" id="api-param-tpl">
 351   <tr class="api-param-row">
 352     <td>
 353       <i class="crm-i api-sort-handle fa-arrows" aria-hidden="true"></i>
 354       <input style="width: 90%;" class="crm-form-text api-param-name api-input" value="<%= name %>" placeholder="{ts}Parameter{/ts}" />
 355       <div class="api-and-or"><span><span class="api-and">{ts}AND{/ts}</span> <i class="crm-i fa-toggle-on" aria-hidden="true"></i> <span class="api-or">{ts}OR{/ts}</span></span></div>
 356     </td>
 357     <td>
 358       {literal}
 359       <% if (noOps) { %>
 360         <input class="crm-form-text api-param-op" value="=" readonly="true" title="{/literal}{ts}Other operators not available for this action.{/ts}{literal}" />
 361       <% } else { %>
 362       {/literal}
 363         <select class="crm-form-select api-param-op">
 364           {foreach from=$operators item='op'}
 365             <option value="{$op|htmlspecialchars}">{$op|htmlspecialchars}</option>
 366           {/foreach}
 367         </select>
 368       {literal}
 369       <% } %>
 370       {/literal}
 371     </td>
 372     <td>
 373       <input style="width: 85%;" class="crm-form-text api-param-value api-input" placeholder="{ts}Value{/ts}"/>
 374       <a class="crm-hover-button api-param-remove" href="#"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 375     </td>
 376   </tr>
 377 </script>
 378
 379 <script type="text/template" id="api-return-tpl">
 380   <tr class="api-return-row">
 381     <td colspan="3">
 382       <label for="api-return-value">
 383         <%- title %>:
 384         <% if(required) {ldelim} %> <span class="crm-marker">*</span> <% {rdelim} %>
 385       </label> &nbsp;
 386       <input type="hidden" class="api-param-name" value="return" />
 387       <input style="width: 50%;" id="api-return-value" class="crm-form-text api-param-value api-input"/>
 388     </td>
 389   </tr>
 390 </script>
 391
 392 <script type="text/template" id="api-options-tpl">
 393   <tr class="api-options-row">
 394     <td>
 395       <label>{ts}Options{/ts}: &nbsp;</label>
 396     </td>
 397     <td>
 398       <input class="crm-form-text api-option-name api-input" style="width: 12em;" placeholder="{ts}Option{/ts}"/>
 399     </td>
 400     <td>
 401       <input style="width: 85%;" class="crm-form-text api-option-value api-input" placeholder="{ts}Value{/ts}"/>
 402       <a class="crm-hover-button api-param-remove" href="#"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 403     </td>
 404   </tr>
 405 </script>
 406
 407 <script type="text/template" id="api-chain-tpl">
 408   <tr class="api-chain-row">
 409     <td>
 410       <i class="crm-i api-sort-handle fa-arrows" aria-hidden="true"></i>
 411       <select style="width: 90%;" class="crm-form-select api-chain-entity">
 412         <option value=""></option>
 413         {foreach from=$entities.values item=entity}
 414           <option value="{$entity}" {if !empty($entities.deprecated) && in_array($entity, $entities.deprecated)}class="strikethrough"{/if}>
 415             {$entity}
 416           </option>
 417         {/foreach}
 418       </select>
 419     </td>
 420     <td>
 421       <select class="crm-form-select api-chain-action">
 422         <option value="get">get</option>
 423       </select>
 424     </td>
 425     <td>
 426       <input style="width: 85%;" class="crm-form-text api-param-value api-input" value="{ldelim}{rdelim}" placeholder="{ts}API Params{/ts}"/>
 427       <a class="crm-hover-button api-param-remove" href="#"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 428     </td>
 429   </tr>
 430 </script>
 431
 432 <script type="text/template" id="doc-code-tpl">
 433   <div class="crm-collapsible collapsed api-doc-code">
 434     <div class="collapsible-title">{ts}Source Code{/ts}</div>
 435     <div>
 436       <div class="doc-filename"><%- file %></div>
 437       <pre class="lang-php linenums"><%- code %></pre>
 438     </div>
 439   </div>
 440 </script>
 441
 442 <script type="text/template" id="join-tpl">
 443   {literal}
 444   <ul class="fa-ul">
 445     <% _.forEach(joins, function(join, name) { %>
 446       <li <% if(join.checked) { %>class="join-enabled"<% } if(join.disabled) { %>class="join-not-available"<% }%>>
 447         <i class="fa-li crm-i fa-reply fa-rotate-180" aria-hidden="true"></i>
 448         <label for="select-join-<%= name %>" class="api-checkbox-label">
 449           <input type="checkbox" id="select-join-<%= name %>" value="<%= name %>" data-entity="<%= join.entity %>" <% if(join.checked) { %>checked<% } if(join.disabled) { %>disabled<% } %>/>
 450           <%- join.title %>
 451         </label>
 452       </li>
 453       <% if(join.children) print(tpl({joins: join.children, tpl: tpl})); %>
 454     <% }); %>
 455   </ul>
 456   {/literal}
 457 </script>
 458 {/strip}