Added SortableJS Library, and updated Invoice, Quote and Recurring to use it. Added Grab Bar Icons next to action buttons. Will now sort in Mobile much more efficiently, update ajax vars for recurring invoice

This commit is contained in:
johnnyq
2025-04-13 13:29:16 -04:00
parent 60fe02bb47
commit 19b809b699
6 changed files with 132 additions and 148 deletions

View File

@@ -326,27 +326,37 @@ if (isset($_GET['quote_id'])) {
<tr data-item-id="<?php echo $item_id; ?>">
<td class="d-print-none">
<?php if ($quote_status !== "Invoiced" && $quote_status !== "Accepted" && $quote_status !== "Declined" && lookupUserPermission("module_sales") >= 2) { ?>
<div class="dropdown">
<button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"
data-toggle="ajax-modal"
data-ajax-url="ajax/ajax_item_edit.php"
data-ajax-id="<?php echo $item_id; ?>"
>
<i class="fa fa-fw fa-edit mr-2"></i>Edit
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger confirm-link" href="post.php?delete_quote_item=<?php echo $item_id; ?>">
<i class="fa fa-fw fa-trash mr-2"></i>Delete
</a>
<div class="row">
<div class="col">
<button type="button" class="btn btn-sm btn-light drag-handle">
<i class="fas fa-bars text-muted"></i>
</button>
</div>
<div class="col">
<div class="dropdown">
<button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"
data-toggle="ajax-modal"
data-ajax-url="ajax/ajax_item_edit.php"
data-ajax-id="<?php echo $item_id; ?>"
>
<i class="fa fa-fw fa-edit mr-2"></i>Edit
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger confirm-link" href="post.php?delete_quote_item=<?php echo $item_id; ?>">
<i class="fa fa-fw fa-trash mr-2"></i>Delete
</a>
</div>
</div>
</div>
</div>
<?php } ?>
</td>
<td class="grab-cursor"><?php echo $item_name; ?></td>
<td><?php echo $item_name; ?></td>
<td><?php echo nl2br($item_description); ?></td>
<td class="text-center"><?php echo number_format($item_quantity, 2); ?></td>
<td class="text-right"><?php echo numfmt_format_currency($currency_format, $item_price, $quote_currency_code); ?></td>
@@ -992,38 +1002,23 @@ require_once "includes/footer.php";
}
</script>
<script src="plugins/dragula/dragula.min.js"></script>
<script src="plugins/SortableJS/Sortable.min.js"></script>
<script>
$(document).ready(function() {
var container = $('table#items tbody')[0];
new Sortable(document.querySelector('table#items tbody'), {
handle: '.drag-handle',
animation: 150,
onEnd: function (evt) {
const rows = document.querySelectorAll('table#items tbody tr');
const positions = Array.from(rows).map((row, index) => ({
id: row.dataset.itemId,
order: index
}));
dragula([container])
.on('drop', function (el, target, source, sibling) {
// Handle the drop event to update the order in the database
var rows = $(container).children();
var positions = rows.map(function(index, row) {
return {
id: $(row).data('itemId'),
order: index
};
}).get();
// Send the new order to the server
$.ajax({
url: 'ajax.php',
method: 'POST',
data: {
update_quote_items_order: true,
quote_id: <?php echo $quote_id; ?>,
positions: positions
},
success: function(data) {
// Handle success
},
error: function(error) {
console.error('Error updating order:', error);
}
});
$.post('ajax.php', {
update_quote_items_order: true,
quote_id: <?php echo $quote_id; ?>,
positions: positions
});
}
});
</script>