0c9e1b7d50
- 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>
418 lines
24 KiB
JavaScript
418 lines
24 KiB
JavaScript
import { useEffect, useMemo, useState } from 'preact/hooks';
|
|
import ModalShell from '../ui/ModalShell';
|
|
import { formatWorkOrderDisplayCode } from '../../lib/displayIds';
|
|
import { getStatusLabel } from '../../stores/taskStore';
|
|
|
|
const STATUS_OPTIONS = ['aktivan', 'servis', 'spreman_za_zavrsetak', 'zavrsen', 'neaktivan'];
|
|
|
|
function formatDate(value) {
|
|
if (!value) return '-';
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) return value;
|
|
return parsed.toLocaleDateString('hr-HR');
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) return '-';
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) return '-';
|
|
return parsed.toLocaleString('hr-HR');
|
|
}
|
|
|
|
function formatCost(value) {
|
|
const numeric = Number(value);
|
|
if (Number.isNaN(numeric)) return '-';
|
|
return `${numeric.toFixed(2)} EUR`;
|
|
}
|
|
|
|
export default function TaskServiceRecordsModal({
|
|
open,
|
|
task,
|
|
records = [],
|
|
workOrders = [],
|
|
onClose,
|
|
onOpenServiceRecord,
|
|
onAssignWorkOrder,
|
|
onUpdateTask,
|
|
onCreateServiceRecord,
|
|
}) {
|
|
const [showWorkOrderEditor, setShowWorkOrderEditor] = useState(false);
|
|
const [selectedWorkOrderId, setSelectedWorkOrderId] = useState('');
|
|
const [assigningWorkOrder, setAssigningWorkOrder] = useState(false);
|
|
const [assignError, setAssignError] = useState('');
|
|
const [showTaskEditor, setShowTaskEditor] = useState(false);
|
|
const [updatingTask, setUpdatingTask] = useState(false);
|
|
const [taskError, setTaskError] = useState('');
|
|
const [taskForm, setTaskForm] = useState({
|
|
title: '',
|
|
description: '',
|
|
status: 'aktivan',
|
|
scheduled_date: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open || typeof window === 'undefined') return;
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
if (!task) return;
|
|
setSelectedWorkOrderId(task.work_order ? String(task.work_order) : '');
|
|
setShowWorkOrderEditor(!task.work_order);
|
|
setAssignError('');
|
|
setAssigningWorkOrder(false);
|
|
setShowTaskEditor(false);
|
|
setTaskError('');
|
|
setUpdatingTask(false);
|
|
setTaskForm({
|
|
title: String(task.title || ''),
|
|
description: String(task.description || ''),
|
|
status: String(task.status || 'aktivan'),
|
|
scheduled_date: String(task.scheduled_date || ''),
|
|
});
|
|
}, [task?.id, task?.work_order]);
|
|
|
|
const currentWorkOrder = useMemo(
|
|
() => workOrders.find((item) => String(item.id) === String(task?.work_order || selectedWorkOrderId)) || null,
|
|
[workOrders, task?.work_order, selectedWorkOrderId]
|
|
);
|
|
|
|
const sortedWorkOrders = useMemo(
|
|
() => [...workOrders].sort((a, b) => String(b.date || '').localeCompare(String(a.date || ''))),
|
|
[workOrders]
|
|
);
|
|
|
|
const effectiveWorkOrderId = task?.work_order ? String(task.work_order) : String(selectedWorkOrderId || '');
|
|
|
|
const handleWorkOrderChange = async (event) => {
|
|
const nextValue = String(event.currentTarget.value || '');
|
|
setSelectedWorkOrderId(nextValue);
|
|
setAssignError('');
|
|
setAssigningWorkOrder(true);
|
|
try {
|
|
await onAssignWorkOrder?.(task, nextValue || null);
|
|
setShowWorkOrderEditor(false);
|
|
} catch (error) {
|
|
setAssignError(error?.message || 'Neuspješno spremanje putnog naloga za radni zadatak.');
|
|
} finally {
|
|
setAssigningWorkOrder(false);
|
|
}
|
|
};
|
|
|
|
const handleTaskUpdate = async (event) => {
|
|
event.preventDefault();
|
|
const title = String(taskForm.title || '').trim();
|
|
const status = String(taskForm.status || 'aktivan');
|
|
const description = String(taskForm.description || '').trim();
|
|
if (!title) {
|
|
setTaskError('Naslov zadatka je obavezan.');
|
|
return;
|
|
}
|
|
if ((status === 'zavrsen' || status === 'neaktivan') && !effectiveWorkOrderId) {
|
|
setTaskError('Putni nalog je obavezan prije zatvaranja zadatka.');
|
|
return;
|
|
}
|
|
setTaskError('');
|
|
setUpdatingTask(true);
|
|
try {
|
|
await onUpdateTask?.(task, {
|
|
title,
|
|
description,
|
|
status,
|
|
scheduled_date: taskForm.scheduled_date || null,
|
|
});
|
|
setShowTaskEditor(false);
|
|
} catch (error) {
|
|
const conflictCode = error?.details?.code;
|
|
if (error?.status === 409 && conflictCode === 'OPEN_WORK_ORDER_BLOCKING_TASK_CLOSE') {
|
|
const confirmText = error?.details?.message || error?.message || 'Povezani putni nalog je još otvoren. Želite li ga automatski zatvoriti?';
|
|
const approved = typeof window !== 'undefined' ? window.confirm(confirmText) : false;
|
|
if (approved) {
|
|
try {
|
|
await onUpdateTask?.(task, {
|
|
title,
|
|
description,
|
|
status,
|
|
scheduled_date: taskForm.scheduled_date || null,
|
|
auto_close_work_order: true,
|
|
});
|
|
setShowTaskEditor(false);
|
|
return;
|
|
} catch (retryError) {
|
|
setTaskError(retryError?.message || 'Neuspješno automatsko zatvaranje putnog naloga i završetak zadatka.');
|
|
return;
|
|
}
|
|
}
|
|
setTaskError(confirmText);
|
|
return;
|
|
}
|
|
setTaskError(error?.message || 'Neuspješno spremanje izmjena radnog zadatka.');
|
|
} finally {
|
|
setUpdatingTask(false);
|
|
}
|
|
};
|
|
|
|
if (!open || !task) return null;
|
|
|
|
return (
|
|
<ModalShell
|
|
onClose={onClose}
|
|
overlayClassName="z-50 overflow-y-auto p-4 pt-2"
|
|
contentClassName="flex items-start justify-center min-h-full"
|
|
panelClassName="w-full max-w-4xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl max-h-[calc(100vh-6rem)] overflow-hidden"
|
|
>
|
|
<div className="w-full flex flex-col h-full">
|
|
<div className="flex items-center justify-between border-b border-border-hairline px-5 py-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-text-main">Radni zadatak detalji</h3>
|
|
<p className="text-xs text-text-muted">
|
|
Radni zadatak: {task.title || '-'} • Status: {getStatusLabel(task.status || '-')} • Zapisa: {records.length}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
|
|
aria-label="Zatvori"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[calc(100vh-12rem)] overflow-y-auto p-4">
|
|
<div className="space-y-4">
|
|
<div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
|
|
<div className="mb-2 flex items-center justify-between gap-2">
|
|
<h4 className="text-sm font-semibold text-text-main">Podaci radnog zadatka</h4>
|
|
{!showTaskEditor ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setTaskError('');
|
|
setShowTaskEditor(true);
|
|
}}
|
|
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
|
>
|
|
Izmijeni radni zadatak
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
{!showTaskEditor ? (
|
|
<dl className="grid gap-2 text-sm sm:grid-cols-2">
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Naslov</dt>
|
|
<dd className="text-text-main">{task.title || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Status</dt>
|
|
<dd className="text-text-main">{getStatusLabel(task.status || '-')}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Dodijeljeno</dt>
|
|
<dd className="text-text-main">{task.assigned_to_name || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Dizalica</dt>
|
|
<dd className="text-text-main">{task.vehicle_registration || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Putni nalog</dt>
|
|
<dd className="text-text-main">{task.work_order_label || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Planirani datum</dt>
|
|
<dd className="text-text-main">{task.scheduled_date ? formatDate(task.scheduled_date) : '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Vrijeme izrade</dt>
|
|
<dd className="text-text-main">{formatDateTime(task.created_at)}</dd>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-xs text-text-muted">Opis</dt>
|
|
<dd className="whitespace-pre-wrap text-text-main">{task.description || '-'}</dd>
|
|
</div>
|
|
</dl>
|
|
) : (
|
|
<form onSubmit={handleTaskUpdate} className="space-y-3">
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-text-muted">Naslov *</span>
|
|
<input
|
|
type="text"
|
|
value={taskForm.title}
|
|
onInput={(event) => setTaskForm((prev) => ({ ...prev, title: event.currentTarget.value }))}
|
|
disabled={updatingTask}
|
|
className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
|
|
required
|
|
/>
|
|
</label>
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-text-muted">Opis</span>
|
|
<textarea
|
|
rows={3}
|
|
value={taskForm.description}
|
|
onInput={(event) => setTaskForm((prev) => ({ ...prev, description: event.currentTarget.value }))}
|
|
disabled={updatingTask}
|
|
className="resize-none rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
|
|
/>
|
|
</label>
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-text-muted">Status</span>
|
|
<select
|
|
value={taskForm.status}
|
|
onChange={(event) => setTaskForm((prev) => ({ ...prev, status: event.currentTarget.value }))}
|
|
disabled={updatingTask}
|
|
className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
|
|
>
|
|
{STATUS_OPTIONS.map((status) => (
|
|
<option key={status} value={status}>
|
|
{getStatusLabel(status)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-text-muted">Planirani datum izvršenja</span>
|
|
<input
|
|
type="date"
|
|
value={taskForm.scheduled_date || ''}
|
|
onInput={(event) => setTaskForm((prev) => ({ ...prev, scheduled_date: event.currentTarget.value }))}
|
|
disabled={updatingTask}
|
|
className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
|
|
/>
|
|
</label>
|
|
{taskError ? (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{taskError}
|
|
</div>
|
|
) : null}
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setTaskError('');
|
|
setShowTaskEditor(false);
|
|
setTaskForm({
|
|
title: String(task.title || ''),
|
|
description: String(task.description || ''),
|
|
status: String(task.status || 'aktivan'),
|
|
scheduled_date: String(task.scheduled_date || ''),
|
|
});
|
|
}}
|
|
disabled={updatingTask}
|
|
className="rounded border border-border-hairline px-3 py-1.5 text-xs text-text-main hover:bg-canvas-elevated disabled:opacity-60"
|
|
>
|
|
Odustani
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={updatingTask}
|
|
className="rounded bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
|
|
>
|
|
{updatingTask ? 'Spremanje...' : 'Spremi izmjene'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
|
|
<h4 className="mb-2 text-sm font-semibold text-text-main">Putni nalozi</h4>
|
|
{currentWorkOrder && !showWorkOrderEditor ? (
|
|
<div className="flex flex-wrap items-center justify-between gap-2 rounded border border-border-hairline bg-canvas-elevated px-3 py-2">
|
|
<p className="text-sm text-text-main">
|
|
{formatWorkOrderDisplayCode(currentWorkOrder)} • {currentWorkOrder.craneLabel || currentWorkOrder.craneInfo?.registration_number || '-'} • {currentWorkOrder.status || '-'}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowWorkOrderEditor(true)}
|
|
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
|
>
|
|
Izmijeni putni nalog
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<select
|
|
value={selectedWorkOrderId}
|
|
onChange={handleWorkOrderChange}
|
|
disabled={assigningWorkOrder}
|
|
className="w-full rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-sm text-text-main disabled:opacity-60"
|
|
>
|
|
<option value="">— Odaberi putni nalog —</option>
|
|
{sortedWorkOrders.map((workOrder) => (
|
|
<option key={workOrder.id} value={String(workOrder.id)}>
|
|
{formatWorkOrderDisplayCode(workOrder)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {workOrder.status || '-'}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-text-muted">
|
|
{assigningWorkOrder ? 'Spremanje odabira putnog naloga...' : 'Odabir se automatski sprema u bazu.'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{assignError && (
|
|
<div className="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{assignError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
|
|
<div className="mb-2 flex items-center justify-between gap-2">
|
|
<h4 className="text-sm font-semibold text-text-main">Povezani servisni zapisi</h4>
|
|
<button
|
|
type="button"
|
|
onClick={() => onCreateServiceRecord?.(task)}
|
|
className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700"
|
|
>
|
|
+ Servisni zapis
|
|
</button>
|
|
</div>
|
|
{records.length === 0 ? (
|
|
<div className="rounded-lg border border-border-hairline bg-canvas-elevated px-4 py-3 text-sm text-text-muted">
|
|
Nema povezanih servisnih zapisa za odabrani radni zadatak.
|
|
</div>
|
|
) : (
|
|
<div className="overflow-hidden rounded-lg border border-border-hairline">
|
|
<table className="w-full table-auto text-sm">
|
|
<thead className="bg-canvas-base text-left text-text-muted">
|
|
<tr>
|
|
<th className="px-3 py-2">Datum</th>
|
|
<th className="px-3 py-2">Opis</th>
|
|
<th className="px-3 py-2">Trošak</th>
|
|
<th className="px-3 py-2">Datoteke</th>
|
|
<th className="px-3 py-2">Akcija</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{records.map((record) => (
|
|
<tr key={record.id} className="border-t border-border-hairline">
|
|
<td className="px-3 py-2">{formatDate(record.service_date)}</td>
|
|
<td className="max-w-[420px] truncate px-3 py-2" title={record.description || ''}>
|
|
{record.description || '-'}
|
|
</td>
|
|
<td className="px-3 py-2">{formatCost(record.cost)}</td>
|
|
<td className="px-3 py-2">{record.files_count ?? (record.photos_count ?? 0)}</td>
|
|
<td className="px-3 py-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onOpenServiceRecord?.(record)}
|
|
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
|
>
|
|
Detalji
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ModalShell>
|
|
);
|
|
}
|