Reorganize products/inventary menu

* Closes: #19

src/Head.js

@@ -39,21 +39,18 @@ function Head(props) {
   );
   if (auth.role === "admin") {
     productNav = (
-      <NavDropdown title="Productos" id="admin">
+      <NavDropdown title="Almacen" id="admin">
         <LinkContainer to="/products">
           <NavDropdown.Item>Productos</NavDropdown.Item>
         </LinkContainer>
-        <LinkContainer to="/product/add">
-          <NavDropdown.Item>Alta codigos</NavDropdown.Item>
-        </LinkContainer>
         <LinkContainer to="/inventary">
-          <NavDropdown.Item>Inventario</NavDropdown.Item>
-        </LinkContainer>
-        <LinkContainer to="/inventary/add">
-          <NavDropdown.Item>Entrada</NavDropdown.Item>
+          <NavDropdown.Item>Entradas Almacén</NavDropdown.Item>
         </LinkContainer>
         <LinkContainer to="/supplier/add">
-          <NavDropdown.Item>Añade Proveedor</NavDropdown.Item>
+          <NavDropdown.Item>Alta Proveedores</NavDropdown.Item>
+        </LinkContainer>
+        <LinkContainer to="/product/add">
+          <NavDropdown.Item>Alta Codigos</NavDropdown.Item>
         </LinkContainer>
       </NavDropdown>
     );

src/OwnPassword.js

@@ -16,7 +16,7 @@ function OwnPassword() {
       body={{ old_password, password }}
       onSuccess={() => setPasswordChanged(true)}
     >
-      <h2>Cambio de contraseña</h2>
+      <h2 className="text-center">Cambio de contraseña</h2>
 
       {passwordChanged && (
         <Alert variant="success">La contraseña se ha cambiado con éxito.</Alert>

src/Panel.js

@@ -7,8 +7,7 @@ import MemberList from "./member/MemberList";
 import ProductList from "./product/ProductList";
 import ShowProduct from "./product/ShowProduct";
 import CreateProduct from "./product/CreateProduct";
-import CreateInventary from "./inventary/CreateInventary";
-import InventaryList from "./inventary/InventaryList";
+import Inventary from "./inventary/Inventary";
 import ShowInventary from "./inventary/ShowInventary";
 import CreateSupplier from "./inventary/CreateSupplier";
 import Dashboard from "./Dashboard";
@@ -61,14 +60,11 @@ function LogedPanel(props) {
             <Route path="/product/:code">
               <ShowProduct />
             </Route>
-            <Route path="/inventary/add">
-              <CreateInventary />
-            </Route>
             <Route path="/inventary/:id">
               <ShowInventary />
             </Route>
             <Route path="/inventary">
-              <InventaryList />
+              <Inventary />
             </Route>
             <Route path="/supplier/add">
               <CreateSupplier />

src/inventary/CreateSupplier.js

@@ -14,29 +14,32 @@ function CreateSupplier() {
   const body = { name };
 
   return (
-    <Sender url="/api/supplier" body={body} onSuccess={setRedirect}>
-      <Form.Group as={Row}>
-        <Form.Label as="legend" column sm={3}>
-          Nombre
-        </Form.Label>
-        <Col sm={9}>
-          <Form.Control
-            placeholder="nombre"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </Col>
-      </Form.Group>
-      <Form.Group as={Row}>
-        <Col>
-          <div className="text-right">
-            <Button type="submit" disabled={!name}>
-              Añadir proveedor
-            </Button>
-          </div>
-        </Col>
-      </Form.Group>
-    </Sender>
+    <div>
+      <h2 className="text-center">Alta de proveedores</h2>
+      <Sender url="/api/supplier" body={body} onSuccess={setRedirect}>
+        <Form.Group as={Row}>
+          <Form.Label as="legend" column sm={3}>
+            Nombre
+          </Form.Label>
+          <Col sm={9}>
+            <Form.Control
+              placeholder="nombre"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group as={Row}>
+          <Col>
+            <div className="text-right">
+              <Button type="submit" disabled={!name}>
+                Añadir proveedor
+              </Button>
+            </div>
+          </Col>
+        </Form.Group>
+      </Sender>
+    </div>
   );
 }
 

src/inventary/Inventary.js

+import React, { useState } from "react";
+import InventaryList from "./InventaryList";
+import CreateInventary from "./CreateInventary";
+import Fetcher from "../Fetcher";
+
+function Inventary() {
+  const [inventary, setInventary] = useState([]);
+
+  const setEntry = (entry) => {
+    let i = inventary;
+    i.push(entry);
+    setInventary(i);
+  };
+
+  return (
+    <div>
+      <h2 className="text-center">Entradas de Almacén</h2>
+      <CreateInventary setEntry={setEntry} />
+
+      <hr />
+      <Fetcher url="/api/inventary" onFetch={setInventary}>
+        <InventaryList inventary={inventary} />
+      </Fetcher>
+    </div>
+  );
+}
+
+export default Inventary;

src/inventary/InventaryList.js

 import React, { useState } from "react";
 import { Table, OverlayTrigger, Popover } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
-import Fetcher from "../Fetcher";
 import { printDate, printMoney, printInventaryID } from "../util";
 
 function supplier(entry) {
@@ -15,11 +14,12 @@ function inventaryOverlay(entry) {
   const content = entry.products.map((p) => {
     const stock = p.stock ? p.stock : "";
     const price = p.price !== null ? printMoney(p.price) : "";
+    const name = p.product !== null ? p.product.name : p.code;
 
     return (
       <div key={"I" + entry.ID + "-" + p.ID}>
         {p.comment && <p>p.comment</p>}
-        {p.product.name + ": " + stock + " " + price}
+        {name + ": " + stock + " " + price}
         <br />
       </div>
     );
@@ -33,10 +33,8 @@ function inventaryOverlay(entry) {
   );
 }
 
-function InventaryList() {
-  const [inventary, setInventary] = useState([]);
-
-  const entries = inventary.map((i) => (
+function InventaryList(props) {
+  const entries = props.inventary.map((i) => (
     <OverlayTrigger key={i.ID} overlay={inventaryOverlay(i)}>
       <LinkContainer to={"/inventary/" + i.ID}>
         <tr>
@@ -50,19 +48,17 @@ function InventaryList() {
   ));
 
   return (
-    <Fetcher url="/api/inventary" onFetch={setInventary}>
-      <Table className="text-center" responsive>
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Fecha</th>
-            <th>Por</th>
-            <th>Proveedor</th>
-          </tr>
-        </thead>
-        <tbody>{entries}</tbody>
-      </Table>
-    </Fetcher>
+    <Table className="text-center" responsive>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Fecha</th>
+          <th>Por</th>
+          <th>Proveedor</th>
+        </tr>
+      </thead>
+      <tbody>{entries}</tbody>
+    </Table>
   );
 }
 

src/inventary/ShowInventary.js

@@ -10,7 +10,7 @@ function ShowInventary() {
 
   const products = entry.products.map((p) => (
     <tr>
-      <td>{p.product.name}</td>
+      <td>{p.product !== null ? p.product.name : p.code}</td>
       <td>{p.stock}</td>
       <td>{p.price !== null ? printMoney(p.price) : ""}</td>
     </tr>
@@ -32,9 +32,9 @@ function ShowInventary() {
       <Table striped bordered hover responsive>
         <thead>
           <tr>
-            <th>producto</th>
-            <th>stock</th>
-            <th>precio</th>
+            <th>Producto</th>
+            <th>Stock</th>
+            <th>Precio</th>
           </tr>
         </thead>
         <tbody>{products}</tbody>

src/product/CreateProduct.js

@@ -28,7 +28,7 @@ function CreateProduct() {
 
   return (
     <div>
-      <h2>Crear un nuevo código de producto</h2>
+      <h2 className="text-center">Crear un nuevo código de producto</h2>
       <Sender url="/api/product" body={body} onSuccess={setRedirect}>
         <Form.Row>
           <Form.Group as={Col}>

src/product/ProductList.js

@@ -21,19 +21,22 @@ function ProductList() {
   });
 
   return (
-    <Fetcher url="/api/product" onFetch={setProducts}>
-      <Table striped bordered hover responsive>
-        <thead>
-          <tr>
-            <th>codigo</th>
-            <th>Nombre</th>
-            <th>Precio</th>
-            <th>Existencias</th>
-          </tr>
-        </thead>
-        <tbody>{entries}</tbody>
-      </Table>
-    </Fetcher>
+    <div>
+      <h2 className="text-center">Productos en almacén</h2>
+      <Fetcher url="/api/product" onFetch={setProducts}>
+        <Table striped bordered hover responsive>
+          <thead>
+            <tr>
+              <th>Código</th>
+              <th>Producto</th>
+              <th>Precio</th>
+              <th>Existencias</th>
+            </tr>
+          </thead>
+          <tbody>{entries}</tbody>
+        </Table>
+      </Fetcher>
+    </div>
   );
 }