fe7edf5643
- TaskCalendarPortal u Layout.astro (van AnimatedPage transforma) pa fixed pozicija uvijek prati viewport rub bez probijanja sadržaja - Kalendar widgeta panel koristi clipping wrapper (overflow:hidden + animirana width) umjesto translate3d — potpuno skriva sjenu i border kad je zatvoren - Serviser vidi samo svoje taskove, supervisor vidi sve; neprijavljeni korisnik ne vidi widget (return null) - FleetDashboardShell sluša calendar:open-task event i otvara TaskServiceRecordsModal - Servisi danas broji Taskove (scheduled_date=danas, status aktivan/servis) umjesto Servisnih zapisa - downloadGeneratedPdfByUrl hvata grešku i prikazuje Toast (npr. PDF nije dostupan ili je istekao) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
277 lines
13 KiB
JavaScript
277 lines
13 KiB
JavaScript
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({
|
|
left: open ? 0 : -PANEL_WIDTH,
|
|
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)}
|
|
/>
|
|
)}
|
|
|
|
{/* Clipping wrapper — animates width 0→300, clips shadow+border completely */}
|
|
<animated.div
|
|
style={{
|
|
width: panelSpring.left.to((v) => `${Math.max(0, v + PANEL_WIDTH)}px`),
|
|
pointerEvents: open ? 'auto' : 'none',
|
|
}}
|
|
className="fixed left-0 top-0 z-[46] h-screen overflow-hidden"
|
|
>
|
|
{/* Inner panel — always 300px, anchored to right edge of wrapper */}
|
|
<div
|
|
style={{ width: `${PANEL_WIDTH}px` }}
|
|
className="absolute right-0 top-0 flex h-full flex-col 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>
|
|
</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>
|
|
</>
|
|
);
|
|
}
|