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

feat: replace custom gantt chart implementation with DevExtreme widget

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-16 17:14:54 +03:00
parent 794f9556de
commit 58ae406b36
2 changed files with 118 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
+2
View File
@@ -161,6 +161,8 @@ class InternGanttChartWidget extends Widget
'grid_end' => $gridEnd,
'hex_color' => $hexColor,
'is_stripes' => $isStripes,
'raw_start' => $intern->internship_start_date,
'raw_end' => $intern->internship_end_date,
];
});
resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
+116 -220
View File
@@ -1,157 +1,26 @@
@php
$monthNames = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];
$currentMonth = (int) date('n');
@endphp
<x-filament-widgets::widget>
<!-- DevExtreme Gantt CSS Dependencies -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.css">
<style>
.fi-wi-intern-gantt-chart .gantt {
display: grid;
border: 0;
.fi-wi-intern-gantt-chart .demo-container {
height: 560px;
background-color: #fff;
border-radius: 12px;
position: relative;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
background-color: #fff;
margin-top: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
margin-top: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.dark .fi-wi-intern-gantt-chart .gantt {
background-color: #1f2937;
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.fi-wi-intern-gantt-chart .gantt__row {
display: grid;
grid-template-columns: 180px 1fr;
background-color: #fff;
position: relative;
}
.dark .fi-wi-intern-gantt-chart .gantt__row {
background-color: #111827;
}
.fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
background-color: #f9fafb;
}
.dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
background-color: #1f2937/40;
}
.fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
background-color: #f9fafb;
}
.dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
background-color: #1f2937/40;
}
.fi-wi-intern-gantt-chart .gantt__row--lines {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
grid-template-columns: 180px repeat(12, 1fr);
pointer-events: none;
z-index: 1;
}
.fi-wi-intern-gantt-chart .gantt__row--lines span {
display: block;
border-right: 1px solid rgba(0, 0, 0, 0.05);
height: 100%;
}
.dark .fi-wi-intern-gantt-chart .gantt__row--lines span {
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
background-color: rgba(10, 52, 68, 0.08);
z-index: 2;
border-left: 1px dashed rgba(239, 68, 68, 0.5);
border-right: 1px dashed rgba(239, 68, 68, 0.5);
}
.dark .fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
background-color: rgba(255, 255, 255, 0.03);
}
.fi-wi-intern-gantt-chart .gantt__row--months {
color: #fff;
background-color: #0a3444 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
grid-template-columns: 180px repeat(12, 1fr);
z-index: 5;
}
.dark .fi-wi-intern-gantt-chart .gantt__row--months {
background-color: #030712 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
border-top: 0 !important;
background-color: #0a3444 !important;
color: #fff;
}
.dark .fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
background-color: #030712 !important;
}
.fi-wi-intern-gantt-chart .gantt__row--months span {
text-align: center;
font-size: 13px;
align-self: center;
font-weight: bold;
padding: 15px 0;
}
.fi-wi-intern-gantt-chart .gantt__row-first {
background-color: #fff;
border-width: 1px 0 0 0;
border-color: rgba(0, 0, 0, 0.05);
border-style: solid;
padding: 15px 12px;
font-size: 13px;
font-weight: bold;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
color: #374151;
z-index: 2;
}
.dark .fi-wi-intern-gantt-chart .gantt__row-first {
.dark .fi-wi-intern-gantt-chart .demo-container {
background-color: #111827;
border-color: rgba(255, 255, 255, 0.05);
color: #d1d5db;
}
.fi-wi-intern-gantt-chart .gantt__row-bars {
list-style: none;
display: grid;
padding: 12px 0;
margin: 0;
grid-template-columns: repeat(12, 1fr);
grid-gap: 8px 0;
border-top: 1px solid rgba(221, 221, 221, 0.4);
z-index: 2;
.fi-wi-intern-gantt-chart #gantt {
height: 100%;
width: 100%;
}
.dark .fi-wi-intern-gantt-chart .gantt__row-bars {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.fi-wi-intern-gantt-chart .gantt__row-bars li {
font-weight: 600;
text-align: left;
font-size: 12px;
min-height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 14px;
color: #fff;
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.fi-wi-intern-gantt-chart .gantt__row-bars li:hover {
transform: scale(1.01);
filter: brightness(1.05);
}
.fi-wi-intern-gantt-chart .gantt__row-bars li.stripes {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.12) 5px, rgba(255,255,255,.12) 12px);
}
</style>
<x-filament::section class="fi-wi-intern-gantt-chart">
@@ -161,7 +30,7 @@ $currentMonth = (int) date('n');
Stajyer Gantt Şeması ve Takvimi
</span>
<span class="text-xs px-2.5 py-1 bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400 rounded-full font-semibold">
Stajı Onaylananlar
DevExtreme Görünümü
</span>
</div>
</x-slot>
@@ -178,83 +47,110 @@ $currentMonth = (int) date('n');
</p>
</div>
@else
<div class="overflow-x-auto">
<div class="min-w-[850px] gantt">
<!-- Months Header Row -->
<div class="gantt__row gantt__row--months">
<div class="gantt__row-first">Stajyer Bilgisi</div>
@foreach($monthNames as $name)
<span>{{ $name }}</span>
@endforeach
</div>
<div
x-data="{
internsData: @js($interns),
loadScript(src) {
return new Promise((resolve, reject) => {
if (window.jQuery && src.includes('jquery')) { resolve(); return; }
if (window.DevExpress && src.includes('dx.all')) { resolve(); return; }
if (window.DevExpress && window.DevExpress.ui && window.DevExpress.ui.dxGantt && src.includes('dx-gantt')) { resolve(); return; }
const existing = document.querySelector(`script[src='${src}']`);
if (existing) {
if (existing.readyState === 'loaded' || existing.readyState === 'complete') {
resolve();
} else {
existing.addEventListener('load', resolve);
existing.addEventListener('error', reject);
}
return;
}
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = resolve;
script.onerror = () => reject(new Error('Failed to load script: ' + src));
document.head.appendChild(script);
});
},
showError(msg) {
const errDiv = document.createElement('div');
errDiv.style.color = '#ef4444';
errDiv.style.padding = '20px';
errDiv.style.fontFamily = 'monospace';
errDiv.style.fontSize = '13px';
errDiv.innerHTML = '<strong>Gantt Load Error:</strong><br>' + msg;
this.$refs.ganttContainer.innerHTML = '';
this.$refs.ganttContainer.appendChild(errDiv);
},
async init() {
try {
await this.loadScript('https://code.jquery.com/jquery-3.7.1.min.js').catch(() => { throw new Error('jQuery failed to load'); });
await this.loadScript('https://cdn3.devexpress.com/jslib/23.2.5/js/dx.all.js').catch(() => { throw new Error('dx.all.js failed to load'); });
await this.loadScript('https://cdn3.devexpress.com/jslib/23.2.5/js/dx-gantt.min.js').catch(() => { throw new Error('dx-gantt.min.js failed to load'); });
<!-- Background Grid Lines & Marker Row -->
<div class="gantt__row gantt__row--lines">
<span></span>
@for($i = 1; $i <= 12; $i++)
<span class="{{ $i === $currentMonth ? 'marker' : '' }}"></span>
@endfor
</div>
if (window.jQuery && window.jQuery.fn.dxGantt) {
const formattedData = this.internsData.map(intern => ({
id: intern.id,
parentId: 0,
title: intern.name,
start: new Date(intern.raw_start),
end: new Date(intern.raw_end),
progress: 100
}));
<!-- Intern Data Rows -->
@foreach($interns as $intern)
<div class="gantt__row">
<div class="gantt__row-first">
<span class="font-bold text-gray-900 dark:text-white">{{ $intern['name'] }}</span>
<span class="text-[10px] text-gray-400 dark:text-gray-500 font-normal mt-0.5">{{ $intern['total_days'] }} İş Günü</span>
</div>
<ul class="gantt__row-bars">
<li
style="grid-column: {{ $intern['grid_start'] }}/{{ $intern['grid_end'] }}; background-color: {{ $intern['hex_color'] }};"
class="{{ $intern['is_stripes'] ? 'stripes' : '' }}"
x-data="{ open: false }"
@mouseenter="open = true"
@mouseleave="open = false"
>
<span class="truncate pr-1">{{ $intern['start_date'] }}</span>
<span class="text-[10px] opacity-90 shrink-0 bg-white/20 px-1.5 py-0.5 rounded-full font-bold">
{{ $intern['end_date'] }}
</span>
<!-- Interactive Glassmorphic Tooltip -->
<div
x-show="open"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-1"
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-60 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
style="display: none;"
>
<div class="font-bold text-xs text-white border-b border-gray-800 pb-1 mb-1.5 flex justify-between items-center">
<span class="truncate pr-2">{{ $intern['name'] }}</span>
<span class="text-[9px] px-1.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold border border-emerald-500/30 shrink-0">
{{ $intern['total_days'] }} Gün
</span>
</div>
<div class="space-y-1 text-gray-400">
<div class="flex justify-between">
<span>Staj Başlangıç:</span>
<span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
</div>
<div class="flex justify-between">
<span>Staj Bitiş:</span>
<span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
</div>
</div>
</div>
</li>
</ul>
</div>
@endforeach
</div>
</div>
<div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
<span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
<span>Kırmızı kesikli dikey sütun günün ayını göstermektedir.</span>
jQuery(this.$refs.ganttContainer).dxGantt({
tasks: {
dataSource: formattedData,
},
editing: {
enabled: false,
},
validation: {
autoUpdateParentTasks: true,
},
toolbar: {
items: [
'collapseAll',
'expandAll',
'separator',
'zoomIn',
'zoomOut',
],
},
columns: [{
dataField: 'title',
caption: 'Stajyer Adı',
width: 250,
}, {
dataField: 'start',
caption: 'Başlangıç Tarihi',
dataType: 'date',
format: 'dd.MM.yyyy',
width: 120,
}, {
dataField: 'end',
caption: 'Bitiş Tarihi',
dataType: 'date',
format: 'dd.MM.yyyy',
width: 120,
}],
scaleType: 'weeks',
taskListWidth: 490,
});
} else {
throw new Error('DevExpress Gantt component jQuery plugin is not defined after loading scripts.');
}
} catch (e) {
console.error(e);
this.showError(e.message);
}
}
}"
class="dx-viewport demo-container"
>
<div id="gantt" x-ref="ganttContainer" style="height: 100%; width: 100%;"></div>
</div>
@endif
</x-filament::section>