Merge pull request #1171 from ssteeltm/drag-and-drop-items

Drag and drop items

admin_ticket_template_details.php

@@ -30,6 +30,7 @@ $ticket_template_updated_at = nullable_htmlentities($row['ticket_template_update
 $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE task_template_ticket_template_id = $ticket_template_id ORDER BY task_template_order ASC, task_template_id ASC");
 
 ?>
+<link rel="stylesheet" href="/plugins/dragula/dragula.min.css">
 
     <ol class="breadcrumb d-print-none">
         <li class="breadcrumb-item">
@@ -102,9 +103,14 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
                             $task_completion_estimate = intval($row['task_template_completion_estimate']);
                             $task_description = nullable_htmlentities($row['task_template_description']);
                             ?>
-                            <tr>
+                            <tr data-task-id="<?php echo $task_id; ?>">
                                 <td><i class="far fa-fw fa-square text-secondary"></i></td>
-                                <td><span class="text-secondary"><?php echo $task_completion_estimate; ?>m</span> - <?php echo $task_name; ?></td>
+                                <td>
+                                    <a href="#" class="grab-cursor">
+                                        <span class="text-secondary"><?php echo $task_completion_estimate; ?>m</span>
+                                        <span class="text-dark"> - <?php echo $task_name; ?></span>
+                                    </a>
+                                </td>
                                 <td class="text-right">
                                     <div class="float-right">
                                         <div class="dropdown dropleft text-center">
@@ -140,6 +146,41 @@ $sql_task_templates = mysqli_query($mysqli, "SELECT * FROM task_templates WHERE
     </div>
 
     <script src="js/pretty_content.js"></script>
+    <script src="plugins/dragula/dragula.min.js"></script>
+    <script>
+    $(document).ready(function() {
+        var container = $('.table 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('taskId'),
+                        order: index
+                    };
+                }).get();
+
+                // Send the new order to the server
+                $.ajax({
+                    url: 'ajax.php',
+                    method: 'POST',
+                    data: {
+                        update_task_templates_order: true, // Adjust the parameter name if needed
+                        ticket_template_id: <?php echo $ticket_template_id; ?>,
+                        positions: positions
+                    },
+                    success: function(data) {
+                        // Handle success
+                    },
+                    error: function(error) {
+                        console.error('Error updating order:', error);
+                    }
+                });
+            });
+    });
+    </script>
 
 <?php
 

ajax.php

@@ -522,4 +522,81 @@ if (isset($_POST['update_ticket_tasks_order'])) {
     // return a response
     echo json_encode(['status' => 'success']);
     exit;
-}
+}
+
+if (isset($_POST['update_task_templates_order'])) {
+    // Update multiple task templates order
+    enforceUserPermission('module_support', 2);
+
+    $positions = $_POST['positions'];
+    $ticket_template_id = intval($_POST['ticket_template_id']);
+
+    foreach ($positions as $position) {   
+        $id = intval($position['id']);
+        $order = intval($position['order']);
+
+        mysqli_query($mysqli, "UPDATE task_templates SET task_template_order = $order WHERE task_template_ticket_template_id = $ticket_template_id AND task_template_id = $id");
+    }
+
+    // return a response
+    echo json_encode(['status' => 'success']);
+    exit;
+}
+
+if (isset($_POST['update_quote_items_order'])) {
+    // Update multiple quote items order
+    enforceUserPermission('module_sales', 2);
+
+    $positions = $_POST['positions'];
+    $quote_id = intval($_POST['quote_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_quote_id = $quote_id AND item_id = $id");
+    }
+
+    // return a response
+    echo json_encode(['status' => 'success']);
+    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;
+}
+
+if (isset($_POST['update_recurring_invoice_items_order'])) {
+    // Update multiple recurring invoice items order
+    enforceUserPermission('module_sales', 2);
+
+    $positions = $_POST['positions'];
+    $recurring_id = intval($_POST['recurring_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_recurring_id = $recurring_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'])) { ?>
@@ -338,7 +339,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>
@@ -381,7 +382,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">
@@ -412,7 +413,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>
@@ -707,7 +708,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,
@@ -1174,3 +1175,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

@@ -115,6 +115,7 @@ if (isset($_GET['quote_id'])) {
     );
 
 ?>
+<link rel="stylesheet" href="/plugins/dragula/dragula.min.css">
 
     <ol class="breadcrumb d-print-none">
         <?php if (isset($_GET['client_id'])) { ?>
@@ -282,7 +283,7 @@ if (isset($_GET['quote_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>
@@ -335,7 +336,7 @@ if (isset($_GET['quote_id'])) {
                                             $up_hidden = "";
                                         } ?>
 
-                                        <tr>
+                                        <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">
@@ -369,7 +370,7 @@ if (isset($_GET['quote_id'])) {
                                                     </div>
                                                 <?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, $quote_currency_code); ?></td>
@@ -605,7 +606,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,
@@ -1014,3 +1015,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_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);
+                }
+            });
+        });
+});
+</script>

recurring_invoice.php

@@ -235,7 +235,7 @@ if (isset($_GET['recurring_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>
@@ -289,7 +289,7 @@ if (isset($_GET['recurring_id'])) {
                                     }
                                     ?>
 
-                                    <tr>
+                                    <tr data-item-id="<?php echo $item_id; ?>">
                                         <td class="d-print-none">
                                             <div class="dropdown">
                                                 <button class="btn btn-sm btn-light" type="button" data-toggle="dropdown">
@@ -319,7 +319,7 @@ if (isset($_GET['recurring_id'])) {
                                                 </div>
                                             </div>
                                         </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 $item_quantity; ?></td>
                                         <td class="text-right"><?php echo numfmt_format_currency($currency_format, $item_price, $recurring_currency_code); ?></td>
@@ -510,3 +510,40 @@ require_once "includes/footer.php";
         });
     });
 </script>
+
+<link rel="stylesheet" href="/plugins/dragula/dragula.min.css">
+<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_recurring_invoice_items_order: true,
+                    recurring_id: <?php echo $recurring_id; ?>,
+                    positions: positions
+                },
+                success: function(data) {
+                    // Handle success
+                },
+                error: function(error) {
+                    console.error('Error updating order:', error);
+                }
+            });
+        });
+});
+</script>