keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Shortened code for amount change color in Logs.tsx and polished some other stuff

Browse source
This commit is contained in:
keannu125 2023-03-06 00:04:25 +08:00
parent 2a12356820
commit b62a160f88
3 changed files with 69 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/Components/ProductsPage/ViewManager.tsx Normal file
View file

@ -0,0 +1,27 @@
import * as React from "react";
import { useState } from "react";
import { Switch } from "@mui/material";
import TableView from "../../Components/ProductsPage/TableView/TableView";
import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
import { ProductList } from "../../Interfaces/Interfaces";
export interface props {}
export default function ViewManager(props: ProductList) {
const [tableView, toggleTableView] = useState(false);
if (tableView) {
return (
<div>
<Switch onClick={() => toggleTableView(!tableView)} />
<TableView Products={props.Products} />
</div>
);
} else {
return (
<div>
<Switch onClick={() => toggleTableView(!tableView)} />
<BlobView Products={props.Products} />
</div>
);
}
}

56
src/Routes/Logs/Logs.tsx
View file

@ -12,18 +12,11 @@ import {
import { SampleLogData } from "../../Components/SampleData/SampleData";
export default function Logs() {
function change_color(amount: number) {
if (amount > 0) {
return <TableCell style={styles.text_green}>{amount}</TableCell>;
} else {
return <TableCell style={styles.text_red}>{amount}</TableCell>;
}
}
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.flex_row}>
<LogsIcon size={64} color="white" />
<h1 style={styles.text_large}>Logs</h1>
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>
</div>
<TableContainer
style={{
@ -34,11 +27,21 @@ export default function Logs() {
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Log ID</TableCell>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>Amount Change</TableCell>
<TableCell style={styles.text}>Timestamp</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Log ID
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product ID
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Amount Change
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Timestamp
</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -47,11 +50,28 @@ export default function Logs() {
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.p_id}</TableCell>
<TableCell style={styles.text}>{row.p_name}</TableCell>
{change_color(row.amount_changed)}
<TableCell style={styles.text}>{row.timestamp}</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.id}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.p_id}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.p_name}
</TableCell>
<TableCell
style={{
...{
color: row.amount_changed < 0 ? "#a44141" : "#80b28a",
},
...styles.text_S,
}}
>
{row.amount_changed}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.timestamp}
</TableCell>
</TableRow>
))}
</TableBody>

19
src/Routes/Products/Products.tsx
View file

@ -3,21 +3,12 @@ import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
import { Button, Switch } from "@mui/material";
import { Button } from "@mui/material";
import { SampleProducts } from "../../Components/SampleData/SampleData";
import TableView from "../../Components/ProductsPage/TableView/TableView";
import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
import ViewManager from "../../Components/ProductsPage/ViewManager";
export default function Products() {
const navigate = useNavigate();
const [tableView, toggleTableView] = useState(false);
function view() {
if (tableView) {
return <TableView Products={SampleProducts} />;
} else {
return <BlobView Products={SampleProducts} />;
}
}
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
@ -31,10 +22,9 @@ export default function Products() {
<div
style={{
...styles.content_row,
...{ flex: 1, justifyContent: "flex-end" },
...{ justifyContent: "flex-end", flex: 1 },
}}
>
<Switch onClick={() => toggleTableView(!tableView)} />
<Button
onClick={() => navigate("/Products/AddProduct")}
style={styles.button_add_product}
@ -47,8 +37,7 @@ export default function Products() {
</div>
</div>
</div>
{view()}
<ViewManager Products={SampleProducts} />
</div>
);
}