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 search bar in equipment instance list page

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-06 20:47:26 +08:00
parent 8a1f820bf7
commit 433207f8e4
3 changed files with 77 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -23,6 +23,7 @@
"react-redux": "^8.1.3",
"react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3",
"react-virtuoso": "^4.6.2",
"reactjs-popup": "^2.0.6",
"styled-components": "^6.1.1"
},
@ -3895,6 +3896,18 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/react-virtuoso": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.6.2.tgz",
"integrity": "sha512-vvlqvzPif+MvBrJ09+hJJrVY0xJK9yran+A+/1iwY78k0YCVKsyoNPqoLxOxzYPggspNBNXqUXEcvckN29OxyQ==",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16 || >=17 || >= 18",
"react-dom": ">=16 || >=17 || >= 18"
}
},
"node_modules/reactjs-popup": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",

1
package.json
View file

@ -25,6 +25,7 @@
"react-redux": "^8.1.3",
"react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3",
"react-virtuoso": "^4.6.2",
"reactjs-popup": "^2.0.6",
"styled-components": "^6.1.1"
},

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

@ -65,79 +65,75 @@ export default function EquipmentInstancesListPage() {
width: "100%",
minHeight: "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={{
...styles.flex_row,
...{ alignItems: "center", justifySelf: "flex-start" },
height: 32,
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={["Available", "Broken", "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
style={{
height: 32,
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={["Available", "Broken", "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:{" "}
{
equipment_instances?.data?.filter((equipment) =>
filter !== null
? // If filter is not null, we filter if it matches any criteria
equipment.equipment_name
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.category
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.last_updated
.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
).length
}
</p>
</div>
Results Found:{" "}
{
equipment_instances?.data?.filter((equipment) =>
filter !== null
? // If filter is not null, we filter if it matches any criteria
equipment.equipment_name
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.category
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.last_updated
.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
).length
}
</p>
</div>
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
<TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper}