Skip to content
Snippets Groups Projects
ShowOrder.js 6.27 KiB
Newer Older
meskio's avatar
meskio committed
import React from "react";
meskio's avatar
meskio committed
import { Redirect } from "react-router-dom";
meskio's avatar
meskio committed
import { LinkContainer } from "react-router-bootstrap";
meskio's avatar
meskio committed
import Fetcher from "../Fetcher";
meskio's avatar
meskio committed
import {
  Row,
  Col,
  Badge,
  Button,
  ButtonGroup,
  Spinner,
  Alert,
  Modal,
meskio's avatar
meskio committed
} from "react-bootstrap";
meskio's avatar
meskio committed
import PurchaseOrder from "./PurchaseOrder";
import { printDate } from "../util";
import AuthContext from "../AuthContext";
meskio's avatar
meskio committed
import { printMoney, url } from "../util";
meskio's avatar
meskio committed

meskio's avatar
meskio committed
function getName(order_product) {
  if (order_product.product !== null) {
    return order_product.product.name;
  }
  return order_product.code;
}

meskio's avatar
meskio committed
function ShowOrderTransaction(props) {
meskio's avatar
meskio committed
  const list = props.transaction.order_purchase.map((o) => (
    <li key={o.order_product.code}>
meskio's avatar
meskio committed
      {getName(o.order_product)} ({o.order_product.code}): {o.amount}
meskio's avatar
meskio committed
    </li>
  ));
  return (
    <div>
      <h3>Mi pedido</h3>
      <ul>{list}</ul>
      <p>Total: {printMoney(-props.transaction.total)} </p>
    </div>
  );
meskio's avatar
meskio committed
}

function ShowOrderResults(props) {
meskio's avatar
meskio committed
  let products = props.order.products.map((p) => {
meskio's avatar
meskio committed
    p.total = 0;
meskio's avatar
meskio committed
    return p;
  });
  const transactions = props.order.transactions.map((t) => {
meskio's avatar
meskio committed
    if (t.order_purchase === null) {
      return null;
    }
meskio's avatar
meskio committed
    const list = t.order_purchase.map((purchase) => {
      const i = products.findIndex((p) => p.ID === purchase.order_product_id);
meskio's avatar
meskio committed
        return null;
      }
meskio's avatar
meskio committed
      products[i].total += purchase.amount;
meskio's avatar
meskio committed
      if (purchase.amount) {
        const key =
          t.member.num.toString() + "-" + purchase.order_product_id.toString();
meskio's avatar
meskio committed
        return (
meskio's avatar
meskio committed
          <li key={key}>
meskio's avatar
meskio committed
            {getName(products[i])} {purchase.amount}
meskio's avatar
meskio committed
          </li>
meskio's avatar
meskio committed
        );
meskio's avatar
meskio committed
      }
      return null;
meskio's avatar
meskio committed
    });
    return (
meskio's avatar
meskio committed
      <li key={t.member.num}>
        {t.member.name} ({t.member.num}):
        <ul>{list}</ul>
      </li>
meskio's avatar
meskio committed
    );
meskio's avatar
meskio committed
  });

  const product_list = products.map((p) => (
    <li key={p.code}>
meskio's avatar
meskio committed
      {getName(p)}: {p.total}
meskio's avatar
meskio committed
    </li>
  ));
  return (
    <div>
      <h3>Productos pedidos</h3>
      <ul>{product_list}</ul>

      <h3>Pedidos</h3>
      <ul>{transactions}</ul>
    </div>
  );
meskio's avatar
meskio committed
}

class ShowOrder extends React.Component {
meskio's avatar
meskio committed
  static contextType = AuthContext;
meskio's avatar
meskio committed

meskio's avatar
meskio committed
  constructor(props) {
    super(props);
    this.state = {
      order: {
        products: [],
        transactions: [],
      },
      transaction: null,
meskio's avatar
meskio committed
      isLoading: false,
      redirect: false,
meskio's avatar
meskio committed
      refetch: 0,
meskio's avatar
meskio committed
      error: null,
      showDelete: false,
meskio's avatar
meskio committed
    };
  }
meskio's avatar
meskio committed

meskio's avatar
meskio committed
  showTransaction() {
meskio's avatar
meskio committed
    if (this.state.order.active) {
meskio's avatar
meskio committed
      return (
meskio's avatar
meskio committed
        <PurchaseOrder
meskio's avatar
meskio committed
          order={this.state.order}
meskio's avatar
meskio committed
          purchase={
            this.state.transaction && this.state.transaction.order_purchase
          }
          onSend={(t) => this.onSend(t)}
meskio's avatar
meskio committed
        />
      );
meskio's avatar
meskio committed
    }
meskio's avatar
meskio committed
    if (this.state.transaction) {
meskio's avatar
meskio committed
      return (
meskio's avatar
meskio committed
        <ShowOrderTransaction
meskio's avatar
meskio committed
          order={this.state.order}
meskio's avatar
meskio committed
          transaction={this.state.transaction}
meskio's avatar
meskio committed
        />
      );
meskio's avatar
meskio committed
    }
meskio's avatar
meskio committed
  }
meskio's avatar
meskio committed

meskio's avatar
meskio committed
    this.setState({ transaction, refetch: this.state.refetch + 1 });
meskio's avatar
meskio committed
  setData(data) {
    this.setState({ order: data.order, transaction: data.transaction });
  }
meskio's avatar
meskio committed

meskio's avatar
meskio committed
  delorder() {
    this.setState({ isLoading: true });
meskio's avatar
meskio committed
    fetch(url("/api/order/" + this.state.order.ID), {
meskio's avatar
meskio committed
      method: "DELETE",
      headers: { "x-authentication": this.context.token },
    }).then((response) => {
      if (!response.ok) {
        this.setState({
          error:
            "Ha ocurrido un error cancelando el pedido: " +
            response.status.toString() +
            " " +
            response.statusText,
          isLoading: false,
        });
      } else {
        this.setState({ redirect: true });
      }
    });
  }

meskio's avatar
meskio committed
  render() {
meskio's avatar
meskio committed
    if (this.state.redirect) {
      return <Redirect to="/" />;
    }

    const order = this.state.order;
meskio's avatar
meskio committed
    let expired;
meskio's avatar
meskio committed
    if (!order.active) {
meskio's avatar
meskio committed
      expired = <Badge variant="info">finalizado</Badge>;
meskio's avatar
meskio committed
    }
meskio's avatar
meskio committed
    const { id } = this.props.match.params;

    let update_button;
meskio's avatar
meskio committed
    if (this.state.isLoading) {
meskio's avatar
meskio committed
      update_button = <Spinner animation="border" />;
meskio's avatar
meskio committed
    } else {
      let deadline_week = new Date(order.deadline);
      deadline_week.setDate(deadline_week.getDate() + 7);
      if (
        (order.member_num === parseInt(this.context.num) ||
          this.context.role === "admin") &&
        deadline_week > Date.now()
      ) {
meskio's avatar
meskio committed
        update_button = (
          <ButtonGroup>
            <LinkContainer to={"/order/edit/" + id}>
              <Button variant="info">Modificar</Button>
            </LinkContainer>
            <Button
              variant="danger"
              onClick={() => this.setState({ showDelete: true })}
            >
meskio's avatar
meskio committed
              Cancelar
            </Button>
          </ButtonGroup>
meskio's avatar
meskio committed
        );
      }
    }

meskio's avatar
meskio committed
    const deadlineStr = printDate(this.state.order.deadline, true);

    const handleClose = () => this.setState({ showDelete: false });

meskio's avatar
meskio committed
    return (
meskio's avatar
meskio committed
      <Fetcher
        url={"/api/order/" + id}
        onFetch={(data) => this.setData(data)}
        refetch={this.state.refetch}
      >
        {this.state.error && <Alert variant="danger">{this.state.error}</Alert>}
        <Row>
          <Col>
            <h1>{this.state.order.name}</h1>
          </Col>
          <Col className="text-right">
            <p>
meskio's avatar
meskio committed
              Fecha limite:
              <br />
              {deadlineStr}
meskio's avatar
meskio committed
              <br />
meskio's avatar
meskio committed
            {update_button}
          </Col>
        </Row>
        <p>{this.state.order.description}</p>

        {this.showTransaction()}
        <ShowOrderResults order={this.state.order} />

        <Modal show={this.state.showDelete} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Confirmar la elminicacion</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>¿Borrar permanentemente el pedido {this.state.order.name}?</p>
            <p>Si aceptas devolvera el dinero a quien haya pedido productos.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Cancelar
            </Button>
            <Button variant="danger" onClick={() => this.delorder()}>
              Eliminar
            </Button>
          </Modal.Footer>
        </Modal>
meskio's avatar
meskio committed
    );
  }
meskio's avatar
meskio committed
}

export default ShowOrder;