b92596f6a6
Dodaj detalje dizalice (proizvođač, model i SN) te vlasnika u modal radnog zadatka i kalendar zadataka, uz zajednički frontend helper za DRY prikaz. Proširi Task API serializer dodatnim poljima za prikaz dizalice/vlasnika i ažuriraj testove serializera za nova izlazna polja. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
286 lines
14 KiB
JavaScript
286 lines
14 KiB
JavaScript
import { useMemo, useState } from 'preact/hooks';
|
|
import { getStatusLabel } from '../../stores/taskStore';
|
|
import LeftSlideDrawer from '../layout/LeftSlideDrawer';
|
|
import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';
|
|
|
|
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',
|
|
];
|
|
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 = [], notes = [], onTaskClick }) {
|
|
const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
|
|
const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
|
|
const [selectedDay, setSelectedDay] = useState(null);
|
|
|
|
// 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]);
|
|
|
|
const notesByDate = useMemo(() => {
|
|
const map = {};
|
|
for (const note of notes) {
|
|
const key = toIsoDateKey(note.note_date);
|
|
if (!key) continue;
|
|
if (!map[key]) map[key] = [];
|
|
map[key].push(note);
|
|
}
|
|
return map;
|
|
}, [notes]);
|
|
|
|
// 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 selectedDayNotes = selectedDayKey ? (notesByDate[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, closePanel) {
|
|
onTaskClick?.(task);
|
|
closePanel?.();
|
|
}
|
|
|
|
const totalScheduled = Object.values(tasksByDate).flat().length;
|
|
const totalNoteReminders = Object.values(notesByDate).flat().length;
|
|
|
|
return (
|
|
<LeftSlideDrawer
|
|
drawerId="calendar"
|
|
title="📅 Kalendar zadataka"
|
|
tabLabel="📅 Kalendar"
|
|
tabTitle="Kalendar zadataka"
|
|
tabTopClassName="top-1/2"
|
|
backdropClassName="z-[45]"
|
|
panelClassName="z-[46]"
|
|
tabClassName="z-[47]"
|
|
>
|
|
{({ close }) => (
|
|
<>
|
|
|
|
{/* 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 hasNotes = Boolean(notesByDate[key]?.length);
|
|
const taskCount = tasksByDate[key]?.length ?? 0;
|
|
const noteCount = notesByDate[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 || hasNotes
|
|
? `${taskCount} zadatak/a, ${noteCount} bilješki`
|
|
: 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 || hasNotes) && (
|
|
<span className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 items-center gap-0.5">
|
|
{hasTasks && (
|
|
<span
|
|
className={[
|
|
'h-1.5 w-1.5 rounded-full',
|
|
isSelected ? 'bg-white' : 'bg-indigo-500',
|
|
].join(' ')}
|
|
/>
|
|
)}
|
|
{hasNotes && (
|
|
<span
|
|
className={[
|
|
'h-1.5 w-1.5 rounded-full',
|
|
isSelected ? 'bg-violet-200' : 'bg-violet-500',
|
|
].join(' ')}
|
|
/>
|
|
)}
|
|
</span>
|
|
)}
|
|
</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 && selectedDayNotes.length === 0 ? (
|
|
<p className="text-sm text-text-muted">Nema događaja za odabrani datum.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{selectedDayNotes.length > 0 && (
|
|
<div>
|
|
<p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Bilješke</p>
|
|
<ul className="space-y-1.5">
|
|
{selectedDayNotes.map((note) => (
|
|
<li key={note.id} className="rounded-lg border border-violet-200 bg-violet-50 px-3 py-2 text-sm text-violet-900">
|
|
<span className="block">{note.note}</span>
|
|
<span className="mt-0.5 block text-[11px] text-violet-700">
|
|
{note.task_title || note.work_order_label || 'Servisni kontekst'}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{selectedDayTasks.length > 0 && (
|
|
<div>
|
|
<p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-indigo-700">Zadaci</p>
|
|
<ul className="space-y-1.5">
|
|
{selectedDayTasks.map((task) => (
|
|
<li key={task.id}>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleTaskClick(task, close)}
|
|
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>
|
|
<span className="mt-0.5 block text-[11px] text-text-muted">
|
|
{getTaskCraneSerial(task)} • {getTaskCraneKind(task)} • {getTaskCraneOwner(task)}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<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>
|
|
)}
|
|
{totalNoteReminders > 0 && (
|
|
<p className="mt-1 text-xs font-medium text-violet-600">
|
|
{totalNoteReminders} bilješki/podsjetnika u kalendaru.
|
|
</p>
|
|
)}
|
|
{totalScheduled === 0 && (
|
|
<p className="mt-1.5 text-[11px] text-text-muted">
|
|
Nijedan zadatak nema postavljen planirani datum.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</LeftSlideDrawer>
|
|
);
|
|
}
|