Custom Field updates for grouping
authorSteve Sutton <steve@gaslightmedia.com>
Tue, 24 Jul 2018 18:45:28 +0000 (14:45 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Tue, 24 Jul 2018 18:45:28 +0000 (14:45 -0400)
Fix sorting of fields and groups after getting the field options into the custom field management.

Update the custom fields grouping and output of select picklist for the edit contact custom field output.

Working on management for custom fields.

models/admin/entity/fields.php
models/admin/management/fields.php
views/admin/entity/fields.html
views/admin/management/fields.html

index bdbd46f..80c7d4c 100644 (file)
@@ -164,7 +164,45 @@ class GlmMembersAdmin_entity_fields extends GlmDataFieldsCustomFields
         }else {
             $customFieldsData = customFieldsGetFieldData( $entityID );
         }
+        // Get all groups
+        $groups = $this->wpdb->get_results(
+            "SELECT *
+               FROM " . GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . "custom_field_groups
+              WHERE uid = '$uid'
+            ORDER BY group_order",
+            ARRAY_A
+        );
 
+        if ( $groups ) {
+            foreach ( $groups as $key => $group ) {
+                $group_custom_fields = $this->getList( "uid = '$uid' AND gid = {$group['id']}", 'field_order' );
+                // Go through all fields and get any picklist options
+                if ( $group_custom_fields ) {
+                    foreach ( $group_custom_fields as $fkey => $field ) {
+                        if ( $field['field_type']['value'] === 'picklist' ) {
+                            // get the options for this field
+                            $options = $this->wpdb->get_results(
+                                $this->wpdb->prepare(
+                                    "SELECT *
+                                      FROM " . GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . "custom_field_options
+                                     WHERE field_id = %d
+                                     ORDER BY option_text",
+                                    $field['id']
+                                ),
+                                ARRAY_A
+                            );
+                            if ( $options ) {
+                                $group_custom_fields[$fkey]['options'] = $options;
+                            }
+                        }
+                    }
+                }
+                $groups[$key]['custom_fields'] = $group_custom_fields;
+            }
+        }
+        if ( isset($groups) && $groups && count( $groups ) > 0 ) {
+            $haveGroups = true;
+        }
 
         // Compile template data
         $template_data = array(
@@ -174,7 +212,9 @@ class GlmMembersAdmin_entity_fields extends GlmDataFieldsCustomFields
             'fieldFail'        => $fieldFail,
             'fieldTypes'       => $this->config['custom_field_types'],
             'haveCustomFields' => $haveCustomFields,
-            'uid'              => $uid
+            'uid'              => $uid,
+            'groups'           => $groups,
+            'haveGroups'       => $haveGroups,
         );
 
         // Return status, suggested view, and data to controller
index d3fa638..93dd529 100644 (file)
@@ -147,6 +147,58 @@ class GlmMembersAdmin_management_fields extends GlmDataFieldsCustomFields
 
         switch ($option) {
 
+            case 'deleteOption':
+                // echo '<pre>$_REQUEST: ' . print_r( $_REQUEST, true ) . '</pre>';
+                $option_id = filter_var( $_REQUEST['id'], FILTER_VALIDATE_INT );
+                if ( $option_id ) {
+                    $this->wpdb->delete(
+                        GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . 'custom_field_options',
+                        array( 'id' => $option_id )
+                    );
+                }
+                break;
+
+            case 'fieldoption':
+                // Create or update field option
+                // echo '<pre>$_REQUEST: ' . print_r( $_REQUEST, true ) . '</pre>';
+                $id             = filter_var( $_REQUEST['id'], FILTER_VALIDATE_INT );
+                $field_id       = filter_var( $_REQUEST['field_id'], FILTER_VALIDATE_INT );
+                $option_text    = filter_var( $_REQUEST['option_text'] );
+                $option_default = filter_var( $_REQUEST['option_default'], FILTER_VALIDATE_BOOLEAN );
+                if ( $field_id ) {
+                    $option_data = array(
+                        'field_id'       => $field_id,
+                        'option_text'    => $option_text,
+                        'option_default' => $option_default,
+                    );
+                    if ( $id ) {
+                        $this->wpdb->update(
+                            GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . 'custom_field_options',
+                            $option_data,
+                            array( 'id' => $id ),
+                            array( '%d', '%s', '%d' ),
+                            array( '%d' )
+                        );
+                    } else {
+                        $this->wpdb->insert(
+                            GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . 'custom_field_options',
+                            $option_data,
+                            array( '%d', '%s', '%d' )
+                        );
+                        $id = $this->wpdb->insert_id;
+                    }
+                }
+                // If the default is selected then set all but this option to false for option_default
+                if ( $option_default && $id ) {
+                    $this->wpdb->query(
+                        "UPDATE " . GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . "custom_field_options
+                            SET option_default = 0
+                          WHERE field_id = $field_id
+                            AND id != $id"
+                    );
+                }
+                break;
+
             case 'updateNewGroup':
                 // echo '<pre>$_REQUEST: ' . print_r( $_REQUEST, true ) . '</pre>';
                 $gid = filter_var( $_REQUEST['id'], FILTER_VALIDATE_INT );
@@ -236,6 +288,11 @@ class GlmMembersAdmin_management_fields extends GlmDataFieldsCustomFields
                         GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . 'custom_field_data',
                         array( 'field_id' => $id )
                     );
+                    // Also delete any options for the field
+                    $this->wpdb->delete(
+                        GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . 'custom_field_options',
+                        array( 'field_id' => $id )
+                    );
                 }
                 break;
 
@@ -276,13 +333,32 @@ class GlmMembersAdmin_management_fields extends GlmDataFieldsCustomFields
 
         if ( $groups ) {
             foreach ( $groups as $key => $group ) {
-                $groups[$key]['custom_fields'] = $this->getList( "uid = '$uid' AND gid = {$group['id']}", 'field_order' );
+                $group_custom_fields = $this->getList( "uid = '$uid' AND gid = {$group['id']}", 'field_order' );
+                // Go through all fields and get any picklist options
+                if ( $group_custom_fields ) {
+                    foreach ( $group_custom_fields as $fkey => $field ) {
+                        if ( $field['field_type']['value'] === 'picklist' ) {
+                            // get the options for this field
+                            $options = $this->wpdb->get_results(
+                                $this->wpdb->prepare(
+                                    "SELECT *
+                                      FROM " . GLM_MEMBERS_FIELDS_PLUGIN_DB_PREFIX . "custom_field_options
+                                     WHERE field_id = %d
+                                     ORDER BY option_text",
+                                    $field['id']
+                                ),
+                                ARRAY_A
+                            );
+                            if ( $options ) {
+                                $group_custom_fields[$fkey]['options'] = $options;
+                            }
+                        }
+                    }
+                }
+                $groups[$key]['custom_fields'] = $group_custom_fields;
             }
-            // echo '<pre>$groups: ' . print_r( $groups, true ) . '</pre>';
         }
 
-        //  echo "<pre>REQUEST " . print_r($_REQUEST, true) . "</pre>";
-        //  echo "<pre>GET " . print_r($_GET, true) . "</pre>";
         if ( isset($custom_fields) && $custom_fields && count( $custom_fields ) > 0 ) {
             $haveCustomFields = true;
         }
index 2c69862..f6173a2 100644 (file)
@@ -1,38 +1,98 @@
 <div id="glm-members-custom-fields-{$uid}" class="glm-row glm-custom-field-group glm-admin-custom-fields">
-    {foreach $customFields as $field}
-        <div class="glm-small-12 glm-large-2 glm-columns glm-custom-field-label {if $field.required.value == 1} glm-required {/if}">{$field.field_name}</div>
-        <div class="glm-small-12 glm-large-9 glm-columns glm-custom-field">
-            <input type="hidden" name="custom-required" value="{$field.required.value}">
-            
-           {$fail = ''}
-           {if is_array($customFieldsData)}
-            {if array_key_exists('fieldFail', $customFieldsData)}
-                 {if array_key_exists($field.id,$customFieldsData['fieldFail'])}
-                     {$fail = 'glm-form-bad-input'}
-                  {/if}
-            {/if}
-           {/if}
-           <div class="glm-input-wrapper {$fail}">
-                {if $field.field_type.name == 'text'}
-
-                    <input class="glm-input glm-form-text-input-medium" type="text" name="{$prefix}[{$field.id}]" value="{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape}{/if}" {if $field.required.value == 1} required{/if}>
-                {elseif $field.field_type.name == 'textarea'}
-                   {php}
-                        wp_editor('{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape:quotes}{/if}', 'custom-field-{$field.id}', array(
-                            'media_buttons' => false,
-                            // 'quicktags' => false,
-                            // 'wpautop' => false,  NOTE: Dont's use. Problem when numerous spaces before text.
-                            'textarea_name' => '{$prefix}[{$field.id}]',
-                            'editor_height' => 200,     // Height in px, overrides editor_rows
-                            // 'textarea_rows' => 8,
-                            {if $field.required.value == 1}'editor_class' => 'glm-required' {/if}
-                        ));
-                    {/php}
-                {elseif $field.field_type.name == 'checkbox'}
-                    <input type="hidden" name="{$prefix}[{$field.id}]" value="No" {if !isset($customFieldsData[$field.id]) || $customFieldsData[$field.id] == 'No'}checked{/if}>
-                    <input type="checkbox" name="{$prefix}[{$field.id}]" value="Yes" {if isset($customFieldsData[$field.id]) && $customFieldsData[$field.id] == 'Yes'}checked{/if} {if $field.required.value == 1} required{/if}>
+    {if $haveGroups}
+
+        {foreach $groups as $group}
+
+        <fieldset>
+            <legend> {$group.group_name} </legend>
+
+            {foreach $group.custom_fields as $field}
+            <div class="glm-small-12 glm-large-2 glm-columns glm-custom-field-label {if $field.required.value == 1} glm-required {/if}">{$field.field_name}</div>
+            <div class="glm-small-12 glm-large-9 glm-columns glm-custom-field">
+                <input type="hidden" name="custom-required" value="{$field.required.value}">
+
+               {$fail = ''}
+               {if is_array($customFieldsData)}
+                {if array_key_exists('fieldFail', $customFieldsData)}
+                     {if array_key_exists($field.id,$customFieldsData['fieldFail'])}
+                         {$fail = 'glm-form-bad-input'}
+                      {/if}
+                {/if}
+               {/if}
+               <div class="glm-input-wrapper {$fail}">
+                    {if $field.field_type.value == 'text'}
+
+                        <input class="glm-input glm-form-text-input-medium" type="text" name="{$prefix}[{$field.id}]" value="{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape}{/if}" {if $field.required.value == 1} required{/if}>
+                    {elseif $field.field_type.value == 'textarea'}
+                       {php}
+                            wp_editor('{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape:quotes}{/if}', 'custom-field-{$field.id}', array(
+                                'media_buttons' => false,
+                                // 'quicktags' => false,
+                                // 'wpautop' => false,  NOTE: Dont's use. Problem when numerous spaces before text.
+                                'textarea_name' => '{$prefix}[{$field.id}]',
+                                'editor_height' => 200,     // Height in px, overrides editor_rows
+                                // 'textarea_rows' => 8,
+                                {if $field.required.value == 1}'editor_class' => 'glm-required' {/if}
+                            ));
+                        {/php}
+                    {elseif $field.field_type.value == 'checkbox'}
+                        <input type="hidden" name="{$prefix}[{$field.id}]" value="No" {if !isset($customFieldsData[$field.id]) || $customFieldsData[$field.id] == 'No'}checked{/if}>
+                        <input type="checkbox" name="{$prefix}[{$field.id}]" value="Yes" {if isset($customFieldsData[$field.id]) && $customFieldsData[$field.id] == 'Yes'}checked{/if} {if $field.required.value == 1} required{/if}>
+                    {elseif $field.field_type.value == 'picklist'}
+                        {if $field.options}
+                            <select name="{$prefix}[{$field.id}]">
+                                <option value=""></option>
+                                {foreach $field.options as $option}
+                                    <option value="{$option.option_text|escape:'html'}"{if isset($customFieldsData[$field.id]) && $customFieldsData[$field.id] == $option.option_text} selected{/if}>{$option.option_text}</option>
+                                {/foreach}
+                            </select>
+                        {/if}
+                    {/if}
+               </div>
+            </div>
+        {/foreach}
+
+        </fieldset>
+
+        {/foreach}
+
+    {else}
+
+        {foreach $customFields as $field}
+            <div class="glm-small-12 glm-large-2 glm-columns glm-custom-field-label {if $field.required.value == 1} glm-required {/if}">{$field.field_name}</div>
+            <div class="glm-small-12 glm-large-9 glm-columns glm-custom-field">
+                <input type="hidden" name="custom-required" value="{$field.required.value}">
+
+               {$fail = ''}
+               {if is_array($customFieldsData)}
+                {if array_key_exists('fieldFail', $customFieldsData)}
+                     {if array_key_exists($field.id,$customFieldsData['fieldFail'])}
+                         {$fail = 'glm-form-bad-input'}
+                      {/if}
                 {/if}
-           </div>
-        </div>
-    {/foreach}
+               {/if}
+               <div class="glm-input-wrapper {$fail}">
+                    {if $field.field_type.value == 'text'}
+
+                        <input class="glm-input glm-form-text-input-medium" type="text" name="{$prefix}[{$field.id}]" value="{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape}{/if}" {if $field.required.value == 1} required{/if}>
+                    {elseif $field.field_type.value == 'textarea'}
+                       {php}
+                            wp_editor('{if isset($customFieldsData[$field.id])}{$customFieldsData[$field.id]|escape:quotes}{/if}', 'custom-field-{$field.id}', array(
+                                'media_buttons' => false,
+                                // 'quicktags' => false,
+                                // 'wpautop' => false,  NOTE: Dont's use. Problem when numerous spaces before text.
+                                'textarea_name' => '{$prefix}[{$field.id}]',
+                                'editor_height' => 200,     // Height in px, overrides editor_rows
+                                // 'textarea_rows' => 8,
+                                {if $field.required.value == 1}'editor_class' => 'glm-required' {/if}
+                            ));
+                        {/php}
+                    {elseif $field.field_type.value == 'checkbox'}
+                        <input type="hidden" name="{$prefix}[{$field.id}]" value="No" {if !isset($customFieldsData[$field.id]) || $customFieldsData[$field.id] == 'No'}checked{/if}>
+                        <input type="checkbox" name="{$prefix}[{$field.id}]" value="Yes" {if isset($customFieldsData[$field.id]) && $customFieldsData[$field.id] == 'Yes'}checked{/if} {if $field.required.value == 1} required{/if}>
+                    {/if}
+               </div>
+            </div>
+        {/foreach}
+    {/if}
 </div>
index bc3e8b3..54baaca 100644 (file)
@@ -2,7 +2,8 @@
 <div id="newGroupButton" class="button button-primary right">Add A Custom Field Group</div>
 
 <div id="cfGroupDialog" class="glm-dialog-box" title="Add/Edit Custom Field Group">
-    <form action="" method="post" enctype="multipart/form-data">
+    <form action="{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields" method="post" enctype="multipart/form-data">
+        <input type="hidden" name="page" value="{$thisPage}" />
         <input type="hidden" name="glm_action" value="{$glm_action}" />
         <input type="hidden" name="option" value="customfields" />
         <input id="editGroupOption2" type="hidden" name="option2" value="addNewGroup" />
     </form>
 </div>
 
+{* Add / Edit Option Dialog Box *}
+<div id="cfOptionDialog" class="glm-dialog-box" title="Add/Edit Custom Field Option">
+    <form action="{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields" method="post" enctype="multipart/form-data">
+        <input type="hidden" name="page" value="{$thisPage}" />
+        <input type="hidden" name="glm_action" value="{$glm_action}" />
+        <input type="hidden" name="option" value="customfields" />
+        <input id="editGroupOption2" type="hidden" name="option2" value="fieldoption" />
+        <input id="optionId" type="hidden" name="id" value="" />
+        <input id="fieldId" type="hidden" name="field_id" value="" />
+
+        <table class="glm-admin-table">
+            <tr>
+                <th class="glm-required">Option Name:</th>
+                <td><input id="optionName" type="text" name="option_text" class="glm-form-text-input"></td>
+            </tr>
+            <tr>
+                <th>Selected by Default</th>
+                <td>
+                    <input type="hidden" name="default" value="0" />
+                    <input id="optionDefault" type="checkbox" name="option_default" value="1" />
+                </td>
+            </tr>
+        </table>
+
+        <a id="cfOptionCancel" class="button button-primary glm-right">Cancel</a>
+        <input type="submit" value="Save" class="button button-primary">
+    </form>
+</div>
+
 {* Delete Field Dialog Box *}
 <div id="deleteFieldDialog" class="glm-dialog-box" title="Delete Field">
     <center>
     </center>
 </div>
 
+{* Delete Option Dialog Box *}
+<div id="deleteOptionDialog" class="glm-dialog-box" title="Delete Option">
+    <center>
+        <p>Are you sure you want to delete this Option?</p>
+        <p><div id="deleteOptionConfirm" class="button button-primary">Yes, delete this Option</div></p>
+        <p><div id="deleteOptionCancel" class="button button-primary">Cancel</div></p>
+    </center>
+</div>
 
 {* Edit Field Dialog Box *}
 <div id="editFieldDialog" class="glm-dialog-box" title="Edit this Field">
-    <form action="{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields" method="post" enctype="multipart/form-data">
+    <form id="editFieldForm" action="{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields" method="post" enctype="multipart/form-data">
         <input type="hidden" name="glm_action" value="{$glm_action}" />
         <input type="hidden" name="option" value="customfields" />
         <input type="hidden" id="editFieldOption2" name="option2" value="update" />
 <div id="sortable-groups">
     {if $groups}
         {foreach $groups as $group}
-        <div style="margin-bottom: 20px;" id="group_{$group.id}">
-            <div style="padding: 10px;">
+        <div style="margin-bottom: 20px;" id="group_{$group.id}" class="glm-custom-sort-group-container">
+            <div style="padding: 10px;" class="glm-custom-sortable-group-handle">
                 <strong>{$group.group_name}</strong>
                 ( {if $group.publish}Published{else}Not Published{/if} )
                 <a class="deletGroupButton button button-secondary glm-button-small"
                 <tbody class="sortable-fields">
                     {if $group.custom_fields}
                         {foreach $group.custom_fields as $field}
-                            <tr id="field_{$field.id}">
-                                <td class="glm-cfield-handle">
-                                {$field.field_name}
-                                </td>
-                                <td> {$field.field_type.name} </td>
-                                <td> {$field.required.name} </td>
-                                <td> {$field.admin_search.name} </td>
-                                <td align="right">
-                                    <div class="deleteFieldButton button button-secondary glm-button-small" data-fieldID="{$field.id}">Delete</div>
-
-                                    <div class="editField button button-secondary glm-button-small"
-                                        data-fieldID="{$field.id}"
-                                        data-fieldName="{$field.field_name|escape:'html'}"
-                                        data-fieldType="{$field.field_type.value|escape:'html'}"
-                                        data-adminSearch="{$field.admin_search.value}"
-                                        data-groupid="{$field.gid}"
-                                        data-required="{$field.required.value}"
-                                    >Edit</div>
-                                </td>
-                            </tr>
+                        <tr id="field_{$field.id}" class="glm-custom-sort-field-container">
+                            <td colspan="5">
+                                <table style="width:100%; margin: 0;">
+                                    <tr>
+                                        <td class="glm-custom-sortable-handle">
+                                        {$field.field_name}
+                                        </td>
+                                        <td width="20%"> {$field.field_type.name} </td>
+                                        <td width="10%"> {$field.required.name} </td>
+                                        <td width="10%"> {$field.admin_search.name} </td>
+                                        <td width="10%" align="right">
+                                            <div class="deleteFieldButton button button-secondary glm-button-small" data-fieldID="{$field.id}">Delete</div>
+
+                                            <div class="editField button button-secondary glm-button-small"
+                                                data-fieldID="{$field.id}"
+                                                data-fieldName="{$field.field_name|escape:'html'}"
+                                                data-fieldType="{$field.field_type.value|escape:'html'}"
+                                                data-adminSearch="{$field.admin_search.value}"
+                                                data-groupid="{$field.gid}"
+                                                data-required="{$field.required.value}"
+                                            >Edit</div>
+                                        </td>
+                                    </tr>
+                                    {if $field.field_type.value == 'picklist'}
+                                        <tr class="picklist-options-container">
+                                            <td colspan="5" style="padding-left: 2rem;">
+                                                <table style="width:100%;">
+                                                    <thead>
+                                                        <tr style="background-color: #ddd;">
+                                                            <th style="text-align: left;"> Option Name </th>
+                                                            <th style="text-align: left;"> Default </th>
+                                                            <th width="10%">
+                                                                <div class="fieldoption button button-secondary glm-button-small" data-field-id="{$field.id}"> Add Option </div>
+                                                            </th>
+                                                        </tr>
+                                                    </thead>
+                                                    {if $field.options && !empty($field.options)}
+                                                        {foreach $field.options as $option}
+                                                            <tr>
+                                                                <td style="text-align: left;"> {$option.option_text} </td>
+                                                                <td style="text-align: left;"> {if $option.option_default}Yes{else}No{/if} </td>
+                                                                <td width="10%">
+                                                                    <div class="deleteOptionButton button button-secondary glm-button-small"
+                                                                        data-option-id="{$option.id}">Delete</div>
+
+                                                                    <div class="fieldoption button button-secondary glm-button-small"
+                                                                        data-id="{$option.id}"
+                                                                        data-field-id="{$option.field_id}"
+                                                                        data-option-name="{$option.option_text|escape:'html'}"
+                                                                        data-option-default="{$option.option_default}"
+                                                                    >Edit</div>
+                                                                </td>
+                                                            </tr>
+                                                        {/foreach}
+                                                    {/if}
+                                                </table>
+                                            </td>
+                                        </tr>
+                                    {/if}
+                                </table>
+                            </td>
+                        </tr>
                         {/foreach}
                     {/if}
                 </tbody>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 
+    // Setup the sorting for the Groups
     $('#sortable-groups').sortable({
+        items: '.glm-custom-sort-group-container',
         cursor: 'move',
+        cursorAt: { top: -20, left: 10 },
+        handle: '.glm-custom-sortable-group-handle',
         update: function( event, ui ){
             var sortedGroupIds = $(this).sortable('toArray');
-            console.log( 'GroupIds:', sortedGroupIds );
 
             // Send new order via AJAX
             var formData = {
@@ -189,11 +272,21 @@ jQuery(document).ready(function($) {
             });
         }
     });
+    // Setup the sorting for the Fields
     $('.sortable-fields').sortable({
+        items: '.glm-custom-sort-field-container',
         cursor: 'move',
-        handle: '.glm-cfield-handle',
+        cursorAt: { top: -20, left: 10 },
+        handle: '.glm-custom-sortable-handle',
+        start: function ( event, ui ) {
+        },
+        stop: function ( event, ui ) {
+            // Make sure we show any options again when were done dragging
+            $(this).find(".picklist-options-container").css("display","table-row");
+        },
         update: function( event, ui ){
             var sortedIds = $(this).sortable('toArray');
+            console.log( sortedIds );
 
             // Send new order via AJAX
             var formData = {
@@ -211,6 +304,7 @@ jQuery(document).ready(function($) {
             });
         }
     });
+
     /*
      * Edit area tabs
      */
@@ -228,11 +322,8 @@ jQuery(document).ready(function($) {
         $('#' + table).removeClass('glm-hidden');
 
     });
-    $("#newFieldDialog").dialog({
-        autoOpen: false,
-        minWidth: 400,
-        dialogClass: "glm-dialog-no-close"
-    });
+
+    // Dialogs for Groups, Fields, Delete Confirmations
     $("#editFieldDialog").dialog({
         autoOpen: false,
         minWidth: 400,
@@ -243,6 +334,11 @@ jQuery(document).ready(function($) {
         minWidth: 450,
         dialogClass: 'glm-dialog-no-close'
     });
+    $('#cfOptionDialog').dialog({
+        autoOpen: false,
+        minWidth: 450,
+        dialogClass: 'glm-dialog-no-close'
+    });
     $("#deleteFieldDialog").dialog({
         autoOpen: false,
         minWidth: 400,
@@ -253,9 +349,12 @@ jQuery(document).ready(function($) {
         minWidth: 400,
         dialogClass: "glm-dialog-no-close"
     });
-    $('#newFieldButton').click( function() {
-        $("#newFieldDialog").dialog("open");
+    $('#deleteOptionDialog').dialog({
+        autoOpen: false,
+        minWidth: 400,
+        dialogClass: "glm-dialog-no-close"
     });
+    // Event handler for the new Group Button
     $('#newGroupButton').click( function(){
         $('#groupId').val('');
         $('#groupName').val('');
@@ -263,6 +362,7 @@ jQuery(document).ready(function($) {
         $('#editGroupOption2').val('addNewGroup');
         $('#cfGroupDialog').dialog('open');
     });
+    // Event handler for the group edit
     $('.groupEdit').click(function(){
         var groupId      = $(this).attr('data-groupId');
         var groupName    = $(this).attr('data-groupName');
@@ -278,9 +378,9 @@ jQuery(document).ready(function($) {
         }
         $('#cfGroupDialog').dialog('open');
     });
+    // Event handler for Adding Fields
     $('.newFieldButton').click(function(){
         var groupId = $(this).data('id');
-        console.log( 'groupid: ', groupId );
         $('#editGroupID').val(groupId);
         $('#editFieldOption2').val('addNew');
         $('#editFieldSubmit').val('Add Field');
@@ -293,6 +393,7 @@ jQuery(document).ready(function($) {
         $('#editRequired').prop('checked', false);
 
     });
+    // Event handler for the Field Edit
     $('.editField').click( function() {
         var fieldID     = $(this).attr('data-fieldID');
         var fieldName   = $(this).attr('data-fieldName');
@@ -301,9 +402,6 @@ jQuery(document).ready(function($) {
         var required    = $(this).attr('data-required');
         var groupID     = $(this).attr('data-groupid');
 
-        console.log( 'adminSearch', adminSearch );
-        //console.log( fieldType );
-
         $('#editFieldID').val(fieldID);
         $('#editFieldName').val(fieldName.trim());
         $('#editFieldType').val(fieldType);
@@ -312,55 +410,117 @@ jQuery(document).ready(function($) {
         $('#editFieldSubmit').val('Update Field');
 
         if (adminSearch === '1') {
-            //console.log('setting the checked to true');
             $('#editAdminSearch').prop('checked', true);
         } else {
-            //console.log('setting the checked to false');
             $('#editAdminSearch').prop('checked', false);
         }
         // check required fields
         if (required === '1') {
             $('#editRequired').prop('checked', true);
         } else {
-            //console.log('setting the checked to false');
             $('#editRequired').prop('checked', false);
         }
         $("#editFieldDialog").dialog("open");
     });
+    // Event handler for the option form
+    $('.fieldoption').click(function(){
+        // Unset all fields in this form
+        var f_id             = $('#optionId');
+        var f_field_id       = $('#fieldId');
+        var f_option_name    = $('#optionName');
+        var f_option_default = $('#optionDefault');
+        f_id.val('');
+        f_field_id.val('');
+        f_option_name.val('');
+        f_option_default.prop('checked', false);
+
+        // if there's a data id attr
+        var optionId = $(this).attr('data-id');
+        var fieldId = $(this).attr('data-field-id');
+        f_field_id.val(fieldId);
+
+        if ( optionId ) {
+            // Setup field values
+            f_id.val( $(this).attr('data-id') );
+            f_field_id.val( $(this).attr('data-field-id') );
+            f_option_name.val( $(this).attr('data-option-name') );
+            if ( $(this).attr('data-option-default') === '1' ) {
+                f_option_default.prop('checked', true);
+            }
+        }
+
+        $('#cfOptionDialog').dialog('open');
+    });
+    // Event handler for edit field submit
+    $('#editFieldSubmit').click(function(){
+        // Need to lock the picklist
+        // They should not be able to switch to of from picklist
+    });
+    // Field cancel event
     $('#editFieldCancel').click( function() {
         $("#editFieldDialog").dialog("close");
     });
-    $('#newFieldCancel').click( function() {
-        $("#newFieldDialog").dialog("close");
-    });
+    // Group cancel event
     $('#newGroupCancel').click( function() {
         $("#cfGroupDialog").dialog("close");
     });
+    // Option cancel event
+    $('#cfOptionCancel').click(function(){
+        $('#cfOptionDialog').dialog('close');
+    });
 
+    // Delete Field event
     var id = false;
     $('.deleteFieldButton').click( function() {
         id = $(this).attr('data-fieldID');
         $("#deleteFieldDialog").dialog("open");
     });
+    // Delete Field Confirmation Event
     $('#deleteFieldConfirm').click( function() {
         $("#deleteFieldDialog").dialog("close");
         window.location.href = "{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields&option2=delete&id=" + id;
     });
+    // Delete Field Cancel Event
     $('#deleteFieldCancel').click( function() {
         $("#deleteFieldDialog").dialog("close");
     });
+    // Group delete event
     var groupId = false;
     $('.deletGroupButton').click( function() {
         groupId = $(this).attr('data-groupId');
         $("#deleteGroupDialog").dialog("open");
     });
+    // Group delete confirmation event
     $('#deleteGroupConfirm').click( function() {
         $("#deleteGroupDialog").dialog("close");
         window.location.href = "{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields&option2=deleteGroup&id=" + groupId;
     });
+    // Group delete cancel event
     $('#deleteGroupCancel').click(function(){
         $("#deleteGroupDialog").dialog("close");
     });
+    // Option Delete event
+    var optionId = false;
+    $('.deleteOptionButton').click(function(){
+        optionId = $(this).attr('data-option-id');
+        $('#deleteOptionDialog').dialog('open');
+    });
+    // Option Delete confirmation
+    $('#deleteOptionConfirm').click(function(){
+        $('#deleteOptionDialog').dialog('close');
+        window.location.href = "{$thisUrl}?page={$thisPage}&glm_action={$glm_action}&option=customfields&option2=deleteOption&id=" + optionId;
+    });
+    // Option Delete cancel
+    $('#deleteOptionCancel').click(function(){
+        $('#deleteOptionDialog').dialog('close');
+    });
+    // Hide any custom field options for the field while mousedown
+    $('.glm-custom-sortable-handle').mousedown(function() {
+        $(this).parent().parent().find(".picklist-options-container").css("display","none");
+    });
+    $('.glm-custom-sortable-handle').mouseup(function() {
+        $(this).parent().parent().find(".picklist-options-container").css("display","table-row");
+    });
 
     // Flash certain elements for a short time after display
     $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);