diff --git a/src/App.js b/src/App.js index bb9243362c897ace4f74d615b2ad6371c1094c18..ccc5fa0134cb4d5a843d11a053de3235cd5352b5 100644 --- a/src/App.js +++ b/src/App.js @@ -23,6 +23,9 @@ function Panel(props) { <Route path="/members/add"> <MemberAdder /> </Route> + <Route path="/members/purchase"> + <Purchase member /> + </Route> <Route path="/members"> <MemberList /> </Route> diff --git a/src/Head.js b/src/Head.js index 181d5583f72bd3387ee8f2c07df01c078e9eea6b..ae436ea63de1d98c5323733c354f983522b2f532 100644 --- a/src/Head.js +++ b/src/Head.js @@ -12,6 +12,7 @@ function Head(props) { if (auth.role === "admin") { adminNav = ( <NavDropdown title="Admin" id="admin"> + <Nav.Link href="/members/purchase">Compra</Nav.Link> <Nav.Link href="/members">Socias</Nav.Link> <Nav.Link href="/topup">Recarga</Nav.Link> <Nav.Link href="/members/add">Nueva socia</Nav.Link> diff --git a/src/MemberPicker.js b/src/MemberPicker.js new file mode 100644 index 0000000000000000000000000000000000000000..54c03a810f82fd6fe6adafbe4cfdbaea119b654d --- /dev/null +++ b/src/MemberPicker.js @@ -0,0 +1,63 @@ +import React, { useState } from "react"; +import { Form, Col } from "react-bootstrap"; +import { Typeahead } from "react-bootstrap-typeahead"; +import Fetcher from "./Fetcher"; + +function MemberPicker(props) { + const [members, setStateMembers] = useState([]); + const selected = props.member ? [props.member] : []; + + const setMembers = (members) => { + const newMembers = members.map((m) => { + m.numStr = m.num.toString(); + return m; + }); + setStateMembers(newMembers); + }; + + return ( + <Fetcher url="/api/member" onFetch={setMembers}> + <Form> + <Form.Row> + <Col sm={4}> + <br /> + <h4 className="text-right">Socia:</h4> + </Col> + <Form.Group as={Col} sm={2}> + <Form.Label>Num</Form.Label> + <Typeahead + id="member-num" + labelKey="numStr" + options={members} + onChange={(m) => props.onChange(m[0])} + selected={selected} + /> + </Form.Group> + <Form.Group as={Col}> + <Form.Label>Login</Form.Label> + <Typeahead + id="member-login" + labelKey="login" + options={members} + onChange={(m) => props.onChange(m[0])} + selected={selected} + /> + </Form.Group> + <Form.Group as={Col}> + <Form.Label>Nombre</Form.Label> + <Typeahead + id="member-name" + labelKey="name" + options={members} + onChange={(m) => props.onChange(m[0])} + selected={selected} + /> + </Form.Group> + </Form.Row> + </Form> + <hr /> + </Fetcher> + ); +} + +export default MemberPicker; diff --git a/src/purchase/Purchase.js b/src/purchase/Purchase.js index 24b598153bc314c716d2fd2db8c53a5f9168382f..4238167f46914b835127d86b8b1a3d27f2fa1624 100644 --- a/src/purchase/Purchase.js +++ b/src/purchase/Purchase.js @@ -2,6 +2,7 @@ import React from "react"; import { Redirect } from "react-router-dom"; import { Container, Row, Col, Button, Alert, Spinner } from "react-bootstrap"; import ProductPicker from "../ProductPicker"; +import MemberPicker from "../MemberPicker"; import AuthContext from "../AuthContext"; import { printMoney } from "../util"; @@ -12,6 +13,7 @@ class Purchase extends React.Component { super(props); this.state = { purchase: [], + member: null, total: 0, transactionId: null, isLoading: false, @@ -27,6 +29,15 @@ class Purchase extends React.Component { } send() { + if (this.props.member && !this.state.member) { + this.setState({ error: "Falta seleccionar una socia" }); + return; + } + + const url = this.props.member + ? "/api/member/" + this.state.member.num + "/purchase" + : "/api/purchase"; + this.setState({ isLoading: true, error: null, noMoney: false }); const body = JSON.stringify( this.state.purchase.map((p) => { @@ -36,7 +47,7 @@ class Purchase extends React.Component { }; }) ); - fetch("/api/purchase", { + fetch(url, { headers: { "x-authentication": this.context.token }, method: "POST", body, @@ -91,6 +102,13 @@ class Purchase extends React.Component { return ( <Container> {alert} + {this.props.member && ( + <MemberPicker + member={this.state.member} + onChange={(member) => this.setState({ member })} + /> + )} + <ProductPicker amount picks={this.state.purchase}