Continued work on the historical pages.

imports/ui/pages/History/ChromebookUsage.jsx

@@ -9,7 +9,6 @@ import Button from "@mui/material/Button";
 import Select from '@mui/material/Select';
 import Chip from '@mui/material/Chip';
 import MenuItem from '@mui/material/MenuItem';
-import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
 import Paper from '@mui/material/Paper';
 import InputBase from '@mui/material/InputBase';
 import IconButton from '@mui/material/IconButton';
@@ -19,20 +18,76 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import FormControl from '@mui/material/FormControl';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { useNavigate } from "react-router-dom";
+import {Students} from "/imports/api/students";
+import {Staff} from "/imports/api/staff";
+import {conditions} from "/imports/api/assets";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "@mui/material/Dialog";
+import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
 
 export default () => {
+	const navigate = useNavigate()
+	const [value, setValue] = useState("")
+	const search = () => {
+		if(value && value.length > 1) {
+			let students = Students.find({email: {$regex: value, $options: 'i'}}).fetch()
+			let staff = Staff.find({email: {$regex: value, $options: 'i'}}).fetch()
+			let all = [...staff, ...students]
+			
+			if(all.length > 1) {
+				setPeopleToPickFrom(all)
+				setOpenPickPersonDialog(true)
+			}
+			else if(all.length === 1) {
+				navigate("/history/search?" + (students.length ? "studentId" : 'staffId') + "=" + encodeURIComponent(all[0]._id));
+			}
+		}
+	}
+
+	Meteor.subscribe('students');
+	Meteor.subscribe('staff');
+
+	const [openPickPersonDialog, setOpenPickPersonDialog] = useState(false)
+	const [peopleToPickFrom, setPeopleToPickFrom] = useState([])
+	const pickPersonClosed = (cause, person) => {
+		if(openPickPersonDialog) setOpenPickPersonDialog(false)
+
+		if(person && person._id) {
+			navigate("/history/search?" + (person.grade ? "studentId" : 'staffId') + "=" + encodeURIComponent(person._id));
+		}
+	}
+	
 	return (
-		<div style={{display: "flex", flexDirection: "column"}} sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}>
-			<Paper componet='form'>
-				<InputBase
-					sx={{ ml: 1, flex: 1 }}
-					placeholder="Email"
-					inputProps={{ 'aria-label': 'Search Email' }}
-				/>
-				<IconButton type="button" sx={{ p: '10px' }} aria-label="search">
-					<SearchIcon />
-				</IconButton>
-			</Paper>
-		</div>
+		<>
+			<Dialog open={openPickPersonDialog}>
+				<DialogTitle>Pick One</DialogTitle>
+				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
+					<List>
+						{peopleToPickFrom.map((next, i) => {
+							return (
+								<ListItemButton key={next._id} onClick={(e) => {pickPersonClosed("selection", next)}}>
+									<ListItemText primary={next.firstName + " " + next.lastName} secondary={next.email}/>
+								</ListItemButton>
+							)
+						})}
+					</List>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => pickPersonClosed("button")}>Cancel</Button>
+				</DialogActions>
+			</Dialog>
+
+			<div style={{display: "flex", flexDirection: "column"}} sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}>
+				<Paper componet='form'>
+					<InputBase value={value} onChange={(e) => {setValue(e.target.value)}} sx={{ ml: 1, flex: 1 }} placeholder="Email" inputProps={{ 'aria-label': 'Search Email' }}/>
+					<IconButton type="button" sx={{ p: '10px' }} aria-label="search" onClick={search}>
+						<SearchIcon />
+					</IconButton>
+				</Paper>
+			</div>
+		</>
 	)
 }