Add duration assigment step and create task on save (#243)

package.json

@@ -27,8 +27,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.3",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.2",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/x-date-pickers": "^6.18.1",
     "@next/font": "13.1.6",
     "@tanstack/react-query": "^4.24.10",
     "@trpc/client": "^10.16.0",

src/backend/db/migrations/1_initial-migrations.sql

@@ -91,8 +91,8 @@ CREATE TABLE "task" (
   task_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
   subgoal_id UUID REFERENCES "subgoal" (subgoal_id),
   assignee_id UUID REFERENCES "user" (user_id),
-  due_date TIMESTAMPTZ NOT NULL,
-  trial_count INTEGER NOT NULL,
+  due_date TIMESTAMPTZ,
+  trial_count INTEGER,
   seen BOOLEAN NOT NULL DEFAULT FALSE
 );
 

src/backend/routers/iep.ts

@@ -80,6 +80,33 @@ export const iep = router({
         .returningAll()
         .executeTakeFirst();
 
+      return result;
+    }),
+  assignTaskToParas: authenticatedProcedure
+    .input(
+      z.object({
+        subgoal_id: z.string().uuid(),
+        para_ids: z.string().uuid().array(),
+        due_date: z.date().optional(),
+        trial_count: z.number().optional(),
+      })
+    )
+    .mutation(async (req) => {
+      const { subgoal_id, para_ids, due_date, trial_count } = req.input;
+
+      const result = await req.ctx.db
+        .insertInto("task")
+        .values(
+          para_ids.map((para_id) => ({
+            subgoal_id,
+            assignee_id: para_id,
+            due_date,
+            trial_count,
+          }))
+        )
+        .returningAll()
+        .executeTakeFirst();
+
       return result;
     }),
   //Temporary function to easily assign tasks to self for testing

src/components/subgoal/Duration-Selection-Step.tsx

@@ -0,0 +1,118 @@
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  Input,
+} from "@mui/material";
+import { StaticDatePicker } from "@mui/x-date-pickers";
+
+export type AssignmentDuration =
+  | {
+      type: "forever";
+    }
+  | {
+      type: "minimum_number_of_collections";
+      minimumNumberOfCollections: number;
+    }
+  | {
+      type: "until_date";
+      date: Date;
+    };
+
+interface DurationSelectionStepProps {
+  disabled?: boolean;
+  selectedDuration: AssignmentDuration;
+  onDurationChange: (duration: AssignmentDuration) => void;
+}
+
+export const DurationSelectionStep = ({
+  disabled,
+  selectedDuration,
+  onDurationChange,
+}: DurationSelectionStepProps) => {
+  const handleTypeChange = (
+    event: SelectChangeEvent<AssignmentDuration["type"]>
+  ) => {
+    switch (event.target.value) {
+      case "forever":
+        onDurationChange({ type: "forever" });
+        break;
+      case "minimum_number_of_collections":
+        onDurationChange({
+          type: "minimum_number_of_collections",
+          minimumNumberOfCollections: 1,
+        });
+        break;
+      case "until_date":
+        onDurationChange({ type: "until_date", date: new Date() });
+        break;
+      default:
+        throw new Error("Invalid AssignmentDuration type");
+    }
+  };
+
+  return (
+    <>
+      <FormControl fullWidth sx={{ my: 3 }} disabled={disabled}>
+        <InputLabel id="para-assignment-ends-at">Ends at</InputLabel>
+        <Select
+          labelId="para-assignment-ends-at"
+          label="Ends at"
+          value={selectedDuration.type}
+          onChange={handleTypeChange}
+        >
+          <MenuItem value={"forever"}>
+            Never: The para will collected data until unassigned
+          </MenuItem>
+          <MenuItem value={"minimum_number_of_collections"}>
+            Until a number of instances have been recorded
+          </MenuItem>
+          <MenuItem value={"until_date"}>
+            Until a target date has been reached
+          </MenuItem>
+        </Select>
+      </FormControl>
+
+      {selectedDuration.type === "minimum_number_of_collections" && (
+        <FormControl fullWidth disabled={disabled}>
+          <InputLabel id="para-assignment-minimum-number-of-collections">
+            How many times should [staff] collect data on this benchmark?
+          </InputLabel>
+          <Input
+            type="number"
+            value={selectedDuration.minimumNumberOfCollections}
+            onChange={(e) =>
+              onDurationChange({
+                type: "minimum_number_of_collections",
+                minimumNumberOfCollections: parseInt(e.target.value),
+              })
+            }
+          />
+        </FormControl>
+      )}
+
+      {selectedDuration.type === "until_date" && (
+        <>
+          <InputLabel>
+            Until what date should [staff] collect data on this benchmark?
+          </InputLabel>
+          <StaticDatePicker
+            defaultValue={selectedDuration.date}
+            onChange={(e) =>
+              e
+                ? onDurationChange({
+                    type: "until_date",
+                    date: e,
+                  })
+                : undefined
+            }
+            slots={{ actionBar: () => null }}
+            disabled={disabled}
+          />
+        </>
+      )}
+    </>
+  );
+};

src/components/subgoal/Subgoal-Assignment-Modal.module.css

@@ -1,9 +1,5 @@
 /* Styles for Assign Subgoal Modal Component */
 .assignSubgoalModal {
-  max-width: 360px;
-  width: 360px;
-  max-height: 580px;
-  height: 800px;
   margin: auto;
   font-size: 16px;
   text-align: left;