Continued work on the historical pages.

2022-09-09 08:10:19 -07:00
parent d6bd620207
commit 5c0ef1f46c
11 changed files with 512 additions and 51 deletions
--- a/imports/ui/pages/History/AssetHistory.jsx
+++ b/imports/ui/pages/History/AssetHistory.jsx
@@ -0,0 +1,125 @@
+import { Meteor } from 'meteor/meteor';
+import React, { useState, useEffect } from 'react';
+import { useTracker } from 'meteor/react-meteor-data';
+import { useTheme } from '@mui/material/styles';
+import _ from 'lodash';
+import SimpleTable from "/imports/ui/util/SimpleTable";
+import TextField from "@mui/material/TextField";
+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 Box from "@mui/material/Box";
+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 {Assets} from "/imports/api/assets";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Paper from "@mui/material/Paper";
+import InputBase from "@mui/material/InputBase";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/Search";
+
+export default () => {
+	const navigate = useNavigate()
+	const [resultType, setResultType] = useState("usage")
+	const [searchType, setSearchType] = useState("email")
+	const [value, setValue] = useState("")
+	const search = () => {
+		if(searchType === 'email' || searchType === 'firstName' || searchType === 'lastName') {
+			if (value && value.length > 1) {
+				let query = searchType === 'email' ? {email: {$regex: value, $options: 'i'}} : searchType === 'firstName' ? {firstName: {$regex: value, $options: 'i'}} : {lastName: {$regex: value, $options: 'i'}}
+				let students = Students.find(query).fetch()
+				let staff = Staff.find(query).fetch()
+				let all = [...staff, ...students]
+
+				if (all.length > 1) {
+					setPeopleToPickFrom(all)
+					setOpenPickPersonDialog(true)
+				} else if (all.length === 1) {
+					navigate("/history/search?resultType=" + encodeURIComponent(resultType) + "&" + (students.length ? "studentId" : 'staffId') + "=" + encodeURIComponent(all[0]._id));
+				}
+			}
+		}
+		else if(searchType === 'assetID' || searchType === 'serial') {
+			let asset = Assets.findOne(searchType === 'assetID' ? {assetId: value} : {serial : value});
+			
+			if(asset) {
+				if(searchType === 'assetID')
+					navigate("/history/search?resultType=" + encodeURIComponent(resultType) + "&assetId=" + encodeURIComponent(asset.assetId))
+				else
+					navigate("/history/search?resultType=" + encodeURIComponent(resultType) + "&serial=" + encodeURIComponent(asset.serial))
+			}
+		}
+	}
+
+	Meteor.subscribe('students');
+	Meteor.subscribe('staff');
+	Meteor.subscribe('assets');
+
+	const [openPickPersonDialog, setOpenPickPersonDialog] = useState(false)
+	const [peopleToPickFrom, setPeopleToPickFrom] = useState([])
+	const pickPersonClosed = (cause, person) => {
+		if(openPickPersonDialog) setOpenPickPersonDialog(false)
+
+		if(person && person._id) {
+			navigate("/history/search?resultType=" + encodeURIComponent(resultType) + "&" + (person.grade ? "studentId" : 'staffId') + "=" + encodeURIComponent(person._id));
+		}
+	}
+
+	return (
+		<>
+			<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'>
+					<div style={{marginBottom: "1rem", marginTop: "2rem"}}>
+						<ToggleButtonGroup color="primary" value={resultType} exclusive onChange={(e, type)=>setResultType(type)} aria-label="Result Type">
+							<ToggleButton value="usage">Usage History</ToggleButton>
+							<ToggleButton value="assignment">Assignment History</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+					<div style={{marginBottom: "1rem"}}>
+						<ToggleButtonGroup color="primary" value={searchType} exclusive onChange={(e, type)=>setSearchType(type)} aria-label="Search Type">
+							<ToggleButton value="email">Email</ToggleButton>
+							<ToggleButton value="firstName">First Name</ToggleButton>
+							<ToggleButton value="lastName">Last Name</ToggleButton>
+							<ToggleButton value="assetId">Asset ID</ToggleButton>
+							<ToggleButton value="serial">Serial</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+					<div>
+						<InputBase value={value} onChange={(e) => {setValue(e.target.value)}} sx={{ ml: 1, flex: 1 }} placeholder="Value" inputProps={{ 'aria-label': 'Search Value' }}/>
+						<IconButton type="button" sx={{ p: '10px' }} aria-label="search" onClick={search}>
+							<SearchIcon />
+						</IconButton>
+					</div>
+				</Paper>
+			</div>
+		</>
+	)
+}