Merge pull request 'Fix brainstorm delete and plan button' (#77) from dev into main

Reviewed-on: #77

api/brainstorm.php

@@ -368,6 +368,53 @@ try {
         exit;
     }
 
+    // 5. Brainstormsessie verwijderen (inclusief bijbehorende kaarten)
+    if ($action === 'delete_session') {
+        $data = json_decode(file_get_contents('php://input'), true) ?: $_POST;
+        $sessionId = (int)($data['session_id'] ?? 0);
+
+        if (!$sessionId) {
+            echo json_encode(['success' => false, 'error' => 'Geen geldig sessie ID opgegeven.']);
+            exit;
+        }
+
+        $stmtCheck = $db->prepare("SELECT id, title, created_by_id FROM brainstorm_sessions WHERE id = ?");
+        $stmtCheck->execute([$sessionId]);
+        $session = $stmtCheck->fetch();
+
+        if (!$session) {
+            echo json_encode(['success' => false, 'error' => 'Brainstormsessie niet gevonden.']);
+            exit;
+        }
+
+        $isCreator = ((int)$session['created_by_id'] === (int)$user['id']);
+        $isAdmin = ($user['role'] === 'ADMIN');
+
+        if (!$isCreator && !$isAdmin) {
+            http_response_code(403);
+            echo json_encode(['success' => false, 'error' => 'Alleen de maker van deze sessie of een beheerder kan deze verwijderen.']);
+            exit;
+        }
+
+        $db->beginTransaction();
+        try {
+            // Verwijder kaarten behorend bij deze sessie
+            $stmtDelCards = $db->prepare("DELETE FROM brainstorm_cards WHERE session_id = ?");
+            $stmtDelCards->execute([$sessionId]);
+
+            // Verwijder de sessie zelf
+            $stmtDelSession = $db->prepare("DELETE FROM brainstorm_sessions WHERE id = ?");
+            $stmtDelSession->execute([$sessionId]);
+
+            $db->commit();
+            echo json_encode(['success' => true, 'message' => 'Brainstormsessie en alle bijbehorende kaarten zijn definitief verwijderd.']);
+            exit;
+        } catch (Throwable $t) {
+            if ($db->inTransaction()) $db->rollBack();
+            throw $t;
+        }
+    }
+
     echo json_encode(['error' => 'Onbekende actie']);
 } catch (Exception $e) {
     if ($db->inTransaction()) $db->rollBack();

brainstorm.php

@@ -95,9 +95,11 @@ require_once __DIR__ . '/includes/header.php';
                 </button>
             </div>
         <?php else: ?>
-            <?php foreach ($sessions as $sess): ?>
+            <?php foreach ($sessions as $sess): 
-                <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="group fociz-card-interactive p-5 flex flex-col justify-between hover:border-indigo-400 dark:hover:border-indigo-500/60">
+                $canDelete = ($currentUser['role'] === 'ADMIN' || (int)$sess['created_by_id'] === (int)$currentUser['id']);
-                    <div>
+            ?>
+                <div class="group fociz-card-interactive p-5 flex flex-col justify-between hover:border-indigo-400 dark:hover:border-indigo-500/60 relative">
+                    <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="block flex-1">
                         <div class="flex items-center justify-between mb-3">
                             <span class="px-2.5 py-0.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 text-indigo-700 dark:text-indigo-400 font-semibold text-[11px]">
                                 <?= htmlspecialchars($sess['theme']) ?>
@@ -117,16 +119,28 @@ require_once __DIR__ . '/includes/header.php';
                                 <?= htmlspecialchars($sess['description']) ?>
                             </p>
                         <?php endif; ?>
-                    </div>
+                    </a>
 
                     <div class="mt-5 pt-4 border-t border-slate-100 dark:border-slate-800/80 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                         <span class="truncate">Door <?= htmlspecialchars($sess['creator_name']) ?></span>
-                        <div class="flex items-center space-x-1 text-indigo-600 dark:text-indigo-400 group-hover:translate-x-1 transition font-bold flex-shrink-0 ml-2">
+                        <div class="flex items-center space-x-2 flex-shrink-0 ml-2">
+                            <?php if ($canDelete): ?>
+                                <button 
+                                    type="button" 
+                                    onclick="promptDeleteSession(event, <?= (int)$sess['id'] ?>, '<?= htmlspecialchars(addslashes($sess['title']), ENT_QUOTES) ?>', <?= (int)$sess['cards_count'] ?>)"
+                                    class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition cursor-pointer" 
+                                    title="Sessie verwijderen"
+                                >
+                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            <?php endif; ?>
+                            <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="flex items-center space-x-1 text-indigo-600 dark:text-indigo-400 group-hover:translate-x-1 transition font-bold">
                                 <span>Open canvas</span>
                                 <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
-                        </div>
-                    </div>
                             </a>
+                        </div>
+                    </div>
+                </div>
             <?php endforeach; ?>
         <?php endif; ?>
     </div>
@@ -192,11 +206,108 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 </div>
 
+<!-- Modal: Sessie Verwijderen Bevestiging -->
+<div id="deleteSessionModal" onclick="if(event.target === this) closeDeleteSessionModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-md w-full space-y-4">
+        <div class="flex items-start space-x-3.5 pb-2">
+            <div class="w-10 h-10 rounded-xl bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 text-rose-600 dark:text-rose-400 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            </div>
+            <div>
+                <h3 class="text-base font-bold text-slate-900 dark:text-white">Brainstormsessie verwijderen</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Weet u zeker dat u deze sessie wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+                </p>
+            </div>
+        </div>
+
+        <div class="p-3.5 rounded-xl bg-rose-50/60 dark:bg-rose-950/20 border border-rose-200/80 dark:border-rose-900/40 text-xs text-rose-800 dark:text-rose-300 space-y-1">
+            <p class="font-bold text-slate-900 dark:text-white" id="deleteSessionTitle">—</p>
+            <p id="deleteSessionWarning" class="text-[11px] text-rose-700 dark:text-rose-400">
+                Alle bijbehorende ideeën, knelpunten en kaarten worden definitief gewist.
+            </p>
+        </div>
+
+        <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+            <button type="button" onclick="closeDeleteSessionModal()" class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
+                Annuleren
+            </button>
+            <button type="button" id="btnConfirmDeleteSession" onclick="executeDeleteSession()" class="flex-1 px-4 py-2.5 bg-rose-600 hover:bg-rose-500 text-white font-bold rounded-xl text-xs transition cursor-pointer shadow-xs flex items-center justify-center space-x-1.5">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                <span>Verwijderen</span>
+            </button>
+        </div>
+    </div>
+</div>
+
 <script>
+let sessionToDeleteId = null;
+
+function promptDeleteSession(e, sessionId, sessionTitle, cardsCount) {
+    if (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    sessionToDeleteId = sessionId;
+    document.getElementById('deleteSessionTitle').textContent = sessionTitle || 'Brainstormsessie';
+    const warningEl = document.getElementById('deleteSessionWarning');
+    if (cardsCount > 0) {
+        warningEl.textContent = `Let op: Deze sessie bevat ${cardsCount} brainstormkaart(en). Alle kaarten worden definitief verwijderd.`;
+    } else {
+        warningEl.textContent = 'Alle inhoud van deze sessie wordt definitief gewist.';
+    }
+    const modal = document.getElementById('deleteSessionModal');
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    if (window.lucide) lucide.createIcons();
+}
+
+function closeDeleteSessionModal() {
+    sessionToDeleteId = null;
+    const modal = document.getElementById('deleteSessionModal');
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+}
+
+async function executeDeleteSession() {
+    if (!sessionToDeleteId) return;
+
+    const btn = document.getElementById('btnConfirmDeleteSession');
+    const origHtml = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Verwijderen...</span>';
+    if (window.lucide) lucide.createIcons();
+
+    try {
+        const res = await fetch('/api/brainstorm.php?action=delete_session', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: sessionToDeleteId })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            closeDeleteSessionModal();
+            window.location.reload();
+        } else {
+            alert('Fout bij verwijderen: ' + (data.error || 'Onbekende fout'));
+            btn.disabled = false;
+            btn.innerHTML = origHtml;
+            if (window.lucide) lucide.createIcons();
+        }
+    } catch (err) {
+        alert('Netwerkfout bij verwijderen: ' + err.message);
+        btn.disabled = false;
+        btn.innerHTML = origHtml;
+        if (window.lucide) lucide.createIcons();
+    }
+}
+
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         const modal = document.getElementById('newSessionModal');
         if (modal) modal.classList.add('hidden');
+        closeDeleteSessionModal();
     }
 });
 </script>

brainstorm_canvas.php

@@ -189,6 +189,12 @@ $categories = [
                 <i data-lucide="map" class="w-4 h-4"></i>
                 <span>Zet om naar Roadmap</span>
             </button>
+
+            <?php if (($currentUser['role'] ?? '') === 'ADMIN' || (int)$session['created_by_id'] === (int)$userId): ?>
+                <button onclick="promptDeleteCurrentCanvasSession()" class="p-2 rounded-xl text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 border border-transparent hover:border-rose-200 dark:hover:border-rose-900/40 transition cursor-pointer" title="Brainstormsessie verwijderen">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                </button>
+            <?php endif; ?>
         </div>
     </div>
 
@@ -783,6 +789,37 @@ $categories = [
                 </button>
             </div>
         </div>
+<!-- Modal: Sessie Verwijderen Bevestiging -->
+<div id="deleteCanvasSessionModal" onclick="if(event.target === this) closeDeleteCanvasSessionModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-md w-full space-y-4">
+        <div class="flex items-start space-x-3.5 pb-2">
+            <div class="w-10 h-10 rounded-xl bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 text-rose-600 dark:text-rose-400 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            </div>
+            <div>
+                <h3 class="text-base font-bold text-slate-900 dark:text-white">Brainstormsessie verwijderen</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Weet u zeker dat u deze sessie wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+                </p>
+            </div>
+        </div>
+
+        <div class="p-3.5 rounded-xl bg-rose-50/60 dark:bg-rose-950/20 border border-rose-200/80 dark:border-rose-900/40 text-xs text-rose-800 dark:text-rose-300 space-y-1">
+            <p class="font-bold text-slate-900 dark:text-white"><?= htmlspecialchars($session['title']) ?></p>
+            <p class="text-[11px] text-rose-700 dark:text-rose-400">
+                Let op: Alle <?= count($cards) ?> brainstormkaart(en) en bijbehorende inhoud worden definitief verwijderd.
+            </p>
+        </div>
+
+        <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+            <button type="button" onclick="closeDeleteCanvasSessionModal()" class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
+                Annuleren
+            </button>
+            <button type="button" id="btnConfirmDeleteCanvasSession" onclick="executeDeleteCanvasSession()" class="flex-1 px-4 py-2.5 bg-rose-600 hover:bg-rose-500 text-white font-bold rounded-xl text-xs transition cursor-pointer shadow-xs flex items-center justify-center space-x-1.5">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                <span>Verwijderen</span>
+            </button>
+        </div>
     </div>
 </div>
 
@@ -1745,12 +1782,60 @@ async function submitBreakdownExport() {
         if (window.lucide) lucide.createIcons();
     }
 }
+function promptDeleteCurrentCanvasSession() {
+    const modal = document.getElementById('deleteCanvasSessionModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+    }
+    if (window.lucide) lucide.createIcons();
+}
+
+function closeDeleteCanvasSessionModal() {
+    const modal = document.getElementById('deleteCanvasSessionModal');
+    if (modal) {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }
+}
+
+async function executeDeleteCanvasSession() {
+    const btn = document.getElementById('btnConfirmDeleteCanvasSession');
+    const origHtml = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Verwijderen...</span>';
+    if (window.lucide) lucide.createIcons();
+
+    try {
+        const res = await fetch('/api/brainstorm.php?action=delete_session', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: <?= (int)$sessionId ?> })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            window.location.href = '/brainstorm.php';
+        } else {
+            alert('Fout bij verwijderen: ' + (data.error || 'Onbekende fout'));
+            btn.disabled = false;
+            btn.innerHTML = origHtml;
+            if (window.lucide) lucide.createIcons();
+        }
+    } catch (err) {
+        alert('Netwerkfout bij verwijderen: ' + err.message);
+        btn.disabled = false;
+        btn.innerHTML = origHtml;
+        if (window.lucide) lucide.createIcons();
+    }
+}
 
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         closeAddCardModal();
         closeConvertModal();
         closeAiBreakdownModal();
+        closeDeleteCanvasSessionModal();
     }
 });
 </script>

planner.php

@@ -1444,8 +1444,12 @@ for ($h = $startHour; $h <= $endHour; $h++) {
                                         <div class="flex items-center space-x-1 flex-shrink-0">
                                             <?php $isMailPlanned = !empty($plannedExternalIds[$mail['id']]); ?>
                                             <button 
-                                                onclick="openPlanEmailDirect('<?= htmlspecialchars(addslashes($mail['id'])) ?>', '<?= htmlspecialchars(addslashes($mail['subject'])) ?>', '<?= htmlspecialchars(addslashes($mail['sender_name'])) ?>', '<?= htmlspecialchars(addslashes($mail['web_link'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($mail['body_preview'] ?? '')) ?>')"
+                                                onclick="handleEmailPlanClick(this, event)"
-                                                data-mail-id="<?= htmlspecialchars($mail['id']) ?>"
+                                                data-mail-id="<?= htmlspecialchars($mail['id'] ?? '', ENT_QUOTES) ?>"
+                                                data-mail-subject="<?= htmlspecialchars($mail['subject'] ?? '', ENT_QUOTES) ?>"
+                                                data-mail-sender="<?= htmlspecialchars($mail['sender_name'] ?? 'Outlook Mail', ENT_QUOTES) ?>"
+                                                data-mail-link="<?= htmlspecialchars($mail['web_link'] ?? '', ENT_QUOTES) ?>"
+                                                data-mail-preview="<?= htmlspecialchars(mb_substr($mail['body_preview'] ?? '', 0, 300), ENT_QUOTES) ?>"
                                                 class="plan-btn-mail flex items-center space-x-1 text-[11px] <?= $isMailPlanned ? 'font-bold text-white bg-emerald-600 hover:bg-emerald-500 border border-emerald-600 shadow-xs' : 'font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 border border-indigo-200 dark:border-indigo-500/20' ?> px-2.5 py-1 rounded-lg transition cursor-pointer"
                                                 title="<?= $isMailPlanned ? 'Deze e-mail is al ingepland als dagtaak (klik om opnieuw/anders in te plannen)' : 'Plan deze e-mail direct in als dagtaak' ?>"
                                             >
@@ -2858,9 +2862,18 @@ document.addEventListener('click', function(e) {
     }
 });
 
+// --- Globale Planner Status & Naadloos AJAX Datumbeheer ---
+let activePlannerDate = '<?= $selectedDate ?>';
+let weekStartDate = '<?= $weekStart ?>';
+let weekEndDate = '<?= $weekEnd ?>';
+let currentSyncHash = '<?= $initialSyncHash ?? '' ?>';
+let isDateSwitching = false;
+const FOCIZ_WORKDAY_START = '<?= $workdayStartStr ?>';
+const FOCIZ_WORKDAY_END   = '<?= $workdayEndStr ?>';
+
 // --- Fociz Widget Beheer & Configuratielogica (v2.0) ---
-let focizWidgets = <?= json_encode(array_values($userWidgetLayout), JSON_UNESCAPED_UNICODE) ?>;
+let focizWidgets = <?= json_encode(array_values($userWidgetLayout), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
-const defaultWidgetLayout = <?= json_encode(array_values($availableWidgets), JSON_UNESCAPED_UNICODE) ?>;
+const defaultWidgetLayout = <?= json_encode(array_values($availableWidgets), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
 
 // --- AI Dagbriefing (laden bij pagina-open, alleen voor vandaag) ---
 <?php if ($isTodaySelected): ?>
@@ -3132,7 +3145,7 @@ function showWidgetToast(htmlMessage, type = 'success', duration = 3500) {
 }
 
 // --- Agenda Dagen Blokkeren & Rechtermuisklik Context Menu ---
-const CAL_BLOCK_REASONS = <?= json_encode(array_values(array_filter($calendarBlockReasons, fn($r) => !empty($r['is_active'])))) ?>;
+const CAL_BLOCK_REASONS = <?= json_encode(array_values(array_filter($calendarBlockReasons, fn($r) => !empty($r['is_active']))), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
 const CAL_BLOCK_DEFAULT_TITLES = {};
 if (Array.isArray(CAL_BLOCK_REASONS)) {
     CAL_BLOCK_REASONS.forEach(r => {
@@ -5017,6 +5030,9 @@ function openJiraPlanModal(issueKey, fallbackData = null) {
     if (descChevron) descChevron.classList.remove('rotate-180');
     if (descLabel) descLabel.textContent = 'Inhoud van het item bekijken';
 
+    // Target datum: actieve planner datum of vandaag
+    const targetDate = (typeof activePlannerDate !== 'undefined' && activePlannerDate) ? activePlannerDate : new Date().toISOString().slice(0, 10);
+
     // Controleer of dit ticket al is ingepland
     const existingTask = (typeof plannedExternalTasksMap !== 'undefined' && plannedExternalTasksMap[issue.key]) ? plannedExternalTasksMap[issue.key] : null;
     const isAlreadyPlanned = Boolean(existingTask);
@@ -5448,6 +5464,22 @@ function toggleEmailPlanPreview() {
     if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
+function handleEmailPlanClick(btn, event = null) {
+    if (event) {
+        try {
+            event.stopPropagation();
+            event.preventDefault();
+        } catch (_) {}
+    }
+    if (!btn) return;
+    const mailId = btn.getAttribute('data-mail-id') || '';
+    const subject = btn.getAttribute('data-mail-subject') || '';
+    const sender = btn.getAttribute('data-mail-sender') || 'Outlook Mail';
+    const link = btn.getAttribute('data-mail-link') || '';
+    const preview = btn.getAttribute('data-mail-preview') || '';
+    openPlanEmailDirect(mailId, subject, sender, link, preview);
+}
+
 function openPlanEmailDirect(mailId, subject, sender, webLink, bodyPreview = '') {
     _emailPlanCurrentData = { mailId, subject, sender, webLink, bodyPreview };
 
@@ -5836,15 +5868,6 @@ function resetTimer() {}
 function saveTimerStateBeforeReload() {}
 function restoreTimerStateIfAny() {}
 
-// --- Globale Planner Status & Naadloos AJAX Datumbeheer ---
-let activePlannerDate = '<?= $selectedDate ?>';
-let weekStartDate = '<?= $weekStart ?>';
-let weekEndDate = '<?= $weekEnd ?>';
-let currentSyncHash = '<?= $initialSyncHash ?? '' ?>';
-let isDateSwitching = false;
-const FOCIZ_WORKDAY_START = '<?= $workdayStartStr ?>';
-const FOCIZ_WORKDAY_END   = '<?= $workdayEndStr ?>';
-
 /**
  * Controleert of een gepland tijdstip buiten de gezette werktijden of in het weekend valt
  */