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   <div class="api4-explorer-row">
   9       <form name="api4-explorer" class="panel panel-default explorer-params-panel">
  10         <div class="panel-heading">
  11           <div class="form-inline">
  12             <span ng-mouseenter="help('entity', paramDoc('$entity'))" ng-mouseleave="help()">
  13               <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}" />
  14             </span>
  15             <span ng-mouseenter="help('action', paramDoc('$action'))" ng-mouseleave="help()">
  16               <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}" />
  17             </span>
  18             <input class="form-control api4-index" type="search" ng-model="index" ng-mouseenter="help('index', paramDoc('$index'))" ng-mouseleave="help()" placeholder="{{:: ts('Index') }}" />
  19             <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>
  20             <button class="btn btn-primary pull-right" crm-icon="fa-save" ng-show="perm.editGroups && action === 'get'" ng-click="save()" ng-mouseenter="help(ts('Save smart group'), saveDoc())" ng-mouseleave="help()">{{:: ts('Save...') }}</button>
  21           </div>
  22         </div>
  23         <div class="panel-body">
  24           <div class="api4-input form-inline">
  25             <label class="form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-class="{'api4-option-selected': params[name]}" ng-repeat="(name, param) in ::getGenericParams(['bool'], false)">
  26               <input type="checkbox" id="api4-param-{{:: name }}" ng-model="params[name]"/>
  27               {{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span>
  28             </label>
  29             <label class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="::availableParams.select">
  30               <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
  31               SelectRowCount
  32             </label>
  33           </div>
  34           <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], true)">
  35             <label>{{ name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
  36             <label class="radio-inline">
  37               <input type="radio" ng-model="params[name]" ng-value="true" />true
  38             </label>
  39             <label class="radio-inline">
  40               <input type="radio" ng-model="params[name]" ng-value="false" />false
  41             </label>
  42             <a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="params[name] !== null"><i class="crm-i fa-times" aria-hidden="true"></i></a>
  43           </div>
  44           <fieldset class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select">
  45             <legend>select<span class="crm-marker" ng-if="::availableParams.select.required"> *</span></legend>
  46             <div ng-model="params.select" ui-sortable="{axis: 'y'}">
  47               <div class="api4-input form-inline" ng-repeat="item in params.select track by $index" ng-show="item !== 'row_count'">
  48                 <i class="crm-i fa-arrows" aria-hidden="true"></i>
  49                 <input class="form-control huge" type="text" ng-model="params.select[$index]" />
  50                 <a href class="crm-hover-button" title="Clear" ng-click="clearParam('select', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
  51               </div>
  52             </div>
  53             <div class="api4-input form-inline">
  54               <input class="collapsible-optgroups form-control huge" ng-model="controls.select" crm-ui-select="{data: fieldsAndJoinsAndFunctionsAndWildcards}" placeholder="Add select" />
  55             </div>
  56           </fieldset>
  57           <fieldset id="api4-join-fieldset" class="api4-input form-inline" ng-mouseenter="help('join', availableParams.join)" ng-mouseleave="help()" ng-if="::availableParams.join">
  58             <legend>join<span class="crm-marker" ng-if="::availableParams.join.required"> *</span></legend>
  59             <div ng-model="params.join" ui-sortable="{axis: 'y', containment: '#api4-join-fieldset'}">
  60               <fieldset ng-repeat="item in params.join track by $index">
  61                 <div class="api4-input form-inline">
  62                   <i class="crm-i fa-arrows"></i>
  63                   <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" ng-model-options="{updateOn: 'blur'}" ng-change="$ctrl.buildFieldList()"/>
  64                   <label>{{:: ts('Required:') }}</label>
  65                   <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
  66                   <label>{{:: ts('Using:') }}</label>
  67                   <select class="form-control" ng-model="params.join[$index][2]" ng-options="e.name as e.name for e in ::bridgeEntities" ng-change="$ctrl.buildFieldList()">
  68                     <option value="">{{:: ts('- none -') }}</option>
  69                   </select>
  70                   <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
  71                 </div>
  72                 <fieldset class="api4-clause-fieldset" crm-api4-clause="{skip: 3, clauses: params.join[$index], op: 'AND', label: 'On', fields: fieldsAndJoins, format: 'plain'}">
  73                 </fieldset>
  74               </fieldset>
  75             </div>
  76             <div class="api4-input form-inline">
  77               <input class="collapsible-optgroups form-control huge" ng-model="controls.join" crm-ui-select="{data: entities}" placeholder="Add join" />
  78             </div>
  79           </fieldset>
  80           <div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()" ng-if="::availableParams.fields">
  81             <label for="api4-param-fields">fields<span class="crm-marker" ng-if="::availableParams.fields.required"> *</span></label>
  82             <input class="form-control" ng-list crm-ui-select="::{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
  83           </div>
  84           <div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="::availableParams.action">
  85             <label for="api4-param-action">action<span class="crm-marker" ng-if="::availableParams.action.required"> *</span></label>
  86             <input class="form-control" crm-ui-select="{data: actions, allowClear: true, placeholder: 'None'}" id="api4-param-action" ng-model="params.action"/>
  87           </div>
  88           <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['string', 'int'])">
  89             <label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
  90             <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]"/>
  91             <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>
  92             <a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="!!params[name]"><i class="crm-i fa-times" aria-hidden="true"></i></a>
  93           </div>
  94           <div class="api4-input" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['array', 'mixed'])">
  95             <label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
  96             <textarea class="form-control" type="{{:: param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{:: name }}" ng-model="params[name]">
  97             </textarea>
  98           </div>
  99           <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}">
 100           </fieldset>
 101           <fieldset ng-repeat="name in ['values', 'defaults']" ng-if="::availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
 102             <legend>{{:: name }}<span class="crm-marker" ng-if="::availableParams[name].required"> *</span></legend>
 103             <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])">
 104               <input class="collapsible-optgroups form-control twenty" ng-model="clause[0]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), allowClear: true, placeholder: 'Field'}" />
 105               <input class="form-control" ng-model="clause[1]" api4-exp-value="{field: clause[0], action: action === 'getFields' ? params.action || 'get' : action}" />
 106             </div>
 107             <div class="api4-input form-inline">
 108               <input class="collapsible-optgroups form-control twenty" ng-model="controls[name]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), placeholder: ts('Add %1', {1: name.slice(0, -1)})}"/>
 109             </div>
 110           </fieldset>
 111           <fieldset ng-if="::availableParams.groupBy" ng-mouseenter="help('groupBy', availableParams.groupBy)" ng-mouseleave="help()">
 112             <legend>groupBy<span class="crm-marker" ng-if="::availableParams.groupBy.required"> *</span></legend>
 113             <div ng-model="params.groupBy" ui-sortable="{axis: 'y'}">
 114               <div class="api4-input form-inline" ng-repeat="item in params.groupBy track by $index">
 115                 <i class="crm-i fa-arrows" aria-hidden="true"></i>
 116                 <input class="form-control huge" type="text" ng-model="params.groupBy[$index]" />
 117                 <a href class="crm-hover-button" title="Clear" ng-click="clearParam('groupBy', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 118               </div>
 119             </div>
 120             <div class="api4-input form-inline">
 121               <input class="collapsible-optgroups form-control huge" ng-model="controls.groupBy" crm-ui-select="{data: fieldsAndJoinsAndFunctions}" placeholder="Add groupBy" />
 122             </div>
 123           </fieldset>
 124           <fieldset ng-if="::availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()" crm-api4-clause="{clauses: params.having, required: availableParams.having.required, op: 'AND', label: 'Having', fields: havingOptions}">
 125           </fieldset>
 126           <fieldset ng-if="::availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
 127             <legend>orderBy<span class="crm-marker" ng-if="::availableParams.orderBy.required"> *</span></legend>
 128             <div ng-model="params.orderBy" ui-sortable="{axis: 'y'}">
 129               <div class="api4-input form-inline" ng-repeat="clause in params.orderBy">
 130                 <i class="crm-i fa-arrows" aria-hidden="true"></i>
 131                 <input class="form-control huge" type="text" ng-model="clause[0]" />
 132                 <select class="form-control" ng-model="clause[1]">
 133                   <option value="ASC">ASC</option>
 134                   <option value="DESC">DESC</option>
 135                 </select>
 136                 <a href class="crm-hover-button" title="Clear" ng-click="clearParam('orderBy', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 137               </div>
 138             </div>
 139             <div class="api4-input form-inline">
 140               <input class="collapsible-optgroups form-control huge" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoinsAndFunctionsWithSuffixes}" placeholder="Add orderBy" />
 141             </div>
 142           </fieldset>
 143           <fieldset ng-if="::availableParams.limit && availableParams.offset">
 144             <div class="api4-input form-inline">
 145               <span ng-mouseenter="help('limit', availableParams.limit)" ng-mouseleave="help()">
 146                 <label for="api4-param-limit">limit<span class="crm-marker" ng-if="::availableParams.limit.required"> *</span></label>
 147                 <input class="form-control" type="number" min="0" id="api4-param-limit" ng-model="params.limit"/>
 148               </span>
 149               <span ng-mouseenter="help('offset', availableParams.offset)" ng-mouseleave="help()">
 150                 <label for="api4-param-offset">offset<span class="crm-marker" ng-if="::availableParams.offset.required"> *</span></label>
 151                 <input class="form-control" type="number" min="0" id="api4-param-offset" ng-model="params.offset"/>
 152               </span>
 153               <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" aria-hidden="true"></i></a>
 154             </div>
 155           </fieldset>
 156           <fieldset ng-if="::availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
 157             <legend>chain</legend>
 158             <div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="::entities" main-entity="::entity" >
 159             </div>
 160             <div class="api4-input form-inline">
 161               <input class="form-control" ng-model="controls.chain" crm-ui-select="::{data: entities}" placeholder="Add chain" />
 162             </div>
 163           </fieldset>
 164         </div>
 165       </form>
 166       <div class="panel panel-info explorer-help-panel">
 167         <div class="panel-heading">
 168           <h3 class="panel-title" crm-icon="fa-info-circle">{{ helpTitle }}</h3>
 169         </div>
 170         <div class="panel-body">
 171           <h4 ng-bind-html="helpContent.description"></h4>
 172           <div ng-bind-html="helpContent.comment"></div>
 173           <p ng-repeat="(key, item) in helpContent" ng-if="key !== 'description' && key !== 'comment' && key !== 'see'">
 174             <strong>{{ key }}:</strong> {{ item }}
 175           </p>
 176           <div ng-if="helpContent.see">
 177             <strong>See:</strong>
 178             <ul>
 179               <li ng-repeat="ref in helpContent.see" ng-bind-html="ref"> </li>
 180             </ul>
 181           </div>
 182         </div>
 183       </div>
 184   </div>
 185   <div class="api4-explorer-row">
 186       <div class="panel panel-info explorer-code-panel">
 187         <ul class="panel-heading nav nav-tabs">
 188           <li role="presentation" ng-repeat="lang in ::langs" ng-class="{active: selectedTab.code === lang}">
 189             <a href ng-click="selectLang(lang)">
 190               {{:: lang }}
 191             </a>
 192           </li>
 193         </ul>
 194         <div class="panel-body">
 195           <table>
 196             <tr ng-repeat="style in code[selectedTab.code]">
 197               <td>{{:: style.label }}</td>
 198               <td><pre class="prettyprint" ng-bind-html="style.code"></pre></td>
 199             </tr>
 200           </table>
 201         </div>
 202       </div>
 203       <div class="panel explorer-result-panel panel-{{ status }}" >
 204         <ul class="panel-heading nav nav-tabs">
 205           <li role="presentation" ng-class="{active: selectedTab.result === 'result'}">
 206             <a href ng-click="selectedTab.result = 'result'">
 207               <span ng-switch="status">
 208                 <i class="fa fa-fw fa-circle-o" ng-switch-when="default"></i>
 209                 <i class="fa fa-fw fa-check-circle" ng-switch-when="success"></i>
 210                 <i class="fa fa-fw fa-check-circle" ng-switch-when="warning"></i>
 211                 <i class="fa fa-fw fa-minus-circle" ng-switch-when="danger"></i>
 212                 <i class="fa fa-fw fa-spinner fa-pulse" ng-switch-when="info"></i>
 213               </span>
 214               <span>{{:: ts('Result') }}</span>
 215             </a>
 216           </li>
 217           <li role="presentation" ng-if="::perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
 218             <a href ng-click="selectedTab.result = 'debug'">
 219               <i class="fa fa-fw fa-{{ debug ? (status === 'warning' || status === 'danger' ? 'warning' : 'bug') : 'circle-o' }}"></i>
 220               <span>{{:: ts('Debug') }}</span>
 221             </a>
 222           </li>
 223         </ul>
 224         <div class="panel-body">
 225           <div ng-show="selectedTab.result === 'result'">
 226             <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
 227           </div>
 228           <div ng-if="::perm.accessDebugOutput" ng-show="selectedTab.result === 'debug'">
 229             <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
 230             <div ng-if="!debug">
 231               <p>
 232                 {{:: ts('To view debugging output, enable the debug param before executing.') }}
 233               </p>
 234               <p>
 235                 {{:: ts('Enable backtrace in system settings to see error backtraces.') }}
 236               </p>
 237             </div>
 238           </div>
 239         </div>
 240       </div>
 241   </div>
 242 </div>