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

Fix equipment tally page

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-07 12:28:06 +08:00
parent b5f4fc7326
commit e589588d8c
2 changed files with 67 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
View file

@ -38,14 +38,16 @@ export default function TechnicianWidgets() {
if (isLoading) { if (isLoading) {
return ( return (
<> <>
<CircularProgress style={{ height: "128px", width: "128px" }} /> <CircularProgress
style={{ marginTop: "8px", height: "128px", width: "128px" }}
/>
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_L, ...styles.text_L,
}} }}
> >
Loading Loading widgets...
</p> </p>
</> </>
); );

130
src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
View file

@ -65,79 +65,75 @@ export default function EquipmentTallyPage() {
width: "100%", width: "100%",
minHeight: "100%", minHeight: "100%",
minWidth: "100%", minWidth: "100%",
flexWrap: "wrap",
}} }}
> >
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}> <div
<div style={{
...styles.flex_row,
...{ alignItems: "center", justifySelf: "flex-start" },
}}
>
<SearchIcon
style={{ style={{
...styles.flex_row, height: 32,
...{ alignItems: "center", justifySelf: "flex-start" }, width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<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={["Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
<p
style={{
...styles.text_M,
...styles.text_dark,
...{ marginLeft: "4px" },
}} }}
> >
<SearchIcon Results Found:{" "}
style={{ {
height: 32, equipment_instances?.data?.filter((equipment) =>
width: 32, filter !== null
fill: colors.font_dark, ? // If filter is not null, we filter if it matches any criteria
marginLeft: "1rem", equipment.equipment_name
marginRight: "1rem", .toLowerCase()
}} .includes(filter.toLowerCase()) ||
/> equipment.category
<Autocomplete .toLowerCase()
sx={{ .includes(filter.toLowerCase()) ||
display: "inline-block", equipment.last_updated
"& input": { .toLowerCase()
width: "256x", .includes(filter?.toLowerCase()) ||
bgcolor: "background.paper", equipment.status.toLowerCase() == filter.toLowerCase()
color: (theme) => : // If filter keyword is null then we just pass through everything as if we did not filter at all
theme.palette.getContrastText( true
theme.palette.background.paper ).length
), }
}, </p>
}}
value={filter}
onChange={(_event, newValue) => {
setFilter(newValue);
}}
freeSolo
id="custom-input-demo"
options={["Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
<p
style={{
...styles.text_M,
...styles.text_dark,
...{ marginLeft: "4px" },
}}
>
Results Found:{" "}
{
equipments?.data?.filter((equipment) =>
filter !== null
? // If filter is not null, we filter if it matches any criteria
equipment.name
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.category
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.last_updated
.toLowerCase()
.includes(filter?.toLowerCase()) ||
equipment.category.toLowerCase() == filter.toLowerCase()
: // If filter keyword is null then we just pass through everything as if we did not filter at all
true
).length
}
</p>
</div>
</div> </div>
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper} component={Paper}