diff --git a/package-lock.json b/package-lock.json
index 912d01ee397bb2459335e30e75de107aa6ebfcc0..2f11d0fd1595131b58a5291b8bf1713b076e1d76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10764,6 +10764,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
"integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
},
+ "react-icons": {
+ "version": "3.11.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz",
+ "integrity": "sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==",
+ "requires": {
+ "camelcase": "^5.0.0"
+ }
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index e15ea305ab569a4d908e2ed4aee23b421ebc3685..84213665e60eca688b24a53f870aa7e6c6e92fc3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-typeahead": "^5.1.1",
"react-dom": "^16.13.1",
+ "react-icons": "^3.11.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
diff --git a/src/App.js b/src/App.js
index e88ea82fc23bbdbdda0d830ea5356e0addbded18..6e5df0e0956a8813bd80f20332963877d0d5f1d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import MemberList from './member';
import ProductList from './ProductList';
import Dashboard from './Dashboard';
import Purchase from './purchase/Purchase';
-import ShowPurchase from './purchase/ShowPurchase';
+import ShowTransaction from './ShowTransaction';
import AuthContext from './AuthContext';
import SignIn from './SignIn';
import Head from './Head';
@@ -21,8 +21,8 @@ function Panel(props) {
<Route path="/products">
<ProductList />
</Route>
- <Route path="/purchase/:id">
- <ShowPurchase />
+ <Route path="/transaction/:id">
+ <ShowTransaction />
</Route>
<Route path="/purchase">
<Purchase />
diff --git a/src/Dashboard.js b/src/Dashboard.js
index eeba0a7cbb64ae04248aa8ecd60baee7374a5129..c8b9aa02bfb101e2d99a31a21013156066ee24ff 100644
--- a/src/Dashboard.js
+++ b/src/Dashboard.js
@@ -2,7 +2,8 @@ import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
import AuthContext from './AuthContext';
import Fetcher from './Fetcher';
-import printMoney from './util';
+import TransactionList from './TransactionList';
+import { printMoney } from './util';
class Dashboard extends React.Component {
static contextType = AuthContext;
@@ -33,6 +34,7 @@ class Dashboard extends React.Component {
<Button variant="success" href="/purchase">Compra</Button>
</Col>
</Row>
+ <TransactionList />
</Container>
</Fetcher>
);
diff --git a/src/ProductList.js b/src/ProductList.js
index 5593ab75335ed4240481df15fcac1f48f43af3f8..840ff6265eb4b853bd1c6eb4d7e6036f46118767 100644
--- a/src/ProductList.js
+++ b/src/ProductList.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Table } from 'react-bootstrap';
import Fetcher from './Fetcher';
-import printMoney from './util';
+import { printMoney } from './util';
class ProductList extends React.Component {
constructor(props) {
diff --git a/src/ShowTransaction.js b/src/ShowTransaction.js
new file mode 100644
index 0000000000000000000000000000000000000000..28f2ede2907fcf9e4c7f727ac20f6beee1419ee6
--- /dev/null
+++ b/src/ShowTransaction.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Row, Col } from 'react-bootstrap';
+import Fetcher from './Fetcher';
+import ShowPurchase from './purchase/ShowPurchase';
+import { printMoney, printDate } from './util';
+
+function ShowTransaction() {
+ const { id } = useParams();
+ const [transaction, setTransaction] = useState({});
+
+ let show_list;
+ switch (transaction.type) {
+ case "purchase":
+ show_list = <ShowPurchase purchase={transaction.purchase} />;
+ break;
+ }
+
+ return (
+ <Fetcher url={"/api/transaction/"+id} onFetch={setTransaction} >
+ {show_list}
+ <Row>
+ <Col>
+ <h3>Total: {printMoney(transaction.total)}€</h3>
+ </Col>
+ <Col>
+ <p className="text-right">{printDate(transaction.date)}</p>
+ </Col>
+ </Row>
+ </Fetcher>
+ );
+}
+
+export default ShowTransaction;
diff --git a/src/TransactionList.js b/src/TransactionList.js
new file mode 100644
index 0000000000000000000000000000000000000000..d62603b90532be8d7a424aa58524ab69c0f81c62
--- /dev/null
+++ b/src/TransactionList.js
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Redirect } from 'react-router-dom';
+import BootstrapTable from 'react-bootstrap-table-next';
+import { FaShoppingBasket, FaMoneyBillAlt } from 'react-icons/fa';
+import Fetcher from './Fetcher';
+import { printMoney, printDate } from './util';
+
+const columns = [
+ {dataField: 'type', text: '', formatter: cell => {
+ switch (cell) {
+ case "purchase":
+ return <FaShoppingBasket />;
+ default:
+ return <FaMoneyBillAlt />;
+ };
+ }},
+ {dataField: 'date', text: 'Fecha', formatter: printDate},
+ {dataField: 'total', text: 'Total', formatter: cell => printMoney(cell)+" €"},
+]
+
+function TransactionList() {
+ const [transactions, setTransactions] = useState([]);
+ const [clickID, setClicID] = useState(null);
+
+ if (clickID) {
+ return <Redirect to={"/transaction/"+clickID} push />;
+ }
+
+ return (
+ <Fetcher url="/api/transaction" onFetch={setTransactions} >
+ <BootstrapTable
+ keyField="ID"
+ data={ transactions }
+ columns={ columns }
+ rowEvents={{
+ onClick: (_, row) => setClicID(row.ID)
+ }}
+ />
+ </Fetcher>
+ );
+}
+
+export default TransactionList;
diff --git a/src/member.js b/src/member.js
index b790c3ba7043eecfab85e3bb3cb1995202d919bd..454b0cd0eb9de8ebcbc6464186e69329e00033a2 100644
--- a/src/member.js
+++ b/src/member.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Table } from 'react-bootstrap';
import Fetcher from './Fetcher';
-import printMoney from './util';
+import { printMoney } from './util';
class MemberList extends React.Component {
diff --git a/src/purchase/Purchase.js b/src/purchase/Purchase.js
index 5d6b94b6128c2604f89fa0b1067da845a54c41ba..1e27cb505f0c0cab99724ecc5e694cbd5a6c32c4 100644
--- a/src/purchase/Purchase.js
+++ b/src/purchase/Purchase.js
@@ -6,7 +6,7 @@ import { Row, Col, Button, Alert, Spinner } from 'react-bootstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import AuthContext from '../AuthContext';
-import printMoney from '../util';
+import { printMoney } from '../util';
const columns = [
{dataField: 'code', text: 'codigo', editable: false},
@@ -120,7 +120,7 @@ class Purchase extends React.Component {
);
}
if (this.state.purchaseId !== null) {
- return <Redirect to={"/purchase/"+this.state.purchaseId} />;
+ return <Redirect to={"/transaction/"+this.state.purchaseId} />;
}
const purchase = this.state.purchase;
diff --git a/src/purchase/PurchaseForm.js b/src/purchase/PurchaseForm.js
index d7cfc6bf50e68207550e96e3f9b9ff83d6580901..cad441838c3f46ca4412cb14138a8d6b3e422513 100644
--- a/src/purchase/PurchaseForm.js
+++ b/src/purchase/PurchaseForm.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Col, Form, Button } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
-import printMoney from '../util';
+import { printMoney } from '../util';
class PurchaseForm extends React.Component {
diff --git a/src/purchase/ShowPurchase.js b/src/purchase/ShowPurchase.js
index 5d8e49d8bc438ac8e8c58494fc557fc5dd2b70de..93a85187192d665fcc06361863237c051817cfc1 100644
--- a/src/purchase/ShowPurchase.js
+++ b/src/purchase/ShowPurchase.js
@@ -1,52 +1,22 @@
-import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Table, Row, Col } from 'react-bootstrap';
-import Fetcher from '../Fetcher';
-import printMoney from '../util';
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import { printMoney } from '../util';
-function ShowPurchase() {
- const { id } = useParams();
- const [purchase, setPurchase] = useState(0);
-
- let entries;
- if (purchase.purchase) {
- entries = purchase.purchase.map(p => {
- return (
- <tr key={p.code}>
- <td>{p.code}</td>
- <td>{p.product.name}</td>
- <td>{printMoney(p.price)}€</td>
- <td>{p.ammount}</td>
- </tr>
- )
- });
- }
+const columns = [
+ {dataField: 'code', text: 'Codigo'},
+ {dataField: 'product.name', text: 'Nombre'},
+ {dataField: 'price', text: 'Precio', formatter: cell => printMoney(cell)+" €"},
+ {dataField: 'ammount', text: 'Cantidad'},
+]
+function ShowPurchase(props) {
return (
- <Fetcher url={"/api/transaction/"+id} onFetch={setPurchase} >
- <Table striped bordered hover>
- <thead>
- <tr>
- <th>Codigo</th>
- <th>Nombre</th>
- <th>Precio</th>
- <th>Cantidad</th>
- </tr>
- </thead>
- <tbody>
- {entries}
- </tbody>
- </Table>
- <Row>
- <Col>
- <h3>Total: {printMoney(purchase.total)}€</h3>
- </Col>
- <Col>
- <p className="text-right">{new Date(purchase.date).toLocaleDateString()}</p>
- </Col>
- </Row>
- </Fetcher>
- );
+ <BootstrapTable
+ keyField="code"
+ data={ props.purchase }
+ columns={ columns }
+ />
+ )
}
export default ShowPurchase;
diff --git a/src/util.js b/src/util.js
index c55886327228085ddd487173c59b33dcbd545a59..11b6c56db66993b51da8960196908f72c1fb39c3 100644
--- a/src/util.js
+++ b/src/util.js
@@ -2,4 +2,8 @@ function printMoney(money) {
return (money/100).toFixed(2);
}
-export default printMoney;
+function printDate(date) {
+ return new Date(date).toLocaleDateString();
+}
+
+export { printMoney, printDate };