Drag and Drop for Invoice Items

ajax.php

@@ -745,3 +745,22 @@ if (isset($_POST['update_quote_items_order'])) {
     exit;
 }
 
+if (isset($_POST['update_invoice_items_order'])) {
+    // Update multiple invoice items order
+    enforceUserPermission('module_sales', 2);
+
+    $positions = $_POST['positions'];
+    $invoice_id = intval($_POST['invoice_id']);
+
+    foreach ($positions as $position) {   
+        $id = intval($position['id']);
+        $order = intval($position['order']);
+
+        mysqli_query($mysqli, "UPDATE invoice_items SET item_order = $order WHERE item_invoice_id = $invoice_id AND item_id = $id");
+    }
+
+    // return a response
+    echo json_encode(['status' => 'success']);
+    exit;
+}
+

invoice.php

@@ -157,6 +157,7 @@ if (isset($_GET['invoice_id'])) {
 
 
     ?>
+    <link rel="stylesheet" href="/plugins/dragula/dragula.min.css">
 
     <ol class="breadcrumb d-print-none">
         <?php if (isset($_GET['client_id'])) { ?>
@@ -330,7 +331,7 @@ if (isset($_GET['invoice_id'])) {
                 <div class="col-md-12">
                     <div class="card">
                         <div class="table-responsive">
-                            <table class="table">
+                            <table class="table" id="items">
                                 <thead>
                                 <tr>
                                     <th class="d-print-none"></th>
@@ -373,7 +374,7 @@ if (isset($_GET['invoice_id'])) {
                                         $down_hidden = "";
                                     }
                                     ?>
-                                    <tr>
+                                    <tr data-item-id="<?php echo $item_id; ?>">
                                         <td class="d-print-none">
                                             <?php if ($invoice_status !== "Paid" && $invoice_status !== "Cancelled") { ?>
                                                 <div class="dropdown">
@@ -398,7 +399,7 @@ if (isset($_GET['invoice_id'])) {
 
                                             <?php } ?>
                                         </td>
-                                        <td><?php echo $item_name; ?></td>
+                                        <td class="grab-cursor"><?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, $invoice_currency_code); ?></td>
@@ -704,7 +705,7 @@ require_once "includes/footer.php";
 <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
 <script>
     $(function() {
-        var availableProducts = <?php echo $json_products?>;
+        var availableProducts = <?php echo $json_products ?? '""'?>;
 
         $("#name").autocomplete({
             source: availableProducts,
@@ -1171,3 +1172,39 @@ require_once "includes/footer.php";
         }
     }
 </script>
+
+<script src="plugins/dragula/dragula.min.js"></script>
+<script>
+$(document).ready(function() {
+    var container = $('table#items tbody')[0];
+
+    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_invoice_items_order: true,
+                    invoice_id: <?php echo $invoice_id; ?>,
+                    positions: positions
+                },
+                success: function(data) {
+                    // Handle success
+                },
+                error: function(error) {
+                    console.error('Error updating order:', error);
+                }
+            });
+        });
+});
+</script>

quote.php

@@ -553,7 +553,7 @@ require_once "includes/footer.php";
 <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
 <script>
     $(function() {
-        var availableProducts = <?php echo $json_products ?>;
+        var availableProducts = <?php echo $json_products ?? '""' ?>;
 
         $("#name").autocomplete({
             source: availableProducts,