Fix drag/drop + sort

app/Http/Controllers/PiggyBank/EditController.php

@@ -71,6 +71,7 @@ class EditController extends Controller
                       'targetamount' => $piggyBank->targetamount,
                       'targetdate'   => $targetDate,
                       'startdate'    => $startDate,
+                      'object_group' => $piggyBank->objectGroups->first() ? $piggyBank->objectGroups->first()->title : '',
                       'notes'        => null === $note ? '' : $note->text,
         ];
         session()->flash('preFilled', $preFilled);

app/Http/Controllers/PiggyBank/IndexController.php

@@ -132,8 +132,15 @@ class IndexController extends Controller
      */
     public function setOrder(Request $request, PiggyBank $piggyBank): JsonResponse
     {
-        $newOrder = (int) $request->get('order');
+        $objectGroupTitle = $request->get('objectGroupTitle');
+        $newOrder         = (int) $request->get('order');
         $this->piggyRepos->setOrder($piggyBank, $newOrder);
+        if ('' !== $objectGroupTitle) {
+            $this->piggyRepos->setObjectGroup($piggyBank, $objectGroupTitle);
+        }
+        if ('' === $objectGroupTitle) {
+            $this->piggyRepos->removeObjectGroup($piggyBank);
+        }
 
         return response()->json(['data' => 'OK']);
     }

app/Repositories/PiggyBank/ModifiesPiggyBanks.php

@@ -63,6 +63,17 @@ trait ModifiesPiggyBanks
         return true;
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function removeObjectGroup(PiggyBank $piggyBank): PiggyBank
+    {
+        $piggyBank->objectGroups()->sync([]);
+
+        return $piggyBank;
+    }
+
+
     /**
      * @param PiggyBankRepetition $repetition
      * @param string              $amount
@@ -250,6 +261,22 @@ trait ModifiesPiggyBanks
         return true;
     }
 
+
+    /**
+     * @inheritDoc
+     */
+    public function setObjectGroup(PiggyBank $piggyBank, string $objectGroupTitle): PiggyBank
+    {
+        $objectGroup = $this->findOrCreateObjectGroup($objectGroupTitle);
+        if (null !== $objectGroup) {
+            $piggyBank->objectGroups()->sync([$objectGroup->id]);
+        }
+
+        return $piggyBank;
+
+    }
+
+
     /**
      * @param array $data
      *

app/Repositories/PiggyBank/PiggyBankRepository.php

@@ -393,4 +393,6 @@ class PiggyBankRepository implements PiggyBankRepositoryInterface
 
         return $set;
     }
+
+
 }

app/Repositories/PiggyBank/PiggyBankRepositoryInterface.php

@@ -36,6 +36,21 @@ use Illuminate\Support\Collection;
  */
 interface PiggyBankRepositoryInterface
 {
+    /**
+     * @param PiggyBank $piggyBank
+     * @param string    $objectGroupTitle
+     *
+     * @return PiggyBank
+     */
+    public function setObjectGroup(PiggyBank $piggyBank, string $objectGroupTitle): PiggyBank;
+
+    /**
+     * @param PiggyBank $piggyBank
+     *
+     * @return PiggyBank
+     */
+    public function removeObjectGroup(PiggyBank $piggyBank): PiggyBank;
+
     /**
      * @param PiggyBank $piggyBank
      * @param string    $amount

public/v1/css/firefly.css

@@ -87,7 +87,7 @@ p.tagcloud .label {
     line-height: 2;
 }
 
-.handle {
+.piggy-handle {
     cursor: move;
 }
 

public/v1/js/ff/piggy-banks/index.js

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 /** global: token */
-var fixHelper = function (e, tr) {
+var fixPiggyHelper = function (e, tr) {
     "use strict";
     var $originals = tr.children();
     var $helper = tr.clone();
@@ -34,12 +34,13 @@ $(function () {
     $('.addMoney').on('click', addMoney);
     $('.removeMoney').on('click', removeMoney);
 
-    $('#sortable-piggy').find('tbody').sortable(
+    $('#piggy-sortable').find('tbody').sortable(
         {
-            helper: fixHelper,
+            helper: fixPiggyHelper,
             stop: stopSorting,
-            items: 'tr.sortable',
+            connectWith: '.piggy-connected-list',
-            handle: '.handle',
+            items: 'tr.piggy-sortable',
+            handle: '.piggy-handle',
             start: function (event, ui) {
                 // Build a placeholder cell that spans all the cells in the row
                 var cellCount = 0;
@@ -85,8 +86,10 @@ function stopSorting() {
     "use strict";
     $('.loadSpin').addClass('fa fa-refresh fa-spin');
 
-    $.each($('#sortable-piggy>tbody>tr.sortable'), function (i, v) {
+    $.each($('#piggy-sortable>tbody>tr.piggy-sortable'), function (i, v) {
         var holder = $(v);
+        var parentBody = holder.parent();
+        var objectGroupTitle = parentBody.data('title');
         var position = parseInt(holder.data('position'));
         var originalOrder = parseInt(holder.data('order'));
         var name = holder.data('name');
@@ -98,16 +101,16 @@ function stopSorting() {
         }
         if (position < i) {
             // position is less.
-            console.log('"' + name + '" has moved up from position ' + originalOrder + ' to ' + (i+1));
+            console.log('"' + name + '" ("' + objectGroupTitle + '") has moved up from position ' + originalOrder + ' to ' + (i + 1));
         }
         if (position > i) {
-            console.log('"' + name + '" has moved up from position ' + originalOrder + ' to ' + (i+1));
+            console.log('"' + name + '" ("' + objectGroupTitle + '") has moved up from position ' + originalOrder + ' to ' + (i + 1));
         }
         // update position:
         holder.data('position', i);
         newOrder = i+1;
 
-        $.post('piggy-banks/set-order/' + id, {order: newOrder, _token: token})
+        $.post('piggy-banks/set-order/' + id, {order: newOrder, objectGroupTitle: objectGroupTitle, _token: token})
     });
     $('.loadSpin').removeClass('fa fa-refresh fa-spin');
 

resources/views/v1/list/piggy-banks.twig

@@ -1,4 +1,4 @@
-<table class="table table-hover table-condensed" id="sortable-piggy">
+<table class="table table-hover table-condensed" id="piggy-sortable">
     <thead>
     <tr>
         <th colspan="2">&nbsp;</th>
@@ -13,12 +13,13 @@
 
     {% for objectGroupOrder, objectGroup in piggyBanks %}
         {% if objectGroup.piggy_banks|length > 0 %}
-            <tbody>
+            <tbody class="piggy-connected-list" {% if objectGroupOrder != 0 %}data-title="{{ objectGroup.object_group_title }}"{% else %}data-title=""{% endif %}>
             <tr>
-                <td colspan="10"><small>{{ objectGroup.object_group_title }}</small></td>
+                <td colspan="2">{% if objectGroupOrder != 0 %}<i class="fa fa-fw fa-bars group-handle"></i>{% endif %}</td>
+                <td colspan="8"><small>{{ objectGroup.object_group_title }}</small></td>
             </tr>
             {% for piggy in objectGroup.piggy_banks %}
-                <tr class="sortable" data-id="{{ piggy.id }}" data-name="{{ piggy.name }}" data-order="{{ piggy.order }}" data-position="{{ loop.index0 }}">
+                <tr class="piggy-sortable" data-id="{{ piggy.id }}" data-name="{{ piggy.name }}" data-order="{{ piggy.order }}" data-position="{{ loop.index0 }}">
                     <td class="visible-xs visible-sm hidden-md hidden-lg">
                         &nbsp;
                     </td>
@@ -29,7 +30,7 @@
                         </div>
                     </td>
                     <td style="width:60px;" class="hidden-sm hidden-xs">
-                        <i class="fa fa-fw fa-bars handle"></i>
+                        <i class="fa fa-fw fa-bars piggy-handle"></i>
                         <i class="loadSpin"></i>
                     </td>
                     <td style="width:100px;" class="hidden-sm hidden-xs">
@@ -98,6 +99,4 @@
             </tbody>
         {% endif %}
     {% endfor %}
-
-
 </table>