Skip to content

Commit 26e8a30

Browse files
author
WebDeveloperGuide
committed
Order Module Added
Functionality for show order detail, make order delivery added.
1 parent b453632 commit 26e8a30

File tree

13 files changed

+653
-137
lines changed

13 files changed

+653
-137
lines changed

‎web_admin/package-lock.json

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web_admin/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^13.5.0",
99
"axios": "^0.26.0",
1010
"jquery": "^3.6.0",
11+
"moment": "^2.29.2",
1112
"react": "^17.0.2",
1213
"react-csv": "^2.2.2",
1314
"react-dom": "^17.0.2",

‎web_admin/src/App.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,8 @@ textarea.form-control, select.form-control{
7070
.download-csv{
7171
font-size: 24px;
7272
margin-top: 5px;
73+
}
74+
75+
.cursor-auto{
76+
cursor: auto !important;
7377
}

‎web_admin/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import AddProduct from "./components/pages/product/AddProduct";
77
import EditProduct from "./components/pages/product/EditProduct";
88
import Categories from "./components/pages/category/Categories";
99
import Orders from "./components/pages/order/Orders";
10+
import EditOrder from "./components/pages/order/EditOrder";
1011
import Users from "./components/pages/user/Users";
1112
import NotFound from "./components/pages/NotFound";
1213
import AuthRoute from "./AuthRoute";
@@ -30,6 +31,7 @@ function App() {
3031
<PrivateRouter path="/product/edit/:id" component={EditProduct} />
3132
<PrivateRouter path="/categories" component={Categories} />
3233
<PrivateRouter path="/orders" component={Orders} />
34+
<PrivateRouter path="/order/edit/:id" component={EditOrder} />
3335
<PrivateRouter path="/users" component={Users} />
3436
<PrivateRouter path="*" component={NotFound} />
3537
</Switch>

‎web_admin/src/components/Header.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Link,useHistory} from 'react-router-dom';
22
import { logout } from "../redux/actions/userActions";
3-
import { useDispatch } from "react-redux";
3+
import { useDispatch, useSelector } from "react-redux";
44
import logo from "../images/logo.svg";
55
import minilogo from "../images/logo-mini.svg";
66
import profilePic from "../images/faces/face8.jpg";
@@ -12,6 +12,20 @@ const Header = () => {
1212
const logoutHandler = () => {
1313
dispatch(logout());
1414
};
15+
16+
const {userLogin: { userInfo :{data} }} = useSelector((state) => state);
17+
18+
let today = new Date();
19+
let curHr = today.getHours();
20+
let userMessage = '';
21+
22+
if (curHr < 12) {
23+
userMessage = 'Good Morning';
24+
} else if (curHr < 18) {
25+
userMessage = 'Good Afternoon';
26+
} else {
27+
userMessage = 'Good Evening';
28+
}
1529

1630
return(
1731
<nav className="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
@@ -33,7 +47,7 @@ const Header = () => {
3347
<div className="navbar-menu-wrapper d-flex align-items-top">
3448
<ul className="navbar-nav">
3549
<li className="nav-item font-weight-semibold d-none d-lg-block ms-0">
36-
<h1 className="welcome-text">Good Morning, <span className="text-black fw-bold">John Doe</span></h1>
50+
<h1 className="welcome-text">{userMessage}, <span className="text-black fw-bold">{data && data[0].name}</span></h1>
3751
<h3 className="welcome-sub-text">Your performance summary this week </h3>
3852
</li>
3953
</ul>

‎web_admin/src/components/pages/order/EditOrder.js

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import {useState, useEffect} from 'react';
2+
import {useDispatch,useSelector} from 'react-redux';
3+
import {Link} from 'react-router-dom';
4+
import moment from 'moment';
5+
import Header from '../../Header';
6+
import Sidebar from '../../Sidebar';
7+
import Footer from '../../Footer';
8+
import {getOrderDetails,deliverOrder} from '../../../redux/actions/OrderActions';
9+
import { ORDER_UPDATE_RESET } from "../../../redux/constants/OrderConstants";
10+
import { toast } from "react-toastify";
11+
import {ToastObjects} from '../../../redux/actions/toastObject';
12+
import './order.css';
13+
14+
const EditOrder = ({match}) => {
15+
const orderId = match.params.id;
16+
const [submitted, setSubmitted] = useState(false);
17+
const dispatch = useDispatch();
18+
19+
const {userLogin: { userInfo :{data} }} = useSelector((state) => state);
20+
const orderDetails = useSelector((state) => state.orderDetails);
21+
const { loading, error, order } = orderDetails;
22+
23+
console.log("order",order)
24+
25+
useEffect(() => {
26+
if (order._id !== orderId) {
27+
dispatch(getOrderDetails(orderId));
28+
}
29+
}, [order,dispatch, orderId]);
30+
31+
const deliverHandler = (e) => {
32+
e.preventDefault();
33+
dispatch(deliverOrder(orderId));
34+
};
35+
36+
return(
37+
<>
38+
<div className="container-scroller">
39+
<Header/>
40+
<div className="container-fluid page-body-wrapper">
41+
<Sidebar/>
42+
<div className="main-panel">
43+
<div className="content-wrapper">
44+
<div className="row">
45+
<div className="col-12 grid-margin">
46+
<div className="card">
47+
<div className="card-body">
48+
<div className="clearfix mb-4">
49+
<h4 className="float-left">Order Details</h4>
50+
<Link to="/orders" className="btn btn-outline-primary float-right">Back to Orders</Link>
51+
</div>
52+
<form className="form-sample clear-fix">
53+
<div className="card">
54+
<h5 className="card-header">
55+
<div className="float-left">
56+
<span>
57+
<i className="fa fa-calendar"></i>
58+
<b>{moment(order.createdAt).format('llll')}</b>
59+
</span>
60+
<br/>
61+
<small>
62+
Order ID: {order._id}
63+
</small>
64+
</div>
65+
<div className="float-right">
66+
{order.isDelivered ? (
67+
<span className="btn btn-success me-2 cursor-auto">Delivered on {moment(order.deliveredAt).format('llll')}</span>
68+
) : (
69+
<>
70+
{
71+
loading ?
72+
""
73+
:
74+
<button className="btn btn-primary me-2" onClick={deliverHandler}>Mark as Delivered</button>
75+
}
76+
</>
77+
)}
78+
79+
</div>
80+
</h5>
81+
82+
<div className="card-body">
83+
<div className="row">
84+
<div className="col-sm-4">
85+
<div className="card">
86+
<div className="card-body main-lable">
87+
<article className="icontext align-items-start">
88+
<span className="icon icon-sm rounded-circle alert-success"><i className="text-success fa fa-user" /></span>
89+
<div className="text">
90+
<h5 className="card-title mb-2">Customer</h5>
91+
<p className="mb-1">{order.shippingAddress && order.shippingAddress.customer_name} <br /><a href="mailto:{data[0].email}">{data[0].email}</a></p>
92+
</div>
93+
</article>
94+
</div>
95+
</div>
96+
</div>
97+
<div className="col-sm-4">
98+
<div className="card">
99+
<div className="card-body main-lable">
100+
<article className="icontext align-items-start">
101+
<span className="icon icon-sm rounded-circle alert-success"><i className="text-success fa fa-truck" /></span>
102+
<div className="text">
103+
<h5 className="card-title mb-2">Order info</h5>
104+
<p className="mb-1">
105+
Pay method: {order.paymentMethod}
106+
</p>
107+
<p className="mb-1">
108+
Status: {order.isPaid ? <span className="badge badge-pill badge-success">Paid</span> : <span className="badge badge-pill badge-danger">Not Paid</span>}
109+
</p>
110+
</div>
111+
</article>
112+
</div>
113+
</div>
114+
</div>
115+
<div className="col-sm-4">
116+
<div className="card">
117+
<div className="card-body main-lable">
118+
<article className="icontext align-items-start">
119+
<span className="icon icon-sm rounded-circle alert-success"><i className="text-success fa fa-map-marker" /></span>
120+
<div className="text">
121+
<h5 className="card-title mb-2">Deliver to</h5>
122+
<p className="mb-1 card-text">
123+
{order.shippingAddress && order.shippingAddress.street1 }<br/>
124+
{order.shippingAddress && order.shippingAddress.street2 ? order.shippingAddress.street2 + <br/> : ""}
125+
{order.shippingAddress && order.shippingAddress.city}, {order.shippingAddress && order.shippingAddress.state } {order.shippingAddress && order.shippingAddress.zip}<br/>
126+
{order.shippingAddress && order.shippingAddress.country}<br/>
127+
</p>
128+
</div>
129+
</article>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
<div className="row mt-4">
135+
{
136+
(order.orderItems && order.orderItems.length) > 0 ?
137+
(
138+
<div className="col-sm-12">
139+
<table className="table">
140+
<thead className="thead-light">
141+
<tr>
142+
<th scope="col">Product</th>
143+
<th scope="col">Unit Price</th>
144+
<th scope="col">Quantity</th>
145+
<th scope="col" className="text-end">Total</th>
146+
</tr>
147+
</thead>
148+
<tbody>
149+
{order.orderItems.map((item) => (
150+
<tr key={item._id}>
151+
<td>
152+
<div className="itemside">
153+
<div className="left">
154+
<img src={item.image} alt={item.name} className="img-xs" />
155+
</div>
156+
<div className="info">{item.name}</div>
157+
</div>
158+
</td>
159+
<td>${item.price}</td>
160+
<td>{item.qty}</td>
161+
<td className="text-end">${item.price * item.qty}</td>
162+
</tr>
163+
))}
164+
<tr>
165+
<td colSpan="4">
166+
<article className="float-right">
167+
<dl className="dlist">
168+
<dt>Subtotal:</dt>
169+
<dd>${(order.itemsPrice).toFixed(2)}</dd>
170+
</dl>
171+
<dl className="dlist">
172+
<dt>Shipping cost:</dt>
173+
<dd>${(order.shippingPrice).toFixed(2)}</dd>
174+
</dl>
175+
<dl className="dlist">
176+
<dt>Tax:</dt>
177+
<dd>${(order.taxPrice).toFixed(2)}</dd>
178+
</dl>
179+
<dl className="dlist">
180+
<dt>Grand total:</dt>
181+
<dd><b className="h5">${((order.totalPrice)/100).toFixed(2)}</b></dd>
182+
</dl>
183+
</article>
184+
</td>
185+
</tr>
186+
</tbody>
187+
</table>
188+
</div>
189+
) : (
190+
<div className="text-center">No Item Available</div>
191+
)
192+
}
193+
194+
</div>
195+
</div>
196+
</div>
197+
</form>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
<Footer/>
204+
</div>
205+
</div>
206+
</div>
207+
</>
208+
)
209+
}
210+
211+
export default EditOrder;

‎web_admin/src/components/pages/order/Order.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {Link} from 'react-router-dom';
2+
import Header from '../../Header';
3+
import Sidebar from '../../Sidebar';
4+
import Footer from '../../Footer';
5+
import { useDispatch } from "react-redux";
6+
import { deleteOrder } from "../../../redux/actions/OrderActions";
7+
8+
9+
const Order = (props) => {
10+
let {_id, title,image,totalPrice,isPaid, orderItems,createdAt,isDelivered, shippingAddress:{customer_name}, user_info:[{email}]} = props.order;
11+
12+
const orderDate = new Date(createdAt);
13+
const localOrderDate = orderDate.toLocaleString('en-US');
14+
15+
const dispatch = useDispatch();
16+
17+
const deletehandler = (id) => {
18+
if (window.confirm("Are you sure want to delete order?")) {
19+
dispatch(deleteOrder(id));
20+
}
21+
};
22+
return(
23+
<>
24+
<tr>
25+
<td>{customer_name}</td>
26+
<td>{email}</td>
27+
<td>$ {totalPrice/100}</td>
28+
<td>{isPaid ? "Yes" : "No" }</td>
29+
<td>{localOrderDate}</td>
30+
<td>{isDelivered ? "Delivered" : "Not Delivered"}</td>
31+
<td><Link
32+
to={`/order/edit/${_id}`}
33+
className="text-success"
34+
title="View"
35+
>
36+
<i className="fa fa-eye"></i>
37+
</Link>
38+
<Link
39+
to="#"
40+
title="Delete"
41+
onClick={() => deletehandler(_id)}
42+
>
43+
<i className="fa fa-trash"></i>
44+
</Link>
45+
</td>
46+
</tr>
47+
</>
48+
)
49+
}
50+
51+
export default Order;

0 commit comments

Comments
 (0)