From 0f84d643b31eee994b18efe06cab925444cde727 Mon Sep 17 00:00:00 2001 From: valydumitru01 <62762857+valydumitru01@users.noreply.github.com> Date: Sun, 1 May 2022 20:19:59 +0200 Subject: [PATCH 1/4] =?UTF-8?q?A=C3=B1adida=20imagen=20a=20producto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/ProductView.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/ProductView.tsx b/webapp/src/components/ProductView.tsx index 58bc0ea..e86d299 100644 --- a/webapp/src/components/ProductView.tsx +++ b/webapp/src/components/ProductView.tsx @@ -1,16 +1,9 @@ -import React, { useEffect, useState } from "react"; -import Button from "@mui/material/Button"; -import TextField from "@mui/material/TextField"; -import type { AlertColor } from "@mui/material/Alert"; -import { useNavigate, useParams } from "react-router-dom"; -import Link from "@mui/material/Link"; -import { addUser, getRocksById } from "../api/api"; -import Swal from "sweetalert2"; -import axios from "axios"; +import { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { getRocksById } from "../api/api"; import "../css/LoginRegister.css"; -import { Grid, Typography } from "@mui/material"; +import { Card, CardMedia, Grid, Typography } from "@mui/material"; import { Rock } from "../shared/shareddtypes"; - type RegisterProps = { handleAddToCart(r: Rock): void; }; @@ -28,6 +21,9 @@ function ProductView(props: RegisterProps): JSX.Element { if (rock !== undefined) return ( <> + + + {rock.name} + @@ -69,6 +70,7 @@ function ProductView(props: RegisterProps): JSX.Element { + ); else From e8b59487e5667f6c4aedb8d9eccf7e1f69362507 Mon Sep 17 00:00:00 2001 From: valydumitru01 <62762857+valydumitru01@users.noreply.github.com> Date: Sun, 1 May 2022 21:29:58 +0200 Subject: [PATCH 2/4] Finalizada vista producto --- webapp/src/components/ProductView.tsx | 99 +++++++++++++---------- webapp/src/components/ProductViewData.tsx | 44 ++++++++++ 2 files changed, 100 insertions(+), 43 deletions(-) create mode 100644 webapp/src/components/ProductViewData.tsx diff --git a/webapp/src/components/ProductView.tsx b/webapp/src/components/ProductView.tsx index e86d299..8280ab1 100644 --- a/webapp/src/components/ProductView.tsx +++ b/webapp/src/components/ProductView.tsx @@ -2,8 +2,10 @@ import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { getRocksById } from "../api/api"; import "../css/LoginRegister.css"; -import { Card, CardMedia, Grid, Typography } from "@mui/material"; +import { Button, Card, CardMedia, Grid, Paper, Typography } from "@mui/material"; +import InfoIcon from '@mui/icons-material/Info'; import { Rock } from "../shared/shareddtypes"; +import ProductViewData from "./ProductViewData"; type RegisterProps = { handleAddToCart(r: Rock): void; }; @@ -21,55 +23,66 @@ function ProductView(props: RegisterProps): JSX.Element { if (rock !== undefined) return ( <> - + - - - - {rock.name} - - - - - - Tipo - - - {rock.type} - - - Densidad - - - {rock.density} g/cm3 - + + + {rock.name} + + + + + + - - Mohs - - - {rock.mohsHardness} - + + + + + + + + + + + + + + + + + + + + + + + + + - - Precio - - - {rock.price}€ - - + ); diff --git a/webapp/src/components/ProductViewData.tsx b/webapp/src/components/ProductViewData.tsx new file mode 100644 index 0000000..a598460 --- /dev/null +++ b/webapp/src/components/ProductViewData.tsx @@ -0,0 +1,44 @@ +import "../css/LoginRegister.css"; +import { Grid, Paper, Tooltip, Typography } from "@mui/material"; +import InfoIcon from '@mui/icons-material/Info'; +type RegisterProps = { + infoContent?: string, + content: string, +}; + +function ProductViewData(props: RegisterProps): JSX.Element { + + + return ( + <> + + + + {props.infoContent!==undefined ? + <> + + + + + + + + + {props.content} + + : + + {props.content} + + } + + + + + + + ); + +} + +export default ProductViewData; From c70cd860cd995f604ff04e0f08cf0be082a523d4 Mon Sep 17 00:00:00 2001 From: valydumitru01 <62762857+valydumitru01@users.noreply.github.com> Date: Sun, 1 May 2022 23:16:45 +0200 Subject: [PATCH 3/4] Ajuste theme --- webapp/src/code/Theme.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/webapp/src/code/Theme.tsx b/webapp/src/code/Theme.tsx index 8a8a5dc..330159a 100644 --- a/webapp/src/code/Theme.tsx +++ b/webapp/src/code/Theme.tsx @@ -2,15 +2,15 @@ import { createTheme } from "@mui/material"; export const theme = createTheme({ palette: { primary: { - light: "#f3af2f", + light: "#FFC04A", main: "#f3af2f", - dark: "#553311", + dark: "#A67110", contrastText: "#111", }, secondary: { - light: "#ff7961", - main: "#f44336", - dark: "#ba000d", + light: "#429AFF", + main: "#2787F5", + dark: "#0D56A8", contrastText: "#000", }, }, From eee22d34b134c5e5eae6faa06660e7c8259cda0e Mon Sep 17 00:00:00 2001 From: valydumitru01 <62762857+valydumitru01@users.noreply.github.com> Date: Mon, 2 May 2022 00:28:12 +0200 Subject: [PATCH 4/4] Cambio estilo carrito + arreglo bug theme --- webapp/src/App.tsx | 124 +++++++++++++++---------- webapp/src/components/CartItem.tsx | 105 +++++++++++---------- webapp/src/components/ShoppingCart.tsx | 102 ++++++++++---------- 3 files changed, 186 insertions(+), 145 deletions(-) diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ba7d26b..6e278e3 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,28 +1,25 @@ - //import { useQuery } from 'react-query'; //import Link from '@mui/material/Link'; - - -import { Drawer } from '@mui/material'; -import { useState, useEffect } from 'react'; -import Welcome from './components/Welcome'; -import './css/App.css'; +import { Drawer } from "@mui/material"; +import { useState, useEffect } from "react"; +import Welcome from "./components/Welcome"; +import "./css/App.css"; import { Route, Routes, Navigate, BrowserRouter } from "react-router-dom"; -import {Rock} from './shared/shareddtypes'; -import Catalog from './components/Catalog'; -import { ThemeProvider } from '@emotion/react'; +import { Rock } from "./shared/shareddtypes"; +import Catalog from "./components/Catalog"; +import { ThemeProvider } from "@emotion/react"; import { theme } from "./code/Theme"; import LogIn from "./components/Login"; import Register from "./components/Register"; import NavBar from "./components/NavigationBar"; import { Container } from "@mui/material"; -import "./css/App.css" +import "./css/App.css"; import ShoppingCart from "./components/ShoppingCart"; -import PaymentProcess from './components/payment/PaymentPage'; -import OrderHistory from './components/Orders'; -import ProductView from './components/ProductView'; +import PaymentProcess from "./components/payment/PaymentPage"; +import OrderHistory from "./components/Orders"; +import ProductView from "./components/ProductView"; type Props = { openCart: () => void; }; @@ -59,13 +56,13 @@ function App(): JSX.Element { const handleAddToCart = (selectedItem: Rock) => { setCartContent((cart) => { if (cart.find((rocaInCart) => rocaInCart.name === selectedItem.name)) { - return cart.map(Rock => ( - Rock.name === selectedItem.name ? - { ...Rock, quantityCart: Rock.quantityCart + 1 } : - Rock - )); + return cart.map((Rock) => + Rock.name === selectedItem.name + ? { ...Rock, quantityCart: Rock.quantityCart + 1 } + : Rock + ); } - return [...cart, {...selectedItem, quantityCart: 1}]; + return [...cart, { ...selectedItem, quantityCart: 1 }]; }); }; @@ -76,7 +73,7 @@ function App(): JSX.Element { if (p.quantityCart === 1) { return sum; } - return [...sum, {...p, quantityCart: p.quantityCart - 1}]; + return [...sum, { ...p, quantityCart: p.quantityCart - 1 }]; } else { return [...sum, p]; } @@ -85,35 +82,62 @@ function App(): JSX.Element { }; return ( - - - setCartOpen(true)} /> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - }/> - }/> - - - setCartOpen(false)} - > - - - - + <> + + + setCartOpen(true)} /> + + + } + /> + } /> + } + /> + } + /> + + } + /> + } /> + } /> + } + /> + + } + /> + + + setCartOpen(false)} + > + + + + + ); } diff --git a/webapp/src/components/CartItem.tsx b/webapp/src/components/CartItem.tsx index 92e3ee1..cac80ca 100644 --- a/webapp/src/components/CartItem.tsx +++ b/webapp/src/components/CartItem.tsx @@ -1,57 +1,66 @@ -import { Typography } from '@material-ui/core'; -import Button from '@material-ui/core/Button'; -import { Card, CardContent, CardMedia } from '@mui/material'; -import { Rock } from '../shared/shareddtypes'; -import '../css/CartItem.css'; +import { Grid, Typography } from "@mui/material"; +import Button from '@mui/material/Button'; +import { Card, CardContent, CardMedia } from "@mui/material"; +import { Rock } from "../shared/shareddtypes"; -type Props = { - item: Rock; - handleAddToCart: (selectedItem: Rock) => void; - handleRemoveFromCart: (id: string) => void; -} +type CartItemProps = { + item: Rock; + handleAddToCart: (selectedItem: Rock) => void; + handleRemoveFromCart: (id: string) => void; +}; -const CartItem: React.FC = ({item, handleAddToCart, handleRemoveFromCart}) => { - return ( - - - - {item.name} - -
+function CartItem(props: CartItemProps): JSX.Element { + return ( + + + + {props.item.name} + + + + - - {item.quantityCart + " uds " } + color="secondary" + size="small" + disableElevation + variant="contained" + onClick={() => props.handleRemoveFromCart(props.item.name)} + > + - + + + + + {props.item.quantityCart + " uds "} + + -
- - {(item.price * item.quantityCart).toFixed(2) + " €"} + color="secondary" + size="small" + disableElevation + variant="contained" + onClick={() => props.handleAddToCart(props.item)} + > + + + + + + + + + {(props.item.price * props.item.quantityCart).toFixed(2) + " €"} - - + + + - - ) -}; - + ); +} export default CartItem; - diff --git a/webapp/src/components/ShoppingCart.tsx b/webapp/src/components/ShoppingCart.tsx index 1b3c692..2511899 100644 --- a/webapp/src/components/ShoppingCart.tsx +++ b/webapp/src/components/ShoppingCart.tsx @@ -1,56 +1,64 @@ -import { Button, Grid } from '@mui/material'; -import { Rock } from '../shared/shareddtypes'; -import CartItem from './CartItem'; -import '../css/ShoppingCart.css'; -import LoginPod from './solid-pods/LoginPod'; -import {useNavigate} from 'react-router-dom'; +import { AppBar, Button, Grid, Typography } from "@mui/material"; +import { Rock } from "../shared/shareddtypes"; +import CartItem from "./CartItem"; +import "../css/ShoppingCart.css"; +import LoginPod from "./solid-pods/LoginPod"; +import { useNavigate } from "react-router-dom"; - -type Props = { - cartContent: Rock[]; - handleAddToCart: (selectedItem: Rock) => void; - handleRemoveFromCart: (id: string) => void; +type CartProps = { + cartContent: Rock[]; + handleAddToCart: (selectedItem: Rock) => void; + handleRemoveFromCart: (id: string) => void; }; -const Cart: React.FC = ({ cartContent, handleAddToCart, handleRemoveFromCart }) => { - const getTotalPrice = () => cartContent.reduce((sum: number, item) => sum + item.quantityCart * item.price, 0); +function Cart(props: CartProps): JSX.Element { + const getTotalPrice = () => + props.cartContent.reduce( + (sum: number, item) => sum + item.quantityCart * item.price, + 0 + ); - return ( - -

Mi carrito

- {cartContent.length === 0 ?

El carrito está vacío

: null} - -
- {cartContent.map(item => ( - - ))} -

Total (iva 21% incluido): {getTotalPrice().toFixed(2)} €

-
+ return ( + <> + {props.cartContent.length !== 0 ? ( + <> + + + Mi Carrito + + + Total (iva 21% incluido): {getTotalPrice().toFixed(2)} € + + {props.cartContent.map((item) => ( + + ))} + + + ) : ( + El carrito está vacío + )} + + ); +} - - - - ) -}; - -export default Cart; \ No newline at end of file +export default Cart;