truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add SortableJS and wrap kanban initialization in a robustness handler for delayed script loading

Browse Source
This commit is contained in:
Ümit Tunç
2026-07-30 17:37:42 +03:00
parent 483b0518fd
commit cc750fcb1e
1 changed files with 57 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/projects/show.blade.php
+57 -41
View File
@@ -15,6 +15,9 @@
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Sortable JS for Drag and Drop -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
@@ -860,52 +863,65 @@ gantt
}
// Sortable.js Drag and Drop Setup for 4 Kanban Columns
document.querySelectorAll('.kanban-drop-zone').forEach(zone => {
new Sortable(zone, {
group: 'kanban-board',
animation: 200,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
onEnd: function(evt) {
const itemEl = evt.item;
const targetZone = evt.to;
const taskId = itemEl.getAttribute('data-task-id');
const newStatus = targetZone.getAttribute('data-status');
function initKanbanSortable() {
if (typeof Sortable === 'undefined') {
setTimeout(initKanbanSortable, 100);
return;
}
if (!taskId || !newStatus) return;
document.querySelectorAll('.kanban-drop-zone').forEach(zone => {
new Sortable(zone, {
group: 'kanban-board',
animation: 200,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
onEnd: function(evt) {
const itemEl = evt.item;
const targetZone = evt.to;
const taskId = itemEl.getAttribute('data-task-id');
const newStatus = targetZone.getAttribute('data-status');
fetch('{{ route("projects.admin.task-status", $project->slug) }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
task_id: taskId,
status: newStatus
if (!taskId || !newStatus) return;
fetch('{{ route("projects.admin.task-status", $project->slug) }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
task_id: taskId,
status: newStatus
})
})
})
.then(res => res.json())
.then(data => {
if (data.success) {
updateProgressUI(data.progress_percent);
if (data.counts) {
updateCountsUI(data.counts);
.then(res => res.json())
.then(data => {
if (data.success) {
updateProgressUI(data.progress_percent);
if (data.counts) {
updateCountsUI(data.counts);
}
showToast(data.message, 'success');
} else {
showToast('Görev taşınamadı.', 'error');
}
showToast(data.message, 'success');
} else {
showToast('Görev taşınamadı.', 'error');
}
})
.catch(err => {
console.error('AJAX Error:', err);
showToast('Bağlantı hatası.', 'error');
});
}
})
.catch(err => {
console.error('AJAX Error:', err);
showToast('Bağlantı hatası.', 'error');
});
}
});
});
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initKanbanSortable);
} else {
initKanbanSortable();
}
// AJAX Module Status Toggle Handler
function setModuleStatusAjax(moduleId, status) {