Sortable handle on styklister

debitor/ordre.php

@@ -6369,7 +6369,7 @@ function indsaet_linjer($ordre_id, $linje_id, $posnr)
 
 
 <link rel="stylesheet" href="orderIncludes/ordre_dragdrop.css">
-<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+<script src="../javascript/Sortable.min.js"></script>
 <script src="orderIncludes/ordre_dragdrop.js"></script>
 <!-- <script src ="orderIncludes/invoice_dragdrop.js"></script> -->
 <style>

finans/kassekladde.php

@@ -151,7 +151,7 @@ function defokuser(that, fgcolor, bgcolor){
 		that.style.backgroundColor = bgcolor; 
 	}
 </script>";
-print '<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>';
+print '<script src="../javascript/Sortable.min.js"></script>';
 include("kassekladde_includes/moveButton.php");
 include("kassekladde_includes/moveButtonStyle.php");
 ########################

javascript/stykliste_dragdrop.js

@@ -0,0 +1,94 @@
+// Restore scroll position after stykliste DnD reload
+const _styklisteScroll = sessionStorage.getItem('stykliste_scroll');
+if (_styklisteScroll !== null) {
+    sessionStorage.removeItem('stykliste_scroll');
+    window.scrollTo(0, parseInt(_styklisteScroll, 10));
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const tbody = document.getElementById('stykliste-tbody');
+    if (!tbody) return;
+
+    const rows = tbody.querySelectorAll('tr.stykliste-row');
+    if (rows.length === 0) return;
+
+    if (typeof Sortable === 'undefined') {
+        console.error('[stykliste_dragdrop] Sortable is not loaded');
+        return;
+    }
+
+    new Sortable(tbody, {
+        handle: '.stykliste-drag-handle',
+        draggable: '.stykliste-row',
+        ghostClass: 'sortable-ghost',
+        chosenClass: 'sortable-chosen',
+        animation: 150,
+        revertOnSpill: true,
+
+        onStart(evt) {
+            evt.item.classList.add('dragging');
+            document.body.classList.add('is-dragging');
+        },
+
+        onEnd(evt) {
+            evt.item.classList.remove('dragging');
+            document.body.classList.remove('is-dragging');
+
+            const currentRows = tbody.querySelectorAll('tr.stykliste-row');
+
+            // Build positions payload from data attributes on each row
+            const vare_id = currentRows[0].dataset.vareId;
+            const positions = [];
+            currentRows.forEach((row, index) => {
+                const styklisteId = row.dataset.styklisteId;
+                if (styklisteId) {
+                    positions.push({ stykliste_id: styklisteId, posnr: index + 1 });
+                }
+            });
+
+            if (!positions.length) {
+                console.error('[stykliste_dragdrop] no positions to save');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('action', 'update_stykliste_positions');
+            formData.append('vare_id', vare_id);
+            formData.append('positions', JSON.stringify(positions));
+
+            fetch('productCardIncludes/save_stykliste_positions.php', {
+                method: 'POST',
+                credentials: 'same-origin',
+                body: formData,
+            })
+            .then(r => r.text())
+            .then(text => JSON.parse(text.split('--- DATA BEYOND THIS LINE ---\n')[1]))
+            .then(data => {
+                if (data.success) {
+                    sessionStorage.setItem('stykliste_scroll', window.scrollY);
+                    const params = new URLSearchParams(location.search);
+                    params.set('id', vare_id);
+                    location.href = 'varekort.php?' + params.toString();
+                } else {
+                    showMessage('Fejl: ' + (data.error || 'Ukendt fejl'), 'error');
+                    console.error('[stykliste_dragdrop] save failed:', data);
+                }
+            })
+            .catch(err => {
+                showMessage('Netværksfejl - rækkefølge ikke gemt.', 'error');
+                console.error('[stykliste_dragdrop] fetch error:', err);
+            });
+        }
+    });
+
+    function showMessage(msg, type) {
+        document.querySelectorAll('.stykliste-msg').forEach(el => el.remove());
+        const div = document.createElement('div');
+        div.className = 'stykliste-msg';
+        div.textContent = msg;
+        div.style.cssText = 'padding:6px 10px;margin:6px 0;border-radius:4px;font-weight:bold;color:#fff;background:' +
+            (type === 'success' ? '#0066cc' : 'crimson');
+        tbody.closest('table').insertAdjacentElement('beforebegin', div);
+        if (type !== 'error') setTimeout(() => div.remove(), 3000);
+    }
+});

lager/productCardIncludes/save_stykliste_positions.php

@@ -0,0 +1,65 @@
+<?php
+
+@session_start();
+$s_id = session_id();
+
+error_reporting(E_ALL);
+ini_set('display_errors', 0);
+ini_set('log_errors', 1);
+
+$bg = "nix";
+$header = 'nix';
+$modulnr = 0;
+
+header('Content-Type: application/json');
+
+require_once(__dir__ . "/../../includes/connect.php");
+require_once(__dir__ . "/../../includes/online.php");
+require_once(__dir__ . "/../../includes/std_func.php");
+
+$response = ['success' => false];
+
+try {
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+        throw new Exception('Invalid request method');
+    }
+
+    $action = isset($_POST['action']) ? $_POST['action'] : '';
+    if ($action !== 'update_stykliste_positions') {
+        throw new Exception('Invalid action');
+    }
+
+    $vare_id = intval(isset($_POST['vare_id']) ? $_POST['vare_id'] : 0);
+    if (!$vare_id) {
+        throw new Exception('Missing vare_id');
+    }
+
+    $positions_json = isset($_POST['positions']) ? $_POST['positions'] : '';
+    $positions = json_decode($positions_json, true);
+
+    if (!is_array($positions) || empty($positions)) {
+        throw new Exception('Invalid positions data');
+    }
+
+    $updated = 0;
+    foreach ($positions as $pos) {
+        $stykliste_id = intval(isset($pos['stykliste_id']) ? $pos['stykliste_id'] : 0);
+        $posnr        = intval(isset($pos['posnr'])        ? $pos['posnr']        : 0);
+
+        if ($stykliste_id > 0 && $posnr > 0) {
+            $qtxt = "UPDATE styklister SET posnr = '$posnr' WHERE id = '$stykliste_id' AND indgaar_i = '$vare_id'";
+            db_modify($qtxt, __FILE__ . " line " . __LINE__);
+            $updated++;
+        }
+    }
+
+    $response['success'] = true;
+    $response['updated'] = $updated;
+    $response['message'] = "Updated $updated stykliste positions";
+
+} catch (Exception $e) {
+    $response['success'] = false;
+    $response['error'] = $e->getMessage();
+}
+
+echo "--- DATA BEYOND THIS LINE ---\n" . json_encode($response);

lager/varekort.php

@@ -1784,6 +1784,7 @@ function bestil(varenr, antal) {
             $be_af_enhed[$x] = $row2['enhed'];
             $be_af_ant[$x] = $row['antal'];
             $be_af_id[$x] = $row2['id'];
+            $be_af_stykliste_id[$x] = $row['id'];
             $be_af_kostpris[$x] = $row2['kostpris'];
             $be_af_sum += $be_af_kostpris[$x] * $be_af_ant[$x];
             print "<input type = 'hidden' name=be_af_id[$x] value='$row[id]'>";
@@ -1831,27 +1832,24 @@ function bestil(varenr, antal) {
         ($beholdning) ? $readonly = 'readonly' : $readonly = '';
         print "<tr><td valign=top><table width=20%><tbody><tr><td> <a href=stykliste.php?id=$id>Stykliste</a></td></tr>";
         print "</tbody></table></td>";
-        print "<td></td><td><table border=0 width=80%><tbody>";
-        print "<tr><td> Pos.</td><td width=80> V.nr.</td><td width=300> Beskrivelse</td><td> Antal</td></tr>";
+        print "<td></td><td><table border=0 width=80%><tbody id='stykliste-tbody'>";
+        print "<tr><td width=20></td><td> Pos.</td><td width=80> V.nr.</td><td width=300> Beskrivelse</td><td> Antal</td></tr>";
         for ($x = 1; $x <= $ant_be_af; $x++) {
             $dkantal = dkdecimal($be_af_ant[$x], 2);
             if (substr($dkantal, -1) == '0')
                 $dkantal = substr($dkantal, 0, -1);
             if (substr($dkantal, -1) == '0')
                 $dkantal = substr($dkantal, 0, -2);
-            print "<tr>";
+            print "<tr class='stykliste-row' data-stykliste-id='$be_af_stykliste_id[$x]' data-vare-id='$id'>";
+            print "<td class='stykliste-drag-handle'><b>⋮⋮</b></td>";
             print "<td><input class=\"inputbox\" type=\"text\" size=2 style=\"text-align:right\" name=\"be_af_pos[$x]\" value=\"$x\" $readonly></td>";
             print "<td><a href='?opener=&id=$be_af_id[$x]&returside=varer.php&vis_samlevarer=on'>$be_af_vnr[$x]</a></td><td>$be_af_beskrivelse[$x]</td>";
             print "<td><input class=\"inputbox\" type=\"text\" size=\"2\" style=\"text-align:right\" name=\"be_af_ant[$x]\" value=\"$dkantal\" $readonly>&nbsp;$be_af_enhed[$x]</td>";
-            if ($x === $ant_be_af) {
-                print "<td align='right' title='Varens kostpris' style='border-bottom: 1px #151515 solid'>" . dkdecimal($be_af_kostpris[$x] * $be_af_ant[$x], 2) . "</td>";
-            } else {
-                print "<td align='right' title='Varens kostpris'>" . dkdecimal($be_af_kostpris[$x] * $be_af_ant[$x], 2) . "</td>";
-            }
+            print "<td align='right' title='Varens kostpris'>" . dkdecimal($be_af_kostpris[$x] * $be_af_ant[$x], 2) . "</td>";
             print "</tr>";
         }
-        print "<tr><td colspan='3'></td><td>Kostpris i alt:</td>";
-        print "<td align='right'>" . dkdecimal($be_af_sum, 2) . "</td><tr>";
+        print "<tr><td colspan='4'></td><td>Kostpris i alt:</td>";
+        print "<td align='right' style='border-top: 1px #151515 solid'>" . dkdecimal($be_af_sum, 2) . "</td><tr>";
         $be_af_pos[0] = $ant_be_af + 1;
         print "</tr>";
         print "</tr></tbody></table></td></tr>";
@@ -2293,3 +2291,22 @@ function getCookie(cname) {
         return "";
     }
 </script>
+<script src="../javascript/Sortable.min.js"></script>
+<script src="../javascript/stykliste_dragdrop.js"></script>
+<style>
+.stykliste-drag-handle {
+    cursor: grab;
+    text-align: center;
+    vertical-align: middle;
+    width: 20px;
+    color: #666;
+    font-size: 14px;
+    user-select: none;
+}
+.stykliste-drag-handle:active,
+body.is-dragging .stykliste-drag-handle {
+    cursor: grabbing;
+}
+.stykliste-row.sortable-ghost { opacity: 0.4; }
+.stykliste-row.sortable-chosen { background-color: #f0f0f0; }
+</style>