feat: dodaj scheduled_date na Task i kalendar widget
- Novo polje Task.scheduled_date (DateField, nullable, db_index) za planiranje - Migracija 0009_task_scheduled_date - Celery task notify_upcoming_tasks: dnevno u 08:00 šalje Pusher + email za sutrašnje zadatke - TaskCalendarWidget: react-spring slide panel s lijeve strane, grid prikaz mjeseca, dot indikatori, klik otvara TaskServiceRecordsModal - FleetDashboardShell: import + render kalendara, Planirano stupac u tablici zadataka - TaskCreateModal + TaskServiceRecordsModal: scheduled_date input i prikaz - Admin + serializer + views: scheduled_date filter i prikaz - 47 backend testova prolaze (uključuje 8 novih za notify_upcoming_tasks) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
@@ -0,0 +1,267 @@
|
||||
import { useMemo, useState } from 'preact/hooks';
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import { getStatusLabel } from '../../stores/taskStore';
|
||||
|
||||
const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
|
||||
const MONTH_NAMES = [
|
||||
'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
|
||||
'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
|
||||
];
|
||||
const PANEL_WIDTH = 300;
|
||||
|
||||
function toIsoDateKey(dateStr) {
|
||||
if (!dateStr) return null;
|
||||
const d = new Date(dateStr);
|
||||
if (Number.isNaN(d.getTime())) return null;
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatDayLabel(year, month, day) {
|
||||
return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
|
||||
}
|
||||
|
||||
export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
|
||||
const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
|
||||
const [selectedDay, setSelectedDay] = useState(null);
|
||||
|
||||
const panelSpring = useSpring({
|
||||
transform: open ? 'translate3d(0%,0,0)' : `translate3d(-100%,0,0)`,
|
||||
config: { tension: 260, friction: 28 },
|
||||
});
|
||||
|
||||
const buttonSpring = useSpring({
|
||||
left: open ? PANEL_WIDTH : 0,
|
||||
config: { tension: 260, friction: 28 },
|
||||
});
|
||||
|
||||
// Map: "YYYY-MM-DD" -> task[]
|
||||
const tasksByDate = useMemo(() => {
|
||||
const map = {};
|
||||
for (const task of tasks) {
|
||||
const key = toIsoDateKey(task.scheduled_date);
|
||||
if (!key) continue;
|
||||
if (!map[key]) map[key] = [];
|
||||
map[key].push(task);
|
||||
}
|
||||
return map;
|
||||
}, [tasks]);
|
||||
|
||||
// Calendar grid cells for current month
|
||||
const calendarDays = useMemo(() => {
|
||||
const firstDay = new Date(viewYear, viewMonth, 1);
|
||||
let startDow = firstDay.getDay(); // 0=Sun
|
||||
startDow = (startDow + 6) % 7; // shift to Mon=0
|
||||
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
||||
const cells = [];
|
||||
for (let i = 0; i < startDow; i++) cells.push(null);
|
||||
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
|
||||
return cells;
|
||||
}, [viewYear, viewMonth]);
|
||||
|
||||
const selectedDayKey = selectedDay
|
||||
? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
|
||||
: null;
|
||||
const selectedDayTasks = selectedDayKey ? (tasksByDate[selectedDayKey] ?? []) : [];
|
||||
const today = new Date();
|
||||
|
||||
function prevMonth() {
|
||||
setSelectedDay(null);
|
||||
if (viewMonth === 0) { setViewYear((y) => y - 1); setViewMonth(11); }
|
||||
else setViewMonth((m) => m - 1);
|
||||
}
|
||||
function nextMonth() {
|
||||
setSelectedDay(null);
|
||||
if (viewMonth === 11) { setViewYear((y) => y + 1); setViewMonth(0); }
|
||||
else setViewMonth((m) => m + 1);
|
||||
}
|
||||
|
||||
function handleDayClick(day) {
|
||||
setSelectedDay((prev) => (prev === day ? null : day));
|
||||
}
|
||||
|
||||
function handleTaskClick(task) {
|
||||
onTaskClick?.(task);
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const totalScheduled = Object.values(tasksByDate).flat().length;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{open && (
|
||||
<div
|
||||
role="presentation"
|
||||
className="fixed inset-0 z-[45] bg-black/20 backdrop-blur-[1px]"
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sliding panel */}
|
||||
<animated.div
|
||||
style={{ ...panelSpring, width: `${PANEL_WIDTH}px` }}
|
||||
className="fixed left-0 top-0 z-[46] flex h-screen flex-col overflow-hidden border-r border-border-hairline bg-canvas-elevated shadow-2xl"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
|
||||
<h2 className="text-sm font-semibold text-text-main">📅 Kalendar zadataka</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-md p-1 text-text-muted hover:bg-canvas-deep"
|
||||
aria-label="Zatvori kalendar"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Month navigation */}
|
||||
<div className="flex items-center justify-between px-4 py-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevMonth}
|
||||
className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
|
||||
aria-label="Prethodni mjesec"
|
||||
>
|
||||
◀
|
||||
</button>
|
||||
<span className="text-sm font-medium text-text-main">
|
||||
{MONTH_NAMES[viewMonth]} {viewYear}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextMonth}
|
||||
className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
|
||||
aria-label="Sljedeći mjesec"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<div className="px-3">
|
||||
<div className="grid grid-cols-7 text-center">
|
||||
{WEEKDAY_LABELS.map((label) => (
|
||||
<div key={label} className="py-1 text-[11px] font-medium text-text-muted">
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-y-0.5 text-center">
|
||||
{calendarDays.map((day, idx) => {
|
||||
if (!day) return <div key={`e-${idx}`} />;
|
||||
const key = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const hasTasks = Boolean(tasksByDate[key]?.length);
|
||||
const taskCount = tasksByDate[key]?.length ?? 0;
|
||||
const isToday =
|
||||
today.getFullYear() === viewYear &&
|
||||
today.getMonth() === viewMonth &&
|
||||
today.getDate() === day;
|
||||
const isSelected = selectedDay === day;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => handleDayClick(day)}
|
||||
title={hasTasks ? `${taskCount} zadatak/a` : undefined}
|
||||
className={[
|
||||
'relative mx-auto flex h-8 w-8 items-center justify-center rounded-full text-xs transition-colors',
|
||||
isSelected
|
||||
? 'bg-indigo-600 font-semibold text-white'
|
||||
: isToday
|
||||
? 'bg-indigo-50 font-semibold text-indigo-700'
|
||||
: hasTasks
|
||||
? 'font-medium text-text-main hover:bg-canvas-deep'
|
||||
: 'text-text-main hover:bg-canvas-deep',
|
||||
].join(' ')}
|
||||
>
|
||||
{day}
|
||||
{hasTasks && (
|
||||
<span
|
||||
className={[
|
||||
'absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full',
|
||||
isSelected ? 'bg-white' : 'bg-indigo-500',
|
||||
].join(' ')}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="mt-2 border-t border-border-hairline" />
|
||||
|
||||
{/* Task list for selected day OR hint */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
{selectedDay ? (
|
||||
<>
|
||||
<p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-text-muted">
|
||||
{formatDayLabel(viewYear, viewMonth, selectedDay)}
|
||||
</p>
|
||||
{selectedDayTasks.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">Nema zadataka za odabrani datum.</p>
|
||||
) : (
|
||||
<ul className="space-y-1.5">
|
||||
{selectedDayTasks.map((task) => (
|
||||
<li key={task.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTaskClick(task)}
|
||||
className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-left text-sm hover:bg-indigo-50 hover:border-indigo-200 transition-colors"
|
||||
>
|
||||
<span className="block truncate font-medium text-text-main">
|
||||
{task.title || '-'}
|
||||
</span>
|
||||
<span className="mt-0.5 block text-[11px] text-text-muted">
|
||||
{task.assigned_to_name || '-'} •{' '}
|
||||
{getStatusLabel(task.status || '-')}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs text-text-muted">
|
||||
Odaberite datum u kalendaru za prikaz zadataka.
|
||||
</p>
|
||||
{totalScheduled > 0 && (
|
||||
<p className="mt-1.5 text-xs font-medium text-indigo-600">
|
||||
{totalScheduled} zadatak/a s planiranim datumom.
|
||||
</p>
|
||||
)}
|
||||
{totalScheduled === 0 && (
|
||||
<p className="mt-1.5 text-[11px] text-text-muted">
|
||||
Nijedan zadatak nema postavljen planirani datum.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</animated.div>
|
||||
|
||||
{/* Toggle tab button — slides right as panel opens */}
|
||||
<animated.button
|
||||
type="button"
|
||||
style={{ left: buttonSpring.left.to((v) => `${v}px`) }}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="fixed top-1/2 z-[47] -translate-y-1/2 rounded-r-xl border border-l-0 border-border-hairline bg-canvas-elevated px-1.5 py-4 shadow-md hover:bg-indigo-50 focus:outline-none"
|
||||
aria-label={open ? 'Zatvori kalendar' : 'Otvori kalendar'}
|
||||
title="Kalendar zadataka"
|
||||
>
|
||||
<span
|
||||
style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
|
||||
className="select-none text-[11px] font-medium text-text-main"
|
||||
>
|
||||
📅 Kalendar
|
||||
</span>
|
||||
</animated.button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user