UI updates for #3200

public/v1/css/firefly.css

@@ -90,6 +90,9 @@ p.tagcloud .label {
 .piggy-handle {
     cursor: move;
 }
+.object-handle {
+    cursor: move;
+}
 .rule-handle {
     cursor: move;
 }

public/v1/js/ff/accounts/index.js

@@ -0,0 +1,97 @@
+/*
+ * index.js
+ * Copyright (c) 2020 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+var fixObjectHelper = function (e, tr) {
+    "use strict";
+    var $originals = tr.children();
+    var $helper = tr.clone();
+    $helper.children().each(function (index) {
+        // Set helper cell sizes to match the original sizes
+        $(this).width($originals.eq(index).width());
+    });
+    return $helper;
+};
+
+$(function () {
+    "use strict";
+    // table may have multiple tbody's.
+    $('#sortable-table').find('tbody').sortable(
+        {
+            helper: fixObjectHelper,
+            stop: stopSorting,
+            items: 'tr.sortable-object',
+            handle: '.object-handle',
+            start: function (event, ui) {
+                // Build a placeholder cell that spans all the cells in the row
+                var cellCount = 0;
+                $('td, th', ui.helper).each(function () {
+                    // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
+                    var colspan = 1;
+                    var colspanAttr = $(this).attr('colspan');
+                    if (colspanAttr > 1) {
+                        colspan = colspanAttr;
+                    }
+                    cellCount += colspan;
+                });
+
+                // Add the placeholder UI - note that this is the item's content, so TD rather than TR
+                ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
+            }
+        }
+    );
+});
+
+
+function stopSorting() {
+    "use strict";
+    $.each($('#sortable-table>tbody>tr.sortable-object'), function (i, v) {
+        var holder = $(v);
+        var parentBody = holder.parent();
+        var position = parseInt(holder.data('position'));
+        var originalOrder = parseInt(holder.data('order'));
+        var id = holder.data('id');
+        var newOrder;
+
+        if (position === i) {
+            // not changed, position is what it should be.
+            return;
+        }
+
+        if (position < i) {
+            // position is less.
+            console.log('Account #' + id + ' has moved down from position ' + originalOrder + ' to ' + (i + 1));
+        }
+        if (position > i) {
+            console.log('Account #' + id + ' has moved up from position ' + originalOrder + ' to ' + (i + 1));
+        }
+        // update position:
+        holder.data('position', i);
+        newOrder = i + 1;
+
+        // post new position via API!
+        //$.post('api/v1/accounts/' + id, {order: newOrder, _token: token});
+        $.ajax({
+                   url: 'api/v1/accounts/' + id,
+                   data: {order: newOrder},
+                   type: 'PUT',
+               });
+    });
+
+}

resources/views/v1/accounts/index.twig

@@ -71,12 +71,13 @@
 {% endblock %}
 
 {% block styles %}
-    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all"/>
+
 {% endblock %}
 
 {% block scripts %}
     <script type="text/javascript" nonce="{{ JS_NONCE }}">
         var objectType = '{{ objectType|escape }}';
     </script>
-    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}" src="v1/js/ff/accounts/index.js?v={{ FF_VERSION }}"></script>
 {% endblock %}

resources/views/v1/list/accounts.twig

@@ -1,43 +1,37 @@
 <div style="padding-left:8px;">
     {{ accounts.render|raw }}
 </div>
-<table class="table table-hover sortable">
+<table class="table table-hover" id="sortable-table">
     <thead>
     <tr>
-        <th class="hidden-sm hidden-xs" data-defaultsort="disabled">&nbsp;</th>
-        <th data-defaultsign="az">{{ trans('list.name') }}</th>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
+        <th>{{ trans('list.name') }}</th>
         {% if objectType == 'asset' %}
-            <th data-defaultsign="az" class="hidden-sm hidden-xs hidden-md">{{ trans('list.role') }}</th>
+            <th class="hidden-sm hidden-xs hidden-md">{{ trans('list.role') }}</th>
         {% endif %}
         {% if objectType == 'liabilities' %}
-            <th data-defaultsign="az">{{ trans('list.liability_type') }}</th>
-            <th data-defaultsign="_19">{{ trans('list.interest') }} ({{ trans('list.interest_period') }})</th>
+            <th>{{ trans('list.liability_type') }}</th>
+            <th>{{ trans('list.interest') }} ({{ trans('list.interest_period') }})</th>
         {% endif %}
-        <th data-defaultsign="az" class="hidden-sm hidden-xs">{{ trans('form.account_number') }}</th>
-        <th data-defaultsign="_19">{{ trans('list.currentBalance') }}</th>
+        <th class="hidden-sm hidden-xs">{{ trans('form.account_number') }}</th>
+        <th>{{ trans('list.currentBalance') }}</th>
         <th class="hidden-sm hidden-xs">{{ trans('list.active') }}</th>
         {# hide last activity to make room for other stuff #}
         {% if objectType != 'liabilities' %}
-            <th data-defaultsign="month" class="hidden-sm hidden-xs hidden-md">{{ trans('list.lastActivity') }}</th>
+            <th class="hidden-sm hidden-xs hidden-md">{{ trans('list.lastActivity') }}</th>
         {% endif %}
-        <th data-defaultsign="_19" style="width:15%;"
+        <th style="width:15%;"
             class="hidden-sm hidden-xs hidden-md">{{ trans('list.balanceDiff') }}</th>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
     </tr>
     </thead>
     <tbody>
     {% for account in accounts %}
-        <tr>
+        <tr class="sortable-object" data-id="{{ account.id }}" data-order="{{ account.order }}" data-position="{{ loop.index0 }}">
             <td class="hidden-sm hidden-xs">
-                <div class="btn-group btn-group-xs edit_tr_buttons"><a class="btn btn-default btn-xs" title="{{ 'edit'|_ }}"
-                                                                       href="{{ route('accounts.edit',account.id) }}"><i
-                                class="fa fa-fw fa-pencil"></i></a>{% if objectType == 'asset' %}<a class="btn btn-default btn-xs"
-                                                                                                    title="{{ 'reconcile_this_account'|_ }}"
-                                                                                                    href="{{ route('accounts.reconcile',account.id) }}"><i
-                                class="fa fa-fw fa-check"></i></a>{% endif %}<a class="btn btn-danger btn-xs" title="{{ 'delete'|_ }}"
-                                                                                href="{{ route('accounts.delete',account.id) }}"><i
-                                class="fa fa-fw fa-trash-o"></i></a></div>
+                <i class="fa fa-fw fa-bars object-handle"></i>
             </td>
-            <td data-value="{{ account.name }}">
+            <td>
                 <a href="{{ route('accounts.show',account.id) }}">{{ account.name }}</a>
                 {% if account.location %}
                     <i class="fa fa-fw fa-map-marker"></i>
@@ -57,17 +51,17 @@
             {% endif %}
             {% if objectType == 'liabilities' %}
                 <td>{{ account.accountTypeString }}</td>
-            <td data-value="{{ account.interest }}">
+            <td>
                 {{ account.interest }}% ({{ account.interestPeriod|lower }})
             </td>
             {% endif %}
             <td class="hidden-sm hidden-xs">{{ account.iban }}{% if account.iban == '' %}{{ accountGetMetaField(account, 'account_number') }}{% endif %}</td>
-            <td data-value="{{ account.endBalance }}" style="text-align: right;">
+            <td style="text-align: right;">
                 <span style="margin-right:5px;">
                 {{ formatAmountByAccount(account, account.endBalance) }}
                 </span>
             </td>
-            <td class="hidden-sm hidden-xs" data-value="{{ account.active }}">
+            <td class="hidden-sm hidden-xs">
                 {% if account.active %}
                     <i class="fa fa-fw fa-check"></i>
                 {% else %}
@@ -77,21 +71,33 @@
             {# hide last activity to make room for other stuff #}
             {% if objectType != 'liabilities' %}
                 {% if account.lastActivityDate %}
-                    <td class="hidden-sm hidden-xs hidden-md" data-value="{{ account.lastActivityDate.format('Y-m-d H-i-s') }} ">
+                    <td class="hidden-sm hidden-xs hidden-md">
                         {{ account.lastActivityDate.formatLocalized(monthAndDayFormat) }}
                     </td>
                 {% else %}
-                    <td class="hidden-sm hidden-xs hidden-md" data-value="0000-00-00 00-00-00">
+                    <td class="hidden-sm hidden-xs hidden-md">
                         <em>{{ 'never'|_ }}</em>
                     </td>
                 {% endif %}
             {% endif %}
-            <td class="hidden-sm hidden-xs hidden-md" data-value="{{ account.difference }}" style="text-align: right;">
+            <td class="hidden-sm hidden-xs hidden-md" style="text-align: right;">
                 <span style="margin-right:5px;">
                     {{ formatAmountByAccount(account, account.difference) }}
                 </span>
             </td>
-
+            <td class="hidden-sm hidden-xs">
+                <div class="btn-group btn-group-xs pull-right">
+                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        {{ 'actions'|_ }} <span class="caret"></span></button>
+                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                        <li><a href="{{ route('accounts.edit',account.id) }}"><i class="fa fa-fw fa-pencil"></i> {{ 'edit'|_ }}</a></li>
+                        <li><a href="{{ route('accounts.delete',account.id) }}"><i class="fa fa-fw fa-trash"></i> {{ 'delete'|_ }}</a></li>
+                        {% if objectType == 'asset' %}
+                        <li><a href="{{ route('accounts.reconcile',account.id) }}"><i class="fa fa-fw fa-check"></i> {{ 'reconcile_this_account'|_ }}</a></li>
+                        {% endif %}
+                    </ul>
+                </div>
+            </td>
         </tr>
 
     {% endfor %}