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

Added toggle view for table or blob in Products page

Browse source
This commit is contained in:
keannu125 2023-03-03 12:05:29 +08:00
parent 160ac39b18
commit 971d184697
4 changed files with 97 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/Components/Products/BlobView/BlobView.tsx Normal file
View file

@ -0,0 +1,29 @@
import * as React from "react";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
export default function BlobView({ Products }: ProductList) {
return (
<div>
{Products.map((row) => (
<div
key={row.id}
style={{
display: "flex",
flexDirection: "column",
borderRadius: 16,
backgroundColor: "#1d3b33",
margin: 32,
lineHeight: 0,
padding: 16,
}}
>
<p style={styles.text}>{row.name}</p>
<p style={styles.text}>ID: {row.id}</p>
<p style={styles.text_small}>Last Modified: {row.last_modified}</p>
</div>
))}
</div>
);
}

45
src/Components/Products/TableView/TableView.tsx Normal file
View file

@ -0,0 +1,45 @@
import * as React from "react";
import {
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
export default function TableView({ Products }: ProductList) {
return (
<TableContainer
style={{
backgroundColor: "#1d3b33",
borderRadius: 8,
}}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>Last Modified</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Products.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.name}</TableCell>
<TableCell style={styles.text}>{row.last_modified}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

9
src/Interfaces/Interfaces.tsx Normal file
View file

@ -0,0 +1,9 @@
export interface ProductList {
Products: Product[];
}
export interface Product {
id: number;
name: string;
last_modified: string;
}

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

@ -1,22 +1,23 @@
import React from "react";
import React, { useState } from "react";
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,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import { Button, Switch } from "@mui/material";
import { SampleProducts } from "../../Components/SampleData/SampleData";
import TableView from "../../Components/Products/TableView/TableView";
import BlobView from "../../Components/Products/BlobView/BlobView";
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}>
@ -41,34 +42,8 @@ export default function Products() {
</div>
</div>
</div>
<TableContainer
style={{
backgroundColor: "#1d3b33",
borderRadius: 8,
}}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>Last Modified</TableCell>
</TableRow>
</TableHead>
<TableBody>
{SampleProducts.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.name}</TableCell>
<TableCell style={styles.text}>{row.last_modified}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Switch onClick={() => toggleTableView(!tableView)} />
{view()}
</div>
);
}