From 50ee1a11f6ab02ad5398c4f040ae22c14db50c10 Mon Sep 17 00:00:00 2001 From: James Cole Date: Fri, 24 Jul 2020 16:40:32 +0200 Subject: [PATCH] UI updates for #3200 --- public/v1/css/firefly.css | 3 + public/v1/js/ff/accounts/index.js | 97 ++++++++++++++++++++++++++ resources/views/v1/accounts/index.twig | 5 +- resources/views/v1/list/accounts.twig | 60 +++++++++------- 4 files changed, 136 insertions(+), 29 deletions(-) create mode 100644 public/v1/js/ff/accounts/index.js diff --git a/public/v1/css/firefly.css b/public/v1/css/firefly.css index 520c32df7a..6d9493b98a 100644 --- a/public/v1/css/firefly.css +++ b/public/v1/css/firefly.css @@ -90,6 +90,9 @@ p.tagcloud .label { .piggy-handle { cursor: move; } +.object-handle { + cursor: move; +} .rule-handle { cursor: move; } diff --git a/public/v1/js/ff/accounts/index.js b/public/v1/js/ff/accounts/index.js new file mode 100644 index 0000000000..9f5e57d507 --- /dev/null +++ b/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 . + */ + +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(' '); + } + } + ); +}); + + +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', + }); + }); + +} diff --git a/resources/views/v1/accounts/index.twig b/resources/views/v1/accounts/index.twig index dc458f52bb..8621d52b4a 100644 --- a/resources/views/v1/accounts/index.twig +++ b/resources/views/v1/accounts/index.twig @@ -71,12 +71,13 @@ {% endblock %} {% block styles %} - + {% endblock %} {% block scripts %} - + + {% endblock %} diff --git a/resources/views/v1/list/accounts.twig b/resources/views/v1/list/accounts.twig index 00749294d6..7df41abd27 100644 --- a/resources/views/v1/list/accounts.twig +++ b/resources/views/v1/list/accounts.twig @@ -1,43 +1,37 @@
{{ accounts.render|raw }}
- +
- - + + {% if objectType == 'asset' %} - + {% endif %} {% if objectType == 'liabilities' %} - - + + {% endif %} - - + + {# hide last activity to make room for other stuff #} {% if objectType != 'liabilities' %} - + {% endif %} - + {% for account in accounts %} - + - - {% endif %} - - {% else %} - {% endif %} {% endif %} - - + {% endfor %}
{{ trans('list.name') }}{{ trans('list.name') }}{{ trans('list.liability_type') }}{{ trans('list.interest') }} ({{ trans('list.interest_period') }}){{ trans('list.liability_type') }}{{ trans('list.interest') }} ({{ trans('list.interest_period') }}){{ trans('list.currentBalance') }}{{ trans('list.currentBalance') }}
+ {{ account.name }} {% if account.location %} @@ -57,17 +51,17 @@ {% endif %} {% if objectType == 'liabilities' %} {{ account.accountTypeString }} + {{ account.interest }}% ({{ account.interestPeriod|lower }}) + {{ formatAmountByAccount(account, account.endBalance) }}