Fix drag/drop + sort

This commit is contained in:
James Cole
2020-06-09 17:16:21 +02:00
parent 6a08f52fa5
commit ccc82858ad
8 changed files with 72 additions and 18 deletions

View File

@@ -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);

View File

@@ -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']);
}

View File

@@ -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
*

View File

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

View File

@@ -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

View File

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

View File

@@ -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',
handle: '.handle',
connectWith: '.piggy-connected-list',
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');

View File

@@ -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>