keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added a search bar for filtering results in equipment instance list page

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-16 15:46:26 +08:00
parent 1fc6b6ff75
commit 34bb54f8b1
1 changed files with 90 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
View file

@ -14,6 +14,7 @@ import { colors } from "../../styles";
import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal"; import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
import { useState } from "react"; import { useState } from "react";
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import Autocomplete from "@mui/material/Autocomplete";
export default function EquipmentInstancesListPage() { export default function EquipmentInstancesListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false); const [editmodalOpen, SetEditModalOpen] = useState(false);
@ -22,6 +23,7 @@ export default function EquipmentInstancesListPage() {
queryKey: ["equipment_instances"], queryKey: ["equipment_instances"],
queryFn: EquipmentInstancesAPI, queryFn: EquipmentInstancesAPI,
}); });
const [filter, setFilter] = useState<string | null>(null);
if (equipment_instances.isLoading) { if (equipment_instances.isLoading) {
return ( return (
<div style={styles.background}> <div style={styles.background}>
@ -65,6 +67,37 @@ export default function EquipmentInstancesListPage() {
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
<div
style={{
...styles.flex_row,
...{ alignItems: "center", justifyContent: "flex-start" },
}}
>
<p style={{ ...styles.text_dark, ...styles.text_M }}>Filter: </p>
<Autocomplete
sx={{
display: "inline-block",
"& input": {
width: "256x",
bgcolor: "background.paper",
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}}
value={filter}
onChange={(_event, newValue) => {
setFilter(newValue);
}}
freeSolo
id="custom-input-demo"
options={["Available", "Broken", "Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
</div>
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper} component={Paper}
@ -89,45 +122,65 @@ export default function EquipmentInstancesListPage() {
</TableHead> </TableHead>
<TableBody> <TableBody>
{equipment_instances.data ? ( {equipment_instances.data ? (
equipment_instances.data.map((equipment) => ( equipment_instances.data
<TableRow .filter((equipment) =>
key={equipment.id} filter !== null
sx={{ "&:last-child td, &:last-child th": { border: 0 } }} ? // If filter is not null, we filter if it matches any criteria
onClick={() => { equipment.equipment_name
SetSelectedItem(equipment.id); .toLowerCase()
SetEditModalOpen(true); .includes(filter.toLowerCase()) ||
}} equipment.category
> .toLowerCase()
<TableCell align="center" component="th" scope="row"> .includes(filter.toLowerCase()) ||
{equipment.id} equipment.remarks
</TableCell> .toLowerCase()
<TableCell align="center" component="th" scope="row"> .includes(filter.toLowerCase()) ||
{equipment.equipment_name} equipment.last_updated
</TableCell> .toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.status.toLowerCase() == filter.toLowerCase()
: // If filter keyword is null then we just pass through everything as if we did not filter at all
true
)
.map((equipment) => (
<TableRow
key={equipment.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
onClick={() => {
SetSelectedItem(equipment.id);
SetEditModalOpen(true);
}}
>
<TableCell align="center" component="th" scope="row">
{equipment.id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.equipment_name}
</TableCell>
<TableCell align="center" component="th" scope="row"> <TableCell align="center" component="th" scope="row">
{equipment.status} {equipment.status}
</TableCell> </TableCell>
<TableCell align="center" component="th" scope="row"> <TableCell align="center" component="th" scope="row">
{equipment.category} {equipment.category}
</TableCell> </TableCell>
<TableCell align="right"> <TableCell align="right">
<div <div
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ alignItems: "center" }, ...{ alignItems: "center" },
}} }}
> >
<div>{equipment.last_updated}</div> <div>{equipment.last_updated}</div>
<div> <div>
{equipment.last_updated_by {equipment.last_updated_by
? "by " + equipment.last_updated_by ? "by " + equipment.last_updated_by
: ""} : ""}
</div>
</div> </div>
</div> </TableCell>
</TableCell> </TableRow>
</TableRow> ))
))
) : ( ) : (
<></> <></>
)} )}