1 | import axios from "axios";
|
---|
2 | import React, { useEffect, useReducer } from "react";
|
---|
3 | import { Link, useLocation, useNavigate } from "react-router-dom";
|
---|
4 | import { getError } from "../components/utils";
|
---|
5 | import Button from "react-bootstrap/Button";
|
---|
6 | import LoadingBox from "../components/LoadingBox";
|
---|
7 | import MessageBox from "../components/MessageBox";
|
---|
8 | import CheckIcon from "@mui/icons-material/Check";
|
---|
9 | import ClearIcon from "@mui/icons-material/Clear";
|
---|
10 | import PhonePausedIcon from "@mui/icons-material/PhonePaused";
|
---|
11 | import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
|
---|
12 | import LocalShippingIcon from "@mui/icons-material/LocalShipping";
|
---|
13 | import LinkContainer from "react-router-bootstrap/LinkContainer";
|
---|
14 | import Form from "react-bootstrap/Form";
|
---|
15 | const 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 |
|
---|
38 | function 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 |
|
---|
220 | export default AdminOrdersScreen;
|
---|