diff --git a/multi-git-dashboard/src/components/cards/TakeAssessmentCard.tsx b/multi-git-dashboard/src/components/cards/TakeAssessmentCard.tsx index 5caf2381..8432e33e 100644 --- a/multi-git-dashboard/src/components/cards/TakeAssessmentCard.tsx +++ b/multi-git-dashboard/src/components/cards/TakeAssessmentCard.tsx @@ -1,6 +1,6 @@ // components/cards/TakeAssessmentCard.tsx -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Box, Text, @@ -12,6 +12,7 @@ import { Group, NumberInput, Badge, + CloseButton, MultiSelect, } from '@mantine/core'; import { @@ -55,6 +56,20 @@ const TakeAssessmentCard: React.FC = ({ ? 1 : undefined; + // Selected students from the answer + const selectedStudents = (answer as string[]) || []; + + // Available students to select (excluding already selected ones) + const [availableStudents, setAvailableStudents] = useState<{ value: string; label: string }[]>( + teamMembersOptions ? teamMembersOptions.filter((student) => !selectedStudents.includes(student.value)) : [] + ); + + // Update availableStudents whenever selectedStudents or teamMembersOptions change + useEffect(() => { + if (teamMembersOptions) + setAvailableStudents(teamMembersOptions.filter((student) => !selectedStudents.includes(student.value))); + }, [selectedStudents, teamMembersOptions]); + return ( = ({ {/* Question instruction */} - + {customInstruction} @@ -85,14 +100,68 @@ const TakeAssessmentCard: React.FC = ({ - {question.type === 'Team Member Selection' && teamMembersOptions && ( - onAnswerChange(value)} - disabled={disabled} - maxValues={maxSelections} - /> + {/* Team Member Selection */} + {question.type === 'Team Member Selection' && ( + <> + {/* Render selected students as badges */} + + {teamMembersOptions && selectedStudents.map((userId) => { + const student = teamMembersOptions.find((option) => option.value === userId); + return ( + { + const updatedSelection = selectedStudents.filter((id) => id !== userId); + onAnswerChange(updatedSelection); + }} + size="xs" + style={{ marginLeft: 4 }} + /> + ) + } + > + {student ? student.label : userId} + + ); + })} + + + {/* Search and select students */} + {(!maxSelections || selectedStudents.length < maxSelections) ? ( + { + // value contains all selected values, but since we're managing selectedStudents separately, + // we'll only handle the last selected value + const newSelection = value[value.length - 1]; + if (newSelection) { + const updatedSelection = [...selectedStudents, newSelection]; + onAnswerChange(updatedSelection); + } + }} + disabled={disabled} + nothingFoundMessage="No students found" + maxValues={maxSelections} + onSearchChange={() => {}} // To prevent clearing search on selection + styles={{ + input: { minWidth: '200px' }, + }} + /> + ) : ( + // Max selections reached message + + Maximum number of selections reached. + + )} + )} {/* Render based on question type */} diff --git a/multi-git-dashboard/src/components/views/AssessmentInternalResults.tsx b/multi-git-dashboard/src/components/views/AssessmentInternalResults.tsx index 4d6d67d2..d908146c 100644 --- a/multi-git-dashboard/src/components/views/AssessmentInternalResults.tsx +++ b/multi-git-dashboard/src/components/views/AssessmentInternalResults.tsx @@ -1,6 +1,5 @@ import { Button, Group, Modal, Select, Text } from '@mantine/core'; import { useState } from 'react'; -import ResultForm from '@/components/forms/ResultForm'; import ResultCard from '@/components/cards/ResultCard'; import { Result } from '@shared/types/Result'; import { User } from '@shared/types/User'; @@ -9,18 +8,16 @@ interface AssessmentInternalResultsProps { results: Result[]; assessmentId: string; teachingTeam: User[]; - onResultsUploaded: () => void; } const AssessmentInternalResults: React.FC = ({ results, assessmentId, teachingTeam, - onResultsUploaded, }) => { const [isResultFormOpen, setIsResultFormOpen] = useState(false); const [markerFilter, setMarkerFilter] = useState('All'); - const [sortCriterion, setSortCriterion] = useState('name'); // Sorting criterion + const [sortCriterion, setSortCriterion] = useState('name'); const toggleResultForm = () => { setIsResultFormOpen(!isResultFormOpen); @@ -91,19 +88,16 @@ const AssessmentInternalResults: React.FC = ({ - + {'TODO: Download file to upload to Canvas'} {filterAndSortResultsByMarker(results).map((result) => ( diff --git a/multi-git-dashboard/src/pages/courses/[id]/internal-assessments/[assessmentId].tsx b/multi-git-dashboard/src/pages/courses/[id]/internal-assessments/[assessmentId].tsx index dfac9944..f4314637 100644 --- a/multi-git-dashboard/src/pages/courses/[id]/internal-assessments/[assessmentId].tsx +++ b/multi-git-dashboard/src/pages/courses/[id]/internal-assessments/[assessmentId].tsx @@ -256,7 +256,6 @@ const InternalAssessmentDetail: React.FC = () => { assessmentId={assessmentId} teachingTeam={teachingTeam} results={assessment?.results || []} - onResultsUploaded={fetchAssessment} /> )}