From 8b86589fd2a759fbd7d60a43298b875f4334a0ee Mon Sep 17 00:00:00 2001 From: Karma Riuk Date: Sun, 23 Oct 2022 16:49:55 +0200 Subject: [PATCH] Moved the table to the transactions page to it's own component to not clog up Transactions, minor changes to Login --- src/components/Login.tsx | 5 ++- src/components/Transactions.tsx | 54 ++---------------------- src/components/Transactions/Table.tsx | 61 +++++++++++++++++++++++++++ src/scss/style.scss | 2 +- src/scss/transactions.scss | 16 ++++++- src/scss/variables.module.scss | 3 ++ 6 files changed, 85 insertions(+), 56 deletions(-) create mode 100644 src/components/Transactions/Table.tsx diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 733f6fb..9aad1f5 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -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) } diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx index 42dac63..1d6968e 100644 --- a/src/components/Transactions.tsx +++ b/src/components/Transactions.tsx @@ -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
- - - - - Date - Description - Amount - Total - - - - {rows.map((row) => ( - - - {row.date.toDateString()} - - {row.description} - {row.amount} - {row.total} - - ))} - -
- +
footer
); -} \ No newline at end of file +} diff --git a/src/components/Transactions/Table.tsx b/src/components/Transactions/Table.tsx new file mode 100644 index 0000000..8f24583 --- /dev/null +++ b/src/components/Transactions/Table.tsx @@ -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 ( + +
+ + + Date + Description + Amount + Total + + + + {rows.map((row) => ( + + + {row.date.toLocaleDateString()} + + {row.description} + {CHF_currency(row.amount)} + {CHF_currency(row.total)} + + ))} + +
+ + ) +} diff --git a/src/scss/style.scss b/src/scss/style.scss index 3fb0be3..18d3685 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -9,4 +9,4 @@ body { background: $bg1; color: $fg1; -} \ No newline at end of file +} diff --git a/src/scss/transactions.scss b/src/scss/transactions.scss index 93e796c..a796b33 100644 --- a/src/scss/transactions.scss +++ b/src/scss/transactions.scss @@ -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; } } -} \ No newline at end of file +} diff --git a/src/scss/variables.module.scss b/src/scss/variables.module.scss index c9df605..2a0b5f8 100644 --- a/src/scss/variables.module.scss +++ b/src/scss/variables.module.scss @@ -1,2 +1,5 @@ $bg1: #333; $fg1: #c5c8c6; + +$fg-green: green; +$fg-red: red;