bf8e25efe7
- Dodano polje 'display_code' na WorkOrder model (format: 2 inicijala + ddmmyy) - Migracije za kreiranje polja i backfill postojećih naloga - Ažuriran WorkOrderSerializer za validaciju i serijalizaciju display_code - Backend tasks za auto-generiranje display_code pri kreiranju - Frontend komponente ažurirane za prikaz display_code umjesto UUID: * FleetDashboardShell tablica putnih naloga * WorkOrderDetailModal * TaskCreateModal * Sve PDF stranice - displayIds.js utility za formatiranjeDisplay ID-eva - Admin interface prikazuje display_code
289 lines
13 KiB
JavaScript
289 lines
13 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';
|
|
|
|
const STATUS_OPTIONS = ['aktivan', 'servis', 'zavrsen', 'neaktivan'];
|
|
|
|
const INITIAL_FORM = {
|
|
title: '',
|
|
description: '',
|
|
status: 'aktivan',
|
|
work_order: '',
|
|
};
|
|
|
|
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 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);
|
|
}
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedTemplate) return;
|
|
setForm((prev) => ({
|
|
...prev,
|
|
title: selectedTemplate.title || '',
|
|
description: selectedTemplate.description || '',
|
|
status: 'aktivan',
|
|
work_order: '',
|
|
}));
|
|
}, [selectedTemplate]);
|
|
|
|
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,
|
|
};
|
|
} 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,
|
|
};
|
|
}
|
|
|
|
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>
|
|
)}
|
|
|
|
<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">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) => (
|
|
<option key={workOrder.id} value={String(workOrder.id)}>
|
|
{formatWorkOrderDisplayCode(workOrder)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {formatPurposeLabel(workOrder.purpose) || '-'}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{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>
|
|
);
|
|
}
|