source: frontend/src/screens/AdminEditProductScreen.js@ 55ed171

Last change on this file since 55ed171 was 55ed171, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 2 years ago

Full Admin Functionality Added

  • Property mode set to 100644
File size: 12.9 KB
Line 
1import axios from "axios";
2import React, { useEffect, useReducer, useState } from "react";
3import { Link, useParams } from "react-router-dom";
4import { toast } from "react-toastify";
5import Button from "react-bootstrap/Button";
6import Form from "react-bootstrap/Form";
7
8const reducer = (state, action) => {
9 switch (action.type) {
10 case "FETCH_REQUEST":
11 return { ...state, loading: true };
12 case "FETCH_SUCCESS":
13 return { ...state, product: action.payload, loading: false };
14 case "FETCH_FAIL":
15 return { ...state, loading: false, error: action.payload };
16 default:
17 return state;
18 }
19};
20
21function AdminEditProductScreen() {
22 const params = useParams();
23 const { slug } = params;
24
25 const [{ loading, error, product }, dispatch] = useReducer(reducer, {
26 product: [],
27 loading: true,
28 error: "",
29 });
30
31 useEffect(() => {
32 const fetchData = async () => {
33 dispatch({ type: "FETCH_REQUEST" });
34 try {
35 const result = await axios.get(`/api/products/slug/${slug}`);
36 dispatch({ type: "FETCH_SUCCESS", payload: result.data });
37 } catch (err) {
38 dispatch({ type: "FETCH_FAIL", payload: err.message });
39 }
40 };
41 fetchData();
42 }, [slug]);
43
44 const [category, setCategory] = useState("all");
45 const [subCategory, setSubCategory] = useState("all");
46
47 const submitHandler = async (e) => {
48 e.preventDefault();
49 let name = document.getElementById("name").value;
50 let slug = document.getElementById("slug").value;
51 let price = document.getElementById("price").value;
52 let priceMontaza = document.getElementById("priceMontaza").value;
53 let countInStock = document.getElementById("stock").value;
54 let description = document.getElementById("textArea").value;
55
56 try {
57 const { data } = await axios.put("/api/products/edit", {
58 name,
59 slug,
60 category,
61 subCategory,
62 description,
63 price,
64 priceMontaza,
65 countInStock,
66 });
67
68 toast.success("Успешно ажурирање");
69 } catch (err) {
70 dispatch({ type: "FETCH_FAIL" });
71 toast.error("Грешка");
72 }
73 };
74
75 return (
76 <div id="pgContainer">
77 <div id="sidebarMenu">
78 <Link
79 to={"/admin/addProduct"}
80 style={{ textDecoration: "none", width: "100%" }}
81 >
82 <div className="dashboard-btn" to="/admin/addProduct">
83 Додади нов производ
84 </div>
85 </Link>
86 <Link
87 to={"/admin/products"}
88 style={{ textDecoration: "none", width: "100%" }}
89 >
90 <div className="dashboard-btn">Производи</div>
91 </Link>
92 <Link
93 to={"/admin/orders"}
94 style={{ textDecoration: "none", width: "100%" }}
95 >
96 <div className="dashboard-btn">Нарачки</div>
97 </Link>
98 </div>
99 <div id="mainScreen">
100 <div className="taskContainer">
101 <h1>Ажурирај продукт</h1>
102 <Form
103 onSubmit={submitHandler}
104 encType="multipart/form-data"
105 className="newProductFormCointainer"
106 >
107 <div className="firstRow" style={{ display: "flex" }}>
108 <Form.Group>
109 <Form.Label>Име</Form.Label>
110 <Form.Control
111 id="name"
112 defaultValue={product.name}
113 required
114 ></Form.Control>
115 </Form.Group>
116 <Form.Group>
117 <Form.Label>Слуг</Form.Label>
118 <Form.Control
119 id="slug"
120 defaultValue={slug}
121 required
122 ></Form.Control>
123 </Form.Group>
124 <Form.Group>
125 <Form.Label>Категорија</Form.Label>
126 <Form.Select onChange={(e) => setCategory(e.target.value)}>
127 <option value={"all"}>Категорија</option>
128 <option value={"dnevna"}>Дневна</option>
129 <option value={"spalna"}>Спална</option>
130 <option value={"kancelarija"}>Канцеларија</option>
131 <option value={"hodnik"}>Ходник</option>
132 <option value={"gradina"}>Градина</option>
133 <option value={"trpezarija"}>Трпезарија</option>
134 <option value={"kujna"}>Кујна</option>
135 <option value={"detska"}>Детска</option>
136 </Form.Select>
137 </Form.Group>
138 <Form.Group>
139 <Form.Label>Подкатегорија</Form.Label>
140 <Form.Select
141 onChange={(e) => {
142 setSubCategory(e.target.value);
143 }}
144 >
145 <option value="all">Подкатегорија</option>
146
147 {category === "dnevna" && (
148 <option value="agolni-garnituri">Аголни Гарнитури</option>
149 )}
150 {category === "dnevna" && <option value="sofi">Софи</option>}
151 {category === "dnevna" && (
152 <option value="fotelji">Фотелји</option>
153 )}
154 {category === "dnevna" && (
155 <option value="taburetki">Табуретки</option>
156 )}
157 {category === "dnevna" && (
158 <option value="klub-masi">Клуб маси</option>
159 )}
160 {category === "dnevna" && (
161 <option value="tv-komodi">ТВ комоди</option>
162 )}
163 {category === "dnevna" && (
164 <option value="komodi">Комоди</option>
165 )}
166 {category === "spalna" && (
167 <option value="spalni-kompleti">Спални Комплети</option>
168 )}
169 {category === "spalna" && (
170 <option value="lezai">Лежаи</option>
171 )}
172 {category === "spalna" && (
173 <option value="kreveti">Кревети</option>
174 )}
175 {category === "spalna" && (
176 <option value="plakari">Плакари</option>
177 )}
178 {category === "spalna" && (
179 <option value="nokni-skafcinja">Ноќни шкафчиња</option>
180 )}
181 {category === "spalna" && (
182 <option value="toaletni-masi">Тоалетни маси</option>
183 )}
184 {category === "kancelarija" && (
185 <option value="biroa">Бироа</option>
186 )}
187 {category === "kancelarija" && (
188 <option value="kancelariski-stolovi">
189 Канцелариски столови
190 </option>
191 )}
192 {category === "kancelarija" && (
193 <option value="gejmerski-stolovi">Гејмерски столови</option>
194 )}
195 {category === "kancelarija" && (
196 <option value="kancelariski-skafovi">
197 Канцелариски шкафови
198 </option>
199 )}
200 {category === "hodnik" && (
201 <option value="skafovi-za-cevli">Шкафови за чевли</option>
202 )}
203 {category === "hodnik" && (
204 <option value="zakacalki-i-ogledala">
205 Закачалки и огледала
206 </option>
207 )}
208 {category === "hodnik" && (
209 <option value="kolekcii-za-hodnik">
210 Колекции за ходник
211 </option>
212 )}
213 {category === "gradina" && (
214 <option value="gradinarski-kompleti">
215 Градинарски комплети
216 </option>
217 )}
218 {category === "gradina" && (
219 <option value="gradinarski-lulki">Градинарски лулки</option>
220 )}
221 {category === "gradina" && (
222 <option value="gradinarski-cadori">
223 Градинарски чадори
224 </option>
225 )}
226 {category === "gradina" && (
227 <option value="gradinarski-masi">Градинарски маси</option>
228 )}
229 {category === "gradina" && (
230 <option value="gradinarski-stolovi">
231 Градинарски столови
232 </option>
233 )}
234 {category === "gradina" && (
235 <option value="gradinarsko-osvetluvanje">
236 Градинарско осветлување
237 </option>
238 )}
239 {category === "trpezarija" && (
240 <option value="trpezariski-masi">Трпезариски маси</option>
241 )}
242 {category === "trpezarija" && (
243 <option value="trpezariski-stolovi">
244 Трпезариски столови
245 </option>
246 )}
247 {category === "trpezarija" && (
248 <option value="kujnski-garnituri">Кујнски гарнитури</option>
249 )}
250 {category === "trpezarija" && (
251 <option value="bar-stolovi-i-masi">
252 Бар столови и маси
253 </option>
254 )}
255 {category === "kujna" && (
256 <option value="kujnski-agolni-garnituri">
257 Кујнски аголни гарнитури
258 </option>
259 )}
260 {category === "kujna" && (
261 <option value="standardni-kujni">Стандардни кујни</option>
262 )}
263 {category === "detska" && (
264 <option value="kolekcii-za-detska-soba">
265 Колекции за детска соба
266 </option>
267 )}
268 {category === "detska" && (
269 <option value="detski-biroa">Детски бироа</option>
270 )}
271 {category === "detska" && (
272 <option value="detski-lezai">Детски лежаи</option>
273 )}
274 </Form.Select>
275 </Form.Group>
276 </div>
277 <div className="secondRow">
278 <Form.Group style={{ width: "60%", marginTop: "20px" }}>
279 <Form.Label>Опис</Form.Label>
280 <Form.Control
281 id="textArea"
282 defaultValue={product.description}
283 as="textarea"
284 required
285 ></Form.Control>
286 </Form.Group>
287 <div
288 style={{
289 display: "flex",
290 flexDirection: "column",
291 alignItems: "center",
292 justifyContent: "center",
293 width: "40%",
294 }}
295 >
296 <Form.Group style={{ marginTop: "20px" }}>
297 <Form.Label>Цена</Form.Label>
298 <Form.Control
299 id="price"
300 defaultValue={product.price}
301 type="number"
302 style={{ color: "black" }}
303 required
304 ></Form.Control>
305 </Form.Group>
306 <Form.Group style={{ marginTop: "10px" }}>
307 <Form.Label>Цена Монтажа</Form.Label>
308 <Form.Control
309 id="priceMontaza"
310 defaultValue={product.priceMontaza}
311 type="number"
312 required
313 ></Form.Control>
314 </Form.Group>
315 <Form.Group style={{ marginTop: "10px" }}>
316 <Form.Label>Залиха</Form.Label>
317 <Form.Control
318 id="stock"
319 defaultValue={product.countInStock}
320 type="number"
321 required
322 ></Form.Control>
323 </Form.Group>
324 </div>
325 </div>
326
327 <div className="submitBtnContainer">
328 <Button variant="danger" size="lg" type="submit">
329 Ажурирај
330 </Button>
331 </div>
332 </Form>
333 </div>
334 </div>
335 </div>
336 );
337}
338
339export default AdminEditProductScreen;
Note: See TracBrowser for help on using the repository browser.