keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-12 09:31:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added quantity editing to inventory

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-06 22:30:35 +08:00
parent fa9931c948
commit 1bdf7356d8
5 changed files with 168 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/Components/Api/Api.tsx
View file

@ -35,15 +35,20 @@ export function GetProduct(id: number) {
});
}
export function UpdateProduct(note: UpdateProductParams) {
export function UpdateProduct(product: UpdateProductParams) {
const token = JSON.parse(localStorage.getItem("token") || "{}");
return axios
.patch("http://localhost:8000/api/v1/products/" + note.id + "/", note, {
headers: {
Authorization: "Token " + token,
},
})
.patch(
"http://localhost:8000/api/v1/products/" + product.id + "/",
product,
{
headers: {
Authorization: "Token " + token,
},
}
)
.then((response) => {
console.log("Product update successful", response.data);
return response.data;
})
.catch((error) => {

35
src/Components/InventoryPage/RowRenderer/RowRenderer.tsx Normal file
View file

@ -0,0 +1,35 @@
import * as React from "react";
import { ProductList } from "../../../Interfaces/Interfaces";
import styles from "../../../styles";
import { TableBody, TableRow, TableCell } from "@mui/material";
import StockRenderer from "../StockRenderer/StockRenderer";
export default function RowRenderer(props: ProductList) {
if (props.Products.length === 0) {
return (
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<p style={{ ...styles.text_white, ...styles.text_L }}>
No products yet. Add one!
</p>
</div>
);
}
return (
<TableBody>
{props.Products.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.id}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name}
</TableCell>
{StockRenderer(row)}
</TableRow>
))}
</TableBody>
);
}

126
src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
View file

@ -1,63 +1,73 @@
import { TableCell } from "@mui/material";
import { useState } from "react";
import { Button, TableCell } from "@mui/material";
import { useEffect, useState } from "react";
import styles from "../../../styles";
import IsNumber from "../IsNumber/IsNumber";
import { UpdateProduct } from "../../Api/Api";
import { useQueryClient, useMutation } from "react-query";
import { Product } from "../../../Interfaces/Interfaces";
export default function StockRenderer(in_stock: number) {
const [stock, setStock] = useState(in_stock);
if (stock >= 0 && stock <= 3) {
return (
<TableCell>
<input
style={{
...styles.text_red,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
} else if (stock >= 4 && stock < 9) {
return (
<TableCell>
<input
style={{
...styles.text_orange,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
} else {
return (
<TableCell>
<input
style={{
...styles.text_green,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
export default function StockRenderer(product: Product) {
const [stock, setStock] = useState(product.quantity);
const [valueChanged, setValueChanged] = useState(false);
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: UpdateProduct,
onSuccess: () => {
queryClient.invalidateQueries("products");
},
});
function updateQuantity() {
mutation.mutate({
id: product.id,
name: product.name,
quantity: stock,
});
setValueChanged(false);
}
useEffect(() => {
if (stock !== product.quantity) {
setValueChanged(true);
} else if (stock === product.quantity) {
setValueChanged(false);
}
}, [stock]);
let style;
if (stock >= 0 && stock <= 3) {
style = styles.text_red;
} else if (stock >= 4 && stock < 9) {
style = styles.text_orange;
} else {
style = styles.text_green;
}
return (
<TableCell>
<div style={styles.content_row}>
<input
style={{
...style,
...{ border: "none", background: "none", width: 64 },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
<div style={{ paddingRight: 64 }} />
<Button
disabled={!valueChanged}
style={{ backgroundColor: "#80b38a" }}
onClick={() => {
updateQuantity();
}}
variant="contained"
>
Confirm
</Button>
</div>
</TableCell>
);
}