orders list

src/App.js

@@ -8,7 +8,7 @@ import {
   JqlTests_GoodFindOne,
   JqlTests_AuthUpsert
 } from './Tests/test_jql';
-import { LoginForm, GoodExample, GoodsList, goodsExample, Category, exampleCategory, OrderGood, exampleOrderGood, Order, exampleOrder } from "./Components";
+import { LoginForm, GoodExample, GoodsList, goodsExample, Category, exampleCategory, OrderGood, exampleOrderGood, Order, exampleOrder, OrderList, exampleOrderList } from "./Components";
 
 
 function App() {
@@ -17,8 +17,9 @@ function App() {
       {/*<GoodsList goods={goodsExample} />
     <GoodExample />
       <Category category={exampleCategory} />
-      <OrderGood orderGood={exampleOrderGood}/>*/}
-      <Order order={exampleOrder} />
+      <OrderGood orderGood={exampleOrderGood}/>
+      <Order order={exampleOrder} />*/}
+      <OrderList orders={exampleOrderList} />
     </>
 
   );

src/Components/AvatarAnimated.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { Avatar } from '@mui/material';
+
+export const AvatarImage = styled((props) => {
+    const { selected, ...other } = props;
+    return <Avatar {...other} />;
+})(({ theme, selected }) => ({
+    backgroundColor: selected && alpha(theme.palette.primary.main, 0.5),
+    boxShadow: selected && `0 0 0 1px ${alpha(theme.palette.primary.main, 0.5)}`,
+    avatarImage: {
+        objectFit: 'contain',
+    },
+}));
+
+export const AvatarAnimated = styled((props) => {
+    const { selected, ...other } = props;
+    return <AvatarImage {...other} />;
+})(({ theme, selected }) => ({
+    //width: theme.spacing(10),
+    //height: theme.spacing(10),
+    transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shortest,
+    }),
+    transform: selected && 'scale(1.1)',
+    '&:hover': {
+        transform: 'scale(1.1)',
+    },
+}));

src/Components/Good.js

@@ -1,11 +1,12 @@
 import React, { Component, useState } from 'react';
 import Button from '@mui/material/Button';
-import { styled, alpha } from '@mui/material/styles';
-import { Container, Avatar, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton, Paper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Container, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton, Paper } from '@mui/material';
 //CssBaseline, TextField, FormControlLabel, Checkbox, Link, Divider
 import { getFullImageUrl } from "./../utills";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Box } from '@mui/system';
+import { AvatarAnimated } from './AvatarAnimated';
 const GoodExample = () => {
     return <Good good={
         {
@@ -32,10 +33,6 @@ const ExpandMore = styled(props => {
     marginLeft: 'auto',
     transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shortest })
 }))
-const Image = (url) => {
-    let fullUrl = getFullImageUrl(url);
-    return <img src={fullUrl} alt="Description of image" />
-}
 
 const AvatarGroupOriented = styled((props) => {
     const { vertical, ...other } = props;
@@ -54,26 +51,6 @@ const AvatarGroupOriented = styled((props) => {
     ".MuiAvatar-root": { /*width: 20, height: 20,*/ marginLeft: 1 }
 }));
 
-const AvatarAnimated = styled((props) => {
-    const { selected, ...other } = props;
-    return <Avatar {...other} />;
-})(({ theme, selected }) => ({
-    //width: theme.spacing(10),
-    //height: theme.spacing(10),
-    transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shortest,
-    }),
-    transform: selected && 'scale(1.1)',
-    '&:hover': {
-        transform: 'scale(1.1)',
-    },
-    backgroundColor: selected && alpha(theme.palette.primary.main, 0.5),
-    boxShadow: selected && `0 0 0 1px ${alpha(theme.palette.primary.main, 0.5)}`,
-    avatarImage: {
-        objectFit: 'contain',
-    },
-}));
-
 const Good = ({ good, maxWidth, showAddToCard = true }) => {
     let [currentImageIndex, setCurrentImageIndex] = useState(0);
     let [expanded, setExpanded] = useState(false);
@@ -89,7 +66,6 @@ const Good = ({ good, maxWidth, showAddToCard = true }) => {
                                 good.images?.map((image, index) => (
                                     <AvatarAnimated selected={index === currentImageIndex} variant='rounded' key={index} src={getFullImageUrl(image)}
                                         onClick={() => {
-                                            let a = '';
                                             setCurrentImageIndex(index)
                                         }} />
                                 ))

src/Components/Order.js

@@ -5,6 +5,7 @@ import { OrderGoodsList } from "./OrderGoodsList"
 let exampleOrder = {
     "_id": "62cdc9b3b74e1f5f2ec1a0e9",
     "total": 3383,
+    "createdAt": "1657653683000",
     "orderGoods": [
         {
             "_id": "62cdc9b3b74e1f5f2ec1a0e6",
@@ -64,7 +65,7 @@ const Order = ({ order }) => {
                         Order# {order._id}
                     </Typography>
                     <Typography gutterBottom variant='body2' color='textSecondary' component='p'>
-                        {`Total: $${order.total}`}
+                        {`Created at: ${new Date(+order.createdAt).toLocaleString()}`}
                     </Typography>
                     <OrderGoodsList orderGoods={order.orderGoods} />
                 </Box>

src/Components/OrderGood.js

@@ -1,4 +1,9 @@
+import { Paper, Avatar, Box, Container, Grid, Table, TableBody, TableContainer, TableHead, TableRow, TableCell, tableCellClasses, Typography } from "@mui/material";
 import { Good } from "./Good";
+import { getFullImageUrl } from "./../utills";
+import { AvatarImage } from "./AvatarAnimated";
+import { styled } from '@mui/material/styles';
+import { StyledTableCell, StyledTableRow } from "./StyledTableElements";
 
 
 let exampleOrderGood = {
@@ -23,10 +28,44 @@ let exampleOrderGood = {
         "owner": null
     }
 }
-const OrderGood = ({ orderGood }) => {
+
+const OrderGood = ({ orderGood, orderGoodNum }) => {
+    orderGood = { ...orderGood.good, ...orderGood };
     return (
         <>
-            <Good good={{ ...orderGood.good, ...orderGood }} showAddToCard={false} />
+            <StyledTableRow>
+                <StyledTableCell item align="right" xs={1}>
+                    <Typography>
+                        {orderGoodNum + 1}.
+                    </Typography>
+                </StyledTableCell>
+                <StyledTableCell item xs={2}>
+                    {orderGood.images?.length > 0 ?
+                        <AvatarImage sx={{ width: 70, height: 70 }} variant='rounded' src={getFullImageUrl(orderGood.images[0])} /> :
+                        null}
+                </StyledTableCell>
+                <StyledTableCell item xs={3}>
+                    <Typography >
+                        {orderGood.name}
+                    </Typography>
+                </StyledTableCell>
+                <StyledTableCell item align="right" xs={2}>
+                    <Typography>
+                        {orderGood.price}
+                    </Typography>
+                </StyledTableCell>
+                <StyledTableCell item align="right" xs={2}>
+                    <Typography>
+                        {orderGood.count}
+                    </Typography>
+                </StyledTableCell>
+                <StyledTableCell item align="right" xs={2}>
+                    <Typography>
+                        {orderGood.price * orderGood.count}
+                    </Typography>
+                </StyledTableCell>
+            </StyledTableRow>
+            {/*<Good good={{ ...orderGood.good, ...orderGood }} showAddToCard={false} />*/}
         </>
     )
 }

src/Components/OrderGoodsList.js

@@ -1,12 +1,14 @@
 import React, { Component, useState } from 'react';
 import Button from '@mui/material/Button';
-import { styled, alpha } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import { Container, Avatar, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton, Paper, List, ListItem, Box } from '@mui/material';
 //CssBaseline, TextField, FormControlLabel, Checkbox, Link, Divider
 import { getFullImageUrl } from "../utills";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Good } from './Good';
 import { OrderGood } from './OrderGood';
+import { Table, TableBody, TableContainer, TableHead, TableRow, TableCell } from "@mui/material";
+import { StyledTableCell } from './StyledTableElements';
 
 let exampleOrderGoodsList = [
     {
@@ -143,18 +145,56 @@ let exampleOrderGoodsList = [
     },
 ];
 
-const OrderGoodsList = ({ orderGoods }) => {
+const OrderGoodsList = ({ orderGoods, tax_rate=0 }) => {
+    function ccyFormat(num) {
+        return `${num.toFixed(2)}`;
+    }
+    function subtotal(items) {
+        return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
+      }
+      const invoiceSubtotal = subtotal(orderGoods);
+      const invoiceTaxes = tax_rate * invoiceSubtotal;
+      const invoiceTotal = invoiceTaxes + invoiceSubtotal;
+   
     return (
-        <Container maxWidth='lg'>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-                {
-                    orderGoods.map(orderGood => {
-                        return (
-                            <OrderGood key={orderGood._id} orderGood={orderGood} maxWidth='xs' />
-                        )
-                    })}
-            </Box>
-        </Container>
+        <>
+            <TableContainer component={Paper}>
+                <Table sx={{ minWidth: 700 }} aria-label="customized table">
+                    <TableHead>
+                        <TableRow>
+                            <StyledTableCell align="right">#</StyledTableCell>
+                            <StyledTableCell></StyledTableCell>
+                            <StyledTableCell>Name</StyledTableCell>
+                            <StyledTableCell align="right">Price ($)</StyledTableCell>
+                            <StyledTableCell align="right">Count</StyledTableCell>
+                            <StyledTableCell align="right">Total</StyledTableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {
+                            orderGoods.map((orderGood, index) => {
+                                return (
+                                    <OrderGood key={orderGood._id} orderGood={orderGood} orderGoodNum={index} maxWidth='xs' />
+                                )
+                            })
+                        }
+                        <TableRow>
+                            <TableCell rowSpan={3} />
+                            <TableCell colSpan={2}>Subtotal</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell>Tax</TableCell>
+                            <TableCell align="right">{`${(tax_rate * 100).toFixed(0)} %`}</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell colSpan={2}>Total</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
+                        </TableRow>                    </TableBody>
+                </Table>
+            </TableContainer>
+        </>
     )
 }
 export { exampleOrderGoodsList, OrderGoodsList };

src/Components/StyledTableElements.js

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import { TableRow, TableCell, tableCellClasses } from "@mui/material";
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white,
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14,
+    },
+}));
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    '&:nth-of-type(odd)': {
+        backgroundColor: theme.palette.action.hover,
+    },
+    // hide last border
+    '&:last-child td, &:last-child th': {
+        border: 0,
+    },
+}));
+
+export {StyledTableCell, StyledTableRow}

src/Components/index.js

@@ -4,4 +4,5 @@ export { goodsExample, GoodsList } from './GoodsList';
 export {Category, exampleCategory} from './Category';
 export {OrderGood, exampleOrderGood} from './OrderGood';
 export {OrderGoodsList, exampleOrderGoodsList} from './OrderGoodsList'
-export {Order, exampleOrder} from './Order';
+export {Order, exampleOrder} from './Order';
+export {OrderList, exampleOrderList} from './OrderList'