ang/api4Explorer/Explorer.html

   1 <div id="bootstrap-theme" class="api4-explorer-page">
   2
   3   <h1 crm-page-title>
   4     {{:: ts('CiviCRM APIv4') }}{{ entity ? (' (' + entity + '::' + action + ')') : '' }}
   5   </h1>
   6
   7   <div class="api4-explorer-row crm-flex-box">
   8     <form name="api4-explorer" class="panel panel-default explorer-params-panel crm-flex-2">
   9       <div class="panel-heading">
  10         <div class="form-inline">
  11           <span ng-mouseenter="help('entity', paramDoc('$entity'))" ng-mouseleave="help()">
  12             <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, formatResultCssClass: formatResultCssClass}" />
  13           </span>
  14           <span ng-mouseenter="help('action', paramDoc('$action'))" ng-mouseleave="help()">
  15             <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, formatResultCssClass: formatResultCssClass}" />
  16           </span>
  17           <input class="form-control api4-index" type="search" ng-model="index" ng-mouseenter="help('index', paramDoc('$index'))" ng-mouseleave="help()" placeholder="{{:: ts('Index') }}" />
  18           <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>
  19           <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>
  20         </div>
  21       </div>
  22       <div class="panel-body">
  23         <div class="api4-input form-inline">
  24           <div class="checkbox-inline form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], false)">
  25             <label>
  26               <input type="checkbox" id="api4-param-{{:: name }}" ng-model="params[name]"/>
  27               <span>{{:: name }}</span><span class="crm-marker" ng-if="::param.required"> *</span>
  28             </label>
  29           </div>
  30           <div class="checkbox-inline form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-if="::availableParams.select">
  31             <label>
  32               <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
  33               <span>SelectRowCount</span>
  34             </label>
  35           </div>
  36         </div>
  37         <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], true)">
  38           <label>{{ name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
  39           <label class="radio-inline">
  40             <input type="radio" ng-model="params[name]" ng-value="true" />true
  41           </label>
  42           <label class="radio-inline">
  43             <input type="radio" ng-model="params[name]" ng-value="false" />false
  44           </label>
  45           <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>
  46         </div>
  47         <fieldset class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select">
  48           <legend>select<span class="crm-marker" ng-if="::availableParams.select.required"> *</span></legend>
  49           <div ng-model="params.select" ui-sortable="{axis: 'y'}">
  50             <div class="api4-input form-inline" ng-repeat="item in params.select track by $index" ng-show="item !== 'row_count'">
  51               <i class="crm-i fa-arrows" aria-hidden="true"></i>
  52               <input class="form-control huge" type="text" ng-model="params.select[$index]" />
  53               <a href class="crm-hover-button" title="Clear" ng-click="clearParam('select', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
  54             </div>
  55           </div>
  56           <div class="api4-input form-inline">
  57             <input class="collapsible-optgroups form-control huge" ng-model="controls.select" crm-ui-select="{data: fieldsAndJoinsAndFunctionsAndWildcards}" placeholder="Add select" />
  58           </div>
  59         </fieldset>
  60         <fieldset id="api4-join-fieldset" class="api4-input form-inline" ng-mouseenter="help('join', availableParams.join)" ng-mouseleave="help()" ng-if="::availableParams.join">
  61           <legend>join<span class="crm-marker" ng-if="::availableParams.join.required"> *</span></legend>
  62           <div ng-model="params.join" ui-sortable="{axis: 'y', containment: '#api4-join-fieldset'}">
  63             <fieldset ng-repeat="item in params.join track by $index">
  64               <div class="api4-input form-inline">
  65                 <i class="crm-i fa-arrows"></i>
  66                 <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" ng-model-options="{updateOn: 'blur'}" ng-change="$ctrl.buildFieldList()"/>
  67                 <label>{{:: ts('Required:') }}</label>
  68                 <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
  69                 <label>{{:: ts('Using:') }}</label>
  70                 <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()">
  71                   <option value="">{{:: ts('- none -') }}</option>
  72                 </select>
  73                 <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
  74               </div>
  75               <fieldset class="api4-clause-fieldset">
  76                 <crm-api4-clause clauses="params.join[$index]" format="plain" skip="3" op="AND" label="On" fields="fieldsAndJoins" ></crm-api4-clause>
  77               </fieldset>
  78             </fieldset>
  79           </div>
  80           <div class="api4-input form-inline">
  81             <input class="collapsible-optgroups form-control huge" ng-model="controls.join" crm-ui-select="{data: entities}" placeholder="Add join" />
  82           </div>
  83         </fieldset>
  84         <div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()" ng-if="::availableParams.fields">
  85           <label for="api4-param-fields">fields<span class="crm-marker" ng-if="::availableParams.fields.required"> *</span></label>
  86           <input class="form-control" ng-list crm-ui-select="::{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
  87         </div>
  88         <div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="::availableParams.action">
  89           <label for="api4-param-action">action<span class="crm-marker" ng-if="::availableParams.action.required"> *</span></label>
  90           <input class="form-control" crm-ui-select="{data: actions, allowClear: true, placeholder: 'None'}" id="api4-param-action" ng-model="params.action"/>
  91         </div>
  92         <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['string', 'int'])">
  93           <label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
  94           <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]"/>
  95           <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>
  96           <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>
  97         </div>
  98         <div class="api4-input" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['array', 'mixed'])">
  99           <label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
 100           <textarea class="form-control" ng-if="::!param.options" id="api4-param-{{:: name }}" ng-model="params[name]">
 101           </textarea>
 102           <select multiple ng-if="::param.options" crm-ui-select class="form-control" id="api4-param-{{:: name }}" ng-model="params[name]">
 103             <option ng-repeat="opt in param.options" value="{{ opt }}">{{ opt }}</option>
 104           </select>
 105         </div>
 106         <fieldset ng-if="::availableParams.where" class="api4-clause-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()">
 107           <crm-api4-clause clauses="params.where" is-required="availableParams.where.required" op="AND" label="Where" fields="fieldsAndJoins" ></crm-api4-clause>
 108         </fieldset>
 109         <fieldset ng-repeat="name in ['values', 'defaults']" ng-if="::availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
 110           <legend>{{:: name }}<span class="crm-marker" ng-if="::availableParams[name].required"> *</span></legend>
 111           <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])">
 112             <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'}" />
 113             <input class="form-control" ng-model="clause[1]" api4-exp-value="{field: clause[0], action: action === 'getFields' ? params.action || 'get' : action}" />
 114           </div>
 115           <div class="api4-input form-inline">
 116             <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)})}"/>
 117           </div>
 118         </fieldset>
 119         <fieldset ng-if="::availableParams.groupBy" ng-mouseenter="help('groupBy', availableParams.groupBy)" ng-mouseleave="help()">
 120           <legend>groupBy<span class="crm-marker" ng-if="::availableParams.groupBy.required"> *</span></legend>
 121           <div ng-model="params.groupBy" ui-sortable="{axis: 'y'}">
 122             <div class="api4-input form-inline" ng-repeat="item in params.groupBy track by $index">
 123               <i class="crm-i fa-arrows" aria-hidden="true"></i>
 124               <input class="form-control huge" type="text" ng-model="params.groupBy[$index]" />
 125               <a href class="crm-hover-button" title="Clear" ng-click="clearParam('groupBy', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 126             </div>
 127           </div>
 128           <div class="api4-input form-inline">
 129             <input class="collapsible-optgroups form-control huge" ng-model="controls.groupBy" crm-ui-select="{data: fieldsAndJoinsAndFunctions}" placeholder="Add groupBy" />
 130           </div>
 131         </fieldset>
 132         <fieldset ng-if="::availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()">
 133           <crm-api4-clause clauses="params.having" is-required="availableParams.having.required" op="AND" label="Having" fields="havingOptions" ></crm-api4-clause>
 134         </fieldset>
 135         <fieldset ng-if="::availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
 136           <legend>orderBy<span class="crm-marker" ng-if="::availableParams.orderBy.required"> *</span></legend>
 137           <div ng-model="params.orderBy" ui-sortable="{axis: 'y'}">
 138             <div class="api4-input form-inline" ng-repeat="clause in params.orderBy">
 139               <i class="crm-i fa-arrows" aria-hidden="true"></i>
 140               <input class="form-control huge" type="text" ng-model="clause[0]" />
 141               <select class="form-control" ng-model="clause[1]">
 142                 <option value="ASC">ASC</option>
 143                 <option value="DESC">DESC</option>
 144               </select>
 145               <a href class="crm-hover-button" title="Clear" ng-click="clearParam('orderBy', $index)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 146             </div>
 147           </div>
 148           <div class="api4-input form-inline">
 149             <input class="collapsible-optgroups form-control huge" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoinsAndFunctionsWithSuffixes}" placeholder="Add orderBy" />
 150           </div>
 151         </fieldset>
 152         <fieldset ng-if="::availableParams.limit && availableParams.offset">
 153           <div class="api4-input form-inline">
 154             <span ng-mouseenter="help('limit', availableParams.limit)" ng-mouseleave="help()">
 155               <label for="api4-param-limit">limit<span class="crm-marker" ng-if="::availableParams.limit.required"> *</span></label>
 156               <input class="form-control" type="number" min="0" id="api4-param-limit" ng-model="params.limit"/>
 157             </span>
 158             <span ng-mouseenter="help('offset', availableParams.offset)" ng-mouseleave="help()">
 159               <label for="api4-param-offset">offset<span class="crm-marker" ng-if="::availableParams.offset.required"> *</span></label>
 160               <input class="form-control" type="number" min="0" id="api4-param-offset" ng-model="params.offset"/>
 161             </span>
 162             <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>
 163           </div>
 164         </fieldset>
 165         <fieldset ng-if="::availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
 166           <legend>chain</legend>
 167           <div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="::entities" main-entity="::entity" >
 168           </div>
 169           <div class="api4-input form-inline">
 170             <input class="form-control" ng-model="controls.chain" crm-ui-select="::{data: entities}" placeholder="Add chain" />
 171           </div>
 172         </fieldset>
 173       </div>
 174     </form>
 175     <div class="panel panel-info explorer-help-panel">
 176       <div class="panel-heading">
 177         <h3 class="panel-title" crm-icon="fa-info-circle">{{ helpTitle }}</h3>
 178       </div>
 179       <div class="panel-body">
 180         <h4 ng-bind-html="helpContent.description"></h4>
 181         <div ng-bind-html="helpContent.comment"></div>
 182         <p ng-repeat="(key, item) in helpContent" ng-if="key !== 'description' && key !== 'comment' && key !== 'see'">
 183           <strong>{{ key }}:</strong> {{ item }}
 184         </p>
 185         <div ng-if="helpContent.see">
 186           <strong>See:</strong>
 187           <ul>
 188             <li ng-repeat="ref in helpContent.see" ng-bind-html="ref"> </li>
 189           </ul>
 190         </div>
 191       </div>
 192     </div>
 193   </div>
 194   <div class="api4-explorer-row crm-flex-box">
 195     <div class="panel panel-info explorer-code-panel">
 196       <div class="panel-heading">
 197         <ul class="nav nav-tabs">
 198           <li role="presentation" ng-repeat="lang in ::langs" ng-class="{active: selectedTab.code === lang}">
 199             <a href ng-click="selectLang(lang)">
 200               {{:: lang }}
 201             </a>
 202           </li>
 203         </ul>
 204       </div>
 205       <div class="panel-body">
 206         <div class="alert alert-danger" ng-if="selectedTab.code === 'rest' && !$ctrl.authxEnabled">
 207           <p>
 208             {{:: ts('To enable REST authentication, the AuthX extension must be installed.') }}
 209             <a target="_blank" ng-href="{{ crmUrl('civicrm/admin/extensions') }}">
 210               <i class="crm-i fa-gear"> {{:: ts('Manage Extensions') }}</i>
 211             </a>
 212           </p>
 213         </div>
 214         <div class="alert alert-warning" ng-if="selectedTab.code === 'rest' && $ctrl.authxEnabled">
 215           <p>
 216             <a target="_blank" ng-href="{{ crmUrl('civicrm/admin/setting/authx', {reset: 1}) }}">
 217               <i class="crm-i fa-gear"> {{:: ts('Configure REST Authentication') }}</i>
 218             </a>
 219           </p>
 220           <p>
 221             <a target="_blank" href="https://docs.civicrm.org/dev/en/latest/api/v4/rest/">
 222               <i class="crm-i fa-external-link"> {{:: ts('REST Documentation') }}</i>
 223             </a>
 224           </p>
 225         </div>
 226         <div ng-repeat="style in code[selectedTab.code]">
 227           <div class="clearfix">
 228             <button class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-code-' + selectedTab.code + '-' + style.name)">
 229               <i class="crm-i fa-clipboard"></i>
 230               {{:: ts('Copy') }}
 231             </button>
 232             <label>{{:: style.label }}</label>
 233           </div>
 234           <div>
 235             <pre class="prettyprint" id="api4-code-{{ selectedTab.code + '-' + style.name }}" ng-bind-html="style.code"></pre>
 236           </div>
 237         </div>
 238       </div>
 239     </div>
 240     <div class="panel explorer-result-panel panel-{{ status }}" >
 241       <div class="panel-heading">
 242         <div class="form-inline pull-right">
 243           <select ng-show="selectedTab.result === 'result'" class="form-control" ng-model="$ctrl.resultFormat" ng-change="$ctrl.formatResult()">
 244             <option ng-repeat="fmt in $ctrl.resultFormats" value="{{:: fmt.name }}">
 245               {{:: fmt.label }}
 246             </option>
 247           </select>
 248         </div>
 249         <ul class="nav nav-tabs">
 250           <li role="presentation" ng-class="{active: selectedTab.result === 'result'}">
 251             <a href ng-click="selectedTab.result = 'result'">
 252               <span ng-switch="status">
 253                 <i class="fa fa-fw fa-circle-o" ng-switch-when="default"></i>
 254                 <i class="fa fa-fw fa-check-circle" ng-switch-when="success"></i>
 255                 <i class="fa fa-fw fa-check-circle" ng-switch-when="warning"></i>
 256                 <i class="fa fa-fw fa-minus-circle" ng-switch-when="danger"></i>
 257                 <i class="fa fa-fw fa-spinner fa-pulse" ng-switch-when="info"></i>
 258               </span>
 259               <span>{{:: ts('Result') }}</span>
 260             </a>
 261           </li>
 262           <li role="presentation" ng-if="::perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
 263             <a href ng-click="selectedTab.result = 'debug'">
 264               <i class="fa fa-fw fa-{{ debug ? (status === 'warning' || status === 'danger' ? 'warning' : 'bug') : 'circle-o' }}"></i>
 265               <span>{{:: ts('Debug') }}</span>
 266             </a>
 267           </li>
 268         </ul>
 269       </div>
 270       <div class="panel-body">
 271         <div ng-show="selectedTab.result === 'result'">
 272           <div ng-repeat="code in result">
 273             <div class="clearfix">
 274               <button ng-if="$index" class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-result-' + $index)">
 275                 <i class="crm-i fa-clipboard"></i>
 276                 {{:: ts('Copy') }}
 277               </button>
 278             </div>
 279             <pre class="prettyprint" id="api4-result-{{ $index }}" ng-bind-html="code"></pre>
 280           </div>
 281         </div>
 282         <div ng-if="::perm.accessDebugOutput" ng-show="selectedTab.result === 'debug'">
 283           <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
 284           <div ng-if="!debug">
 285             <p>
 286               {{:: ts('To view debugging output, enable the debug param before executing.') }}
 287             </p>
 288             <p>
 289               {{:: ts('Enable backtrace in system settings to see error backtraces.') }}
 290             </p>
 291           </div>
 292         </div>
 293       </div>
 294     </div>
 295   </div>
 296 </div>