ang/api4Explorer/Explorer.html

   1 <div id="bootstrap-theme" class="api4-explorer-page">
   2   <div crm-ui-debug="availableParams"></div>
   3
   4   <h1 crm-page-title>
   5     {{ ts('CiviCRM APIv4') }}{{ entity ? (' (' + entity + '::' + action + ')') : '' }}
   6   </h1>
   7
   8   <!--This warning will show if bootstrap is unavailable. Normally it will be hidden by the bootstrap .collapse class.-->
   9   <div class="messages warning no-popup collapse">
  10     <p>
  11       <i class="crm-i fa-exclamation-triangle"></i>
  12       <strong>{{ ts('Bootstrap theme not found.') }}</strong>
  13     </p>
  14     <p>{{ ts('This screen may not work correctly without a bootstrap-based theme such as Shoreditch installed.') }}</p>
  15   </div>
  16
  17   <div class="api4-explorer-row">
  18       <form name="api4-explorer" class="panel panel-default explorer-params-panel">
  19         <div class="panel-heading">
  20           <div class="form-inline">
  21             <span ng-mouseenter="help('entity', paramDoc('$entity'))" ng-mouseleave="help()">
  22               <input class="collapsible-optgroups form-control" ng-model="entity" ng-disabled="!entities.length" ng-class="{loading: !entities.length}" crm-ui-select="{placeholder: ts('Entity'), data: entities}" />
  23             </span>
  24             <span ng-mouseenter="help('action', paramDoc('$action'))" ng-mouseleave="help()">
  25               <input class="collapsible-optgroups form-control" ng-model="action" ng-disabled="!entity || !actions.length" ng-class="{loading: entity && !actions.length}" crm-ui-select="{placeholder: ts('Action'), data: actions}" />
  26             </span>
  27             <input class="form-control api4-index" type="search" ng-model="index" ng-mouseenter="help('index', paramDoc('$index'))" ng-mouseleave="help()" placeholder="{{ ts('Index') }}" />
  28             <button class="btn btn-success pull-right" crm-icon="fa-bolt" ng-disabled="!entity || !action || loading" ng-click="execute()" ng-mouseenter="help(ts('Execute'), executeDoc())" ng-mouseleave="help()">{{ ts('Execute') }}</button>
  29             <button class="btn btn-primary pull-right" crm-icon="fa-save" ng-show="perm.editGroups && entity === 'Contact' && action === 'get'" ng-click="save()" ng-mouseenter="help(ts('Save smart group'), saveDoc())" ng-mouseleave="help()">{{ ts('Save...') }}</button>
  30           </div>
  31         </div>
  32         <div class="panel-body">
  33           <div class="api4-input form-inline">
  34             <label class="form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-class="{'api4-option-selected': params[name]}" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && param.type[0] === 'bool' && param.default !== null">
  35               <input type="checkbox" id="api4-param-{{ name }}" ng-model="params[name]"/>
  36               {{ name }}<span class="crm-marker" ng-if="param.required"> *</span>
  37             </label>
  38             <label class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="availableParams.select">
  39               <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
  40               SelectRowCount
  41             </label>
  42           </div>
  43           <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && param.type[0] === 'bool' && param.default === null">
  44             <label>{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  45             <label class="radio-inline">
  46               <input type="radio" ng-model="params[name]" ng-value="true" />true
  47             </label>
  48             <label class="radio-inline">
  49               <input type="radio" ng-model="params[name]" ng-value="false" />false
  50             </label>
  51             <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>
  52           </div>
  53           <fieldset class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select && !isSelectRowCount()">
  54             <legend>select<span class="crm-marker" ng-if="availableParams.select.required"> *</span></legend>
  55             <div ng-model="params.select" ui-sortable="{axis: 'y'}">
  56               <div class="api4-input form-inline" ng-repeat="item in params.select">
  57                 <i class="crm-i fa-arrows"></i>
  58                 <input class="collapsible-optgroups form-control" ng-model="item" crm-ui-select="{data: selectFieldsAndJoins, allowClear: true, placeholder: 'Field'}" />
  59               </div>
  60             </div>
  61             <div class="api4-input form-inline">
  62               <input class="collapsible-optgroups form-control" ng-model="controls.select" crm-ui-select="{data: selectFieldsAndJoins}" placeholder="Add select" />
  63             </div>
  64           </fieldset>
  65           <div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()"ng-if="availableParams.fields">
  66             <label for="api4-param-fields">fields<span class="crm-marker" ng-if="availableParams.fields.required"> *</span></label>
  67             <input class="form-control" ng-list crm-ui-select="{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
  68           </div>
  69           <div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="availableParams.action">
  70             <label for="api4-param-action">action<span class="crm-marker" ng-if="availableParams.action.required"> *</span></label>
  71             <input class="form-control" crm-ui-select="{data: actions, allowClear: true, placeholder: 'None'}" id="api4-param-action" ng-model="params.action"/>
  72           </div>
  73           <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && (param.type[0] === 'string' || param.type[0] === 'int')">
  74             <label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  75             <input class="form-control" ng-if="!param.options" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]"/>
  76             <select class="form-control" ng-if="param.options" ng-options="o for o in param.options" id="api4-param-{{ name }}" ng-model="params[name]"></select>
  77             <a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="!!params[name]"><i class="crm-i fa-times"></i></a>
  78           </div>
  79           <div class="api4-input" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && (param.type[0] === 'array' || param.type[0] === 'mixed')">
  80             <label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  81             <textarea class="form-control" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]">
  82             </textarea>
  83           </div>
  84           <fieldset ng-if="availableParams.where" class="api4-clause-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-clause="{type: 'where', clauses: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
  85           </fieldset>
  86           <fieldset ng-repeat="name in ['values', 'defaults']" ng-if="availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
  87             <legend>{{ name }}<span class="crm-marker" ng-if="availableParams[name].required"> *</span></legend>
  88             <div class="api4-input form-inline" ng-repeat="clause in params[name]" ng-mouseenter="help('value: ' + clause[0], fieldHelp(clause[0]))" ng-mouseleave="help(name, availableParams[name])">
  89               <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), allowClear: true, placeholder: 'Field'}" />
  90               <input class="form-control" ng-model="clause[1]" api4-exp-value="{field: clause[0], action: action === 'getFields' ? params.action || 'get' : action}" />
  91             </div>
  92             <div class="api4-input form-inline">
  93               <input class="collapsible-optgroups form-control" ng-model="controls[name]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), placeholder: ts('Add %1', {1: name.slice(0, -1)})}"/>
  94             </div>
  95           </fieldset>
  96           <fieldset ng-if="availableParams.groupBy" ng-mouseenter="help('groupBy', availableParams.groupBy)" ng-mouseleave="help()">
  97             <legend>groupBy<span class="crm-marker" ng-if="availableParams.groupBy.required"> *</span></legend>
  98             <div ng-model="params.groupBy" ui-sortable="{axis: 'y'}">
  99               <div class="api4-input form-inline" ng-repeat="(pos, field) in params.groupBy">
 100                 <i class="crm-i fa-arrows"></i>
 101                 <input class="collapsible-optgroups form-control" ng-model="params.groupBy[pos]" crm-ui-select="{data: fieldsAndJoins, allowClear: true, placeholder: 'Field'}" />
 102               </div>
 103             </div>
 104             <div class="api4-input form-inline">
 105               <input class="collapsible-optgroups form-control" ng-model="controls.groupBy" crm-ui-select="{data: fieldsAndJoins}" placeholder="Add groupBy" />
 106             </div>
 107           </fieldset>
 108           <fieldset ng-if="availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
 109             <legend>orderBy<span class="crm-marker" ng-if="availableParams.orderBy.required"> *</span></legend>
 110             <div ng-model="params.orderBy" ui-sortable="{axis: 'y'}">
 111               <div class="api4-input form-inline" ng-repeat="clause in params.orderBy">
 112                 <i class="crm-i fa-arrows"></i>
 113                 <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{data: fieldsAndJoins, allowClear: true, placeholder: 'Field'}" />
 114                 <select class="form-control" ng-model="clause[1]">
 115                   <option value="ASC">ASC</option>
 116                   <option value="DESC">DESC</option>
 117                 </select>
 118               </div>
 119             </div>
 120             <div class="api4-input form-inline">
 121               <input class="collapsible-optgroups form-control" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoins}" placeholder="Add orderBy" />
 122             </div>
 123           </fieldset>
 124           <fieldset ng-if="availableParams.limit && availableParams.offset">
 125             <div class="api4-input form-inline">
 126               <span ng-mouseenter="help('limit', availableParams.limit)" ng-mouseleave="help()">
 127                 <label for="api4-param-limit">limit<span class="crm-marker" ng-if="availableParams.limit.required"> *</span></label>
 128                 <input class="form-control" type="number" min="0" id="api4-param-limit" ng-model="params.limit"/>
 129               </span>
 130               <span ng-mouseenter="help('offset', availableParams.offset)" ng-mouseleave="help()">
 131                 <label for="api4-param-offset">offset<span class="crm-marker" ng-if="availableParams.offset.required"> *</span></label>
 132                 <input class="form-control" type="number" min="0" id="api4-param-offset" ng-model="params.offset"/>
 133               </span>
 134               <a href class="crm-hover-button" title="Clear" ng-click="clearParam('limit');clearParam('offset');" ng-show="!!params.limit || !!params.offset"><i class="crm-i fa-times"></i></a>
 135             </div>
 136           </fieldset>
 137           <fieldset ng-if="availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
 138             <legend>chain</legend>
 139             <div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="entities" main-entity="entity" >
 140             </div>
 141             <div class="api4-input form-inline">
 142               <input class="form-control" ng-model="controls.chain" crm-ui-select="{data: entities}" placeholder="Add chain" />
 143             </div>
 144           </fieldset>
 145         </div>
 146       </form>
 147       <div class="panel panel-info explorer-help-panel">
 148         <div class="panel-heading">
 149           <h3 class="panel-title" crm-icon="fa-info-circle">{{ helpTitle }}</h3>
 150         </div>
 151         <div class="panel-body">
 152           <h4 ng-bind-html="helpContent.description"></h4>
 153           <div ng-bind-html="helpContent.comment"></div>
 154           <p ng-repeat="(key, item) in helpContent" ng-if="key !== 'description' && key !== 'comment' && key !== 'see'">
 155             <strong>{{ key }}:</strong> {{ item }}
 156           </p>
 157           <div ng-if="helpContent.see">
 158             <strong>See:</strong>
 159             <ul>
 160               <li ng-repeat="ref in helpContent.see" ng-bind-html="ref"> </li>
 161             </ul>
 162           </div>
 163         </div>
 164       </div>
 165   </div>
 166   <div class="api4-explorer-row">
 167       <div class="panel panel-warning explorer-code-panel">
 168         <ul class="panel-heading nav nav-tabs">
 169           <li role="presentation" ng-repeat="tab in code" ng-class="{active: selectedTab.code === tab.lang}">
 170             <a href ng-click="selectedTab.code = tab.lang">
 171               {{ tab.lang }}
 172             </a>
 173           </li>
 174         </ul>
 175         <div class="panel-body">
 176           <table ng-repeat="tab in code" ng-show="selectedTab.code === tab.lang">
 177             <tr ng-repeat="style in tab.style">
 178               <td>{{ style.label }}</td>
 179               <td><pre class="prettyprint" ng-bind-html="style.code"></pre></td>
 180             </tr>
 181           </table>
 182         </div>
 183       </div>
 184       <div class="panel explorer-result-panel panel-{{ status }}" >
 185         <ul class="panel-heading nav nav-tabs">
 186           <li role="presentation" ng-class="{active: selectedTab.result === 'result'}">
 187             <a href ng-click="selectedTab.result = 'result'">
 188               <i class="fa fa-fw fa-circle-o" ng-if="status === 'default'"></i>
 189               <i class="fa fa-fw fa-check-circle" ng-if="status === 'success'"></i>
 190               <i class="fa fa-fw fa-minus-circle" ng-if="status === 'danger'"></i>
 191               <i class="fa fa-fw fa-spinner fa-pulse" ng-if="status === 'warning'"></i>
 192               <span>{{ ts('Result') }}</span>
 193             </a>
 194           </li>
 195           <li role="presentation" ng-if="perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
 196             <a href ng-click="selectedTab.result = 'debug'">
 197               <i class="fa fa-fw fa-{{ debug ? 'bug' : 'circle-o' }}"></i>
 198               <span>{{ ts('Debug') }}</span>
 199             </a>
 200           </li>
 201         </ul>
 202         <div class="panel-body">
 203           <div ng-show="selectedTab.result === 'result'">
 204             <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
 205           </div>
 206           <div ng-show="selectedTab.result === 'debug'">
 207             <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
 208             <p ng-if="!debug">
 209               {{ ts('To view debugging output, enable the debug param before executing.') }}
 210             </p>
 211             <p ng-if="!debug">
 212               {{ ts('Enable backtrace in system settings to see error backtraces.') }}
 213             </p>
 214           </div>
 215         </div>
 216       </div>
 217   </div>
 218 </div>