Skip to content

Commit

Permalink
Merge pull request #152 from Arquisoft/develop
Browse files Browse the repository at this point in the history 
Final big merge from Develop into Production (master)
  • Loading branch information
@lumialfe
lumialfe authored Apr 30, 2022
2 parents 34c5d00 + ffe3afa commit f29abc5
Show file tree
Hide file tree
Showing 24 changed files with 461 additions and 214 deletions.
2 changes: 2 additions & 0 deletions webapp/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import AdminLogin from './components/administrator/AdminLogin';

import { ReactNotifications } from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css'
import PageNotFound from './components/fragments/PageNotFound';


function App(): JSX.Element {
Expand Down Expand Up @@ -59,6 +60,7 @@ function App(): JSX.Element {
<Route path='/cart' element={<ShoppingCart items={cart} refreshCartList={refreshCartList} />} />
<Route path='/admin' element={<AdminView/>}/>
<Route path='/admin/login' element={<AdminLogin/>}/>
<Route path="/*" element={<PageNotFound/>} />
</Routes>
</Router>
</Container>
Expand Down
3 changes: 3 additions & 0 deletions webapp/src/components/administrator/AdminView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,11 +154,14 @@ function AdminView(): JSX.Element {


<label >All Orders: </label>
<div style={{"overflow":"auto", "maxHeight":"300px"}}>
{orders.sort((a, b) => {
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
}).map(order => (
<OrderAdminCard order={order} />
))}
</div>

</Stack>
</Box>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/components/administrator/OrderAdminCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function OrderAdminCard(props: OrderAdminCardProps) {
};

return (
<Card id="orderAdminCard" variant="outlined">
<Card id="orderAdminCard" variant="outlined" style={{"margin":"5px"}}>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Order {props.order.createdAt.toString().substring(0, 10)}
Expand Down
117 changes: 56 additions & 61 deletions webapp/src/components/cart/CartItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { useState,useEffect } from 'react';
import { useState, useEffect } from 'react';
import { ItemCart, Product } from "../../shared/shareddtypes";
import { addToCart,apiEndPoint,baseApiEndPoint, getProductImages } from '../../api/api';
import { addToCart, baseApiEndPoint, getProductImages } from '../../api/api';

import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import Button from "@mui/material/Button";
import { Card, CardContent, Box, Divider, CardMedia } from "@mui/material";
import { Card } from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';

import './../../css/CartItem.css'
type CartItemProps = {
item: ItemCart;
updateTotal: () => void;
Expand All @@ -17,20 +17,20 @@ type CartItemProps = {

function CartItem(props: CartItemProps) {
const [quantity, setQuantity] = useState<number>(props.item.quantity);
const[imgPath,setImgPath] = useState<string>("");
const [imgPath, setImgPath] = useState<string>("");

async function changeQuantityBy(item: ItemCart, factor: number): Promise<void> {
item.quantity += factor;
setQuantity(item.quantity);
addToCart(item,factor);
addToCart(item, factor);
props.updateTotal();
props.refreshCartList();

};

const getImage = async () => {
setImgPath(baseApiEndPoint+(await getProductImages(props.item.product.id)as string[])[0]);
};
setImgPath(baseApiEndPoint + (await getProductImages(props.item.product.id) as string[])[0]);
};

useEffect(() => {
setQuantity(props.item.quantity);
Expand All @@ -40,61 +40,56 @@ function CartItem(props: CartItemProps) {


return (

<Card variant="elevation" sx={{ display: 'flex', marginBottom: 5 }}>
<CardMedia
component="img"

//set max image to fill the card
//sx={{ maxWidth: '100', maxHeight: '110', width: '100', height: '110' }}
image={imgPath}
//image={require("path/to/image.jpg")} FOR TESTING
//set max height to 100px
sx={{ height: 200, width: 100, margin: 3 }}
style={{ flex: 2 }} />
<Box style={{ flex: 3, display: 'flex', flexDirection: 'column' }}
justifyContent='space-between'>
<CardContent>
<Typography component="h2" variant="h4">
{props.item.product.name}
</Typography>
<Typography component="h3" color="text.secondary">
{props.item.product.description}
</Typography>
</CardContent>
<div style={{ display: 'flex', justifyContent: 'left', margin: 15 }}>
<Stack direction="row" spacing={2} alignItems="center">
<Stack direction="row" spacing={1} alignItems="center">
<Button size="small"
disabled={props.item.quantity === 1}
onClick={() => changeQuantityBy(props.item, -1)}
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}>
-
</Button>
<Typography component="h4" align="center">
{quantity}
</Typography>
<Button size="small"
onClick={() => changeQuantityBy(props.item, 1)}
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}>
+
</Button>
</Stack>
<Button
onClick={() => props.deleteItem(props.item.product)}
color="error" size="medium" variant="outlined" startIcon={<DeleteIcon />}
>
Delete
</Button>
</Stack>

// <div className="card-item">
<Card id="card-item">
<img className="item-img" src={imgPath} alt={props.item.product.name} />
<div className="item-info">

<div className='item-name'>
{props.item.product.name}
</div>
<div className='item-description'>
{props.item.product.description}
</div>
</Box>
<CardContent style={{ flex: 1, marginRight: 20 }}>
<Typography component="h1" variant="h4" align="right">
<div className="item-price">
{props.item.product.price.toString().concat(" €")}
</Typography>
</CardContent>
</div>
<div className="item-buttons" style={{ display: 'flex', justifyContent: 'center', margin: 15 }}>


<Button size="small"
disabled={props.item.quantity === 1}
onClick={() => changeQuantityBy(props.item, -1)}
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}
>
-
</Button>
<Typography component="h4" align="center">
{quantity}
</Typography>
<Button size="small"
onClick={() => changeQuantityBy(props.item, 1)}
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}>
+
</Button>

<Button
onClick={() => props.deleteItem(props.item.product)}
color="error" size="medium" startIcon={<DeleteIcon />}
>
Delete
</Button>

</div>
</div>




</Card>
/* </div> */

);
}

Expand Down
43 changes: 28 additions & 15 deletions webapp/src/components/cart/ShoppingCart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {
//console.log("Length: " + props.items.length)
let res = props.items.map((item: ItemCart) => {
if (item !== null && item.quantity > 0) {
return <CartItem refreshCartList={props.refreshCartList} updateTotal={updateTotal} deleteItem={deleteItem} item={item} />
return <CartItem refreshCartList={props.refreshCartList} updateTotal={updateTotal} deleteItem={deleteItem} item={item} />
}
}
)
Expand All @@ -102,17 +102,27 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {

return (
<Box justifyContent="center">
<Typography component="h1" variant="h3" >
<div style={{ display: 'inline-block', marginTop: '30px', fontWeight: 'bold', fontSize: '2.2rem', color: '#7c4dff', marginBottom: '1%' }} >
Shopping cart
</Typography>
</div>
<Divider />
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button color="secondary" variant="contained" size="large" href="/"
style={{ color: "white", backgroundColor: "#F23005", borderRadius: "8px", top: "20px", height: "50px", padding: "2%" }}>
Continue shopping
</Button>
</div>
<br></br>
<br></br>
<br></br>
<Box style={{}}>

<Box style={{ display: 'flex' }}>
<Stack m={6} spacing={5} style={{ flex: 3 }}>

<Stack m={6} spacing={5} style={{ flex: 3, height: "50vh", margin: "auto", overflow: 'auto', backgroundColor: '#FAF9F6', padding: "1%" }}>
{loadItems()}
</Stack>

<Stack mt={6} mr={6} style={{ flex: 1 }}>
<br></br>
<Stack mt={6} mr={6} style={{width: "80vw", margin: "auto", flex: 1}}>
<Card variant="elevation" sx={{ display: 'flex', flexDirection: 'column', padding: 3 }}>
<Typography component="h1" variant="h6" color="text.secondary">
Total Amount:
Expand All @@ -121,21 +131,24 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {
{total.toFixed(2).toString().concat(" €")}
</Typography>
</Card>
{props.items.length > 0 ? <Button variant="contained" href="/checkout" style={{ color: "white", backgroundColor: "#7c4dff", borderRadius: "8px", top: "20px", height: "50px" }}>
Checkout
</Button> : <></>}

</Stack>
</Box>

<div style={{ display: 'flex', justifyContent: 'center' }}>
<Stack direction="row" spacing={3} alignItems="center">
<Button color="secondary" size="large" href="/">
Continue shopping
</Button>

{props.items.length > 0 ? <Button variant="contained" href="/checkout" size="large"
style={{
color: "white", backgroundColor: "#7c4dff", borderRadius: "8px",
top: "20px", height: "50px", padding: "2%"
}}>
Checkout
</Button> : <></>}



</Stack>
</div>
<br></br>
</Box>
);
}
Expand Down
72 changes: 43 additions & 29 deletions webapp/src/components/checkout-shipping/Checkout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Button from "@mui/material/Button";

import { styled } from "@mui/material/styles";

import { Card, Box, Divider} from "@mui/material";
import { Card, Box, Divider, Grid } from "@mui/material";

import CheckoutItem from "./CheckoutItem";

Expand All @@ -20,12 +20,12 @@ type CheckoutProps = {
function Checkout(props: CheckoutProps): JSX.Element {

const [total, setTotal] = useState<number>(0);


const updateTotal = async () => {
let cart = getCart();
setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
};
};

useEffect(() => {
setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
Expand All @@ -36,7 +36,7 @@ function Checkout(props: CheckoutProps): JSX.Element {

function loadItemsCheckout(): JSX.Element {


let res = props.items.map((item: ItemCart) => {
if (item !== null && item.quantity > 0) {
return <CheckoutItem updateTotal={updateTotal} item={item} />
Expand All @@ -48,42 +48,56 @@ function Checkout(props: CheckoutProps): JSX.Element {
{res}
</div>
);


}

return (
<Box justifyContent="center">
<Typography component="h1" variant="h3" >
<div style={{ display: 'inline-block', marginTop: '30px', fontWeight: 'bold', fontSize: '2.2rem', color: '#7c4dff' }} >
Checkout
</Typography>
</div>
<Divider />

<Box style={{ display: 'flex' }}>
<Stack m={6} spacing={5} style={{ flex: 3 }}>

<Box style={{ display: 'flex', flexWrap: 'wrap' }}>
<Stack m={6} spacing={5} style={{
margin: "auto", padding: "1%",
height: "50vh", width: '80vw', overflow: 'auto',
gridColumnStart: 1, gridColumnEnd: 4, backgroundColor: 'white',
}}>
{loadItemsCheckout()}

<Card variant="elevation" sx={{ display: 'flex', flexDirection: 'column', padding: 3 }}>
<Typography component="h1" variant="h6" color="text.secondary">
Cart Totals:
</Typography>
<Typography component="h1" variant="h4">
{total.toFixed(2).toString().concat(" €")}
</Typography>
</Card>

<Button variant="contained" href="/cart" style={{ color: "black", backgroundColor: "lavender", borderRadius: "8px", top: "20px", height: "50px" }}>
Back to Shopping Cart
</Button>

{props.items.length > 0 ? <Button variant="contained" href="/shipping" style={{ color: "white", backgroundColor: "#7c4dff", borderRadius: "8px", top: "20px", height: "50px" }}>
Continue to Shipping
</Button>
:
<></>}
</Stack>
<br></br>
<Card variant="elevation" sx={{ gridColumnStart: 4, width: '80vw', margin: "auto" }}>
<Typography component="h1" variant="h6" color="text.secondary" textAlign="right" marginRight="2%">
Cart Totals:
</Typography>
<Typography component="h1" variant="h4" textAlign="right" marginRight="2%" color="#F23005">
{total.toFixed(2).toString().concat(" €")}
</Typography>
</Card>

<br></br>
<Grid container style={{width: "80vw", margin: "auto"}}>
<Grid item xs={6}>
<Button variant="contained" href="/cart" style={{ color: "black", backgroundColor: "lavender", borderRadius: "8px", top: "20px", height: "auto", flex: 2, paddingTop: "3vh", paddingBottom: "3vh", width: "100%"}}>
Back
</Button>
</Grid>
<Grid item xs={6}>
{props.items.length > 0 ? <Button variant="contained" href="/shipping" style={{ color: "white", backgroundColor: "#7c4dff", borderRadius: "8px", top: "20px", height: "auto", flex: 2, paddingTop: "3vh", paddingBottom: "3vh", width: "100%"}}>
Shipping
</Button>
:
<></>}
</Grid>

</Grid>


</Box>
<br></br>

</Box>
);
}
Expand Down
Loading

0 comments on commit f29abc5

Please sign in to comment.