Merge pull request #241 from Arquisoft/Adrian-nuevo

docs/06_runtime_view.adoc

@@ -9,12 +9,24 @@ El administrador rellenará un formulario con los detalles del producto que se m
 
 image:06_add.PNG["Añadir productos"]
 
+=== Administrar productos
+
+El administrador podra administrar todos los productos de la web. Se le mostrará una tabla con todos los productos, su información, stock y con dos opciones, editar el producto o eliminarlo.
+
+image:06_editProducts.PNG["Administrar productos"]
+
 === Eliminar productos
 
-El administrador rellenará un formulario con los detalles del producto a borrar.La aplicación pasará la información necesaria a la base de datos para identificar y borrar el producto correctamente.
+El administrador podra eliminar el producto que desee desde la misma ventana donde se administran los productos.La aplicación borrará el producto seleccionado.
 
 image:06_remove.PNG["Eliminar productos"]
 
+=== Administrar pedidos
+
+El administrador podra administrar todos los pedidos de la web. Se le mostrará una tabla con todos los pedidos y su información.
+
+image:06_adminOrder.PNG["Administrar pedidos"]
+
 === Filtro de productos
 El usuario tras realizar el login en la aplicación y ver los diferentes productos que hay, podrá utilizar los filtros situados en la parte izquierda de la página para realizar una búsqueda más precisa. Tras selccionar los filtros que el usuario vea convenientes. La aplicación pedirá a la base de datos donde se encuentren todos los productos, aquellos que el filtro muestre. Tras ello, la base de datos, retornara los productos que cumplan esos filtros a la aplicación. La aplicación mostrará los productos al usuario.
 
@@ -29,6 +41,18 @@ image:06_Compra_Productos.png["Compra productos"]
 El usuario debe introducir sus credenciales en la aplicación y estas serán validadas con la vase de datos, si son correctas accederá a la aplicacion con su cuentas y sino se le mostrará un mensaje  de error
 image:06_Login.png["Login"]
 
-=== Mostrar historial de ventas
+=== Cerrar sesión
+Una vez que haya acabado, el usuario podra cerrar sesión para no mantener su cuenta activa
+image:06_cierreSesion.png["Login"]
+
+=== Mostrar historial de ventas administador
 El administrador pedirá el historial de ventas a la base de datos.
-image:06_sales_history.png["Mostrar historial de ventas"]
+image:06_sales_history.png["Mostrar historial de ventas administrador"]
+
+=== Mostrar historial de pedidos del usuario
+El usuario pedirá el historial de sus compras a la base de datos.
+image:06_pedidosUsuario.PNG["Mostrar historial de pedidos del usuario"]
+
+=== Modificar perfil
+El usuario podrá modificar su perfil ya sea cambiando su nombre o apellidos directamente o solicitando un cambio de contraseña. El correo no podrá ser modificado.
+image:06_modifPerfil.PNG["Modificar perfil"]

webapp/e2e/features/Order.feature

@@ -3,9 +3,4 @@ Feature: Experiment with the orders
 Scenario: The user makes an incorrect order
     Given An existing user
     When I choose a product and dont fill the order form
-    Then An error should appear
-
-Scenario: The user can see the history of orders
-    Given An existing user
-    When I log in and want to check the orders
-    Then I can see the orders made in the website
+    Then An error should appear

webapp/e2e/steps/Order.steps.ts

@@ -88,35 +88,6 @@ defineFeature(feature, test => {
     });
   })
 
-
-
-  test('The user can see the history of orders', ({given,when,then}) => {
-
-    let email:string;
-    let password:string;
-
-    given('An existing user', () => {   
-        email = "[email protected]"
-        password = "efren"
-    });
-
-    when('I log in and want to check the orders', async () => {
-
-        // Primero hacemos login
-        await expect(page).toMatch('Iniciar Sesión')
-        await expect(page).toFill('#email', email);
-        await expect(page).toFill('#pass', password);
-
-        // Hacemos click en el icono de usuarios y vamos al historial de pedidos
-        await expect(page2).toClick('#basic-button')
-
-    });
-
-    then('I can see the orders made in the website', async () => {
-        await expect(page4).toMatch('orderOneExample')
-    });
-  })
-
   afterEach(async ()=>{
     browser.close()
   })

webapp/src/App.tsx

@@ -66,8 +66,8 @@ const App: FC = () => {
           <Route index element = {<Home onAddCart={onAddCart} cartItems = {cartItems}/>}/>
           <Route path = 'login' element = {<LogIn/>}/>
           <Route path = 'signup' element = {<SignUp/>}/>
-          <Route path = 'user/profile' element = {<Profile email={"[email protected]"}/>} />
-          <Route path = 'user/orderHistory' element = {<OrderHistory email={"[email protected]"}/>} />
+          <Route path = 'user/profile' element = {<Profile />} />
+          <Route path = 'user/orderHistory' element = {<OrderHistory />} />
           <Route path = 'products' element = {<ListProducts onAddCart={onAddCart} cartItems = {cartItems}/>}/>
           <Route path = 'pago' element = {<Pago/>}/>
           <Route path= 'help' element = {<HelpPage/>} />

webapp/src/api/api.ts

@@ -32,6 +32,12 @@ export async function getProductosByCategoria(categoria: string): Promise<Produc
   return response.json();
 }
 
+export async function getOrdersByEmail(email: string): Promise<Order[]>{
+  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000'
+  let response = await fetch(apiEndPoint + "/order/getAllByEmail/" + email);
+  return response.json();
+}
+
 export async function getOrders(): Promise<Order[]>{
   const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000'
   let response = await fetch(apiEndPoint + "/order/list");

webapp/src/components/navbar/NavBar.tsx

@@ -35,6 +35,9 @@ const NavBar=(cart:ProductsProps) =>{
     const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorElb(event.currentTarget);
     };
+    const handleCloseMenu = () => {
+        setAnchorElb(null);
+    };
     var totalPrice = 0;
     var numOfProducts = 0
     cart.cartItems.map(x => numOfProducts+= x.cantidad);
@@ -186,12 +189,13 @@ const NavBar=(cart:ProductsProps) =>{
                     horizontal: 'right',
                     }}
                     open={openB}
+                    onClose={handleCloseMenu}
                 >
                     <Link href="/user/profile" underline="none"style={{color:"#000000"}}>
                         <MenuItem onClick={handleClose}>Perfil</MenuItem>
                     </Link>
                     <Link id= "historialVentas" href="/user/orderHistory" underline="none"style={{color:"#000000"}}>
-                        <MenuItem onClick={handleClose}>Historial de Ventas</MenuItem>
+                        <MenuItem onClick={handleClose}>Historial de Pedidos</MenuItem>
                     </Link>
                 </Menu>
 

webapp/src/components/navbar/NavBarAdmin.tsx

@@ -33,6 +33,9 @@ const NavBarAdmin = (cart:ProductsProps) => {
     const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorElb(event.currentTarget);
     };
+    const handleCloseMenu = () => {
+        setAnchorElb(null);
+    };
     var totalPrice = 0;
     var numOfProducts = 0
     cart.cartItems.map(x => numOfProducts+= x.cantidad);
@@ -196,6 +199,7 @@ const NavBarAdmin = (cart:ProductsProps) => {
                     horizontal: 'right',
                     }}
                     open={openB}
+                    onClose={handleCloseMenu}
                 >
                     <Link href="/user/profile" underline="none"style={{color:"#000000"}}>
                         <MenuItem onClick={handleClose}>Perfil</MenuItem>

webapp/src/pages/user/OrderHistory.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import Table from '@mui/material/Table';
 import { TableContainer, TableHead} from '@mui/material';
 import TableBody from '@mui/material/TableBody';
@@ -7,12 +7,11 @@ import TableRow from '@mui/material/TableRow';
 import { styled } from '@mui/material/styles';
 import { Order } from '../../shared/shareddtypes';
 import Paper from '@mui/material/Paper';
-import {  getOrders } from '../../api/api';
+import {  getOrdersByEmail } from '../../api/api';
 import OrderUser from '../user/OrderUser';
-
-type Id = {
-    email:String
-}
+import jwt_decode from "jwt-decode";
+import axios from 'axios';
+import { User } from '../../shared/shareddtypes';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
     [`&.${tableCellClasses.head}`]: {
@@ -24,21 +23,41 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
     },
 }));
 
-async function ordersByEmail(order:Order[], orderEmail:Order[], email:String){
-    order.forEach(e => {if(e.correo === email){ orderEmail.push(e) }});
+function getUserId(): string {
+    var id;
+    if(localStorage.getItem('token') != null)
+    var user:any = jwt_decode(localStorage.getItem('token') || '{}');
+    id = user.id
+    return id
 }
 
-const OrderHistory = (id: Id) => {
-    const [orders, setOrders]  = React.useState<Order[]>([]);
-    const[ordersEmail] = React.useState<Order[]>([]);
-
-    async function cargarPedidos() {
-        setOrders(await getOrders());
+const OrderHistory = () => {
+    const [ordersEmail, setOrdersEmail] = React.useState<Order[]>([]);
+    let [email, setEmail] = useState('')
+    let [id, setId] = useState('')
+    let [user, setUser] = React.useState<User>({_id: "", name: "",email: "",surname: "", password: ""});
+
+    id = getUserId()
+
+    const getUser = async (id:String) => {
+        const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000'
+        const data = await axios.get(apiEndPoint + "/user/findById/" + id).then (
+            res => {
+                setUser(res.data);
+                console.log(user.email)
+                return res.data
+            }
+        )
+        return data != null;
     }
 
-    useEffect(() => {cargarPedidos();}, []);
+    getUser(id)
+    email = user.email
 
-    ordersByEmail(orders,ordersEmail,id.email);
+    async function cargarPedidosEmail() {
+        setOrdersEmail(await getOrdersByEmail(email))
+    }
+    cargarPedidosEmail()
 
     return (
         <div>
@@ -60,8 +79,6 @@ const OrderHistory = (id: Id) => {
                 </TableContainer>
             </div>
         </div>
-
     );
 }
-
 export default OrderHistory;