Fix brainstorm delete and plan button

This commit is contained in:
2026-09-14 10:29:01 +02:00
parent cd6071902d
commit 5a31f0948a
4 changed files with 288 additions and 22 deletions
+119 -8
View File
@@ -95,9 +95,11 @@ require_once __DIR__ . '/includes/header.php';
</button>
</div>
<?php else: ?>
<?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">
<div>
<?php foreach ($sessions as $sess):
$canDelete = ($currentUser['role'] === 'ADMIN' || (int)$sess['created_by_id'] === (int)$currentUser['id']);
?>
<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">
<span>Open canvas</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
<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>
</a>
</div>
</div>
</a>
</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>