-<!-- Add Custom Field Button and Dialog Box -->
+<!-- Custom Field Dialog Box -->
{* New/Edit field form *}
<div id="FieldDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Enter a New Custom Field">
</center>
</div>
-{* New Picklist Option form *}
-<div id="NewOptionDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Add a New Option">
+{* Picklist Option form *}
+<div id="EditOptionDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Add a New Option">
<table class="glm-admin-table" style="width: 100%">
<tr>
<th class="glm-required" style="width: 20%; white-space: nowrap;">Option Name:</th>
<td>
- <input id="NewOptionValue_{$fid}" type="text" name="option_value" class="glm-form-text-input-short">
+ <input id="EditOptionValue_{$fid}" type="text" name="option_value" class="glm-form-text-input-short">
<br>(For reference - keep short)
</td>
</tr>
<tr>
<th class="glm-required">Displayed Text:</th>
- <td><input id="NewOptionText_{$fid}" type="text" name="option_text" class="glm-form-text-input"></td>
+ <td><input id="EditOptionText_{$fid}" type="text" name="option_text" class="glm-form-text-input"></td>
</tr>
<tr>
- <th style="width: 20%; white-space: nowrap;">Selected by Dedault</th>
- <td><input id="NewOptionDefault_{$fid}" type="checkbox" name="option_default"></td>
+ <th style="width: 20%; white-space: nowrap;">Selected by Default</th>
+ <td><input id="EditOptionDefault_{$fid}" type="checkbox" name="option_default"></td>
</tr>
<tr>
<th>Cost:</th>
- <td>$<input id="NewOptionCost_{$fid}" type="text" name="option_cost" class="glm-form-text-input-veryshort"></td>
+ <td>$<input id="EditOptionCost_{$fid}" type="text" name="option_cost" class="glm-form-text-input-veryshort"></td>
</tr>
</table>
<p><span class="glm-required">*</span> Required</p>
- <div id="NewOptionCancel_{$fid}" class="button button-primary glm-right">Cancel</div>
- <div id="NewOptionSubmit_{$fid}" class="button button-primary" data-fieldId="">Add new Picklist Option</div>
- <div id="NewOptionDialogError_{$fid}" class="glm-error" style="display: none;"><p>Unable to create picklist option. Did you supply all required information?</p></div>
+ <div id="EditOptionCancel_{$fid}" class="button button-primary glm-right">Cancel</div>
+ <div id="EditOptionSubmit_{$fid}" class="button button-primary" data-optionId="" data-fieldId="">(name supplied by code below)</div>
+ <div id="EditOptionDialogError_{$fid}" class="glm-error" style="display: none;"><p>Unable to create picklist option. Did you supply all required information?</p></div>
</div>
{* Fields Table *}
{if $t.field_type=='picklist'}
<tr id="PicklistField_{$t.id}">
<td colspan="5" style="padding-left: 2rem;">
- <table id="PicklistOptions_{$t.id}" width="100%">
+ <table id="PicklistOptions_{$t.id}" width="100%" style="margin-top: .5rem;">
<tr class="FieldRow_{$t.id}" style="background-color: #ddd;">
<th style="text-align: left;">Option Name</th>
<th style="text-align: left;">Option Text</th>
</tr>
{if $t.options}
{foreach $t.options as $option}
- <tr id="FieldOptionRow_{$option.id}" class="FieldRow_{$t.id}">
- <td style="text-align: left;">{$option.option_value}</td>
- <td style="text-align: left;">{$option.option_text}</td>
- <td style="text-align: left;">${$option.option_cost|number_format:2}</td>
- <td style="text-align: left;">{$option.option_default.name}</td>
+ <tr id="OptionRow_{$option.id}" class="FieldRow_{$t.id}">
+ <td style="text-align: left;" id="EditOptionValue_{$option.id}">{$option.option_value}</td>
+ <td style="text-align: left;" id="EditOptionText_{$option.id}">{$option.option_text}</td>
+ <td style="text-align: left;" id="EditOptionCost_{$option.id}">${$option.option_cost|number_format:2}</td>
+ <td style="text-align: left;" id="EditOptionDefault_{$option.id}">{$option.option_default.name}</td>
<td style="text-align: right;">
- <div class="DeleteOptionButton_{$fid} button button-secondary glm-button-small" data-fieldOptionId="{$option.id}">Delete</div>
- <div class="EditOptionButton_{$fid} button button-secondary glm-button-small" data-fieldOptionId="{$option.id}">Edit</div>
+ <div class="DeleteOptionButton_{$fid} button button-secondary glm-button-small" data-optionId="{$option.id}">Delete</div>
+ <div id="EditOptionButton_{$option.id}" class="EditOptionButton_{$fid} button button-secondary glm-button-small"
+ data-fieldId="{$t.id}"
+ data-optionId="{$option.id}"
+ data-optionValue="{$option.option_value|escape:'html'}"
+ data-optionText="{$option.option_text|escape:'html'}"
+ data-optionCost="{$option.option_cost}"
+ data-default="{$option.option_default.value}"
+ >Edit</div>
</td>
</tr>
{/foreach}
</td>
</tr>
{/if}
- <tr id="EndOfField_{$fieldData.id}" class="FieldRow_{$fieldData.id}"><td style="border-bottom: 1px solid black;" colspan="5"> </td></tr>
+ <tr id="EndOfField_{$t.id}" class="FieldRow_{$t.id}"><td style="border-bottom: 1px solid black; line-height: 0px" colspan="5"> </td></tr>
</tbody>
{/foreach}
{/if}
$('body').on('click', '.DeleteFieldButton_{$fid}', deleteFieldButton_{$fid});
$('body').off('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
$('body').on('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
- $('body').off('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
- $('body').on('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
+ $('body').off('click', '#EditOptionCancel_{$fid}', editOptionCancel_{$fid});
+ $('body').on('click', '#EditOptionCancel_{$fid}', editOptionCancel_{$fid});
// Otherwise this is a field update
} else {
// Update the displayed values
$('#DisplayFieldName_' + fieldId).html(formData.field_name);
$('#DisplayFieldTypeDescr_' + fieldId).html($('#FieldType_{$fid} :selected').text());
- $('#DisplayFieldPriority_' + fieldId).html((formData.priority_display ? 'Yes':'No'));
- $('#DisplayFieldRequired_' + fieldId).html((formData.required ? 'Yes':'No'));
+ $('#DisplayFieldPriority_' + fieldId).html(formData.priority_display ? 'Yes':'No');
+ $('#DisplayFieldRequired_' + fieldId).html(formData.required ? 'Yes':'No');
$('#DisplayFieldPrompt_' + fieldId).html(formData.field_prompt);
// Update hidden values used for editing
* New Picklist Option Dialog
*/
// Setup
- $("#NewOptionDialog_{$fid}").dialog({
+ $("#EditOptionDialog_{$fid}").dialog({
autoOpen: false,
minWidth: 600,
dialogClass: "glm-dialog-no-close"
});
// Cancel
- $('body').on('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
- function NewOptionCancel_{$fid}(e) {
- $("#NewOptionDialog_{$fid}").dialog("close");
+ $('body').on('click', '#EditOptionCancel_{$fid}', editOptionCancel_{$fid});
+ function editOptionCancel_{$fid}(e) {
+ $("#EditOptionDialog_{$fid}").dialog("close");
};
/*
$('body').on('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
function addOptionButton_{$fid}(e) {
var fieldId_{$fid} = $(this).attr('data-fieldId');
-
- $("#NewOptionDialog_{$fid}").dialog("open");
- $('#NewOptionValue_{$fid}').val('');
- $('#NewOptionText_{$fid}').val('');
- $('#NewOptionDefault_{$fid}').removeAttr('checked');
- $('#NewOptionCost_{$fid}').val('0.00');
-
- $('#NewOptionSubmit_{$fid}').data('data-fieldId', $(this).attr('data-fieldId'));
+
+ $('#EditOptionSubmit_{$fid}').data('data-optionId', '');
+ $("#EditOptionDialog_{$fid}").dialog("open");
+ $('#EditOptionValue_{$fid}').val('');
+ $('#EditOptionText_{$fid}').val('');
+ $('#EditOptionDefault_{$fid}').removeAttr('checked');
+ $('#EditOptionCost_{$fid}').val('0.00');
+
+ $('#EditOptionSubmit_{$fid}').html('New Custom Field');
+ $('#EditOptionSubmit_{$fid}').data('data-fieldId', $(this).attr('data-fieldId'));
};
/*
- * Add New Option Submit
+ * Option Submit
*/
- $('#NewOptionSubmit_{$fid}').click( function(e) {
+ $('#EditOptionSubmit_{$fid}').click( function(e) {
- // Collect the new field data
+ var optionSubmitOption = 'addNewOption';
+ if ($('#EditOptionSubmit_{$fid}').data('data-optionId') != '') {
+ optionSubmitOption = 'updateOption';
+ }
+
+ // Collect the option field data
var formData = {
'action': 'glm_members_admin_ajax',
'glm_action': 'customFieldOptions',
- 'option': 'addNewOption',
- 'field_id': $('#NewOptionSubmit_{$fid}').data('data-fieldId'),
- 'option_value': $('#NewOptionValue_{$fid}').val(),
- 'option_text': $('#NewOptionText_{$fid}').val(),
- 'option_cost': $('#NewOptionCost_{$fid}').val(),
- 'option_default': $('#NewOptionDefault_{$fid}').is(':checked'),
- 'fid': '{$fid}'
+ 'option': optionSubmitOption,
+ 'fid': '{$fid}',
+ 'field_id': $('#EditOptionSubmit_{$fid}').data('data-fieldId'),
+ 'option_id': $('#EditOptionSubmit_{$fid}').data('data-optionId'),
+ 'option_value': $('#EditOptionValue_{$fid}').val(),
+ 'option_text': $('#EditOptionText_{$fid}').val(),
+ 'option_cost': $('#EditOptionCost_{$fid}').val(),
+ 'option_default': $('#EditOptionDefault_{$fid}').is(':checked')
};
// Submit new field data - expect field new ID back
dataType: 'text'
})
.done( function(optionHtml) {
+
if (optionHtml == '') {
- flashElement('FieldDialogError_{$fid}');
+ flashElement('EditOptionDialogError_{$fid}');
} else {
- var fieldId_{$fid} = $('#NewOptionSubmit_{$fid}').data('data-fieldId');
- $('#PicklistOptions_'+fieldId_{$fid}).append(optionHtml);
-
- $("#NewOptionDialog_{$fid}").dialog("close");
-
- // Need to rebind delete option buttons
- $('body').off('click', '.DeleteOptionButton_{$fid}', DeleteOptionButton_{$fid});
- $('body').on('click', '.DeleteOptionButton_{$fid}', DeleteOptionButton_{$fid});
+
+ // If this is a new option
+ if (optionSubmitOption == 'addNewOption') {
+
+ var fieldId_{$fid} = $('#EditOptionSubmit_{$fid}').data('data-fieldId');
+ $('#PicklistOptions_'+fieldId_{$fid}).append(optionHtml);
+
+ $("#EditOptionDialog_{$fid}").dialog("close");
+
+ // Need to rebind delete option buttons
+ $('body').off('click', '.DeleteOptionButton_{$fid}', deleteOptionButton_{$fid});
+ $('body').on('click', '.DeleteOptionButton_{$fid}', deleteOptionButton_{$fid});
+
+ // Otherwise this is an option update
+ } else {
+
+ var optionId = formData.option_id;
+ var optionDefault = (formData.option_default == true ? 'Yes':'No');
+
+ // Update the displayed values
+ $('#EditOptionValue_' + optionId).html(formData.option_value);
+ $('#EditOptionText_' + optionId).html(formData.option_text);
+ $('#EditOptionCost_' + optionId).html('$'+Number(formData.option_cost).toFixed(2));
+ $('#EditOptionDefault_' + optionId).html(formData.option_default ? 'Yes':'No');
+
+ // Update hidden values used for editing
+ $('#EditOptionButton_' + optionId).attr('data-optionValue', formData.option_value);
+ $('#EditOptionButton_' + optionId).attr('data-optionText', formData.option_text);
+ $('#EditOptionButton_' + optionId).attr('data-optionCost', formData.option_cost);
+ $('#EditOptionButton_' + optionId).attr('data-default', (formData.default ? 1 : 0));
+
+
+ }
+ $("#EditOptionDialog_{$fid}").dialog("close");
}
});
});
+ /*
+ * Edit field
+ */
+ $('body').on('click', '.EditOptionButton_{$fid}', editOptionButton_{$fid});
+ function editOptionButton_{$fid}(e) {
+
+ var fieldId = $(this).attr('data-fieldId');
+ var optionId = $(this).attr('data-optionId');
+ var optionValue = $(this).attr('data-optionValue');
+ var optionText = $(this).attr('data-optionText');
+ var optionCost = $(this).attr('data-optionCost');
+ var optionDefault = ($(this).attr('data-default') == 1);
+
+ $('#EditOptionSubmit_{$fid}').data('data-optionId', optionId);
+ $('#EditOptionSubmit_{$fid}').data('data-fieldId', fieldId);
+ $('#EditOptionValue_{$fid}').val(optionValue);
+ $('#EditOptionText_{$fid}').val(optionText);
+ $('#EditOptionCost_{$fid}').val(optionCost);
+ $('#EditOptionDefault_{$fid}').prop('checked', optionDefault);
+
+ $('#EditOptionSubmit_{$fid}').html('Update Custom Field Option');
+ $("#EditOptionDialog_{$fid}").dialog("open");
+ }
+
+
// Delete
- $('body').on('click', '.DeleteOptionButton_{$fid}', DeleteOptionButton_{$fid});
- function DeleteOptionButton_{$fid}(e) {
+ $('body').on('click', '.DeleteOptionButton_{$fid}', deleteOptionButton_{$fid});
+ function deleteOptionButton_{$fid}(e) {
- var optionDeleteId_{$fid} = $(this).attr('data-fieldOptionId');
+ var optionDeleteId_{$fid} = $(this).attr('data-optionId');
// Delete the selected option and remove it from the display
var formData = {
dataType: 'text'
})
.done( function(deleted) {
- $('#FieldOptionRow_' + optionDeleteId_{$fid}).remove();
+ $('#OptionRow_' + optionDeleteId_{$fid}).remove();
});
};