Trying a stepper

src/api/cePlanService.ts

@@ -19,7 +19,7 @@ const TEST_PLAN = {
             cohort_id: '1',
             student_id: 's1',
             student: {
-                id: '',
+                id: 's1',
                 name: 'Student 1',
                 age: null,
                 email: '',
@@ -29,14 +29,15 @@ const TEST_PLAN = {
                 availabilities: []
             },
             anchor: true,
+            priority: true,
             availabilities: []
         } ,
         {
             id: '2',
             cohort_id: '1',
             student_id: 's2',
             student: {
-                id: '',
+                id: 's2',
                 name: 'Student 2',
                 age: null,
                 email: '',
@@ -46,14 +47,15 @@ const TEST_PLAN = {
                 availabilities: []
             },
             anchor: false,
+            priority: true,
             availabilities: []
         },
         {
             id: '3',
             cohort_id: '1',
             student_id: 's3',
             student: {
-                id: '',
+                id: 's3',
                 name: 'Student 3',
                 age: null,
                 email: '',
@@ -63,6 +65,7 @@ const TEST_PLAN = {
                 availabilities: []
             },
             anchor: false,
+            priority: false,
             availabilities: []
         }
     ]  as Placement[],
@@ -86,8 +89,7 @@ const TEST_PLAN = {
 } as Plan;
 
 class CEPlanService {
-    async getById(id: string): Promise<Plan> {
-        console.log("get plan", id);
+    async getById(_id: string): Promise<Plan> {
         return TEST_PLAN;
     }
 

src/api/types.ts

@@ -63,6 +63,7 @@ type Placement = Entity &  {
     student_id: string;
     student: Student;
     anchor: boolean;
+    priority: boolean;
     availabilities: Availability[];
 }
 

src/components/PlanDetails/GroupBoard.tsx

@@ -8,71 +8,80 @@
 
 import { ReactNode, useEffect, useState } from "react";
 
-import { StarFilled } from "@ant-design/icons";
+import { ExclamationCircleFilled, StarFilled } from "@ant-design/icons";
+import { DDCategory, DDType, DragAndDrop } from '@digitalaidseattle/draganddrop';
 import {
     Box,
-    Button,
     Card,
     CardContent,
+    Stack,
     Typography
 } from "@mui/material";
-import { DragAndDrop, DDCategory, DDType } from '@digitalaidseattle/draganddrop';
-import { Placement, Plan } from "../../api/types";
+import { Placement } from "../../api/types";
+import { PlanProps } from "../../utils/props";
 
 
 export const StudentCard = (props: { placement: Placement }) => {
-
+    const anchor = props.placement.anchor ? 'green' : 'gray;'
+    const priority = props.placement.priority ? 'green' : 'gray;'
     return (
         <Card sx={{ pointerEvents: 'auto', margin: 0 }}>
             <CardContent>
-                <Typography>{props.placement.anchor && <StarFilled style={{ color: "red" }} />} {props.placement.student.name}</Typography>
+                <Stack direction={'row'} spacing={{ xs: 1, sm: 1 }}>
+                    <Stack direction={'row'} spacing={{ xs: 1, sm: 1 }}>
+                        {props.placement.anchor &&
+                            <StarFilled style={{ fontSize: '150%', color: anchor }} />
+                        }
+                        {props.placement.priority &&
+                            <ExclamationCircleFilled style={{ fontSize: '150%', color: priority }} />
+                        }
+                    </Stack>
+                    <Typography>{props.placement.student.name}</Typography>
+                </Stack>
             </CardContent>
         </Card>
     );
 }
 
-type EnrollmentWrapper = Placement & DDType
+type PlacementWrapper = Placement & DDType
 
-export const GroupBoard = (props: { plan: Plan | undefined }) => {
+export const GroupBoard: React.FC<PlanProps> = ({ plan }) => {
     const [categories, setCategories] = useState<DDCategory<string>[]>();
 
     useEffect(() => {
-        if (props.plan) {
-            setCategories(props.plan.groups.map(group => {
-                return { label: group.groupNo, value: group.groupNo }
-            }))
-        }
-    }, [props])
+        setCategories(plan.groups.map(group => {
+            return { label: group.groupNo, value: group.groupNo }
+        }))
+    }, [plan])
 
     function handleChange(c: Map<string, unknown>, t: Placement) {
         console.log(c, t)
     }
 
-    function isCategory(item: EnrollmentWrapper, category: DDCategory<any>): boolean {
-        if (props.plan) {
-            const group = props.plan.groups.find(group => group.groupNo === category.value);
+    function isCategory(item: PlacementWrapper, category: DDCategory<any>): boolean {
+        if (plan) {
+            const group = plan.groups.find(group => group.groupNo === category.value);
             return group ? group.studentIds.includes(item.student_id) : false;
         }
         return false;
     }
 
-    function cellRender(item: EnrollmentWrapper): ReactNode {
+    function cellRender(item: PlacementWrapper): ReactNode {
         return <StudentCard placement={item} />
     }
 
     return (
         <>
-            <Button variant='contained' onClick={() => alert('Placing Students')}>Place Students</Button>
             <Box sx={{ marginTop: 1 }}  >
-                <>{props.plan && categories &&
+                <>{plan && categories &&
                     <DragAndDrop
                         onChange={(c: Map<string, unknown>, e: Placement) => handleChange(c, e)}
-                        items={props.plan.placements}
+                        items={plan.placements}
                         categories={categories}
                         isCategory={isCategory}
                         cardRenderer={cellRender}
                     />}
-                    {!props.plan &&
+                    {!plan &&
                         <Typography>No plan found.</Typography>
                     }
                 </>

src/components/PlanDetails/GroupCount.tsx

@@ -0,0 +1,63 @@
+
+/**
+ *  GroupCount.tsx
+ *
+ *  @copyright 2024 Digital Aid Seattle
+ *
+ */
+
+import { useEffect, useState } from "react";
+
+import {
+    Box,
+    Card,
+    CardContent,
+    Slider,
+    Stack,
+    Typography
+} from "@mui/material";
+import { PlanProps } from "../../utils/props";
+
+export const GroupCount: React.FC<PlanProps> = ({ plan }) => {
+    const [values, setValues] = useState<number[]>([0, 10]);
+
+    const [min, setMin] = useState<number>(5);
+    const [max, setMax] = useState<number>(10);
+
+    useEffect(() => {
+        // TODO base values, min, & max on student counts
+        setValues([5, 10])
+        setMin(5);
+        setMax(10);
+    }, [plan])
+
+    function handleChange(_event: Event, newValue: number | number[]): void {
+        console.log(newValue)
+        setValues(newValue as number[]);
+    }
+
+    return (
+        <>
+            <Card>
+                <CardContent>
+                    <Stack direction={'row'} padding={5} spacing={5}>
+                        <Typography gutterBottom sx={{ color: 'text.primary', fontSize: 14 }}>
+                            Number of Groups
+                        </Typography>
+                        <Box sx={{ width: 400 }}>
+                            <Slider
+                                aria-label="Always visible"
+                                value={values}
+                                step={1}
+                                min={min}
+                                max={max}
+                                valueLabelDisplay="on"
+                                onChange={handleChange}
+                            />
+                        </Box>
+                    </Stack>
+                </CardContent>
+            </Card>
+        </>
+    )
+};