keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-05-17 11:58:14 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added edit and delete SKU functionality

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-12-02 23:53:26 +08:00
parent 3c0b2b9739
commit 36a0111fe8
4 changed files with 382 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/Pages/EquipmentListPage/EquipmentListPage.tsx
View file

@ -11,8 +11,13 @@ import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { colors } from "../../styles";
import EditSKUModal from "../../Components/EditSKUModal/EditSKUModal";
import Popup from "reactjs-popup";
import { useState } from "react";
export default function EquipmentListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false);
const [selectedItem, SetSelectedItem] = useState(0);
const equipments = useQuery({
queryKey: ["equipments"],
queryFn: EquipmentsAPI,
@ -73,6 +78,9 @@ export default function EquipmentListPage() {
<TableCell align="center" style={styles.text_light}>
Description
</TableCell>
<TableCell align="center" style={styles.text_light}>
Category
</TableCell>
<TableCell align="center" style={styles.text_light}>
Last Modified
</TableCell>
@ -85,7 +93,8 @@ export default function EquipmentListPage() {
key={equipment.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
onClick={() => {
console.log("HEH");
SetSelectedItem(equipment.id);
SetEditModalOpen(true);
}}
>
<TableCell align="center" component="th" scope="row">
@ -98,6 +107,9 @@ export default function EquipmentListPage() {
<TableCell align="center" component="th" scope="row">
{equipment.description}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment.category}
</TableCell>
<TableCell align="right">
<div
style={{
@ -123,6 +135,25 @@ export default function EquipmentListPage() {
</TableContainer>
</div>
</div>
<Popup
open={editmodalOpen}
onClose={() => SetEditModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "512px",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<EditSKUModal id={selectedItem} setOpen={SetEditModalOpen} />
</Popup>
</div>
);
}