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 API v4') }}{{ 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             <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}" />
  22             <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}" />
  23             <input class="form-control api4-index" ng-model="index" ng-mouseenter="help('index', indexHelp)" ng-mouseleave="help()" placeholder="{{ ts('Index') }}" />
  24             <button class="btn btn-success pull-right" crm-icon="fa-bolt" ng-disabled="!entity || !action || loading" ng-click="execute()">{{ ts('Execute') }}</button>
  25           </div>
  26         </div>
  27         <div class="panel-body">
  28           <div class="api4-input form-inline">
  29             <div 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">
  30               <input type="checkbox" id="api4-param-{{ name }}" ng-model="params[name]"/>
  31               <label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  32             </div>
  33             <div class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="availableParams.select">
  34               <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
  35               <label for="api4-param-selectRowCount">SelectRowCount</label>
  36             </div>
  37           </div>
  38           <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">
  39             <label>{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  40             <label class="radio-inline">
  41               <input type="radio" ng-model="params[name]" ng-value="true" />true
  42             </label>
  43             <label class="radio-inline">
  44               <input type="radio" ng-model="params[name]" ng-value="false" />false
  45             </label>
  46             <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>
  47           </div>
  48           <div class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select && !isSelectRowCount()">
  49             <label for="api4-param-select">select<span class="crm-marker" ng-if="availableParams.select.required"> *</span></label>
  50             <input class="collapsible-optgroups form-control" ng-list crm-ui-select="{data: fieldsAndJoins, multiple: true}" id="api4-param-select" ng-model="params.select" style="width: 85%;"/>
  51           </div>
  52           <div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()"ng-if="availableParams.fields">
  53             <label for="api4-param-fields">fields<span class="crm-marker" ng-if="availableParams.fields.required"> *</span></label>
  54             <input class="form-control" ng-list crm-ui-select="{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
  55           </div>
  56           <div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="availableParams.action">
  57             <label for="api4-param-action">action<span class="crm-marker" ng-if="availableParams.action.required"> *</span></label>
  58             <input class="form-control" crm-ui-select="{data: actions, allowClear: true, placeholder: 'None'}" id="api4-param-action" ng-model="params.action"/>
  59           </div>
  60           <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')">
  61             <label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  62             <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]"/>
  63             <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>
  64             <a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="!!params[name]"><i class="crm-i fa-times"></i></a>
  65           </div>
  66           <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')">
  67             <label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
  68             <textarea class="form-control" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]">
  69             </textarea>
  70           </div>
  71           <fieldset ng-if="availableParams.where" class="api4-where-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-where-clause="{where: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
  72           </fieldset>
  73           <fieldset ng-if="availableParams.values" ng-mouseenter="help('values', availableParams.values)" ng-mouseleave="help()">
  74             <legend>values<span class="crm-marker" ng-if="availableParams.values.required"> *</span></legend>
  75             <div class="api4-input form-inline" ng-repeat="clause in params.values" ng-mouseenter="help('value: ' + clause[0], fieldHelp(clause[0]))" ng-mouseleave="help('values', availableParams.values)">
  76               <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: valuesFields, allowClear: true, placeholder: 'Field'}" />
  77               <input class="form-control" ng-model="clause[1]" api4-exp-value="{field: clause[0]}" />
  78             </div>
  79             <div class="api4-input form-inline">
  80               <input class="collapsible-optgroups form-control" ng-model="controls.values" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: valuesFields}" placeholder="Add value" />
  81             </div>
  82           </fieldset>
  83           <fieldset ng-if="availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
  84             <legend>orderBy<span class="crm-marker" ng-if="availableParams.orderBy.required"> *</span></legend>
  85             <div class="api4-input form-inline" ng-repeat="clause in params.orderBy">
  86               <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{data: fieldsAndJoins, allowClear: true, placeholder: 'Field'}" />
  87               <select class="form-control" ng-model="clause[1]">
  88                 <option value="ASC">ASC</option>
  89                 <option value="DESC">DESC</option>
  90               </select>
  91             </div>
  92             <div class="api4-input form-inline">
  93               <input class="collapsible-optgroups form-control" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoins}" placeholder="Add orderBy" />
  94             </div>
  95           </fieldset>
  96           <fieldset ng-if="availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
  97             <legend>chain</legend>
  98             <div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="entities" main-entity="entity" >
  99             </div>
 100             <div class="api4-input form-inline">
 101               <input class="form-control" ng-model="controls.chain" crm-ui-select="{data: entities}" placeholder="Add chain" />
 102             </div>
 103           </fieldset>
 104         </div>
 105       </form>
 106       <div class="panel panel-info explorer-help-panel">
 107         <div class="panel-heading">
 108           <h3 class="panel-title" crm-icon="fa-info-circle">{{ helpTitle }}</h3>
 109         </div>
 110         <div class="panel-body">
 111           <h4>{{ helpContent.description }}</h4>
 112           <div ng-if="helpContent.comment">
 113             <p ng-repeat='text in helpContent.comment.split("\n\n")'>{{ text }}</p>
 114           </div>
 115           <p ng-repeat="(key, item) in helpContent" ng-if="key !== 'description' && key !== 'comment'">
 116             <strong>{{ key }}:</strong> {{ item }}
 117           </p>
 118         </div>
 119       </div>
 120   </div>
 121   <div class="api4-explorer-row">
 122       <div class="panel panel-warning explorer-code-panel">
 123         <div class="panel-heading">
 124           <h3 class="panel-title" crm-icon="fa-code">{{ ts('Code') }}</h3>
 125         </div>
 126         <div class="panel-body">
 127           <table>
 128             <tr ng-repeat="(type, item) in code">
 129               <td>{{ type }}</td>
 130               <td><pre class="prettyprint" ng-bind-html="item"></pre></td>
 131             </tr>
 132           </table>
 133         </div>
 134       </div>
 135       <div class="panel explorer-result-panel panel-{{ status }}" >
 136         <div class="panel-heading">
 137           <h3 class="panel-title">
 138             <i class="fa fa-circle-o" ng-if="status === 'default'"></i>
 139             <i class="fa fa-check-circle" ng-if="status === 'success'"></i>
 140             <i class="fa fa-minus-circle" ng-if="status === 'danger'"></i>
 141             <i class="fa fa-spinner fa-pulse" ng-if="status === 'warning'"></i>
 142             {{ ts('Result') }}
 143           </h3>
 144         </div>
 145         <div class="panel-body">
 146           <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
 147         </div>
 148       </div>
 149   </div>
 150
 151
 152 </div>