app/components/lab/run-form.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/workspace.runs.run.tsx, app/routes/workspace.runs.tsx.

Source

1// The form a lab member records a run with, and the correction of one: the protocol, the day, the outcome, a note and
2// the lots it used. Plain fields, so it works with no script.
3
4import { Form } from "react-router";
5import { Button } from "capsomer/react/button";
6import { Field } from "capsomer/react/field";
7
8type Option = { value: string; label: string };
9
10export function RunForm({
11  procedures,
12  lots,
13  lotRows,
14  replaces,
15  defaults,
16}: {
17  procedures: Array<{ slug: string; title: string }>;
18  lots: Option[];
19  lotRows: number;
20  /** The run this one corrects, if it is a correction. */
21  replaces?: number;
22  defaults?: { procedure?: string; run_on?: string; outcome?: string; note?: string | null; lots?: Array<{ lot_id: number; amount_used: number | null; emptied: number }> };
23}) {
24  return (
25    <Form method="post" action={replaces ? `/lab/runs/${replaces}` : "/lab/runs"} className="lab-form">
26      <div className="lab-fields">
27        <Field label="Protocol" required>
28          <select className="cap-input" name="procedure" required defaultValue={defaults?.procedure ?? ""}>
29            <option value="" disabled>
30              Choose a protocol
31            </option>
32            {procedures.map((p) => (
33              <option key={p.slug} value={p.slug}>
34                {p.title}
35              </option>
36            ))}
37          </select>
38        </Field>
39        <Field label="Day" help="Blank means today">
40          <input className="cap-input" type="date" name="run_on" defaultValue={defaults?.run_on ?? ""} />
41        </Field>
42        <Field label="Outcome">
43          <select className="cap-input" name="outcome" defaultValue={defaults?.outcome ?? "completed"}>
44            <option value="completed">Completed</option>
45            <option value="failed">Failed</option>
46            <option value="abandoned">Abandoned</option>
47          </select>
48        </Field>
49      </div>
50      <Field label="Note">
51        <textarea className="cap-input" name="note" rows={3} defaultValue={defaults?.note ?? ""} />
52      </Field>
53      <fieldset className="lab-form">
54        <legend className="cap-field-label">Lots used</legend>
55        <p className="cap-field-help">
56          {replaces
57            ? "A correction records the lots for the trace and takes nothing from them; put a lot's amount right on its own page."
58            : "The amount comes off the lot, in the lot's own unit. A lot first used here is marked opened."}
59        </p>
60        {Array.from({ length: lotRows }, (_, i) => {
61          const d = defaults?.lots?.[i];
62          return (
63            <div className="lab-fields" key={i}>
64              <Field label={`Lot ${i + 1}`}>
65                <select className="cap-input" name={`lot-${i}`} defaultValue={d ? String(d.lot_id) : ""}>
66                  <option value="">None</option>
67                  {lots.map((l) => (
68                    <option key={l.value} value={l.value}>
69                      {l.label}
70                    </option>
71                  ))}
72                </select>
73              </Field>
74              <Field label={`Amount used, lot ${i + 1}`}>
75                <input className="cap-input" name={`amount-${i}`} inputMode="decimal" defaultValue={d?.amount_used ?? ""} />
76              </Field>
77              <label className="cap-check">
78                <input type="checkbox" name={`emptied-${i}`} value="yes" defaultChecked={d?.emptied === 1} /> Emptied it
79              </label>
80            </div>
81          );
82        })}
83      </fieldset>
84      <div>
85        <Button type="submit" variant="primary">
86          {replaces ? `Record the correction of run ${replaces}` : "Record run"}
87        </Button>
88      </div>
89    </Form>
90  );
91}