Select component for users latest visits

frontend/i14/src/api/services.ts

@@ -0,0 +1,35 @@
+import type { ApiVisitSchema, Proposal } from "../../types/APIresponse";
+import type { Option } from "../../types/workflowFields";
+
+const formatDate = (d: Date): string =>
+  `${d.toLocaleString("en-GB", { month: "long" })} ${d.getFullYear()}`;
+
+const makeVisitId = (proposal: Proposal, sessionNumber: number): string =>
+  `${String(proposal.proposalCategory).toLowerCase()}${proposal.proposalNumber}-${sessionNumber}`;
+
+const makeLabel = (
+  proposal: Proposal,
+  sessionNumber: number,
+  d: string
+): string => {
+  const visit = makeVisitId(proposal, sessionNumber);
+  const date = formatDate(new Date(d));
+  return `${visit} - ${date}`;
+};
+
+export const dataToOptions = (d: ApiVisitSchema): Option[] =>
+  d.visitArray.account.proposalRoles
+    ?.flatMap((r) =>
+      (r.proposal?.instrumentSessions ?? [])
+        .filter((s) => s?.startTime)
+        .map((s) => ({
+          desc: r.proposal?.title ?? "",
+          label: makeLabel(r.proposal, s.instrumentSessionNumber, s.startTime),
+          value: makeVisitId(r.proposal, s.instrumentSessionNumber),
+          _ts: Date.parse(s.startTime),
+        }))
+    )
+    .filter((o) => !Number.isNaN(o._ts))
+    .sort((a, b) => b._ts - a._ts)
+    .slice(0, 5)
+    .map(({ _ts, ...rest }) => rest);

frontend/i14/src/components/workflows/WorkflowForm.tsx

@@ -9,11 +9,12 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import { visitRegex } from "@diamondlightsource/sci-react-ui";
 
 import { initialData } from "../../data/form";
-import { templateOptions } from "../../data/templates";
 import OptionSelect from "./OptionSelect";
+import { dataToOptions } from "../../api/services";
+import { templateOptions } from "../../data/templates";
+import visitArray from "../../data/visits.json";
 
 import type { WorkflowFormData, Option } from "../../types/workflowFields";
 
@@ -23,18 +24,18 @@ export const WorkflowForm: FC = () => {
   const getFilteredTemplates = (toggle: ToggleGroup): Option[] => {
     return (templateOptions ?? []).filter((o) => o.value.includes(toggle));
   };
+  const visitOptions: Option[] = useMemo(() => dataToOptions(visitArray), []);
 
   const [data, setData] = useState<WorkflowFormData>(() => {
     const defaultTechnique =
       techniques.find((t) => initialData.template.includes(t)) ?? techniques[0];
     return {
       ...initialData,
+      visit: visitOptions[0]?.value ?? initialData.visit,
       technique: defaultTechnique,
     };
   });
 
-  const visitMatch = visitRegex.exec(data.visit);
-
   const filteredTemplateOptions: Option[] = getFilteredTemplates(
     data.technique
   );
@@ -93,21 +94,13 @@ export const WorkflowForm: FC = () => {
                 setData((prev) => ({ ...prev, template: e.target.value }))
               }
             />
-
-            <TextField
-              name="visit"
+            <OptionSelect
               label="Visit"
-              variant="outlined"
-              size="small"
-              placeholder="Visit"
-              type="text"
               value={data.visit}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value;
-                setData((prev) => ({ ...prev, visit: value }));
-              }}
-              helperText={visitMatch ? "" : "Expected format: xx12345-1"}
-              error={!visitMatch}
+              options={visitOptions}
+              onChange={(e) =>
+                setData((prev) => ({ ...prev, visit: e.target.value }))
+              }
             />
 
             <TextField
@@ -123,7 +116,7 @@ export const WorkflowForm: FC = () => {
               }}
             />
 
-            <Button variant="contained" type="submit" disabled={!visitMatch}>
+            <Button variant="contained" type="submit">
               Open workflow form in a new tab
             </Button>
           </Stack>

frontend/i14/src/types/APIresponse.ts

@@ -0,0 +1,24 @@
+type ProposalCategory = "mg" | "cm" | "nt" | "nr" | "jm" | "bi" | "si";
+
+interface InstrumentSession {
+  startTime: string;
+  endTime: string;
+  instrumentSessionNumber: number;
+}
+
+interface Proposal {
+  proposalNumber: number;
+  proposalCategory: ProposalCategory;
+  title: string;
+  instrumentSessions: InstrumentSession[];
+}
+
+export type ApiVisitSchema = {
+  data: {
+    account: {
+      proposalRoles: {
+        proposal: Proposal;
+      }[];
+    };
+  };
+};