feat: replace custom gantt chart implementation with DevExtreme widget
This commit is contained in:
Ümit Tunç
@@ -161,6 +161,8 @@ class InternGanttChartWidget extends Widget
|
|||||||
'grid_end' => $gridEnd,
|
'grid_end' => $gridEnd,
|
||||||
'hex_color' => $hexColor,
|
'hex_color' => $hexColor,
|
||||||
'is_stripes' => $isStripes,
|
'is_stripes' => $isStripes,
|
||||||
|
'raw_start' => $intern->internship_start_date,
|
||||||
|
'raw_end' => $intern->internship_end_date,
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+116
-220
@@ -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>
|
<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>
|
<style>
|
||||||
.fi-wi-intern-gantt-chart .gantt {
|
.fi-wi-intern-gantt-chart .demo-container {
|
||||||
display: grid;
|
height: 560px;
|
||||||
border: 0;
|
background-color: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
|
margin-top: 12px;
|
||||||
background-color: #fff;
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
.dark .fi-wi-intern-gantt-chart .gantt {
|
.dark .fi-wi-intern-gantt-chart .demo-container {
|
||||||
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 {
|
|
||||||
background-color: #111827;
|
background-color: #111827;
|
||||||
border-color: rgba(255, 255, 255, 0.05);
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
color: #d1d5db;
|
|
||||||
}
|
}
|
||||||
.fi-wi-intern-gantt-chart .gantt__row-bars {
|
.fi-wi-intern-gantt-chart #gantt {
|
||||||
list-style: none;
|
height: 100%;
|
||||||
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;
|
|
||||||
width: 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>
|
</style>
|
||||||
|
|
||||||
<x-filament::section class="fi-wi-intern-gantt-chart">
|
<x-filament::section class="fi-wi-intern-gantt-chart">
|
||||||
@@ -161,7 +30,7 @@ $currentMonth = (int) date('n');
|
|||||||
Stajyer Gantt Şeması ve Takvimi
|
Stajyer Gantt Şeması ve Takvimi
|
||||||
</span>
|
</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">
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
@@ -178,83 +47,110 @@ $currentMonth = (int) date('n');
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="overflow-x-auto">
|
<div
|
||||||
<div class="min-w-[850px] gantt">
|
x-data="{
|
||||||
<!-- Months Header Row -->
|
internsData: @js($interns),
|
||||||
<div class="gantt__row gantt__row--months">
|
loadScript(src) {
|
||||||
<div class="gantt__row-first">Stajyer Bilgisi</div>
|
return new Promise((resolve, reject) => {
|
||||||
@foreach($monthNames as $name)
|
if (window.jQuery && src.includes('jquery')) { resolve(); return; }
|
||||||
<span>{{ $name }}</span>
|
if (window.DevExpress && src.includes('dx.all')) { resolve(); return; }
|
||||||
@endforeach
|
if (window.DevExpress && window.DevExpress.ui && window.DevExpress.ui.dxGantt && src.includes('dx-gantt')) { resolve(); return; }
|
||||||
</div>
|
|
||||||
|
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 -->
|
if (window.jQuery && window.jQuery.fn.dxGantt) {
|
||||||
<div class="gantt__row gantt__row--lines">
|
const formattedData = this.internsData.map(intern => ({
|
||||||
<span></span>
|
id: intern.id,
|
||||||
@for($i = 1; $i <= 12; $i++)
|
parentId: 0,
|
||||||
<span class="{{ $i === $currentMonth ? 'marker' : '' }}"></span>
|
title: intern.name,
|
||||||
@endfor
|
start: new Date(intern.raw_start),
|
||||||
</div>
|
end: new Date(intern.raw_end),
|
||||||
|
progress: 100
|
||||||
|
}));
|
||||||
|
|
||||||
<!-- Intern Data Rows -->
|
jQuery(this.$refs.ganttContainer).dxGantt({
|
||||||
@foreach($interns as $intern)
|
tasks: {
|
||||||
<div class="gantt__row">
|
dataSource: formattedData,
|
||||||
<div class="gantt__row-first">
|
},
|
||||||
<span class="font-bold text-gray-900 dark:text-white">{{ $intern['name'] }}</span>
|
editing: {
|
||||||
<span class="text-[10px] text-gray-400 dark:text-gray-500 font-normal mt-0.5">{{ $intern['total_days'] }} İş Günü</span>
|
enabled: false,
|
||||||
</div>
|
},
|
||||||
<ul class="gantt__row-bars">
|
validation: {
|
||||||
<li
|
autoUpdateParentTasks: true,
|
||||||
style="grid-column: {{ $intern['grid_start'] }}/{{ $intern['grid_end'] }}; background-color: {{ $intern['hex_color'] }};"
|
},
|
||||||
class="{{ $intern['is_stripes'] ? 'stripes' : '' }}"
|
toolbar: {
|
||||||
x-data="{ open: false }"
|
items: [
|
||||||
@mouseenter="open = true"
|
'collapseAll',
|
||||||
@mouseleave="open = false"
|
'expandAll',
|
||||||
>
|
'separator',
|
||||||
<span class="truncate pr-1">{{ $intern['start_date'] }}</span>
|
'zoomIn',
|
||||||
<span class="text-[10px] opacity-90 shrink-0 bg-white/20 px-1.5 py-0.5 rounded-full font-bold">
|
'zoomOut',
|
||||||
{{ $intern['end_date'] }}
|
],
|
||||||
</span>
|
},
|
||||||
|
columns: [{
|
||||||
<!-- Interactive Glassmorphic Tooltip -->
|
dataField: 'title',
|
||||||
<div
|
caption: 'Stajyer Adı',
|
||||||
x-show="open"
|
width: 250,
|
||||||
x-transition:enter="transition ease-out duration-150"
|
}, {
|
||||||
x-transition:enter-start="opacity-0 translate-y-1"
|
dataField: 'start',
|
||||||
x-transition:enter-end="opacity-100 translate-y-0"
|
caption: 'Başlangıç Tarihi',
|
||||||
x-transition:leave="transition ease-in duration-100"
|
dataType: 'date',
|
||||||
x-transition:leave-start="opacity-100 translate-y-0"
|
format: 'dd.MM.yyyy',
|
||||||
x-transition:leave-end="opacity-0 translate-y-1"
|
width: 120,
|
||||||
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;"
|
dataField: 'end',
|
||||||
>
|
caption: 'Bitiş Tarihi',
|
||||||
<div class="font-bold text-xs text-white border-b border-gray-800 pb-1 mb-1.5 flex justify-between items-center">
|
dataType: 'date',
|
||||||
<span class="truncate pr-2">{{ $intern['name'] }}</span>
|
format: 'dd.MM.yyyy',
|
||||||
<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">
|
width: 120,
|
||||||
{{ $intern['total_days'] }} Gün
|
}],
|
||||||
</span>
|
scaleType: 'weeks',
|
||||||
</div>
|
taskListWidth: 490,
|
||||||
<div class="space-y-1 text-gray-400">
|
});
|
||||||
<div class="flex justify-between">
|
} else {
|
||||||
<span>Staj Başlangıç:</span>
|
throw new Error('DevExpress Gantt component jQuery plugin is not defined after loading scripts.');
|
||||||
<span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
|
}
|
||||||
</div>
|
} catch (e) {
|
||||||
<div class="flex justify-between">
|
console.error(e);
|
||||||
<span>Staj Bitiş:</span>
|
this.showError(e.message);
|
||||||
<span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
|
}
|
||||||
</div>
|
}
|
||||||
</div>
|
}"
|
||||||
</div>
|
class="dx-viewport demo-container"
|
||||||
</li>
|
>
|
||||||
</ul>
|
<div id="gantt" x-ref="ganttContainer" style="height: 100%; width: 100%;"></div>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
|
|||||||
Reference in New Issue
Block a user