91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import SampleSearchResultsSection from "../components/SampleSearchResultsSection";
|
|
import { apiGet } from "../lib/api";
|
|
import type { LookupResult, PortalSampleRow } from "../lib/types";
|
|
import { useState } from "react";
|
|
|
|
function routeForLookup(result: LookupResult) {
|
|
return result.sampleId && result.routeSegment ? `/samples/${result.sampleId}/${result.routeSegment}` : null;
|
|
}
|
|
|
|
export default function SearchCalendarPage() {
|
|
const navigate = useNavigate();
|
|
const [selectedDate, setSelectedDate] = useState("");
|
|
const [samples, setSamples] = useState<PortalSampleRow[]>([]);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [resultLabel, setResultLabel] = useState("Bitte Datum auswaehlen");
|
|
|
|
async function handleDateChange(nextDate: string) {
|
|
setSelectedDate(nextDate);
|
|
if (!nextDate) {
|
|
setSamples([]);
|
|
setMessage(null);
|
|
setResultLabel("Bitte Datum auswaehlen");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const rows = await apiGet<PortalSampleRow[]>(
|
|
`/portal/search/by-date?date=${encodeURIComponent(nextDate)}`,
|
|
);
|
|
setSamples(rows);
|
|
setResultLabel(`Erfasste Proben am ${nextDate.split("-").reverse().join(".")}`);
|
|
setMessage(rows.length ? null : "An diesem Tag wurden keine Proben erfasst.");
|
|
} catch (dateError) {
|
|
setSamples([]);
|
|
setResultLabel("Keine Treffer");
|
|
setMessage((dateError as Error).message);
|
|
}
|
|
}
|
|
|
|
async function openSample(sampleNumber: number) {
|
|
try {
|
|
const result = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumber}`);
|
|
const target = routeForLookup(result);
|
|
if (!result.found || !target) {
|
|
setMessage(result.message);
|
|
return;
|
|
}
|
|
navigate(target);
|
|
} catch (openError) {
|
|
setMessage((openError as Error).message);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="page-stack">
|
|
<section className="section-card section-card--hero">
|
|
<div>
|
|
<p className="eyebrow">Suche | Kalendar</p>
|
|
<h3>Proben nach Erfassungsdatum finden</h3>
|
|
<p className="muted-text">
|
|
Waehle einen Tag im Kalendar aus, um alle an diesem Datum erfassten Proben in der Liste zu sehen.
|
|
</p>
|
|
</div>
|
|
|
|
{message ? <div className="alert alert--error">{message}</div> : null}
|
|
</section>
|
|
|
|
<section className="section-card">
|
|
<label className="field field--required">
|
|
<span>Kalendar</span>
|
|
<input
|
|
type="date"
|
|
value={selectedDate}
|
|
onChange={(event) => void handleDateChange(event.target.value)}
|
|
required
|
|
/>
|
|
</label>
|
|
</section>
|
|
|
|
<SampleSearchResultsSection
|
|
eyebrow="Suchergebnisse"
|
|
title={resultLabel}
|
|
emptyText="Bitte ein Datum im Kalendar auswaehlen."
|
|
samples={samples}
|
|
onOpen={(sampleNumber) => void openSample(sampleNumber)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|