add group selector to timelogviewer for admins

The page fetches all groups and hides the student selector until
a group is selected. The available students are limited to the ones in
the selected group.

When the group is changed, the selectedStudent is set to null.

frontend/src/components/TimeLogsPage/InstructorTimeLogsPage.jsx

@@ -3,6 +3,7 @@ import { withRouter } from 'react-router-dom'
 
 import { TimeLogsSelectForm } from './TimeLogsSelectForm'
 import { TimeLogRow } from './TimeLogRow'
+import LoadingSpinner from '../common/LoadingSpinner'
 
 import userService from '../../services/user'
 import groupManagementService from '../../services/groupManagement'
@@ -13,8 +14,26 @@ const InstructorTimeLogsPage = () => {
   const [allStudents, setAllStudents] = useState([])
   const [allLogs, setAllLogs] = useState(null)
   const [selectedGroup, setSelectedGroup] = useState(null)
+  const [allGroups, setAllGroups] = useState([])
+
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
+      const fetchAllGroups = async () => {
+        try {
+          const allGroups = await groupManagementService.get()
+          setAllGroups(allGroups)
+        } catch (error) {
+          console.error(
+            'Error fetching groups:',
+            error.message,
+            ' / ',
+            error.response.data.error
+          )
+          notificationActions.setError(error.response.data.error)
+        }
+      }
+
       const fetchAllStudents = async () => {
         try {
           const allStudents = await userService.get()
@@ -46,45 +65,33 @@ const InstructorTimeLogsPage = () => {
       }
 
       const fetchData = async () => {
+        setIsLoading(true)
+        await fetchAllGroups()
         await fetchAllStudents()
         await fetchAllLogs()
+        setIsLoading(false)
       }
       fetchData()
     }, [])
 
-  useEffect(() => {
-    const fetchGroup = async () => {
-      try {
-        const group = await groupManagementService.getByStudent(selectedStudent)
-        setSelectedGroup(group)
-      } catch (error) {
-        console.error(
-          'Error fetching group:',
-          error.message,
-          ' / ',
-          error.response.data.error
-        )
-        notificationActions.setError(error.response.data.error)
-      }
-    }
-
-    fetchGroup()
-  }, [selectedStudent])
-
   const isLogs = (logs) => logs && logs.length > 0
   const logsByStudent =
     isLogs(allLogs) && allLogs.filter((log) => log.studentNumber === selectedStudent)
 
+  if (isLoading) return <LoadingSpinner />
   return (
     <div>
       <div>
         <TimeLogsSelectForm
+          groups={allGroups}
+          selectedGroup={selectedGroup}
+          handleGroupChange={setSelectedGroup}
           students={allStudents}
           selectedStudent={selectedStudent}
           handleStudentChange={setSelectedStudent}
         />
         <div>{selectedStudent}</div>
-        {selectedGroup && <div>{selectedGroup.groupName}</div>}
+        {selectedGroup && <div>{selectedGroup.name}</div>}
       </div>
       <div id='timelog-rows'>
         {isLogs(logsByStudent) &&

frontend/src/components/TimeLogsPage/TimeLogsSelectForm.jsx

@@ -3,15 +3,55 @@ import MenuItem from '@material-ui/core/MenuItem'
 import Typography from '@material-ui/core/Typography'
 import Select from '@material-ui/core/Select'
 
-export const TimeLogsSelectForm = ({ students, selectedStudent, handleStudentChange }) => {
+export const TimeLogsSelectForm = ({
+  groups, selectedGroup, handleGroupChange,
+  students, selectedStudent, handleStudentChange }) => {
+  const GroupSelectWrapper = ({ label, children }) => (
+    <div style={{ padding: 20 }}>
+      <Typography variant="caption">{label}</Typography>
+      {children}
+    </div>
+  )
+
+  const GroupSelect = ({
+    groups,
+    selectedGroup,
+    handleGroupChange
+  }) => {
+    return (
+      <Select
+        data-cy="group-selector"
+        value={selectedGroup}
+        onChange={(e) => {
+          handleGroupChange(e.target.value)
+          handleStudentChange(null)
+        }}
+      >
+        {groups.map((group) => (
+          <MenuItem
+            key={group.id}
+            className="group-menu-item"
+            value={group}
+          >
+            {group.name}
+          </MenuItem>
+        ))}
+      </Select>
+  )}
+
+  const StudentIsInGroup = ( student, group ) => {
+    return group.studentIds.includes(student.student_number)
+  }
+  
   const StudentSelectWrapper = ({ label, children }) => (
     <div style={{ padding: 20 }}>
       <Typography variant="caption">{label}</Typography>
       {children}
     </div>
   )
-  
+
   const StudentSelect = ({
+    selectedGroup,
     students,
     selectedStudent,
     handleStudentChange
@@ -23,8 +63,10 @@ export const TimeLogsSelectForm = ({ students, selectedStudent, handleStudentCha
         onChange={(e) => {
           handleStudentChange(e.target.value)
         }}
+        disabled={!selectedGroup}
       >
-        {students.map((student) => (
+        {students.filter(student => StudentIsInGroup(student, selectedGroup))
+          .map((student) => (
           <MenuItem
             key={student.student_number}
             className="student-menu-item"
@@ -40,13 +82,24 @@ export const TimeLogsSelectForm = ({ students, selectedStudent, handleStudentCha
   return (
     <div className="timelog-select-container">
       <div className="selector-container">
-        <StudentSelectWrapper label="Select student">
-          <StudentSelect
-            selectedStudent={selectedStudent}
+        <GroupSelectWrapper label="Select group">
+          <GroupSelect
+            selectedGroup={selectedGroup}
+            handleGroupChange={handleGroupChange}
+            groups={groups}
             handleStudentChange={handleStudentChange}
-            students={students}
           />
-        </StudentSelectWrapper>
+        </GroupSelectWrapper>
+        {selectedGroup &&
+          <StudentSelectWrapper label="Select student">
+            <StudentSelect
+              selectedGroup={selectedGroup}
+              selectedStudent={selectedStudent}
+              handleStudentChange={handleStudentChange}
+              students={students}
+            />
+          </StudentSelectWrapper>
+        }
       </div>
     </div>
   )