27b7c31c13
Expose task details from the service-context task list and restore visible crane data editing within the task flow. Add crane working-hours and mileage editing to the task creation modal when a service context is selected, and improve the task details modal action so servicers can update crane data directly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
507 lines
25 KiB
JavaScript
507 lines
25 KiB
JavaScript
import { useEffect, useMemo, useState } from 'preact/hooks';
|
|
import { createTask, fetchTaskTemplates, getStatusLabel } from '../../stores/taskStore';
|
|
import { formatPurposeLabel, formatWorkOrderDisplayCode } from '../../lib/displayIds';
|
|
import ModalShell from '../ui/ModalShell';
|
|
import { updateVehicle } from '../../stores/fleetDashboardStore';
|
|
|
|
const STATUS_OPTIONS = ['aktivan', 'servis', 'zavrsen', 'neaktivan'];
|
|
|
|
const INITIAL_FORM = {
|
|
title: '',
|
|
description: '',
|
|
status: 'aktivan',
|
|
work_order: '',
|
|
scheduled_date: '',
|
|
};
|
|
|
|
function todayIso() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
function formatWODate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
if (Number.isNaN(d.getTime())) return '';
|
|
return d.toLocaleDateString('hr-HR');
|
|
}
|
|
|
|
export default function TaskCreateModal({ open, workOrders = [], contextCrane = null, onClose, onSuccess }) {
|
|
const [form, setForm] = useState(INITIAL_FORM);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [templateMode, setTemplateMode] = useState(false);
|
|
const [templateLoading, setTemplateLoading] = useState(false);
|
|
const [templateId, setTemplateId] = useState('');
|
|
const [templates, setTemplates] = useState([]);
|
|
const [craneDataModalOpen, setCraneDataModalOpen] = useState(false);
|
|
const [craneDataForm, setCraneDataForm] = useState({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
|
|
const [savingCraneData, setSavingCraneData] = useState(false);
|
|
const [craneDataError, setCraneDataError] = useState('');
|
|
|
|
const selectedTemplate = useMemo(
|
|
() => templates.find((template) => String(template.id) === String(templateId)) || null,
|
|
[templates, templateId]
|
|
);
|
|
const availableWorkOrders = useMemo(
|
|
() => workOrders.filter((workOrder) => String(workOrder?.status || '').toLowerCase() !== 'closed'),
|
|
[workOrders]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setForm(INITIAL_FORM);
|
|
setSubmitting(false);
|
|
setError('');
|
|
setTemplateMode(false);
|
|
setTemplateId('');
|
|
setTemplates([]);
|
|
setTemplateLoading(false);
|
|
setCraneDataModalOpen(false);
|
|
setCraneDataForm({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
|
|
setSavingCraneData(false);
|
|
setCraneDataError('');
|
|
return;
|
|
}
|
|
// Auto-pre-select today's open work order if exactly one exists for this crane
|
|
const today = todayIso();
|
|
const todayOpen = workOrders.filter(
|
|
(wo) => String(wo?.status || '').toLowerCase() !== 'closed'
|
|
&& String(wo?.date || '').slice(0, 10) === today
|
|
);
|
|
if (todayOpen.length === 1) {
|
|
setForm((prev) => ({ ...prev, work_order: String(todayOpen[0].id) }));
|
|
}
|
|
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
useEffect(() => {
|
|
if (!selectedTemplate) return;
|
|
setForm((prev) => ({
|
|
...prev,
|
|
title: selectedTemplate.title || '',
|
|
description: selectedTemplate.description || '',
|
|
status: 'aktivan',
|
|
work_order: '',
|
|
// scheduled_date is kept so user can set it in template mode too
|
|
}));
|
|
}, [selectedTemplate]);
|
|
|
|
function openCraneDataModal() {
|
|
if (!contextCrane?.id) {
|
|
setCraneDataError('Dizalica nije odabrana u servisnom kontekstu.');
|
|
return;
|
|
}
|
|
setCraneDataForm({
|
|
superstructure_working_hours: String(contextCrane?.superstructure_working_hours ?? ''),
|
|
chassis_working_hours: String(contextCrane?.chassis_working_hours ?? ''),
|
|
current_mileage: String(contextCrane?.current_mileage ?? ''),
|
|
});
|
|
setCraneDataError('');
|
|
setCraneDataModalOpen(true);
|
|
}
|
|
|
|
async function handleSaveCraneData() {
|
|
if (!contextCrane?.id) {
|
|
setCraneDataError('Dizalica nije odabrana u servisnom kontekstu.');
|
|
return;
|
|
}
|
|
const superstructure = craneDataForm.superstructure_working_hours === '' ? undefined : Number(craneDataForm.superstructure_working_hours);
|
|
const chassis = craneDataForm.chassis_working_hours === '' ? undefined : Number(craneDataForm.chassis_working_hours);
|
|
const mileage = craneDataForm.current_mileage === '' ? undefined : Number(craneDataForm.current_mileage);
|
|
if (superstructure !== undefined && (Number.isNaN(superstructure) || superstructure < 0)) {
|
|
setCraneDataError('Radni sati nadogradnje moraju biti pozitivan broj.');
|
|
return;
|
|
}
|
|
if (chassis !== undefined && (Number.isNaN(chassis) || chassis < 0)) {
|
|
setCraneDataError('Radni sati podvozja moraju biti pozitivan broj.');
|
|
return;
|
|
}
|
|
if (mileage !== undefined && (Number.isNaN(mileage) || mileage < 0)) {
|
|
setCraneDataError('Kilometraza mora biti pozitivan broj.');
|
|
return;
|
|
}
|
|
const payload = {};
|
|
if (superstructure !== undefined) payload.superstructure_working_hours = superstructure;
|
|
if (chassis !== undefined) payload.chassis_working_hours = chassis;
|
|
if (mileage !== undefined) payload.current_mileage = mileage;
|
|
if (Object.keys(payload).length === 0) {
|
|
setCraneDataError('Unesite barem jednu vrijednost za azuriranje.');
|
|
return;
|
|
}
|
|
setSavingCraneData(true);
|
|
setCraneDataError('');
|
|
try {
|
|
await updateVehicle(contextCrane.id, payload);
|
|
setCraneDataModalOpen(false);
|
|
} catch (err) {
|
|
setCraneDataError(err?.message || 'Azuriranje podataka dizalice nije uspjelo.');
|
|
} finally {
|
|
setSavingCraneData(false);
|
|
}
|
|
}
|
|
|
|
if (!open) return null;
|
|
|
|
function setField(name, value) {
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
}
|
|
|
|
async function enableTemplateMode() {
|
|
if (templateMode) {
|
|
setTemplateMode(false);
|
|
setTemplateId('');
|
|
setForm(INITIAL_FORM);
|
|
return;
|
|
}
|
|
setError('');
|
|
setTemplateLoading(true);
|
|
try {
|
|
const fetched = await fetchTaskTemplates();
|
|
setTemplates(fetched);
|
|
setTemplateMode(true);
|
|
} catch (err) {
|
|
setError(err?.message || 'Neuspješno učitavanje templatea.');
|
|
} finally {
|
|
setTemplateLoading(false);
|
|
}
|
|
}
|
|
|
|
async function submit(event) {
|
|
event.preventDefault();
|
|
setError('');
|
|
|
|
if (!contextCrane?.id) {
|
|
setError('Odaberite dizalicu u Servisnom kontekstu prije kreiranja zadatka.');
|
|
return;
|
|
}
|
|
|
|
let payload;
|
|
if (templateMode) {
|
|
if (!templateId) {
|
|
setError('Odaberite template za unos zadatka.');
|
|
return;
|
|
}
|
|
payload = {
|
|
template_id: templateId,
|
|
vehicle: contextCrane.id,
|
|
work_order: null,
|
|
scheduled_date: form.scheduled_date || null,
|
|
};
|
|
} else {
|
|
const title = String(form.title || '').trim();
|
|
if (!title) {
|
|
setError('Naslov zadatka je obavezan.');
|
|
return;
|
|
}
|
|
if ((form.status === 'neaktivan' || form.status === 'zavrsen') && !form.work_order) {
|
|
setError('Putni nalog je obavezan prije zatvaranja zadatka.');
|
|
return;
|
|
}
|
|
payload = {
|
|
title,
|
|
description: String(form.description || '').trim(),
|
|
status: form.status || 'aktivan',
|
|
vehicle: contextCrane.id,
|
|
work_order: form.work_order || null,
|
|
scheduled_date: form.scheduled_date || null,
|
|
};
|
|
}
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
await createTask(payload);
|
|
await onSuccess?.();
|
|
onClose?.();
|
|
} catch (err) {
|
|
setError(err?.message || 'Neuspješno kreiranje zadatka.');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ModalShell
|
|
onClose={onClose}
|
|
overlayClassName="z-50 overflow-y-auto p-4 pt-20"
|
|
contentClassName="flex items-start justify-center min-h-full"
|
|
panelClassName="w-full max-w-2xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl overflow-hidden max-h-[calc(100vh-2rem)]"
|
|
>
|
|
<div className="w-full flex flex-col">
|
|
<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">Novi radni zadatak</h3>
|
|
<p className="text-xs text-text-muted">
|
|
Kontekst dizalice: {contextCrane?.registration_number || 'Nije odabrana'}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={enableTemplateMode}
|
|
disabled={templateLoading || submitting}
|
|
className="rounded-md border border-border-hairline px-3 py-1 text-xs font-medium text-text-main hover:bg-canvas-deep disabled:opacity-60"
|
|
>
|
|
{templateMode ? 'Ručni unos' : 'Unos iz templatea'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
|
|
aria-label="Zatvori modal"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={submit} className="max-h-[calc(100vh-8rem)] space-y-4 overflow-y-auto px-5 py-4">
|
|
{templateMode && (
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium text-text-main">Template zadatka *</span>
|
|
<select
|
|
value={templateId}
|
|
onChange={(event) => setTemplateId(event.currentTarget.value)}
|
|
disabled={submitting || templateLoading}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
>
|
|
<option value="">— Odaberite template —</option>
|
|
{templates.map((template) => (
|
|
<option key={template.id} value={String(template.id)}>
|
|
{template.title}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{selectedTemplate && (
|
|
<span className="text-[11px] text-text-muted">
|
|
Generirat će se do 10 servisnih zapisa iz predloška (vidljivo u tablici Servisni zapisi).
|
|
</span>
|
|
)}
|
|
</label>
|
|
)}
|
|
|
|
{contextCrane && (
|
|
<div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-main">Podaci odabrane dizalice</p>
|
|
<p className="text-xs text-text-muted">{contextCrane.registration_number || '-'} / {contextCrane.make || '-'} {contextCrane.model || ''}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={openCraneDataModal}
|
|
disabled={submitting}
|
|
className="rounded border border-border-hairline px-3 py-1 text-xs font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
|
|
>
|
|
Uredi podatke dizalice
|
|
</button>
|
|
</div>
|
|
<dl className="mt-3 grid gap-2 text-sm sm:grid-cols-3">
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Radni sati nadogradnje</dt>
|
|
<dd className="text-text-main">{contextCrane.superstructure_working_hours ?? '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Radni sati podvozja</dt>
|
|
<dd className="text-text-main">{contextCrane.chassis_working_hours ?? '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-text-muted">Kilometraza</dt>
|
|
<dd className="text-text-main">{contextCrane.current_mileage ?? '-'}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
)}
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium text-text-main">Naslov zadatka *</span>
|
|
<input
|
|
type="text"
|
|
value={form.title}
|
|
onInput={(event) => setField('title', event.currentTarget.value)}
|
|
disabled={submitting || templateMode}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
required={!templateMode}
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium text-text-main">Opis</span>
|
|
<textarea
|
|
rows={3}
|
|
value={form.description}
|
|
onInput={(event) => setField('description', event.currentTarget.value)}
|
|
disabled={submitting || templateMode}
|
|
className="resize-none rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
/>
|
|
</label>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium text-text-main">Status</span>
|
|
<select
|
|
value={form.status}
|
|
onChange={(event) => setField('status', event.currentTarget.value)}
|
|
disabled={submitting || templateMode}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
>
|
|
{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="font-medium text-text-main">Planirani datum izvršenja</span>
|
|
<input
|
|
type="date"
|
|
value={form.scheduled_date}
|
|
onInput={(event) => setField('scheduled_date', event.currentTarget.value)}
|
|
disabled={submitting}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex flex-col gap-1 text-sm sm:col-span-2">
|
|
<span className="font-medium text-text-main">Povezani putni nalog</span>
|
|
<select
|
|
value={form.work_order}
|
|
onChange={(event) => setField('work_order', event.currentTarget.value)}
|
|
disabled={submitting || templateMode}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
|
>
|
|
<option value="">— Bez povezanog naloga —</option>
|
|
{availableWorkOrders.map((workOrder) => {
|
|
const isToday = String(workOrder.date || '').slice(0, 10) === todayIso();
|
|
return (
|
|
<option key={workOrder.id} value={String(workOrder.id)}>
|
|
{isToday ? '★ ' : ''}{formatWorkOrderDisplayCode(workOrder)} • {formatWODate(workOrder.date)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {formatPurposeLabel(workOrder.purpose) || '-'}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
<span className="text-[11px] text-text-muted">
|
|
Više zadataka može dijeliti isti putni nalog. Danas kreiran nalog označen je s ★.
|
|
</span>
|
|
{templateMode && (
|
|
<span className="text-[11px] text-text-muted">
|
|
Kod template unosa nalog nije obavezan i backend ga neće automatski povezati.
|
|
</span>
|
|
)}
|
|
{availableWorkOrders.length === 0 && (
|
|
<span className="text-[11px] text-amber-600">
|
|
Nema dostupnih naloga za odabranu dizalicu.
|
|
</span>
|
|
)}
|
|
</label>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
|
|
disabled={submitting}
|
|
>
|
|
Odustani
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
|
|
disabled={submitting || templateLoading}
|
|
>
|
|
{submitting ? 'Spremanje...' : 'Kreiraj radni zadatak'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</ModalShell>
|
|
|
|
{craneDataModalOpen && (
|
|
<ModalShell
|
|
onClose={() => setCraneDataModalOpen(false)}
|
|
overlayClassName="z-[60] bg-black/40 p-4"
|
|
contentClassName="flex min-h-full items-center justify-center"
|
|
panelClassName="w-full max-w-lg rounded-xl border border-border-hairline bg-canvas-elevated shadow-2xl"
|
|
>
|
|
<div className="space-y-4 p-4">
|
|
<div>
|
|
<h4 className="text-base font-semibold text-text-main">Izmijeni podatke dizalice</h4>
|
|
<p className="mt-1 text-sm text-text-muted">
|
|
Azurirajte radne sate i kilometrazu za dizalicu: <strong>{contextCrane?.registration_number || "-"}</strong>
|
|
</p>
|
|
</div>
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-text-muted">Radni sati nadogradnje</span>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={craneDataForm.superstructure_working_hours}
|
|
onInput={(event) => setCraneDataForm((prev) => ({ ...prev, superstructure_working_hours: event.currentTarget.value }))}
|
|
disabled={savingCraneData}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base 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">Radni sati podvozja</span>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={craneDataForm.chassis_working_hours}
|
|
onInput={(event) => setCraneDataForm((prev) => ({ ...prev, chassis_working_hours: event.currentTarget.value }))}
|
|
disabled={savingCraneData}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base 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">Kilometraza (km)</span>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
value={craneDataForm.current_mileage}
|
|
onInput={(event) => setCraneDataForm((prev) => ({ ...prev, current_mileage: event.currentTarget.value }))}
|
|
disabled={savingCraneData}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-60"
|
|
/>
|
|
</label>
|
|
{craneDataError && (
|
|
<div className="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{craneDataError}
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setCraneDataModalOpen(false)}
|
|
disabled={savingCraneData}
|
|
className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep disabled:opacity-60"
|
|
>
|
|
Odustani
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleSaveCraneData}
|
|
disabled={savingCraneData}
|
|
className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-60"
|
|
>
|
|
{savingCraneData ? "Spremanje..." : "Spremi podatke"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ModalShell>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|