Files
Frontend-Iasis/src/pages/ordens-servico/OrdemServicoEditPage.tsx

84 lines
2.8 KiB
TypeScript

import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';
import { FormCard, PageContainer, PageHeader } from '../../components/layout';
import { useBreadcrumbs } from '../../hooks/useBreadcrumbs';
import { useToast } from '../../components/ui/Toast';
import { useWorkOrder, useUpdateWorkOrder } from '../../hooks/useWorkOrders';
import { OrdemServicoForm } from './components/OrdemServicoForm';
import type { CreateWorkOrderRequest } from '../../types/work-order.types';
export function OrdemServicoEditPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { showToast } = useToast();
const [apiError, setApiError] = useState<string | null>(null);
const { data: workOrder, isLoading, isError } = useWorkOrder(id ?? '');
const breadcrumbs = useBreadcrumbs({ ':name': workOrder?.name ?? '' });
const updateMutation = useUpdateWorkOrder();
async function handleSubmit(data: CreateWorkOrderRequest) {
if (!id) return;
setApiError(null);
const updateData = {
code: data.code,
name: data.name,
description: data.description,
contractItemId: data.contractItemId,
projectIds: data.projectIds,
reservedUst: data.reservedUst,
startDate: data.startDate,
endDate: data.endDate,
};
try {
await updateMutation.mutateAsync({ id, data: updateData });
showToast('Ordem de serviço atualizada com sucesso', 'success');
navigate(`/ordens-servico/${id}`);
} catch (err) {
if (axios.isAxiosError(err)) {
setApiError(err.response?.data?.message ?? 'Erro ao atualizar ordem de serviço.');
} else {
setApiError('Erro ao atualizar ordem de serviço.');
}
}
}
if (isLoading) {
return (
<PageContainer>
<PageHeader title="Editar OS" breadcrumbs={breadcrumbs} />
<div className="flex justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-isis-blue border-t-transparent" />
</div>
</PageContainer>
);
}
if (isError || !workOrder) {
return (
<PageContainer>
<PageHeader title="Editar OS" breadcrumbs={breadcrumbs} />
<div className="py-12 text-center text-text-muted">Ordem de serviço não encontrada</div>
</PageContainer>
);
}
return (
<PageContainer>
<PageHeader title="Editar OS" breadcrumbs={breadcrumbs} />
<FormCard title={`Editar ${workOrder.code}`}>
<OrdemServicoForm
mode="edit"
initialData={workOrder}
initialStatus={workOrder.status}
loading={updateMutation.isPending}
apiError={apiError}
onSubmit={handleSubmit}
onCancel={() => navigate('/ordens-servico')}
/>
</FormCard>
</PageContainer>
);
}