CRM-21840: Show Options Edit Link for Radio and Checkbox Groups

[mickadoo]

Overview

A tool icon is provided to allow editing of option groups, however this icon is only shown for select input types.

To make it easier to edit option groups this PR will also display the edit link for radio and checkbox input types.

Before

The edit link is only shown for select input types

After

The edit link is also shown for radio groups.

The same is true for radio options belonging to custom fields

It is also shown for checkbox groups.

Radio button edit example

Checkbox group edit example

---

• CRM-21840: Show Tool Icon For Radio Button Groups

[colemanw]

@mickadoo the reason that only <select> elements were originally supported is because the javascript has to change the form element markup after the popup is saved. That's much easier to do with a select list. If you want to try tackling it, that code is here:
https://github.com/civicrm/civicrm-core/blob/master/js/crm.optionEdit.js

[mickadoo]

@colemanw ah right, that makes sense. I've added a few changes to support refreshing radio options after saving. I'm no whiz with Javascript so prepare yourself. I've also added a GIF to the PR description showing it in action.

[colemanw]

I'd suggest not putting that code in Common.js since it is not needed elsewhere. Just leave it in the crm.optionEdit.js file since that's the only place it's used.
Also, if we're bothering to do this for radios, the code should be identical for checkboxes.

[mickadoo]

@colemanw I've added support for checkboxes, updated the PR description and added another gif showing checkbox options editing.

[colemanw]

This looks great @mickadoo - thanks for the screencasts.
My one nitpick is that the js code could be more concise. The functions refreshSelectOptions refreshRadioOptions and refreshCheckboxOptions are identical except for one line, so that could be a param to a consolidated fn.

[mickadoo]

@colemanw I did some refactoring in the last commit to remove duplicate code.

I noticed that non-custom checkbox inputs do not have a hidden input:

<input 
  type="checkbox"
  id="preferred_communication_method_1" 
  name="preferred_communication_method[1]" 
  value="1" 
  class="crm-form-checkbox" 
>

But custom fields checkbox options all seem to have a hidden element with duplicate name, and no value:

<input type="hidden" name="custom_7_1[1]" value="">
<input
  type="checkbox"
  id="custom_7_1_1"
  name="custom_7_1[1]"
  value="1"
  class="crm-form-checkbox"
>

Any idea why the hidden element exists? I've tested without it and it doesn't seem to make any difference to saving the values.

[colemanw]

@mickadoo final task in this PR would be to rebase & squash it into one commit. That keeps the commit history on the master branch clean, minus the WIP back & forth commits in the PR.

[mickadoo]

@colemanw squashed into one commit, there was one civilint warning before this but hopefully that should be fixed now too.

[colemanw]

I've reviewed the code and tested this.