source: frontend/src/screens/AdminOrdersScreen.js@ a2e5735

Last change on this file since a2e5735 was a2e5735, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 23 months ago

Final Version

  • Property mode set to 100644
File size: 7.2 KB
Line 
1import axios from "axios";
2import React, { useEffect, useReducer } from "react";
3import { Link, useLocation, useNavigate } from "react-router-dom";
4import { getError } from "../components/utils";
5import Button from "react-bootstrap/Button";
6import LoadingBox from "../components/LoadingBox";
7import MessageBox from "../components/MessageBox";
8import CheckIcon from "@mui/icons-material/Check";
9import ClearIcon from "@mui/icons-material/Clear";
10import PhonePausedIcon from "@mui/icons-material/PhonePaused";
11import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
12import LocalShippingIcon from "@mui/icons-material/LocalShipping";
13import LinkContainer from "react-router-bootstrap/LinkContainer";
14import Form from "react-bootstrap/Form";
15const reducer = (state, action) => {
16 switch (action.type) {
17 case "FETCH_REQUEST":
18 return { ...state, loading: true };
19 case "FETCH_SUCCESS":
20 console.log(action.payload);
21 return {
22 ...state,
23 //orders: action.payload,
24
25 orders: action.payload.orders,
26 page: action.payload.page,
27 pages: action.payload.pages,
28 countProducts: action.payload.countProducts,
29 loading: false,
30 };
31 case "FETCH_FAIL":
32 return { ...state, loading: false, error: action.payload };
33 default:
34 return state;
35 }
36};
37
38function AdminOrdersScreen() {
39 const navigate = useNavigate();
40 const { search } = useLocation();
41 const sp = new URLSearchParams(search);
42 const isConfirmed = sp.get("isConfirmed") || "all";
43 const isShipped = sp.get("isShipped") || "all";
44 const query = sp.get("query") || "all";
45 const page = sp.get("page") || 1;
46 const [{ loading, error, orders, pages, countProducts }, dispatch] =
47 useReducer(reducer, {
48 loading: true,
49 error: "",
50 });
51
52 useEffect(() => {
53 const fetchData = async () => {
54 dispatch({ type: "FETCH_REQUEST" });
55 try {
56 const { data } = await axios.get(
57 `/api/orders?page=${page}&isConfirmed=${isConfirmed}&isShipped=${isShipped}&query=${query}`
58 );
59 dispatch({ type: "FETCH_SUCCESS", payload: data });
60 } catch (error) {
61 dispatch({ type: "FETCH_FAIL", payload: getError(error) });
62 }
63 };
64 fetchData();
65 }, [isConfirmed, isShipped, page, query]);
66 const getFilterUrl = (filter) => {
67 const filterPage = filter.page || page;
68 const filterIsConfirmed = filter.isConfirmed || isConfirmed;
69 const filterIsShipped = filter.isShipped || isShipped;
70 const filterQuery = filter.query || query;
71 return `?page=${filterPage}&isConfirmed=${filterIsConfirmed}&isShipped=${filterIsShipped}&query=${filterQuery}`;
72 };
73
74 return (
75 <div id="pgContainer">
76 <div id="sidebarMenu">
77 <Link
78 to={"/admin/addProduct"}
79 style={{ textDecoration: "none", width: "100%" }}
80 >
81 <div className="dashboard-btn" to="/admin/addProduct">
82 Додади нов производ
83 </div>
84 </Link>
85 <Link
86 to={"/admin/addCategory"}
87 style={{ textDecoration: "none", width: "100%" }}
88 >
89 <div className="dashboard-btn">Додади категорија</div>
90 </Link>
91 <Link
92 to={"/admin/products"}
93 style={{ textDecoration: "none", width: "100%" }}
94 >
95 <div className="dashboard-btn">Производи</div>
96 </Link>
97 <Link
98 to={"/admin/orders"}
99 style={{ textDecoration: "none", width: "100%" }}
100 >
101 <div className="dashboard-btn">Нарачки</div>
102 </Link>
103 </div>
104 <div id="mainScreen">
105 <div className="taskContainer">
106 <h1 style={{ marginTop: "20px" }}>Нарачки</h1>
107 <div
108 className="filterContainer"
109 style={{
110 width: "100%",
111 display: "flex",
112 justifyContent: "space-around",
113 }}
114 >
115 <Button
116 variant="danger"
117 onClick={(e) => {
118 navigate(
119 getFilterUrl({ isConfirmed: "false", isShipped: "false" })
120 );
121 }}
122 >
123 За потврда
124 </Button>
125 <Button
126 variant="danger"
127 onClick={(e) =>
128 navigate(
129 getFilterUrl({ isShipped: "false", isConfirmed: "true" })
130 )
131 }
132 >
133 За испорака
134 </Button>
135 <Button
136 variant="danger"
137 onClick={(e) =>
138 navigate(
139 getFilterUrl({ isShipped: "true", isConfirmed: "true" })
140 )
141 }
142 >
143 Пристигнати
144 </Button>
145 </div>
146 {loading ? (
147 <LoadingBox></LoadingBox>
148 ) : error ? (
149 <MessageBox variant="danger">{error}</MessageBox>
150 ) : (
151 <table
152 className="table"
153 style={{ marginTop: "20px", width: "90%", textAlign: "center" }}
154 >
155 <thead>
156 <tr>
157 <th>ID</th>
158 <th>Дата</th>
159 <th>Вкупно</th>
160 <th>Статус</th>
161 <th>Акции</th>
162 </tr>
163 </thead>
164 <tbody>
165 {orders.map((order) => (
166 <tr key={order._id}>
167 <td>{order._id.substring(0, 7)}</td>
168 <td>{order.createdAt.substring(0, 10)}</td>
169 <td>{order.totalPrice.toFixed(2)}</td>
170
171 <td>
172 {order.isDelivered ? (
173 <CheckIcon></CheckIcon>
174 ) : order.isShipped ? (
175 <LocalShippingIcon></LocalShippingIcon>
176 ) : order.isConfirmed ? (
177 <HourglassBottomIcon></HourglassBottomIcon>
178 ) : (
179 <PhonePausedIcon></PhonePausedIcon>
180 )}
181 </td>
182 <td>
183 <Button
184 type="button"
185 variant="primary"
186 onClick={() => {
187 navigate(`/admin/order/${order._id}`);
188 }}
189 >
190 Детали
191 </Button>
192 </td>
193 </tr>
194 ))}
195 </tbody>
196 </table>
197 )}
198 <div style={{ marginTop: "20px" }}>
199 {[...Array(pages).keys()].map((x) => (
200 <LinkContainer
201 key={x + 1}
202 className="mx-1"
203 to={getFilterUrl({ page: x + 1 })}
204 >
205 <Button
206 className={Number(page) === x + 1 ? "text-bold" : ""}
207 variant={Number(page) === x + 1 ? "danger" : "light"}
208 >
209 {x + 1}
210 </Button>
211 </LinkContainer>
212 ))}
213 </div>
214 </div>
215 </div>
216 </div>
217 );
218}
219
220export default AdminOrdersScreen;
Note: See TracBrowser for help on using the repository browser.