Fix search bar in equipment instance list page

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

13
package-lock.json generated
View file

@ -23,6 +23,7 @@
"react-redux": "^8.1.3", "react-redux": "^8.1.3",
"react-router-dom": "^6.18.0", "react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"react-virtuoso": "^4.6.2",
"reactjs-popup": "^2.0.6", "reactjs-popup": "^2.0.6",
"styled-components": "^6.1.1" "styled-components": "^6.1.1"
}, },
@ -3895,6 +3896,18 @@
"react-dom": ">=16.6.0" "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": { "node_modules/reactjs-popup": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",

View file

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

View file

@ -65,10 +65,8 @@ export default function EquipmentInstancesListPage() {
width: "100%", width: "100%",
minHeight: "100%", minHeight: "100%",
minWidth: "100%", minWidth: "100%",
flexWrap: "wrap",
}} }}
> >
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
<div <div
style={{ style={{
...styles.flex_row, ...styles.flex_row,
@ -91,9 +89,7 @@ export default function EquipmentInstancesListPage() {
width: "256x", width: "256x",
bgcolor: "background.paper", bgcolor: "background.paper",
color: (theme) => color: (theme) =>
theme.palette.getContrastText( theme.palette.getContrastText(theme.palette.background.paper),
theme.palette.background.paper
),
}, },
}} }}
value={filter} value={filter}
@ -137,7 +133,7 @@ export default function EquipmentInstancesListPage() {
} }
</p> </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}