From da1bc18a47bf3cdc190122e807bddbaf6aa20874 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Tue, 28 Apr 2015 09:15:31 +0200
Subject: [PATCH] Better list for piggy banks.

---
 public/js/piggy-banks.js                    |  14 +-
 resources/views/list/piggy-banks.blade.php  |  56 ++++++++
 resources/views/piggy-banks/index.blade.php | 135 +++++++++++---------
 3 files changed, 142 insertions(+), 63 deletions(-)
 create mode 100644 resources/views/list/piggy-banks.blade.php

diff --git a/public/js/piggy-banks.js b/public/js/piggy-banks.js
index 7cef178001..b9ffc0401c 100644
--- a/public/js/piggy-banks.js
+++ b/public/js/piggy-banks.js
@@ -5,14 +5,24 @@ $(function () {
     if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
         googleLineChart('chart/piggy-history/' + piggyBankID, 'piggy-bank-history');
     }
-    $('#sortable').sortable(
+
+    $('#sortable tbody').sortable(
         {
+            helper: fixHelper,
             stop: stopSorting,
             handle: '.handle'
         }
     );
 });
 
+// Return a helper with preserved width of cells
+var fixHelper = function (e, ui) {
+    ui.children().each(function () {
+        $(this).width($(this).width());
+    });
+    return ui;
+};
+
 function addMoney(e) {
     var pigID = parseInt($(e.target).data('id'));
     $('#moneyManagementModal').empty().load('piggy-banks/add/' + pigID, function () {
@@ -33,7 +43,7 @@ function removeMoney(e) {
 function stopSorting() {
     $('.loadSpin').addClass('fa fa-refresh fa-spin');
     var order = [];
-    $.each($('#sortable>div'), function(i,v) {
+    $.each($('#sortable>tr'), function(i,v) {
         var holder = $(v);
         var id = holder.data('id');
         order.push(id);
diff --git a/resources/views/list/piggy-banks.blade.php b/resources/views/list/piggy-banks.blade.php
new file mode 100644
index 0000000000..279bd70494
--- /dev/null
+++ b/resources/views/list/piggy-banks.blade.php
@@ -0,0 +1,56 @@
+<table class="table table-striped" id="sortable">
+    <tbody>
+@foreach($piggyBanks as $piggyBank)
+    <tr data-id="{{$piggyBank->id}}">
+        <td style="width:60px;">
+            <i class="fa fa-fw fa-bars handle"></i>
+            <i class="loadSpin"></i>
+        </td>
+        <td style="width:80px;">
+            <div class="btn-group btn-group-xs">
+                <a href="{{route('piggy-banks.edit',$piggyBank->id)}}" class="btn btn-default btn-xs"><i class="fa fa-pencil fa-fw"></i></a>
+                <a href="{{route('piggy-banks.delete',$piggyBank->id)}}" class="btn btn-default btn-xs"><i class="fa fa-trash fa-fw"></i></a>
+            </div>
+        </td>
+        <td>
+            <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
+        </td>
+        <td>
+            <span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
+        </td>
+        <td style="text-align:right;width:40px;">
+            @if($piggyBank->savedSoFar > 0)
+                <a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
+            @endif
+        </td>
+
+        <td>
+            <div class="progress progress-striped" style="margin-bottom:0;">
+                <div
+                @if($piggyBank->percentage == 100)
+                    class="progress-bar progress-bar-success"
+                    @else
+                    class="progress-bar progress-bar-info"
+                    @endif
+                    role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
+                    {{$piggyBank->percentage}}%
+                </div>
+            </div>
+        </td>
+
+
+        <td style="width:40px;">
+            @if($piggyBank->leftToSave > 0)
+                <a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
+            @endif
+        </td>
+        <td style="width:200px;">
+            <span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
+            @if($piggyBank->leftToSave > 0)
+                <span title="Left to save">({!! Amount::format($piggyBank->leftToSave) !!})</span>
+            @endif
+        </td>
+    </tr>
+@endforeach
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/resources/views/piggy-banks/index.blade.php b/resources/views/piggy-banks/index.blade.php
index 72c7505e41..81e187779d 100644
--- a/resources/views/piggy-banks/index.blade.php
+++ b/resources/views/piggy-banks/index.blade.php
@@ -8,81 +8,94 @@
         </p>
     </div>
 </div>
-<div class="row" id="sortable">
-@foreach($piggyBanks as $piggyBank)
-    <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
+
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
         <div class="panel panel-default">
-            <div class="panel-heading">
-                <i class="loadSpin"></i>
-                <i class="fa fa-fw fa-bars handle"></i> <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
+            <div class="panel-heading">Piggy banks</div>
+            @include('list.piggy-banks')
+        </div>
+    </div>
+</div>
 
-                <!-- ACTIONS MENU -->
-                <div class="pull-right">
-                    <div class="btn-group">
-                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                            Actions
-                            <span class="caret"></span>
-                        </button>
-                        <ul class="dropdown-menu pull-right" role="menu">
-                            <li><a href="{{route('piggy-banks.edit',$piggyBank->id)}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-                            <li><a href="{{route('piggy-banks.delete',$piggyBank->id)}}"><i class="fa fa-trash fa-fw"></i> Delete</a></li>
-                        </ul>
-                    </div>
-                </div>
+{{--
+<div class="row" id="sortable">
+    @foreach($piggyBanks as $piggyBank)
+        <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <i class="loadSpin"></i>
+                    <i class="fa fa-fw fa-bars handle"></i> <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
 
-            </div>
-            <div class="panel-body">
-                <div class="row">
-                    <!-- One block (remove money) -->
-                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
-                        @if($piggyBank->savedSoFar > 0)
-                            <a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
-                        @endif
-                    </div>
-                    <!-- Some blocks (bar) -->
-                    <div class="col-lg-8 col-md-8 col-sm-4 col-xs-4">
-                        <div class="progress progress-striped">
-                            <div
-                            @if($piggyBank->percentage == 100)
-                                class="progress-bar progress-bar-success"
-                                @else
-                                class="progress-bar progress-bar-info"
-                                @endif
-                                role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
-                                {{$piggyBank->percentage}}%
-                            </div>
+                    <!-- ACTIONS MENU -->
+                    <div class="pull-right">
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                Actions
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu pull-right" role="menu">
+                                <li><a href="{{route('piggy-banks.edit',$piggyBank->id)}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
+                                <li><a href="{{route('piggy-banks.delete',$piggyBank->id)}}"><i class="fa fa-trash fa-fw"></i> Delete</a></li>
+                            </ul>
                         </div>
                     </div>
 
-
-                    <!-- One block (add money) -->
-                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
-                        @if($piggyBank->leftToSave > 0)
-                            <a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
-                        @endif
-
-                    </div>
-
                 </div>
-                <div class="row">
-                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
-                        <span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
+                <div class="panel-body">
+                    <div class="row">
+                        <!-- One block (remove money) -->
+                        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
+                            @if($piggyBank->savedSoFar > 0)
+                                <a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
+                            @endif
+                        </div>
+                        <!-- Some blocks (bar) -->
+                        <div class="col-lg-8 col-md-8 col-sm-4 col-xs-4">
+                            <div class="progress progress-striped">
+                                <div
+                                @if($piggyBank->percentage == 100)
+                                    class="progress-bar progress-bar-success"
+                                    @else
+                                    class="progress-bar progress-bar-info"
+                                    @endif
+                                    role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
+                                    {{$piggyBank->percentage}}%
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!-- One block (add money) -->
+                        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
+                            @if($piggyBank->leftToSave > 0)
+                                <a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
+                            @endif
+
+                        </div>
+
                     </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
-                        <span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: right;">
-                        @if($piggyBank->leftToSave > 0)
-                            <span title="Left to save">{!! Amount::format($piggyBank->leftToSave) !!}</span>
-                        @endif
+                    <div class="row">
+                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
+                            <span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
+                        </div>
+                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
+                            <span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
+                        </div>
+                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: right;">
+                            @if($piggyBank->leftToSave > 0)
+                                <span title="Left to save">{!! Amount::format($piggyBank->leftToSave) !!}</span>
+                            @endif
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-@endforeach
+    @endforeach
 </div>
 
+--}}
+
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
         <p>