From: Chuck Scott <cscott@gaslightmedia.com>
Date: Fri, 29 Dec 2017 22:09:25 +0000 (-0500)
Subject: Custom fields are now drag/drop sortable.
X-Git-Tag: v1.0.0^2~19
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=391023f4ae8bb565e7fc7a4aaeec15569fb7d154;p=WP-Plugins%2Fglm-member-db-customfields.git

Custom fields are now drag/drop sortable.

Field orders are updated as fields are dropped in their new positions.
Updated front-end custom field generation to use the correct sort order.
---

diff --git a/classes/data/dataCustomFields.php b/classes/data/dataCustomFields.php
index e93c288..2544935 100644
--- a/classes/data/dataCustomFields.php
+++ b/classes/data/dataCustomFields.php
@@ -340,8 +340,9 @@ class GlmDataFieldsCustomFields extends GlmDataAbstract
             'totalCost'         => 0
         );
 
-        // Try to get the form
-        $result['form'] = $this->getList("fid = '$fid'");
+        // Try to get the form in the specified sort order.
+        $result['form'] = $this->getList("fid = '$fid'", 'field_order');
+
 
         // Check if there's any priority display fields or fields with selected cost
         foreach ($result['form'] as $field) {
diff --git a/css/admin.css b/css/admin.css
index cdd8308..42c8567 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -18,3 +18,13 @@
         width: 100%;
     }
 }
+
+/* Styles for sorting */
+.ui-sortable-helper {
+}
+.sortable-handle {
+    cursor: pointer;
+}
+.sort-field-outofsortarea {
+    background-color: #eee;
+}
\ No newline at end of file
diff --git a/models/admin/ajax/customFields.php b/models/admin/ajax/customFields.php
index 9a2dee7..a629f52 100644
--- a/models/admin/ajax/customFields.php
+++ b/models/admin/ajax/customFields.php
@@ -77,8 +77,6 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
     public function modelAction ($actionData = false)
     {
 
-        trigger_error(print_r($_REQUEST,1),E_USER_NOTICE);
-
         switch($_REQUEST['option']) {
 
             case 'addNewField':
@@ -152,6 +150,29 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
 
                 break;
 
+            case 'sortOrder':       // Save sort order when done with drag and drop of field in list
+
+                // Fields should be in correct order in the submitted array and keys should be sequential from 0
+                foreach ($_REQUEST['sortedIds'] as $sortKey=>$sortVal) {
+
+                    // Strip "field_" from field ID number
+                    $fieldId = preg_replace("/[^0-9]/", "", $sortVal);
+
+                    // Update the field with the key as the order field
+                    $this->wpdb->update(
+                        GLM_MEMBERS_CUSTOMFIELDS_PLUGIN_DB_PREFIX.'custom_fields',
+                        array( 'field_order' => $sortKey ),
+                        array( 'id' => $fieldId ),
+                        array( '%d' ),
+                        array( '%d' )
+                    );
+
+                    // No need to reply to this
+
+                }
+                break;
+
+
             default:
 
         }
diff --git a/models/admin/customFields/index.php b/models/admin/customFields/index.php
index c0af6bb..209aff7 100644
--- a/models/admin/customFields/index.php
+++ b/models/admin/customFields/index.php
@@ -189,7 +189,7 @@ class GlmMembersAdmin_customFields_index extends GlmDataFieldsCustomFields
 
         // Get list of Custom Fields
         $where .= " AND fid = '$fid' ";
-        $custom_fields = $this->getList( $where, false, true);
+        $custom_fields = $this->getList( $where, 'field_order', true);
 
         if ( isset($custom_fields) && $custom_fields && count( $custom_fields ) > 0 ) {
             $haveCustomFields = true;
diff --git a/models/front/fields/detail.php b/models/front/fields/detail.php
index 231a1d6..6b4528d 100644
--- a/models/front/fields/detail.php
+++ b/models/front/fields/detail.php
@@ -68,7 +68,7 @@ class GlmMembersFront_fields_detail extends GlmDataFieldsCustomFields
             $where = "entity_id = $member_info_id";
 
             $fields_data    = new GlmDataFieldsCustomFieldsData($this->wpdb, $this->config);
-            $field_values   = $fields_data->getList($where);
+            $field_values   = $fields_data->getList($where, 'field_order');
 
             $sql = "
             SELECT mt.name
diff --git a/models/front/fields/list.php b/models/front/fields/list.php
index 50b7206..340f139 100644
--- a/models/front/fields/list.php
+++ b/models/front/fields/list.php
@@ -63,7 +63,7 @@ class GlmMembersFront_fields_list extends GlmDataFieldsCustomFields
             $where = "entity_id = $member_info_id";
 
             $fields_data        = new GlmDataFieldsCustomFieldsData($this->wpdb, $this->config);
-            $field_values       = $fields_data->getList($where);
+            $field_values       = $fields_data->getList($where, 'field_order');
 
             $sql = "
             SELECT mt.name
diff --git a/views/admin/customFields/index.html b/views/admin/customFields/index.html
index a73fb26..88255f8 100644
--- a/views/admin/customFields/index.html
+++ b/views/admin/customFields/index.html
@@ -97,9 +97,9 @@
     </thead>
 {if $haveCustomFields}
   {foreach $custom_fields as $t}
-    <tbody id="field_{$t.id}">
+    <tbody id="field_{$t.id}" class="sort-field-container">
         <tr class="FieldRow_{$t.id}">
-            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$t.id}">{$t.field_name}</th>
+            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$t.id}" class="sortable-handle">{$t.field_name}</th>
             <td style="text-align: left;" id="DisplayFieldTypeDescr_{$t.id}">{$t.field_type_descr}</td>
             <td style="text-align: left;" id="DisplayFieldPriority_{$t.id}">{$t.priority_display.name}</td>
             <td style="text-align: left;" id="DisplayFieldRequired_{$t.id}">{$t.required.name}</td>
@@ -119,7 +119,7 @@
             <td colspan="5" style="text-align: left; padding-left: 2rem;">Prompt: <span id="DisplayFieldPrompt_{$t.id}">{$t.field_prompt}</span></td>
         </tr>
     {if $t.field_type=='picklist'}
-        <tr id="PicklistField_{$t.id}">
+        <tr id="PicklistField_{$t.id}" class="picklist-options-container">
             <td colspan="5" style="padding-left: 2rem;">
                 <table id="PicklistOptions_{$t.id}" width="100%" style="margin-top: .5rem;">
                     <tr class="FieldRow_{$t.id}" style="background-color: #ddd;">
@@ -524,6 +524,52 @@ jQuery(document).ready(function($) {
         });
         
     };
+
+    /*
+     *  Code to handle drag-and-drop sorting of custom fields 
+     */
+
+    // Hide any custom field options for the field while mousedown
+    $('.sortable-handle').mousedown(function() {
+        $(this).parent().parent().find(".picklist-options-container").css("display","none");
+    });
+    $('.sortable-handle').mouseup(function() {
+        $(this).parent().parent().find(".picklist-options-container").css("display","table-row");
+    });
+    
+    // Make fields tables sortable
+    $('#FieldsTable_{$fid}').sortable({
+        items: '.sort-field-container',
+        cursorAt: { top: -20, left: 10 },
+        handle: ".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) {
+
+            // Create an array of the fields in the current order by field ID (field_{ id })
+            var sortedIds = $(this).sortable('toArray');
+
+            // Send new order via AJAX
+            var formData = {
+                'action':       'glm_members_admin_ajax',
+                'glm_action':   'customFields',
+                'option':       'sortOrder',
+                'sortedIds':    sortedIds
+            };
+            $.ajax({
+                type:       'POST',
+                url:        '{$ajaxUrl}',
+                data:       formData,
+                encode:     true,
+                dataType:   'text'
+            })
+        }
+        
+    });
     
     // Flash an element for a short time
     function flashElement(id) {