Added individual product views and fixed login session checker

This commit is contained in:
Keannu Christian Bernasol 2023-03-06 13:59:16 +08:00
parent f411ea00a4
commit 48ed8f45c6
8 changed files with 83 additions and 26 deletions

View file

@ -3,16 +3,17 @@ import * as React from "react";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
import ProductIcon from "../../Icons/ProductIcon/ProductIcon";
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
export default function BlobView({ Products }: ProductList) {
const navigate = useNavigate();
return (
<div>
{Products.map((row) => (
<div
key={row.id}
style={{
display: "flex",
flexDirection: "column",
borderRadius: 16,
backgroundColor: "#1d3b33",
margin: 32,
@ -20,15 +21,31 @@ export default function BlobView({ Products }: ProductList) {
padding: 16,
}}
>
<div style={styles.content_row}>
<ProductIcon size={4} color="white" />{" "}
<p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
</div>
<Button
style={{
lineHeight: 0,
display: "flex",
flexDirection: "column",
justifySelf: "flex-start",
alignItems: "flex-start",
width: "100%",
}}
onClick={() => navigate("/Product/" + row.id)}
>
<div style={styles.content_row}>
<ProductIcon size={4} color="white" />{" "}
<p style={{ ...styles.text_white, ...styles.text_L }}>
{row.name}
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Last Modified: {row.last_modified}
</p>
<p style={{ ...styles.text_white, ...styles.text_M }}>
ID: {row.id}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Date Added: {row.date_added}
</p>
</Button>
</div>
))}
</div>

View file

@ -9,8 +9,10 @@ import {
} from "@mui/material";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
import { useNavigate } from "react-router-dom";
export default function TableView({ Products }: ProductList) {
const navigate = useNavigate();
return (
<TableContainer
style={{
@ -28,7 +30,7 @@ export default function TableView({ Products }: ProductList) {
Product
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Last Modified
Date Added
</TableCell>
</TableRow>
</TableHead>
@ -36,7 +38,10 @@ export default function TableView({ Products }: ProductList) {
{Products.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
sx={{
"&:last-child td, &:last-child th": { border: 0 },
}}
onClick={() => navigate("/Product/" + row.id)}
>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.id}
@ -45,7 +50,7 @@ export default function TableView({ Products }: ProductList) {
{row.name}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.last_modified}
{row.date_added}
</TableCell>
</TableRow>
))}