css drag and drop

2026-03-30 12:33:57 +02:00
parent a403628c07
commit ca9c774422
4 changed files with 169 additions and 30 deletions
@@ -110,21 +110,27 @@

 /* Petit bouton + pour les colonnes */
 .btn-icon-small {
-  background: transparent;
-  border: 1px dashed #cbd5e1;
-  border-radius: 4px;
-  padding: 6px 12px;
-  font-size: 0.8rem;
-  color: var(--text-muted);
+  background: white !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 6px !important;
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
  cursor: pointer;
-  width: 100%;
-  margin-top: 10px;
-  transition: 0.2s;
+  transition: all 0.2s;
+  box-shadow: var(--shadow-sm);
 }
+
 .btn-icon-small:hover {
-  background: #f1f5f9;
-  color: var(--text-main);
-  border-color: var(--text-muted);
+  background: #f1f5f9 !important;
+  border-color: #cbd5e1 !important;
+  transform: scale(1.05);
 }

 /* --- 4. CARTES --- */
@@ -623,28 +629,48 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {

 .hol-cp-header {
  background: #f8fafc;
-  padding: 10px 15px;
+  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
+  gap: 12px;
+}
+
+.hol-cp-info-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
 }

 .hol-cp-title {
  color: #0f172a;
-  font-size: 1rem;
-  font-weight: bold;
+  font-size: 0.95rem;
+  font-weight: 700;
  cursor: pointer;
-  transition: color 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .hol-cp-title:hover {
  color: var(--primary);
 }

+.hol-cp-actions-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
 .hol-cp-total {
-  font-size: 0.8rem;
-  color: var(--text-muted);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--primary);
+  white-space: nowrap;
 }

 .hol-cp-body {
@@ -413,3 +413,79 @@ function deleteCheckpoint() {
  form.appendChild(input);
  form.submit();
 }
+
+// ============================================================================
+// 5. GLISSER-DÉPOSER POUR RÉORDONNER LES ÉTAPES (ROADTRIP)
+// ============================================================================
+document.addEventListener("DOMContentLoaded", () => {
+  const checkpoints = document.querySelectorAll(".hol-checkpoint-draggable");
+  const container = checkpoints[0]?.parentElement;
+  if (!container) return;
+
+  let draggedItem = null;
+
+  checkpoints.forEach((item) => {
+    item.addEventListener("dragstart", function (e) {
+      draggedItem = this;
+      setTimeout(() => (this.style.opacity = "0.4"), 0);
+    });
+
+    item.addEventListener("dragend", function () {
+      setTimeout(() => {
+        this.style.opacity = "1";
+        draggedItem = null;
+        saveCheckpointOrder(); // On sauvegarde quand on lâche !
+      }, 0);
+    });
+
+    item.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      const afterElement = getDragAfterElement(container, e.clientY);
+      if (afterElement == null) {
+        container.appendChild(draggedItem);
+      } else {
+        container.insertBefore(draggedItem, afterElement);
+      }
+    });
+  });
+
+  function getDragAfterElement(container, y) {
+    const draggableElements = [
+      ...container.querySelectorAll(
+        '.hol-checkpoint-draggable:not([style*="opacity: 0.4"])',
+      ),
+    ];
+    return draggableElements.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+          return { offset: offset, element: child };
+        } else {
+          return closest;
+        }
+      },
+      { offset: Number.NEGATIVE_INFINITY },
+    ).element;
+  }
+
+  function saveCheckpointOrder() {
+    // On récupère le nom des lieux dans le nouvel ordre de haut en bas
+    const locations = [
+      ...document.querySelectorAll(".hol-checkpoint-draggable"),
+    ].map((el) => el.getAttribute("data-location"));
+    const holidayId = document.querySelector('input[name="holiday_id"]').value; // Input caché dans la modale
+
+    const formData = new FormData();
+    formData.append("holiday_id", holidayId);
+    formData.append("locations", JSON.stringify(locations));
+
+    fetch("/modules/holidays/includes/api/reorder_checkpoints.php", {
+      method: "POST",
+      body: formData,
+    }).then(() => {
+      // Recharge la page pour que la carte redessine le trait bleu dans le bon ordre !
+      window.location.reload();
+    });
+  }
+});
@@ -0,0 +1,27 @@
+<?php
+// modules/holidays/includes/api/reorder_checkpoints.php
+require dirname(__DIR__, 4) . '/includes/auth.php';
+require dirname(__DIR__, 4) . '/includes/db.php';
+require_login();
+
+$holiday_id = (int)$_POST['holiday_id'];
+$locations = json_decode($_POST['locations'] ?? '[]', true);
+
+if ($holiday_id > 0 && is_array($locations)) {
+    try {
+        $pdo->beginTransaction();
+        $stmt = $pdo->prepare("UPDATE pf_holidays_items SET sort_order = ? WHERE holiday_id = ? AND location_name = ?");
+        
+        foreach ($locations as $index => $loc) {
+            // On met à jour toutes les dépenses de ce lieu avec son nouveau rang (0, 1, 2...)
+            $stmt->execute([$index, $holiday_id, $loc]);
+        }
+        
+        $pdo->commit();
+        echo json_encode(['success' => true]);
+    } catch (Exception $e) {
+        $pdo->rollBack();
+        http_response_code(500);
+        echo json_encode(['error' => $e->getMessage()]);
+    }
+}
@@ -15,7 +15,8 @@ $stmt = $pdo->prepare("
 $stmt->execute([$id]);
 $holiday = $stmt->fetch(PDO::FETCH_ASSOC);

-$stmtItems = $pdo->prepare("SELECT * FROM pf_holidays_items WHERE holiday_id = ? ORDER BY id ASC");
+// IMPORTANT : Le tri se fait maintenant sur "sort_order" pour que le glisser-déposer fonctionne
+$stmtItems = $pdo->prepare("SELECT * FROM pf_holidays_items WHERE holiday_id = ? ORDER BY sort_order ASC, id ASC");
 $stmtItems->execute([$id]);
 $items = $stmtItems->fetchAll(PDO::FETCH_ASSOC);

@@ -123,16 +124,24 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
                    <p style="color:var(--text-muted); font-style:italic; text-align:center; margin-top:40px;">Aucune étape planifiée.</p>
                <?php else: ?>
                    <?php foreach ($steps as $step): ?>
-                        <div class="hol-checkpoint">
+                        <div class="hol-checkpoint hol-checkpoint-draggable" draggable="true" data-location="<?= htmlspecialchars($step['location_name']) ?>">
                            <div class="hol-cp-header">
-                                <div>
-                                    <div class="hol-cp-title" onclick="panMapTo(<?= $step['lat'] ?>, <?= $step['lng'] ?>)">📍 <?= htmlspecialchars($step['location_name']) ?></div>
-                                    <div class="hol-cp-total">Total Étape : <?= number_format($step['total_amount'], 2) ?> €</div>
+                                
+                                <div class="hol-cp-info-group">
+                                    <span style="color:#94a3b8; font-size:1.1rem; cursor:grab; user-select:none;">☰</span>
+                                    <div class="hol-cp-title" onclick="panMapTo(<?= $step['lat'] ?>, <?= $step['lng'] ?>)" title="<?= htmlspecialchars($step['location_name']) ?>">
+                                        📍 <?= htmlspecialchars($step['location_name']) ?>
+                                    </div>
                                </div>
-                                <button onclick='openCheckpointModal("edit", <?= htmlspecialchars(json_encode($step), ENT_QUOTES, "UTF-8") ?>)' class="btn-icon-small" title="Modifier cette étape" style="margin:0;">✏️</button>
-                            </div>
-                            <div class="hol-cp-body">

+                                <div class="hol-cp-actions-group">
+                                    <div class="hol-cp-total"><?= number_format($step['total_amount'], 2, ',', ' ') ?> €</div>
+                                    <button onclick='openCheckpointModal("edit", <?= htmlspecialchars(json_encode($step), ENT_QUOTES, "UTF-8") ?>)' class="btn-icon-small" title="Modifier">✏️</button>
+                                </div>
+
+                            </div>
+
+                            <div class="hol-cp-body">
                                <?php 
                                    $visibleItemsCount = 0;
                                    foreach ($step['items'] as $it): 
@@ -143,16 +152,17 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
                                        <div class="hol-expense-line">
                                            <span style="color:#475569;"><?= $icon ?> <?= htmlspecialchars($it['name']) ?></span>
                                            <span>
-                                                <strong style="color:var(--text-main);"><?= number_format($it['amount'], 2) ?> €</strong>
-                                                <span style="margin-left:5px; color:<?= $it['is_paid'] ? '#10b981' : '#f59e0b' ?>;" title="<?= $it['is_paid'] ? 'Payé' : 'À payer' ?>"><?= $it['is_paid'] ? '✓' : '⏳' ?></span>
+                                                <strong style="color:var(--text-main);"><?= number_format($it['amount'], 2, ',', ' ') ?> €</strong>
+                                                <span style="margin-left:5px; color:<?= $it['is_paid'] ? '#10b981' : '#f59e0b' ?>;"><?= $it['is_paid'] ? '✓' : '⏳' ?></span>
                                            </span>
                                        </div>
                                <?php endforeach; ?>
                                
                                <?php if ($visibleItemsCount === 0): ?>
-                                        <div style="font-size:0.8rem; color:var(--text-muted); font-style:italic;">Point de passage (Aucune dépense)</div>
+                                    <div style="font-size:0.8rem; color:var(--text-muted); font-style:italic; padding: 5px 0;">
+                                        📍 Point de passage (Aucune dépense)
+                                    </div>
                                <?php endif; ?>
-
                            </div>
                        </div>
                    <?php endforeach; ?>