Commit 0b8b421c authored by Tamás Danis's avatar Tamás Danis

history design

parent 11c0941c
......@@ -14,7 +14,7 @@ import Settings from './Main/Settings';
const Main = ({ loggedIn }) => {
if (!loggedIn) return <Redirect to='/login'/>;
return (
<main>
<main className="pb-5">
<div className="container">
<div className="row">
<div className="col-md-12">
......
......@@ -12,11 +12,14 @@ const TransactionList = ({ actions, transactions }) => {
}, []);
return (
<ul className="list-group">
{transactions.map(transaction => (
<TransactionListItem key={transaction.id} transaction={transaction}/>
))}
</ul>
<div className="card mt-5">
<div className="card-header"><h3>History</h3></div>
<ul className="list-group list-group-flush">
{transactions.map(transaction => (
<TransactionListItem key={transaction.id} transaction={transaction}/>
))}
</ul>
</div>
);
};
......
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
const ProductsArea = ({ products }) => (
<small>
{products.map(
product => `${product.name} ${product.price}€`
).join(', ')
}
</small>
const productsString = products => {
const res = products.map(
product => `${product.name} ${product.price}€`
).join(', ');
return res.length < 30
? res
: `${res.substring(0, 30)}...`;
};
const ProductList = ({ products }) => (
<ul className="list-group">
{products.map(product => <li
key={product.id}
className="list-group-item"
>{product.name} ... {product.price}&euro;</li>)}
</ul>
);
const ProductsArea = ({ products }) => {
const [isExpanded, toggleExpand] = useState(false);
const handleClick = () => {
toggleExpand(!isExpanded);
};
return (
<small onClick={handleClick}>
{isExpanded ? <ProductList products={products}/> : productsString(products)}
</small>
);
};
ProductList.propTypes = {
products: PropTypes.array.isRequired
};
ProductsArea.propTypes = {
products: PropTypes.array.isRequired
};
......
......@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ProductsArea from './ProductsArea';
import * as transactionActions from '../../../../../actions/transactionActions';
import moment from 'moment';
const TransactionListItem = ({ transaction, deleteTransaction }) => {
const handleClick = () => deleteTransaction(transaction.id);
......@@ -14,19 +15,26 @@ const TransactionListItem = ({ transaction, deleteTransaction }) => {
return Math.round(res * 100) / 100;
};
return (
<li className="list-group-item d-flex justify-content-between align-items-center">
{transaction.description}
<ProductsArea products={transaction.products}/>
<div>
<span className="badge badge-primary mr-3">{countPrice()}&euro;</span>
<button
type="button"
className="btn btn-danger"
onClick={handleClick}
>
<i className="fa fa-close"/>
</button>
<li className="list-group-item">
<div className="row">
<div className="col-md-2">
{transaction.description}
</div>
<div className="col-8">
<ProductsArea products={transaction.products}/>
</div>
<div className="col-2" style={{ textAlign: 'right' }}>
<span className="badge badge-primary mr-3">{countPrice()}&euro;</span>
<button
type="button"
className="btn btn-danger"
onClick={handleClick}
>
<i className="fa fa-close"/>
</button>
</div>
</div>
<small>{moment(transaction.created_at).format('MM/DD/YYYY')}</small>
</li>
);
};
......
......@@ -8,7 +8,6 @@ const Dashboard = () => (
<h1 className="pt-3">Dashboard</h1>
<SpendingChart/>
<TransactionForm/>
<h2>History</h2>
<TransactionList/>
</>
);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment