params = {},
smartyStub,
fieldTpl = _.template($('#api-param-tpl').html()),
+ optionsTpl = _.template($('#api-options-tpl').html()),
returnTpl = _.template($('#api-return-tpl').html()),
chainTpl = _.template($('#api-chain-tpl').html());
}).change();
}
+ /**
+ * Add a new "options" row
+ * @param name
+ */
+ function addOptionField(name) {
+ if ($('.api-options-row', '#api-params').length) {
+ $('.api-options-row:last', '#api-params').after($(optionsTpl({})));
+ } else {
+ $('#api-params').append($(optionsTpl({})));
+ }
+ var $row = $('.api-options-row:last', '#api-params');
+ $('.api-option-name', $row).crmSelect2({data: [
+ {id: 'limit', text: 'limit'},
+ {id: 'offset', text: 'offset'},
+ {id: 'sort', text: 'sort'},
+ {id: 'metadata', text: 'metadata'},
+ {id: '-', text: ts('Other') + '...'}
+ ]});
+ }
+
/**
* Add an "api chain" row
*/
placeholder: '<span class="icon ui-icon-link"></span> ' + ts('Entity'),
escapeMarkup: function(m) {return m}
});
-
}
/**
}
}
+ /**
+ * Add/remove option list for selected field's pseudoconstant
+ */
function toggleOptions() {
var name = $(this).val(),
$valField = $(this).closest('tr').find('.api-param-value');
else if ($valField.data('select2')) {
$valField.select2('destroy');
}
- if (name === '-') {
- $(this).select2('destroy');
- $(this).val('').focus();
- }
}
/**
var ret = '';
if ($.isPlainObject(val)) {
$.each(val, function(k, v) {
- ret += (ret ? ',' : '') + "'" + k + "' => " + phpFormat(v);
+ ret += (ret ? ', ' : '') + "'" + k + "' => " + phpFormat(v);
});
return 'array(' + ret + ')';
}
return js;
}
+ /**
+ * Create the params array from user input
+ * @param e
+ */
function buildParams(e) {
params = {};
$('.api-param-checkbox:checked').each(function() {
params[this.name] = 1;
});
- $('input.api-param-value').each(function() {
+ $('input.api-param-value, input.api-option-value').each(function() {
var $row = $(this).closest('tr'),
val = evaluate($(this).val(), $(this).is('.select2-offscreen')),
name = $('input.api-param-name', $row).val(),
if (!name && $('select.api-chain-entity', $row).val()) {
name = 'api.' + $('select.api-chain-entity', $row).val() + '.' + $('select.api-chain-action', $row).val();
}
+ // Special handling for options
+ if ($(this).is('.api-option-value')) {
+ op = $('input.api-option-name', $row).val();
+ if (op) {
+ name = 'options';
+ }
+ }
if (name && val !== undefined) {
- params[name] = op === '=' ? val : {};
+ params[name] = op === '=' ? val : (params[name] || {});
if (op !== '=') {
params[name][op] = val;
}
.on('submit', submit);
$('#api-params')
.on('change', '.api-param-name', toggleOptions)
+ .on('change', '.api-param-name, .api-option-name', function() {
+ if ($(this).val() === '-') {
+ $(this).select2('destroy');
+ $(this).val('').focus();
+ }
+ })
.on('click', '.api-param-remove', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
e.preventDefault();
addField();
});
+ $('#api-option-add').on('click', function(e) {
+ e.preventDefault();
+ addOptionField();
+ });
$('#api-chain-add').on('click', function(e) {
e.preventDefault();
addChainField();
margin-top: .5em;
}
#api-explorer label {
- display:inline;
+ display: inline;
font-weight: bold;
}
#api-generated-wraper,
#api-result {
overflow: auto;
}
+ #api-explorer .api-options-row + .api-options-row label {
+ display: none;
+ }
+ .api-options-row td:first-child {
+ text-align: right;
+ }
.select2-choice .icon {
margin-top: .2em;
background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-2786C2.png");
</table>
<div id="api-param-buttons" style="display: none;">
<a href="#" class="crm-hover-button" id="api-params-add"><span class="icon ui-icon-plus"></span>{ts}Add Parameter{/ts}</a>
+ <a href="#" class="crm-hover-button" id="api-option-add"><span class="icon ui-icon-gear"></span>{ts}Add Option{/ts}</a>
<a href="#" class="crm-hover-button" id="api-chain-add"><span class="icon ui-icon-link"></span>{ts}Chain API Call{/ts}</a>
</div>
<div id="api-generated-wraper">
<script type="text/template" id="api-return-tpl">
<tr class="api-return-row">
<td colspan="3">
- <label for="api-return-value">{ts}Fields to return:{/ts}</label>
+ <label for="api-return-value">{ts}Fields to return{/ts}:</label>
<input type="hidden" class="api-param-name" value="return" />
<input style="width: 50%;" id="api-return-value" class="crm-form-text api-param-value api-input" placeholder="{ts}Leave blank for default{/ts}"/>
</td>
</tr>
</script>
+<script type="text/template" id="api-options-tpl">
+ <tr class="api-options-row">
+ <td>
+ <label>{ts}Options{/ts}: </label>
+ </td>
+ <td>
+ <input class="crm-form-text api-option-name api-input" placeholder="{ts}Option{/ts}"/>
+ </td>
+ <td>
+ <input style="width: 85%;" class="crm-form-text api-option-value api-input" placeholder="{ts}Value{/ts}"/>
+ <a class="crm-hover-button api-param-remove" href="#"><span class="icon ui-icon-close"></span></a>
+ </td>
+ </tr>
+</script>
+
<script type="text/template" id="api-chain-tpl">
<tr class="api-chain-row">
<td>