app/routes/workspace.inventory.lot.tsx

Functions

Imports

It imports app/components/admin/shell-parts.tsx, app/components/lab/lab-ui.tsx, app/lab/actor.server.ts, app/lab/forms.mjs, app/lab/inventory.server.ts, app/lab/titles.mjs, app/lib/context.ts. No module of this repo imports it.

Source

1import { Form, Link, data } from "react-router";
2import { can } from "@dustinedwards/site-runtime/members";
3import { Button } from "capsomer/react/button";
4import { Field } from "capsomer/react/field";
5import { Panel } from "capsomer/react/panel";
6
7import { PageHead } from "capsomer/react/page-head";
8import { crumbLink } from "~/components/admin/shell-parts";
9import { LabTable, Result } from "~/components/lab/lab-ui";
10import { labActorContext } from "~/lab/actor.server";
11import { inventoryAction, lotPage } from "~/lab/inventory.server";
12import { amountText, idOf } from "~/lab/forms.mjs";
13import { PERMISSION } from "~/lab/titles.mjs";
14import { getEnv } from "~/lib/context";
15import type { Route } from "./+types/workspace.inventory.lot";
16
17export function meta() {
18  return [{ title: "Lot · Lab" }, { name: "robots", content: "noindex" }];
19}
20
21const PRIVATE = { "cache-control": "private, no-store" };
22
23function notFound(): never {
24  throw data("Not found.", { status: 404, headers: PRIVATE });
25}
26
27export async function loader({ context, params }: Route.LoaderArgs) {
28  const actor = context.get(labActorContext);
29  if (!can(actor, PERMISSION.read)) notFound();
30  const id = idOf(params.id);
31  const page = id ? await lotPage(getEnv(context), actor, id) : null;
32  if (!page) notFound();
33  return data(page, { headers: PRIVATE });
34}
35
36export async function action({ context, request, params }: Route.ActionArgs) {
37  const actor = context.get(labActorContext);
38  if (!can(actor, PERMISSION.read)) notFound();
39  const id = idOf(params.id);
40  if (!id) notFound();
41  const form = await request.formData();
42  // The lot is the one in the address, whatever the form says.
43  form.set("lot", String(id));
44  return data(await inventoryAction(getEnv(context), actor, form, Date.now()), { headers: PRIVATE });
45}
46
47/** One audit row in words: what changed, field by field. */
48function changeText(before: string | null, after: string | null): string {
49  const b = before ? (JSON.parse(before) as Record<string, unknown>) : null;
50  const a = after ? (JSON.parse(after) as Record<string, unknown>) : null;
51  if (!b && a) return "Added";
52  if (!a) return "Changed";
53  const changed = Object.keys(a).filter((k) => k !== "id" && JSON.stringify(a[k]) !== JSON.stringify(b?.[k]));
54  return changed.length ? changed.map((k) => `${k.replace("_", " ")}: ${b?.[k] ?? "none"} to ${a[k] ?? "none"}`).join("; ") : "No change";
55}
56
57export default function LabLot({ loaderData, actionData }: Route.ComponentProps) {
58  const { lot, audit, runs, locations, allRuns, canEdit, canUse } = loaderData;
59  return (
60    <>
61      <PageHead
62        renderLink={crumbLink}
63        crumbs={[{ label: "Inventory", href: "/lab/inventory" }, { label: `Lot ${lot.lot_number}` }]}
64        title={`${lot.item}, lot ${lot.lot_number}`}
65      />
66      <Result result={actionData} />
67      <dl className="lab-facts">
68        <dt>Left</dt>
69        <dd>{lot.amount === null ? "Not recorded" : amountText(lot.amount, lot.unit)}</dd>
70        <dt>Status</dt>
71        <dd>{lot.status.replace("_", " ")}</dd>
72        <dt>Opened</dt>
73        <dd>{lot.opened ?? "Not yet"}</dd>
74        <dt>Expires</dt>
75        <dd>{lot.expiry ?? "Not recorded"}</dd>
76        <dt>Received</dt>
77        <dd>{lot.received ?? "Not recorded"}</dd>
78        <dt>Where</dt>
79        <dd>{lot.location ?? "Not recorded"}</dd>
80      </dl>
81      {canUse && lot.status === "in_stock" ? (
82        <Form method="post" className="lab-actions">
83          {lot.opened ? null : (
84            <Button type="submit" name="intent" value="mark_opened">
85              Mark opened
86            </Button>
87          )}
88          <Button type="submit" name="intent" value="mark_empty">
89            Mark empty
90          </Button>
91        </Form>
92      ) : null}
93
94      <Panel title={allRuns ? "Runs that used this lot" : "Your runs that used this lot"}>
95        {runs.length === 0 ? (
96          <p className="cap-muted">No runs yet.</p>
97        ) : (
98          <LabTable label="Runs that used this lot" head={["Run", "Protocol", "Day", "Outcome", "By"]}>
99            {runs.map((r) => (
100              <tr key={r.id}>
101                <th scope="row">
102                  <Link to={`/lab/runs/${r.id}`}>Run {r.id}</Link>
103                  {r.replaced_by ? <span className="cap-muted">, corrected by run {r.replaced_by}</span> : null}
104                </th>
105                <td>{r.title}</td>
106                <td>{r.run_on}</td>
107                <td>{r.outcome}</td>
108                <td>{r.actor}</td>
109              </tr>
110            ))}
111          </LabTable>
112        )}
113      </Panel>
114
115      {canEdit ? (
116        <Panel title="Change this lot">
117          <Form method="post" className="lab-form">
118            <input type="hidden" name="intent" value="edit_lot" />
119            <div className="lab-fields">
120              <Field label="Amount left">
121                <input className="cap-input" name="amount" inputMode="decimal" defaultValue={lot.amount ?? ""} />
122              </Field>
123              <Field label="Unit">
124                <input className="cap-input" name="unit" defaultValue={lot.unit ?? ""} />
125              </Field>
126              <Field label="Expires">
127                <input className="cap-input" type="date" name="expiry" defaultValue={lot.expiry ?? ""} />
128              </Field>
129              <Field label="Where">
130                <select className="cap-input" name="location" defaultValue={lot.location_id ?? ""}>
131                  <option value="">Not recorded</option>
132                  {locations.map((l) => (
133                    <option key={l.id} value={l.id}>
134                      {l.name}
135                    </option>
136                  ))}
137                </select>
138              </Field>
139              <Field label="Status">
140                <select className="cap-input" name="status" defaultValue={lot.status}>
141                  <option value="in_stock">In stock</option>
142                  <option value="empty">Empty</option>
143                  <option value="discarded">Discarded</option>
144                </select>
145              </Field>
146            </div>
147            <div>
148              <Button type="submit" variant="primary">
149                Save lot
150              </Button>
151            </div>
152          </Form>
153        </Panel>
154      ) : null}
155
156      <Panel title="History">
157        <LabTable label="History of this lot" head={["When", "Who", "What"]}>
158          {audit.map((row) => (
159            <tr key={row.id}>
160              <td>{new Date(row.at * 1000).toISOString().slice(0, 16).replace("T", " ")} UTC</td>
161              <td>{row.actor}</td>
162              <td>{changeText(row.before_row, row.after_row)}</td>
163            </tr>
164          ))}
165        </LabTable>
166      </Panel>
167    </>
168  );
169}