fix(web): freeze inspection context and scope preventive selector
This commit is contained in:
@@ -11,13 +11,18 @@ import {
|
||||
inspectionStatusClass,
|
||||
inspectionVisitStatusLabel,
|
||||
} from '../features/inspections/inspectionPresentation';
|
||||
import {
|
||||
listInspectionPreventiveCandidates,
|
||||
} from '../features/inspections/preventiveCandidatesApi';
|
||||
import type {
|
||||
InspectionPreventiveCandidate,
|
||||
} from '../features/inspections/preventiveCandidatesApi';
|
||||
import {
|
||||
createInspectionVisit,
|
||||
excludeInspectionVisitAsset,
|
||||
generateInspectionVisitChecklist,
|
||||
getInspectionVisit,
|
||||
includeInspectionVisitAsset,
|
||||
listAssets,
|
||||
listInspectionAssignees,
|
||||
listInspectionPlanningAreas,
|
||||
listInspectionPlanningOperators,
|
||||
@@ -26,7 +31,6 @@ import {
|
||||
updateInspectionVisit,
|
||||
} from '../lib/api';
|
||||
import type {
|
||||
AssetListItem,
|
||||
InspectionPerson,
|
||||
InspectionPlanningContextAsset,
|
||||
InspectionVisit,
|
||||
@@ -100,7 +104,7 @@ export function InspectionVisitEditorF4Page() {
|
||||
const [areas, setAreas] = useState<InspectionPlanningContextAsset[]>([]);
|
||||
const [operators, setOperators] = useState<InspectionPlanningContextAsset[]>([]);
|
||||
const [assignees, setAssignees] = useState<InspectionPerson[]>([]);
|
||||
const [assets, setAssets] = useState<AssetListItem[]>([]);
|
||||
const [assets, setAssets] = useState<InspectionPreventiveCandidate[]>([]);
|
||||
const [assetSearch, setAssetSearch] = useState('');
|
||||
const [newAssetId, setNewAssetId] = useState('');
|
||||
const [leadInspectorId, setLeadInspectorId] = useState('');
|
||||
@@ -136,9 +140,9 @@ export function InspectionVisitEditorF4Page() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
listInspectionPlanningAreas().then(setAreas).catch(() => undefined);
|
||||
if (isNew) listInspectionPlanningAreas().then(setAreas).catch(() => undefined);
|
||||
if (canAssign) listInspectionAssignees().then(setAssignees).catch(() => undefined);
|
||||
}, [canAssign]);
|
||||
}, [canAssign, isNew]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNew || form.operationalAreaId || !context.areaId) return;
|
||||
@@ -158,29 +162,27 @@ export function InspectionVisitEditorF4Page() {
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!form.operationalAreaId) {
|
||||
if (!isNew || !form.operationalAreaId) {
|
||||
setOperators([]);
|
||||
return;
|
||||
}
|
||||
listInspectionPlanningOperators(form.operationalAreaId)
|
||||
.then(setOperators)
|
||||
.catch(() => setOperators([]));
|
||||
}, [form.operationalAreaId]);
|
||||
}, [form.operationalAreaId, isNew]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!form.operationalAreaId || !form.operatorCompanyId) {
|
||||
if (!id || !visit) {
|
||||
setAssets([]);
|
||||
return;
|
||||
}
|
||||
const timer = window.setTimeout(() => {
|
||||
listAssets({
|
||||
pageSize: 100,
|
||||
search: assetSearch.trim(),
|
||||
operationalAreaId: form.operationalAreaId,
|
||||
}).then((response) => setAssets(response.data)).catch(() => undefined);
|
||||
listInspectionPreventiveCandidates(id, assetSearch)
|
||||
.then(setAssets)
|
||||
.catch((requestError) => setError(errorMessage(requestError)));
|
||||
}, 220);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [assetSearch, form.operationalAreaId, form.operatorCompanyId]);
|
||||
}, [id, assetSearch, visit?.updatedAt]);
|
||||
|
||||
const planningEditable = !visit || visit.status === 'DRAFT' || visit.status === 'PLANNED';
|
||||
const activeAssetIds = useMemo(() => new Set(visit?.assets.map((asset) => asset.id) ?? []), [visit]);
|
||||
@@ -209,13 +211,10 @@ export function InspectionVisitEditorF4Page() {
|
||||
} else if (id) {
|
||||
applyVisit(await updateInspectionVisit(id, {
|
||||
objective: form.objective.trim() || null,
|
||||
scopeAssetId: visit?.scopeAsset?.id ?? null,
|
||||
operationalAreaId: form.operationalAreaId || null,
|
||||
operatorCompanyId: form.operatorCompanyId || null,
|
||||
plannedStartAt,
|
||||
instructions: form.instructions.trim() || null,
|
||||
}));
|
||||
setSuccess('Planificación actualizada. Regenerá el checklist si cambió contexto o fecha.');
|
||||
setSuccess('Planificación actualizada. Si cambió la fecha, regenerá el checklist.');
|
||||
}
|
||||
} catch (requestError) {
|
||||
setError(errorMessage(requestError));
|
||||
@@ -240,6 +239,7 @@ export function InspectionVisitEditorF4Page() {
|
||||
setBusy(true); setError(''); setSuccess('');
|
||||
try {
|
||||
applyVisit(await replaceInspectionVisitAssets(id, [...activeAssetIds, newAssetId]), false);
|
||||
setAssets((current) => current.filter((asset) => asset.id !== newAssetId));
|
||||
setNewAssetId('');
|
||||
setSuccess('Registro agregado como preventivo.');
|
||||
} catch (requestError) { setError(errorMessage(requestError)); }
|
||||
@@ -340,12 +340,12 @@ export function InspectionVisitEditorF4Page() {
|
||||
{error && <Alert>{error}</Alert>}{success && <Alert type="success">{success}</Alert>}
|
||||
|
||||
<form className={`panel form-panel ${isNew ? 'inspection-quick-create' : ''}`} onSubmit={saveGeneral}>
|
||||
<div className="panel-heading"><div><span className="eyebrow">{isNew ? 'CREACIÓN RÁPIDA' : 'PLANIFICACIÓN'}</span><h2>Contexto y fecha de inicio</h2><p className="section-copy">No existe título independiente ni fecha de fin planificada. El cierre real se registra al terminar el trabajo de campo.</p></div>{visit && <small className="muted">Actualizado {formatDate(visit.updatedAt)}</small>}</div>
|
||||
<div className="panel-heading"><div><span className="eyebrow">{isNew ? 'CREACIÓN RÁPIDA' : 'PLANIFICACIÓN'}</span><h2>Contexto y fecha de inicio</h2><p className="section-copy">El Área, Yacimiento y Operadora quedan fijados al crear la Inspección. La fecha puede reprogramarse antes del trabajo de campo.</p></div>{visit && <small className="muted">Actualizado {formatDate(visit.updatedAt)}</small>}</div>
|
||||
{visit && <div className="inspection-generated-code"><small>Identificador institucional</small><strong>{visit.code}</strong></div>}
|
||||
<div className="form-grid">
|
||||
<label className="field"><span>Área</span><SearchableSelect searchPlaceholder="Buscar Área…" value={form.operationalAreaId} onChange={(event) => { context.setAreaId(event.target.value); setForm((current) => ({ ...current, operationalAreaId: event.target.value, operatorCompanyId: '' })); }} required disabled={!canManage || !planningEditable}><option value="">Seleccionar Área…</option>{areas.map((area) => <option key={area.id} value={area.id}>{area.name} · {area.code}</option>)}</SearchableSelect></label>
|
||||
{!isNew && <label className="field"><span>Yacimiento</span><input value={visit?.scopeAsset?.name ?? 'Sin Yacimiento'} readOnly aria-readonly="true" /></label>}
|
||||
<label className="field"><span>Operadora</span><SearchableSelect searchPlaceholder="Buscar Operadora…" value={form.operatorCompanyId} onChange={(event) => { context.setCompanyId(event.target.value); setForm((current) => ({ ...current, operatorCompanyId: event.target.value })); }} required disabled={!canManage || !planningEditable || !form.operationalAreaId}><option value="">Seleccionar Operadora…</option>{operators.map((operator) => <option key={operator.id} value={operator.id}>{operator.name} · {operator.code}</option>)}</SearchableSelect></label>
|
||||
{isNew ? <label className="field"><span>Área</span><SearchableSelect searchPlaceholder="Buscar Área…" value={form.operationalAreaId} onChange={(event) => { context.setAreaId(event.target.value); setForm((current) => ({ ...current, operationalAreaId: event.target.value, operatorCompanyId: '' })); }} required disabled={!canManage || !planningEditable}><option value="">Seleccionar Área…</option>{areas.map((area) => <option key={area.id} value={area.id}>{area.name} · {area.code}</option>)}</SearchableSelect></label> : <label className="field"><span>Área</span><input value={visit?.operationalArea ? `${visit.operationalArea.name} · ${visit.operationalArea.code}` : 'Sin Área'} readOnly aria-readonly="true" /></label>}
|
||||
{!isNew && <label className="field"><span>Yacimiento</span><input value={visit?.scopeAsset ? `${visit.scopeAsset.name} · ${visit.scopeAsset.code}` : 'Sin Yacimiento'} readOnly aria-readonly="true" /></label>}
|
||||
{isNew ? <label className="field"><span>Operadora</span><SearchableSelect searchPlaceholder="Buscar Operadora…" value={form.operatorCompanyId} onChange={(event) => { context.setCompanyId(event.target.value); setForm((current) => ({ ...current, operatorCompanyId: event.target.value })); }} required disabled={!canManage || !planningEditable || !form.operationalAreaId}><option value="">Seleccionar Operadora…</option>{operators.map((operator) => <option key={operator.id} value={operator.id}>{operator.name} · {operator.code}</option>)}</SearchableSelect></label> : <label className="field"><span>Operadora</span><input value={visit?.operatorCompany ? `${visit.operatorCompany.name} · ${visit.operatorCompany.code}` : 'Sin Operadora'} readOnly aria-readonly="true" /></label>}
|
||||
<label className="field"><span>Fecha y hora de inicio</span><input type="datetime-local" value={form.plannedStartAt} onChange={(event) => setForm((current) => ({ ...current, plannedStartAt: event.target.value }))} required disabled={!canManage || !planningEditable} /></label>
|
||||
{isNew && <label className="field"><span>Inspector responsable</span><SearchableSelect searchPlaceholder="Buscar Inspector…" value={leadInspectorId} onChange={(event) => setLeadInspectorId(event.target.value)} required disabled={!canAssign}><option value="">Seleccionar Inspector…</option>{assignees.map((person) => <option key={person.id} value={person.id}>{personName(person)} · {person.username}</option>)}</SearchableSelect></label>}
|
||||
</div>
|
||||
@@ -354,15 +354,15 @@ export function InspectionVisitEditorF4Page() {
|
||||
</form>
|
||||
|
||||
{visit && <article className="panel inspection-checklist-panel">
|
||||
<div className="panel-heading"><div><span className="eyebrow">CHECKLIST TÉCNICO</span><h2>Antecedentes y controles</h2><p className="section-copy">Se construye por Área, Operadora y fecha. Las respuestas administrativas de empresa no modifican este checklist.</p></div>{canManage && planningEditable && <button type="button" className="button secondary" onClick={() => void regenerateChecklist()} disabled={busy}>Regenerar checklist</button>}</div>
|
||||
{visit.checklist.stale && <Alert>El contexto o la fecha cambió. Regenerá el checklist antes de planificar.</Alert>}
|
||||
<div className="panel-heading"><div><span className="eyebrow">CHECKLIST TÉCNICO</span><h2>Antecedentes y controles</h2><p className="section-copy">Se construye para el Área, Yacimiento y Operadora fijados en la Inspección, tomando la fecha planificada. Las respuestas administrativas de empresa no modifican este checklist.</p></div>{canManage && planningEditable && <button type="button" className="button secondary" onClick={() => void regenerateChecklist()} disabled={busy}>Regenerar checklist</button>}</div>
|
||||
{visit.checklist.stale && <Alert>La fecha cambió. Regenerá el checklist antes de planificar.</Alert>}
|
||||
<div className="inspection-checklist-metrics"><div><strong>{visit.checklist.verificationOverdue}</strong><span>controles vencidos</span></div><div><strong>{visit.checklist.upcomingControls}</strong><span>próximos 30 días</span></div><div><strong>{visit.checklist.antecedents}</strong><span>antecedentes</span></div><div><strong>{visit.checklist.actionableAssets}</strong><span>registros sugeridos</span></div></div>
|
||||
{visit.checklist.items.length === 0 ? <EmptyState title="Sin antecedentes" text="No hay Hallazgos históricos técnicos para este contexto." /> : <div className="table-scroll"><table><thead><tr><th>Tipo</th><th>Hallazgo</th><th>Inventario</th><th>Fecha</th><th>Gravedad</th></tr></thead><tbody>{visit.checklist.items.map((item) => <tr key={item.id}><td><span className={`status-badge ${item.itemKind === 'ANTECEDENT' ? '' : 'warning'}`}>{checklistLabel(item.itemKind)}</span></td><td><Link className="history-asset-link" to={`/hallazgos/${item.findingId}`}><strong>{item.findingTitle}</strong><small>{item.findingCode}</small></Link></td><td><Link className="history-asset-link" to={`/inventarios/${item.asset.id}`}><strong>{item.asset.name}</strong><small>{item.asset.code} · {item.asset.typeName}</small></Link></td><td>{formatDateOnly(item.referenceOn)}</td><td>{item.severity ?? '—'}</td></tr>)}</tbody></table></div>}
|
||||
</article>}
|
||||
|
||||
{visit && visit.verificationFindings.length > 0 && <article className="panel verification-visit-findings"><div className="panel-heading"><div><span className="eyebrow">VERIFICACIÓN</span><h2>Hallazgos a controlar</h2></div><span className="count-pill">{visit.verificationFindings.length}</span></div><div className="dossier-link-list">{visit.verificationFindings.map((finding) => <Link key={finding.id} to={`/hallazgos/${finding.id}`}><div><strong>{finding.title}</strong><small>{finding.code} · {finding.assetName} · objetivo {formatDateOnly(finding.targetControlOn ?? finding.nextControlOn)}</small>{finding.resultNotes && <small>{finding.resultNotes}</small>}</div><span>{finding.outcome === 'RESOLVED' ? 'Solucionado' : finding.outcome === 'NOT_RESOLVED' ? 'No solucionado' : finding.outcome === 'REQUIRES_NEW_DATE' ? 'Reprogramar' : 'Pendiente'}</span><Icon name="chevron" size={16} /></Link>)}</div></article>}
|
||||
|
||||
{visit && planningEditable && canManage && <form className="panel survey-add-target" onSubmit={addPreventiveAsset}><div className="panel-heading"><div><span className="eyebrow">PREVENTIVO</span><h2>Agregar Inventario sin pendiente previo</h2></div></div><label className="field"><span>Buscar Inventario</span><input value={assetSearch} onChange={(event) => setAssetSearch(event.target.value)} placeholder="Código o nombre" /></label><label className="field"><span>Inventario</span><SearchableSelect value={newAssetId} onChange={(event) => setNewAssetId(event.target.value)} required><option value="">Seleccionar…</option>{candidateAssets.map((asset) => <option key={asset.id} value={asset.id}>{asset.code} · {asset.name} · {asset.type.name}</option>)}</SearchableSelect></label><div className="form-actions"><button className="button primary" disabled={busy || !newAssetId}><Icon name="plus" />Agregar preventivo</button></div></form>}
|
||||
{visit && planningEditable && canManage && <form className="panel survey-add-target" onSubmit={addPreventiveAsset}><div className="panel-heading"><div><span className="eyebrow">PREVENTIVO</span><h2>Agregar Inventario sin pendiente previo</h2><p className="section-copy">Sólo se muestran Instalaciones y Subinstalaciones pertenecientes al Yacimiento fijado para esta Inspección.</p></div></div><label className="field"><span>Buscar Inventario</span><input value={assetSearch} onChange={(event) => setAssetSearch(event.target.value)} placeholder="Código o nombre" /></label><label className="field"><span>Inventario</span><SearchableSelect value={newAssetId} onChange={(event) => setNewAssetId(event.target.value)} required><option value="">Seleccionar…</option>{candidateAssets.map((asset) => <option key={asset.id} value={asset.id}>{asset.code} · {asset.name} · {asset.typeName}</option>)}</SearchableSelect></label><div className="form-actions"><button className="button primary" disabled={busy || !newAssetId}><Icon name="plus" />Agregar preventivo</button></div></form>}
|
||||
|
||||
{visit && <article className="table-panel inspection-assets"><div className="table-summary"><strong>{visit.assets.length} incluidos</strong><span>{visit.checklist.excludedAssets} excluidos con trazabilidad</span></div>{visit.planningAssets.length === 0 ? <EmptyState title="Sin Inventarios" text="Generá el checklist o agregá un preventivo." /> : <div className="table-scroll"><table><thead><tr><th>Inventario</th><th>Origen</th><th>Estado</th><th>Motivo</th><th /></tr></thead><tbody>{visit.planningAssets.map((asset) => <tr key={asset.id}><td><Link className="history-asset-link" to={`/inventarios/${asset.id}`}><strong>{asset.name}</strong><small>{asset.code} · {asset.typeName}</small></Link></td><td>{sourceLabel(asset.planningSource)}</td><td>{asset.included ? 'Incluido' : 'Excluido'}</td><td>{asset.exclusionReason ?? '—'}</td><td>{canManage && planningEditable && (asset.included ? <button type="button" className="button danger-outline compact" onClick={() => void excludeAsset(asset.id)}>Excluir</button> : <button type="button" className="button secondary compact" onClick={() => void reincludeAsset(asset.id)}>Reincorporar</button>)}</td></tr>)}</tbody></table></div>}</article>}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user