Completed basic functionality for sorting of custom fields (not for picklist options...

Added comment and separator bar field types.

diff --git a/classes/data/dataCustomFields.php b/classes/data/dataCustomFields.php
index 2544935..45538ba 100644 (file)
--- a/classes/data/dataCustomFields.php
+++ b/classes/data/dataCustomFields.php
@@ -161,12 +161,20 @@ class GlmDataFieldsCustomFields extends GlmDataAbstract
                 'use'      => 'a'
             ),
 
+            // Field Order Insert
+            'field_order_insert' => array(
+                'field'     => 'field_order',
+                'type'      => 'integer',
+                'default'   => 9999,
+                'use'       => 'i'
+            ),
+
             // Field Order
             'field_order' => array(
                 'field'     => 'field_order',
                 'type'      => 'integer',
                 'view_only' => true,
-                'use'       => 'a'
+                'use'       => 'lg'
             ),
 
             // Priority Display

diff --git a/config/plugin.ini b/config/plugin.ini
index 0a3c535..4139d3d 100644 (file)
--- a/config/plugin.ini
+++ b/config/plugin.ini
@@ -9,6 +9,8 @@
 ;
 ; Custom Field Types
 ;
+custom_field_type['comment']        = 'Text for Display Only'
+custom_field_type['hr']             = 'Horizontal Separator'
 custom_field_type['text']           = 'Single Line Text Field'
 custom_field_type['textarea']       = 'Multi-Line Text Area'
 custom_field_type['checkbox']       = 'Checkbox'

diff --git a/views/admin/ajax/newField.html b/views/admin/ajax/newField.html
index 4ba440c..275e9f3 100644 (file)
--- a/views/admin/ajax/newField.html
+++ b/views/admin/ajax/newField.html
@@ -1,7 +1,7 @@
 {* A single line for the custom fields edit table *}
-    <tbody id="field_{$fieldData.id}">
+    <tbody id="field_{$fieldData.id}" class="sort-field-container">
         <tr class="FieldRow_{$fieldData.id}">
-            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$fieldData.id}">{$fieldData.field_name}</th>
+            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$fieldData.id}" class="sortable-handle">{$fieldData.field_name}</th>
             <td style="text-align: left;" id="DisplayFieldTypeDescr_{$fieldData.id}">{$fieldData.field_type_descr}</td>
             <td style="text-align: left;" id="DisplayFieldPriority_{$fieldData.id}">{$fieldData.priority_display.name}</td>
             <td style="text-align: left;" id="DisplayFieldRequired_{$fieldData.id}">{$fieldData.required.name}</td>
@@ -21,7 +21,7 @@
             <td colspan="5" style="text-align: left; padding-left: 2rem;">Prompt: <span id="DisplayFieldPrompt_{$fieldData.id}">{$fieldData.field_prompt}</span></td>
         </tr>
     {if $t.field_type=='picklist'}
-        <tr id="PicklistField_{$fieldData.id}">
+        <tr id="PicklistField_{$fieldData.id}" class="picklist-options-container">
             <td colspan="5" style="padding-left: 2rem;">
                 <table id="PicklistOptions_{$fieldData.id}" width="100%">
                     <tr class="FieldRow_{$fieldData.id}" style="background-color: #ddd;">

diff --git a/views/admin/customFields/index.html b/views/admin/customFields/index.html
index 88255f8..751afdc 100644 (file)
--- a/views/admin/customFields/index.html
+++ b/views/admin/customFields/index.html
@@ -3,17 +3,6 @@
 {* New/Edit field form *}
 <div id="FieldDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Enter a New Custom Field">
     <table class="glm-admin-table" style="width: 100%">
-        <tr>
-            <th class="glm-required">Field Name:</th>
-            <td>
-                <input id="FieldName_{$fid}" type="text" name="field_name" class="glm-form-text-input-short">
-                <br>(for reference - keep short)
-            </td>
-        </tr>
-        <tr>
-            <th class="glm-required" style="width: 20%; white-space: nowrap;">User Prompt:</th>
-            <td><input id="FieldPrompt_{$fid}" type="text" name="field_prompt" class="glm-form-text-input"></td>
-        </tr>
         <tr>
             <th style="width: 20%; white-space: nowrap;" class="glm-required">Field Type:</th>
             <td>
@@ -26,13 +15,29 @@
             </td>
         </tr>
         <tr>
+            <th class="glm-required">Field Name:</th>
+            <td>
+                <input id="FieldName_{$fid}" type="text" name="field_name" class="glm-form-text-input-short">
+                <br>(for reference - keep short)
+            </td>
+        </tr>
+        <tr>
+            <th class="glm-required" style="width: 20%; white-space: nowrap;">
+                <span id="UserPrompt_{$fid}">User Prompt:</span>
+            </th>
+            <td>
+                <input id="FieldPrompt_{$fid}" type="text" name="field_prompt" class="glm-form-text-input">
+                <textarea id="FieldComment_{$fid}" name="field_comment" style="width: 100%;"></textarea>
+            </td>
+        </tr>
+        <tr id="FieldPriorityContainer_{$fid}">
             <th style="width: 20%; white-space: nowrap;">Important Field:</th>
             <td>
                 <input id="FieldPriorityDisplay_{$fid}" type="checkbox" name="priority_display">
                 Display when limited output is selected.
             </td>
         </tr>
-        <tr>
+        <tr id="FieldRequiredContainer_{$fid}">
             <th style="width: 20%; white-space: nowrap;">Required:</th>
             <td><input id="FieldRequired_{$fid}" type="checkbox" name="required"></td>
         </tr>
@@ -116,7 +121,17 @@
             </td>
         </tr>
         <tr class="FieldRow_{$t.id} FieldRow_{$t.id}_replace">
-            <td colspan="5" style="text-align: left; padding-left: 2rem;">Prompt: <span id="DisplayFieldPrompt_{$t.id}">{$t.field_prompt}</span></td>
+            <td colspan="5" style="text-align: left; padding-left: 2rem;">
+   {if $t.field_type!='hr'}
+                &nbsp;
+    {if $t.field_type=='comment'}
+                Comment/Description:
+    {else}
+                Prompt:
+    {/if} 
+                <span id="DisplayFieldPrompt_{$t.id}">{$t.field_prompt}</span>
+   {/if}
+            </td>
         </tr>
     {if $t.field_type=='picklist'}
         <tr id="PicklistField_{$t.id}" class="picklist-options-container">
@@ -190,11 +205,15 @@ jQuery(document).ready(function($) {
         $('#FieldSubmit_{$fid}').data('data-fieldId', '');
         $('#FieldName_{$fid}').val('');
         $('#FieldPrompt_{$fid}').val('');
+        $('#FieldComment_{$fid}').val('');
         $('#FieldType_{$fid}').prop('selectedIndex',0);
         $('#FieldPriorityDisplay_{$fid}').removeAttr('checked');
         $('#FieldRequired_{$fid}').removeAttr('checked');
 
         $('#FieldSubmit_{$fid}').html('New Custom Field');
+        $('#UserPrompt_{$fid}').html('User Prompt:');
+        displayedEditFields();
+        
         $("#FieldDialog_{$fid}").dialog('open');
     });
 
@@ -209,15 +228,17 @@ jQuery(document).ready(function($) {
         }
 
         // Collect the new / edited field data
+        var fieldType = $('#FieldType_{$fid}').val();
+        var fieldPrompt = (fieldType == 'comment' ? $('#FieldComment_{$fid}').val() : $('#FieldPrompt_{$fid}').val());
         var formData = {
             'action':           'glm_members_admin_ajax',
             'glm_action':       'customFields',
             'option':           customFieldSubmitOption,
             'fid':              '{$fid}',
             'fieldId':          $('#FieldSubmit_{$fid}').data('data-fieldId'),
-            'field_name':       $('#FieldName_{$fid}').val(),
-            'field_prompt':     $('#FieldPrompt_{$fid}').val(),
             'field_type':       $('#FieldType_{$fid}').val(),
+            'field_name':       $('#FieldName_{$fid}').val(),
+            'field_prompt':     fieldPrompt,
             'priority_display': $('#FieldPriorityDisplay_{$fid}').is(':checked'),
             'required':         $('#FieldRequired_{$fid}').is(':checked')
         };
@@ -294,24 +315,41 @@ jQuery(document).ready(function($) {
     $('body').on('click', '.EditFieldButton_{$fid}', editFieldButton_{$fid});
     function editFieldButton_{$fid}(e) {
 
-        var fieldId     = $(this).attr('data-fieldId');
-        var fieldName   = $(this).attr('data-fieldName');
-        var fieldPrompt = $(this).attr('data-fieldPrompt');
-        var fieldType   = $(this).attr('data-fieldType');
-        var priority    = ($(this).attr('data-priority') == 1);
-        var required    = ($(this).attr('data-required') == 1);
+        var fieldId      = $(this).attr('data-fieldId');
+        var fieldName    = $(this).attr('data-fieldName');
+        var fieldPrompt  = $(this).attr('data-fieldPrompt');
+        var fieldType    = $(this).attr('data-fieldType');
+        var priority     = ($(this).attr('data-priority') == 1);
+        var required     = ($(this).attr('data-required') == 1);
+        var promptText   = ( fieldType == "comment" ? 'Comment/Text:' : 'User Prompt:');
 
         $('#FieldSubmit_{$fid}').data('data-fieldId', fieldId);
         $('#FieldName_{$fid}').val(fieldName);
         $('#FieldPrompt_{$fid}').val(fieldPrompt);
+        $('#FieldComment_{$fid}').val(fieldPrompt);
         $('#FieldType_{$fid}').val(fieldType);
         $('#FieldPriorityDisplay_{$fid}').prop('checked', priority);
         $('#FieldRequired_{$fid}').prop('checked', required);
 
         $('#FieldSubmit_{$fid}').html('Update Custom Field');
+        $('#UserPrompt_{$fid}').html(promptText);
+
+        displayedEditFields(fieldType);
+        
         $("#FieldDialog_{$fid}").dialog("open");
     }
 
+    // Options Type selection actions
+    $('#FieldType_{$fid}').change( function(event) {
+        var fieldType = $('#FieldType_{$fid}').val();
+        var promptText  = ( fieldType == "comment" ? 'Comment/Text:' : 'User Prompt:');
+        $('#UserPrompt_{$fid}').html(promptText);
+
+        displayedEditFields( fieldType );
+        
+        $("#FieldDialog_{$fid}").dialog("open");
+    });
+    
     /*
      * Delete Field Dialog
      */
@@ -538,7 +576,7 @@ jQuery(document).ready(function($) {
     });
     
     // Make fields tables sortable
-    $('#FieldsTable_{$fid}').sortable({
+    var regFieldSortable = $('#FieldsTable_{$fid}').sortable({
         items: '.sort-field-container',
         cursorAt: { top: -20, left: 10 },
         handle: ".sortable-handle",
@@ -570,6 +608,27 @@ jQuery(document).ready(function($) {
         }
         
     });
+
+    // Display edit fields based on field type selected
+    function displayedEditFields( fieldType = '' ) {
+        if (fieldType == 'comment') {
+            $('#FieldPrompt_{$fid}').css("display","none");
+            $('#FieldComment_{$fid}').css("display","inline");
+            $('#FieldPriorityContainer_{$fid}').css("display","none");
+            $('#FieldRequiredContainer_{$fid}').css("display","none");
+        } else if (fieldType == 'hr') {
+            $('#FieldPrompt_{$fid}').css("display","none");
+            $('#FieldComment_{$fid}').css("display","none");
+            $('#FieldPriorityContainer_{$fid}').css("display","none");
+            $('#FieldRequiredContainer_{$fid}').css("display","none");
+        } else {
+            $('#FieldPrompt_{$fid}').css("display","inline");
+            $('#FieldComment_{$fid}').css("display","none");
+            $('#FieldPriorityContainer_{$fid}').css("display","table-row");
+            $('#FieldRequiredContainer_{$fid}').css("display","table-row");
+        }
+    }
+
     
     // Flash an element for a short time
     function flashElement(id) {

diff --git a/views/front/customFields/displayForm.html b/views/front/customFields/displayForm.html
index 69cdd29..c662dad 100644 (file)
--- a/views/front/customFields/displayForm.html
+++ b/views/front/customFields/displayForm.html
@@ -1,5 +1,15 @@
 {if $haveForm}
   {foreach $formFields.form as $field}
+    {if $field.field_type == 'comment'}
+                        <div class="glm-row">
+                            <div class="glm-small-12 glm-large-12 glm-columns glm-nowrap{if $field.required.value} glm-required{/if}"><p>{$field.field_prompt}</p></div>
+                        </div>
+    {/if}
+    {if $field.field_type == 'hr'}
+                        <div class="glm-row">
+                            <div class="glm-small-12 glm-large-12 glm-columns glm-nowrap{if $field.required.value} glm-required{/if}"><hr></div>
+                        </div>
+    {/if}
     {if $field.field_type == 'text'}
                         <div class="glm-row">
                             <div class="glm-small-12 glm-large-12 glm-columns glm-nowrap{if $field.required.value} glm-required{/if}">{$field.field_prompt}</div>