fix: restore crane edit modal in task service context
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>
This commit is contained in:
mariomitte
@@ -1,4 +1,4 @@
|
||||
import { useStore } from '@nanostores/preact';
|
||||
import { useStore } from '@nanostores/preact';
|
||||
import { useEffect, useMemo, useState } from 'preact/hooks';
|
||||
import { animated, useSpring, useTransition } from '@react-spring/web';
|
||||
import DashboardTopbar from './DashboardTopbar';
|
||||
@@ -130,8 +130,8 @@ function SortableCodeLabel({ title, direction, onToggle }) {
|
||||
title="Sortiraj po datumu iz koda (godina, mjesec, dan)"
|
||||
>
|
||||
<span>{title}</span>
|
||||
<span className={direction === 'asc' ? 'text-indigo-700' : 'text-text-muted/50'}>↑</span>
|
||||
<span className={direction === 'desc' ? 'text-indigo-700' : 'text-text-muted/50'}>↓</span>
|
||||
<span className={direction === 'asc' ? 'text-indigo-700' : 'text-text-muted/50'}>↑</span>
|
||||
<span className={direction === 'desc' ? 'text-indigo-700' : 'text-text-muted/50'}>↓</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -276,7 +276,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
if (targetWorkOrder) {
|
||||
openWorkOrderDetails(targetWorkOrder);
|
||||
} else {
|
||||
showToast('Traženi putni nalog nije pronađen u trenutnom prikazu.', 'warning');
|
||||
showToast('Traženi putni nalog nije pronađen u trenutnom prikazu.', 'warning');
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -293,7 +293,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
setServiceRecordBackTask(null);
|
||||
setSelectedServiceRecord(targetServiceRecord);
|
||||
} else {
|
||||
showToast('Traženi servisni zapis nije pronađen u trenutnom prikazu.', 'warning');
|
||||
showToast('Traženi servisni zapis nije pronađen u trenutnom prikazu.', 'warning');
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -445,7 +445,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
}
|
||||
// Collect work order IDs that are directly assigned to tasks of the context crane.
|
||||
// This covers cross-crane shared work orders: a WO created for crane A can be
|
||||
// assigned to a task of crane B — it should still appear in crane B's context view.
|
||||
// assigned to a task of crane B — it should still appear in crane B's context view.
|
||||
const contextTaskWorkOrderIds = new Set(
|
||||
tasks
|
||||
.filter((t) => String(t.vehicle || '') === String(hydratedSelectedVehicleId) && t.work_order)
|
||||
@@ -463,7 +463,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
[scopedWorkOrders, currentPage]
|
||||
);
|
||||
|
||||
// Map: workOrderId → array of unique crane objects (own + cross-crane task links)
|
||||
// Map: workOrderId → array of unique crane objects (own + cross-crane task links)
|
||||
const workOrderSharedCranes = useMemo(() => {
|
||||
const craneById = new Map(cranes.map((c) => [String(c.id), c]));
|
||||
const map = new Map();
|
||||
@@ -658,11 +658,11 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
async function handleUpdateWorkOrder(workOrder, changes) {
|
||||
try {
|
||||
await updateWorkOrder(workOrder.id, changes);
|
||||
showToast('Nalog je uspješno ažuriran.', 'success');
|
||||
showToast('Nalog je uspješno ažuriran.', 'success');
|
||||
await fetchFleetDashboardData({ silent: true });
|
||||
await fetchTasks({ force: true });
|
||||
} catch (error) {
|
||||
showToast(error?.message || 'Ažuriranje naloga nije uspjelo.', 'error');
|
||||
showToast(error?.message || 'AĹľuriranje naloga nije uspjelo.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -674,7 +674,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
|
||||
async function handleSetServiceContext() {
|
||||
if (!selectedCraneRowId) {
|
||||
showToast('Prvo označite redak dizalice.', 'warning');
|
||||
showToast('Prvo oznaÄŤite redak dizalice.', 'warning');
|
||||
return;
|
||||
}
|
||||
const selectedCrane = cranes.find((item) => String(item.id) === String(selectedCraneRowId));
|
||||
@@ -688,7 +688,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
|
||||
function handleSetServiceContextForCrane(selectedCrane) {
|
||||
if (!selectedCrane) {
|
||||
showToast('Odabrana dizalica više nije dostupna.', 'warning');
|
||||
showToast('Odabrana dizalica više nije dostupna.', 'warning');
|
||||
return;
|
||||
}
|
||||
setSelectedCraneRowId(selectedCrane.id);
|
||||
@@ -711,7 +711,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
showToast('Ne mogu dohvatiti dizalice. Provjerite mrežu ili prijavu.', 'error');
|
||||
showToast('Ne mogu dohvatiti dizalice. Provjerite mreĹľu ili prijavu.', 'error');
|
||||
return;
|
||||
}
|
||||
setIsTaskModalOpen(true);
|
||||
@@ -741,7 +741,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
{ key: 'serialNumber', label: 'SN', className: 'px-4 py-3' },
|
||||
{ key: 'model', label: 'Marka / Model', className: 'px-4 py-3' },
|
||||
{ key: 'client', label: 'Kupac', className: 'px-4 py-3' },
|
||||
{ key: 'mileage', label: 'Kilometraža', className: 'px-4 py-3' },
|
||||
{ key: 'mileage', label: 'KilometraĹľa', className: 'px-4 py-3' },
|
||||
{ key: 'status', label: 'Status', className: 'px-4 py-3' },
|
||||
];
|
||||
const taskColumns = [
|
||||
@@ -784,7 +784,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
showToast('Ne mogu dohvatiti dizalice. Provjerite mrežu ili prijavu.', 'error');
|
||||
showToast('Ne mogu dohvatiti dizalice. Provjerite mreĹľu ili prijavu.', 'error');
|
||||
return;
|
||||
}
|
||||
setIsWorkOrderModalOpen(true);
|
||||
@@ -839,9 +839,9 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
<p className="text-[10px] text-text-muted">aktivnih zadataka</p>
|
||||
</article>
|
||||
|
||||
{/* Dovršeni nalozi */}
|
||||
{/* Dovršeni nalozi */}
|
||||
<article className="flex flex-col gap-0.5 rounded-xl border border-border-hairline bg-canvas-elevated px-3 py-2.5 shadow-sm">
|
||||
<p className="text-xs text-text-muted">Dovršeni nalozi</p>
|
||||
<p className="text-xs text-text-muted">Dovršeni nalozi</p>
|
||||
<p className="text-xl font-semibold text-emerald-600">{stats.closedWorkOrders}</p>
|
||||
{stats.totalWorkOrders > 0 && (
|
||||
<p className="text-[10px] text-text-muted">
|
||||
@@ -854,7 +854,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
<article className="flex flex-col gap-0.5 rounded-xl border border-border-hairline bg-canvas-elevated px-3 py-2.5 shadow-sm">
|
||||
<p className="text-xs text-text-muted">Moji danas</p>
|
||||
<p className={`text-xl font-semibold ${myTasksToday > 0 ? 'text-indigo-600' : 'text-text-main'}`}>
|
||||
{hasMounted ? myTasksToday : '—'}
|
||||
{hasMounted ? myTasksToday : '—'}
|
||||
</p>
|
||||
<p className="text-[10px] text-text-muted">planirani na mene</p>
|
||||
</article>
|
||||
@@ -964,7 +964,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
rows={dashboardTasks}
|
||||
rowKey={(task) => task.id}
|
||||
loading={loading}
|
||||
loadingMessage="Učitavanje radnih zadataka..."
|
||||
loadingMessage="UÄŤitavanje radnih zadataka..."
|
||||
emptyMessage="Nema radnih zadataka za odabrani filter."
|
||||
rowClassName={(task) => {
|
||||
const status = String(task?.status || '').toLowerCase();
|
||||
@@ -1018,7 +1018,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
<details className="overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-sm">
|
||||
<summary className="flex cursor-pointer select-none items-center justify-between px-4 py-3 text-sm font-medium text-text-muted hover:bg-canvas-deep">
|
||||
<span>Sync log</span>
|
||||
<span className="text-xs opacity-60">▼</span>
|
||||
<span className="text-xs opacity-60">â–Ľ</span>
|
||||
</summary>
|
||||
<div className="border-t border-border-hairline">
|
||||
<SyncLogPanel />
|
||||
@@ -1070,7 +1070,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
onClick={() => fetchFleetDashboardData()}
|
||||
className="text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
Osvježi
|
||||
OsvjeĹľi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1079,12 +1079,12 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
rows={latestWorkOrders}
|
||||
rowKey={(workOrder) => workOrder.id}
|
||||
loading={loading}
|
||||
loadingMessage="Učitavanje..."
|
||||
loadingMessage="UÄŤitavanje..."
|
||||
emptyMessage={
|
||||
workOrderScope === 'context'
|
||||
? (!hydratedSelectedVehicleId
|
||||
? 'Odaberite dizalicu za prikaz putnih naloga iz servisnog konteksta.'
|
||||
: 'Nema dostupnih putnih naloga za odabrani servisni kontekst. Možete prebaciti na prikaz svih naloga.')
|
||||
: 'Nema dostupnih putnih naloga za odabrani servisni kontekst. MoĹľete prebaciti na prikaz svih naloga.')
|
||||
: 'Nema dostupnih putnih naloga.'
|
||||
}
|
||||
renderRow={(workOrder) => (
|
||||
@@ -1166,7 +1166,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
className="rounded px-2 py-1 text-xs font-medium text-text-muted hover:bg-canvas-deep hover:text-text-main"
|
||||
title="Upload fotografija putnog naloga"
|
||||
>
|
||||
📷
|
||||
đź“·
|
||||
</button>
|
||||
</td>
|
||||
</>
|
||||
@@ -1196,7 +1196,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
disabled={currentPage >= totalPages}
|
||||
className="rounded border border-border-hairline px-2 py-1 text-text-main hover:bg-canvas-deep disabled:opacity-50"
|
||||
>
|
||||
Sljedeća
|
||||
Sljedeća
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1230,7 +1230,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
onClick={() => fetchFleetDashboardData()}
|
||||
className="text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
Osvježi
|
||||
OsvjeĹľi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1249,7 +1249,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
{ key: 'date', label: 'Datum', className: 'px-4 py-3' },
|
||||
{ key: 'crane', label: 'Dizalica', className: 'px-4 py-3' },
|
||||
{ key: 'description', label: 'Opis', className: 'px-4 py-3' },
|
||||
{ key: 'cost', label: 'Trošak', className: 'px-4 py-3' },
|
||||
{ key: 'cost', label: 'Trošak', className: 'px-4 py-3' },
|
||||
{ key: 'actions', label: 'Akcije', className: 'px-4 py-3' },
|
||||
]}
|
||||
rows={paginatedRecentServiceRecords}
|
||||
@@ -1302,7 +1302,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
disabled={serviceRecordsPage >= serviceRecordsTotalPages}
|
||||
className="rounded border border-border-hairline px-2 py-1 text-text-main hover:bg-canvas-deep disabled:opacity-50"
|
||||
>
|
||||
Sljedeća
|
||||
Sljedeća
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1312,7 +1312,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
)}
|
||||
{hydratedSelectedVehicleId && loading && (
|
||||
<p className="px-4 py-6 text-center text-sm text-text-muted">
|
||||
Učitavanje...
|
||||
UÄŤitavanje...
|
||||
</p>
|
||||
)}
|
||||
{hydratedSelectedVehicleId && !loading && serviceTaskGroups.length === 0 && (
|
||||
@@ -1326,12 +1326,13 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
const isOpen = String(expandedServiceTaskId || '') === String(group.id);
|
||||
return (
|
||||
<animated.div key={group.id} style={style}>
|
||||
<div className="flex items-center gap-3 px-4 py-3 hover:bg-canvas-deep">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpandedServiceTaskId(isOpen ? null : group.id)}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-canvas-deep"
|
||||
className="flex min-w-0 flex-1 items-center justify-between gap-3 text-left"
|
||||
>
|
||||
<div>
|
||||
<div className="min-w-0">
|
||||
<span className="font-medium text-text-main">{group.title}</span>
|
||||
<span className="ml-2 text-xs text-text-muted">{group.status}</span>
|
||||
</div>
|
||||
@@ -1339,9 +1340,19 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
<span className="rounded-full bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700">
|
||||
{group.records.length} servisnih zapisa
|
||||
</span>
|
||||
<span className="text-text-muted">{isOpen ? '▲' : '▼'}</span>
|
||||
<span className="text-text-muted">{isOpen ? "^" : "v"}</span>
|
||||
</div>
|
||||
</button>
|
||||
{group.task && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedTask(group.task)}
|
||||
className="shrink-0 rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
||||
>
|
||||
Detalji taska
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isOpen && (
|
||||
<div className="border-t border-border-hairline bg-canvas-base/50 px-4 py-3">
|
||||
{group.records.length === 0 ? (
|
||||
@@ -1354,7 +1365,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
{ key: 'date', label: 'Datum', className: 'px-4 py-3' },
|
||||
{ key: 'crane', label: 'DIZALICA', className: 'px-4 py-3' },
|
||||
{ key: 'description', label: 'Opis', className: 'px-4 py-3' },
|
||||
{ key: 'cost', label: 'Trošak', className: 'px-4 py-3' },
|
||||
{ key: 'cost', label: 'Trošak', className: 'px-4 py-3' },
|
||||
{ key: 'files', label: 'Datoteke', className: 'px-4 py-3' },
|
||||
{ key: 'actions', label: 'Akcije', className: 'px-4 py-3' },
|
||||
]}
|
||||
@@ -1389,7 +1400,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
onClick={() => setPhotoUpload({ open: true, serviceRecordId: record.id })}
|
||||
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
||||
>
|
||||
📎 Dodaj datoteke
|
||||
đź“Ž Dodaj datoteke
|
||||
</button>
|
||||
</td>
|
||||
</>
|
||||
@@ -1408,7 +1419,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
|
||||
{showClients && (
|
||||
<>
|
||||
{/* ── Tablica klijenata i njihovih dizalica ───────── */}
|
||||
{/* ── Tablica klijenata i njihovih dizalica ───────── */}
|
||||
<div id="section-clients">
|
||||
<ClientsSection
|
||||
onSetServiceContext={handleSetServiceContextForCraneId}
|
||||
@@ -1435,7 +1446,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
onClick={() => fetchFleetDashboardData()}
|
||||
className="text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
Osvježi
|
||||
OsvjeĹľi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1446,7 +1457,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
rowClassName="hover:bg-canvas-deep"
|
||||
isRowSelected={(vehicle) => String(vehicle.id) === String(selectedCraneRowId)}
|
||||
loading={loading}
|
||||
loadingMessage="Učitavanje vozila..."
|
||||
loadingMessage="UÄŤitavanje vozila..."
|
||||
emptyMessage="Nema dostupnih vozila."
|
||||
renderRow={(vehicle) => (
|
||||
<>
|
||||
@@ -1518,7 +1529,7 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
onSubmit={handleUpdateWorkOrder}
|
||||
/>
|
||||
|
||||
{/* Modali su na root razini div-a — van <main> i <section> —
|
||||
{/* Modali su na root razini div-a — van <main> i <section> —
|
||||
kako bi fixed pozicioniranje i z-index radili ispravno */}
|
||||
<ServiceRecordForm
|
||||
open={serviceRecordOpen}
|
||||
@@ -1621,3 +1632,4 @@ export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
</AnimatedPage>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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'];
|
||||
|
||||
@@ -32,6 +33,10 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
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,
|
||||
@@ -51,6 +56,10 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
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
|
||||
@@ -76,6 +85,60 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
}));
|
||||
}, [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) {
|
||||
@@ -156,6 +219,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalShell
|
||||
onClose={onClose}
|
||||
overlayClassName="z-50 overflow-y-auto p-4 pt-20"
|
||||
@@ -215,6 +279,39 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
</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
|
||||
@@ -326,5 +423,84 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'preact/hooks';
|
||||
import { useEffect, useMemo, useState } from 'preact/hooks';
|
||||
import ModalShell from '../ui/ModalShell';
|
||||
import { formatWorkOrderDisplayCode } from '../../lib/displayIds';
|
||||
import { getStatusLabel } from '../../stores/taskStore';
|
||||
@@ -251,6 +251,15 @@ export default function TaskServiceRecordsModal({
|
||||
>
|
||||
Postavi servisni kontekst
|
||||
</button>
|
||||
{task?.vehicle && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCraneDataModal}
|
||||
className="rounded-md border border-border-hairline px-3 py-1 text-xs font-semibold text-text-main hover:bg-canvas-base"
|
||||
>
|
||||
Uredi podatke dizalice
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
@@ -306,10 +315,10 @@ export default function TaskServiceRecordsModal({
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCraneDataModal}
|
||||
className="rounded border border-border-hairline px-1.5 py-0.5 text-[10px] text-text-muted hover:bg-canvas-base"
|
||||
title="Izmijeni radne sate i kilometražu dizalice"
|
||||
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
||||
title="Izmijeni radne sate i kilometrazu dizalice"
|
||||
>
|
||||
🔧
|
||||
Uredi podatke
|
||||
</button>
|
||||
)}
|
||||
</dd>
|
||||
@@ -539,7 +548,12 @@ export default function TaskServiceRecordsModal({
|
||||
</ModalShell>
|
||||
|
||||
{craneDataModalOpen && (
|
||||
<ModalShell open={craneDataModalOpen} onClose={() => setCraneDataModalOpen(false)} title="Izmijeni podatke dizalice">
|
||||
<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="p-4 space-y-4">
|
||||
<p className="text-sm text-text-muted">
|
||||
Ažurirajte radne sate i kilometražu za dizalicu: <strong>{getTaskCraneDisplay(task)}</strong>
|
||||
|
||||
Reference in New Issue
Block a user