karma/zucchetti-sa5
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

Moved the table to the transactions page to it's own component to not clog up Transactions, minor changes to Login

Browse Source
This commit is contained in:
Karma Riuk 2022-10-23 16:49:55 +02:00
parent 598df57fac
commit 8b86589fd2
6 changed files with 85 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Login.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, ChangeEvent, MouseEvent, useEffect } from "react";
import React from "react";
import { Card, Button, TextField } from "@mui/material"
import "@scss/login.scss"
import { Link, useNavigate } from "react-router-dom";
@ -23,7 +23,7 @@ export default function Login() {
});
function hash(s: string) {
return s;
return `hash of '${s}' to be definied`;
}
const {ref: emailRef, ...emailRegisterProps} = register("email", {
@ -56,6 +56,7 @@ export default function Login() {
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
data = { ...data, password: hash(data.password) }
console.table(data);
setTimeout(() => navigate("/?logged"), 3000)
}

54
src/components/Transactions.tsx
View File

@ -1,29 +1,7 @@
import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
import React, { useEffect } from "react";
import "@scss/transactions.scss";
import Table from "@components/Transactions/Table"
function createData(
d: string,
description: string,
amount: number,
total: number
) {
const date: Date = new Date(d);
return { date, description, amount, total };
}
const rows = [
createData("05.10.2022", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
createData("04.10.2022", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
createData("30.09.2022", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
createData("30.09.2022", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
createData("15.08.2022", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
createData("12.08.2022", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
createData("5.08.2022", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
createData("1.08.2022", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
createData("26.07.2022", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
createData("20.07.2022", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
];
export default function Transactions() {
@ -36,37 +14,11 @@ export default function Transactions() {
sidebar
</aside>
<main>
<TableContainer className="table" component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Description</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.date.getDate()}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.date.toDateString()}
</TableCell>
<TableCell>{row.description}</TableCell>
<TableCell align="right">{row.amount}</TableCell>
<TableCell align="right">{row.total}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Table />
</main>
<footer>
footer
</footer>
</div>
);
}
}

61
src/components/Transactions/Table.tsx Normal file
View File

@ -0,0 +1,61 @@
import React from "react";
import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
function createData(
d: string,
description: string,
amount: number,
total: number
) {
const date: Date = new Date(d);
return { date, description, amount, total };
}
const rows = [
createData("2022-10-05", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
createData("2022-10-04", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
createData("2022-09-30", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
createData("2022-09-29", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
createData("2022-08-15", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
createData("2022-08-12", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
createData("2022-08-05", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
createData("2022-08-01", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
createData("2022-07-26", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
createData("2022-07-20", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
];
export default () => {
function CHF_currency(amount: number){
return `CHF ${Math.round(amount) == amount ? (amount + ".-") : amount}`
}
return (
<TableContainer className="table" component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Description</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.date.getTime()}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.date.toLocaleDateString()}
</TableCell>
<TableCell>{row.description}</TableCell>
<TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
<TableCell align="right">{CHF_currency(row.total)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}

2
src/scss/style.scss
View File

@ -9,4 +9,4 @@
body {
background: $bg1;
color: $fg1;
}
}

16
src/scss/transactions.scss
View File

@ -1,5 +1,5 @@
@use "variables.module.scss";
@use "style.scss";
@import "variables.module.scss";
body.transactions {
div#tablePage {
@ -29,6 +29,18 @@ body.transactions {
main {
grid-row: 2;
grid-column: 2;
display: flex;
// justify-content: center;
align-items: center;
.amount.positive {
color: $fg-green;
}
.amount.negative {
color: $fg-red;
}
}
aside {
@ -37,4 +49,4 @@ body.transactions {
background: lightgreen;
}
}
}
}

3
src/scss/variables.module.scss
View File

@ -1,2 +1,5 @@
$bg1: #333;
$fg1: #c5c8c6;
$fg-green: green;
$fg-red: red;