1 | import axios from "axios";
|
---|
2 | import React, { useState } from "react";
|
---|
3 | import { Link } from "react-router-dom";
|
---|
4 | import { toast } from "react-toastify";
|
---|
5 | import Button from "react-bootstrap/Button";
|
---|
6 | import Form from "react-bootstrap/Form";
|
---|
7 |
|
---|
8 | function AdminAddProductScreen() {
|
---|
9 | const [name, setName] = useState("");
|
---|
10 | const [slug, setSlug] = useState("");
|
---|
11 | const [category, setCategory] = useState("dnevna");
|
---|
12 | const [subCategory, setSubCategory] = useState("");
|
---|
13 | const [description, setDescription] = useState("");
|
---|
14 | const [price, setPrice] = useState("");
|
---|
15 | const [priceMontaza, setPriceMontaza] = useState("");
|
---|
16 | const [countInStock, setCountInStock] = useState("");
|
---|
17 | const [image, setImage] = useState("");
|
---|
18 | const [sideImage, setSideImage] = useState("");
|
---|
19 | const [sideImage2, setSideImage2] = useState("");
|
---|
20 | const [dimension, setDimension] = useState("");
|
---|
21 | const [scheme, setScheme] = useState("");
|
---|
22 | const [H, setH] = useState("");
|
---|
23 | const [W, setW] = useState("");
|
---|
24 | const [L, setL] = useState("");
|
---|
25 | const [message, setMessage] = useState("");
|
---|
26 |
|
---|
27 | const onChangeImage = (e) => {
|
---|
28 | setImage(e.target.files[0]);
|
---|
29 | };
|
---|
30 | const onChangeSideImage = (e) => {
|
---|
31 | setSideImage(e.target.files[0]);
|
---|
32 | };
|
---|
33 | const onChangeSideImage2 = (e) => {
|
---|
34 | setSideImage2(e.target.files[0]);
|
---|
35 | };
|
---|
36 | const onChangeDimension = (e) => {
|
---|
37 | setDimension(e.target.files[0]);
|
---|
38 | };
|
---|
39 | const onChangeScheme = (e) => {
|
---|
40 | setScheme(e.target.files[0]);
|
---|
41 | };
|
---|
42 |
|
---|
43 | const submitHandler = async (e) => {
|
---|
44 | e.preventDefault();
|
---|
45 |
|
---|
46 | const formData = new FormData();
|
---|
47 |
|
---|
48 | formData.append("name", name);
|
---|
49 | formData.append("slug", slug);
|
---|
50 | formData.append("category", category);
|
---|
51 | formData.append("subCategory", subCategory);
|
---|
52 | formData.append("description", description);
|
---|
53 | formData.append("price", price);
|
---|
54 | formData.append("priceMontaza", priceMontaza);
|
---|
55 | formData.append("countInStock", countInStock);
|
---|
56 | formData.append("image", image);
|
---|
57 | formData.append("sideImage", sideImage);
|
---|
58 | formData.append("sideImage2", sideImage2);
|
---|
59 | formData.append("dimension", dimension);
|
---|
60 | formData.append("scheme", scheme);
|
---|
61 | formData.append("H", H);
|
---|
62 | formData.append("W", W);
|
---|
63 | formData.append("L", L);
|
---|
64 | try {
|
---|
65 | const result = await axios.post("/api/products/add", formData);
|
---|
66 | if (result) toast.success("Product Added");
|
---|
67 | return;
|
---|
68 | } catch (error) {
|
---|
69 | console.log(error);
|
---|
70 | }
|
---|
71 | };
|
---|
72 |
|
---|
73 | return (
|
---|
74 | <div id="pgContainer">
|
---|
75 | <div id="sidebarMenu">
|
---|
76 | <Link
|
---|
77 | to={"/admin/addProduct"}
|
---|
78 | style={{ textDecoration: "none", width: "100%" }}
|
---|
79 | >
|
---|
80 | <div className="dashboard-btn" to="/admin/addProduct">
|
---|
81 | Додади нов производ
|
---|
82 | </div>
|
---|
83 | </Link>
|
---|
84 | <Link
|
---|
85 | to={"/admin/addCategory"}
|
---|
86 | style={{ textDecoration: "none", width: "100%" }}
|
---|
87 | >
|
---|
88 | <div className="dashboard-btn">Додади категорија</div>
|
---|
89 | </Link>
|
---|
90 | <Link
|
---|
91 | to={"/admin/products"}
|
---|
92 | style={{ textDecoration: "none", width: "100%" }}
|
---|
93 | >
|
---|
94 | <div className="dashboard-btn">Производи</div>
|
---|
95 | </Link>
|
---|
96 | <Link
|
---|
97 | to={"/admin/orders"}
|
---|
98 | style={{ textDecoration: "none", width: "100%" }}
|
---|
99 | >
|
---|
100 | <div className="dashboard-btn">Нарачки</div>
|
---|
101 | </Link>
|
---|
102 | </div>
|
---|
103 | <div id="mainScreen">
|
---|
104 | <div className="taskContainer">
|
---|
105 | <h1>Додади нов продукт</h1>
|
---|
106 | <Form
|
---|
107 | onSubmit={submitHandler}
|
---|
108 | encType="multipart/form-data"
|
---|
109 | className="newProductFormCointainer"
|
---|
110 | >
|
---|
111 | <div className="firstRow" style={{ display: "flex" }}>
|
---|
112 | <Form.Group>
|
---|
113 | <Form.Label>Име</Form.Label>
|
---|
114 | <Form.Control
|
---|
115 | value={name}
|
---|
116 | onChange={(e) => setName(e.target.value)}
|
---|
117 | required
|
---|
118 | ></Form.Control>
|
---|
119 | </Form.Group>
|
---|
120 | <Form.Group>
|
---|
121 | <Form.Label>Слуг</Form.Label>
|
---|
122 | <Form.Control
|
---|
123 | value={slug}
|
---|
124 | onChange={(e) => setSlug(e.target.value)}
|
---|
125 | required
|
---|
126 | ></Form.Control>
|
---|
127 | </Form.Group>
|
---|
128 | <Form.Group>
|
---|
129 | <Form.Label>Категорија</Form.Label>
|
---|
130 | <Form.Select onChange={(e) => setCategory(e.target.value)}>
|
---|
131 | <option value={"dnevna"}>Дневна</option>
|
---|
132 | <option value={"spalna"}>Спална</option>
|
---|
133 | <option value={"kancelarija"}>Канцеларија</option>
|
---|
134 | <option value={"hodnik"}>Ходник</option>
|
---|
135 | <option value={"gradina"}>Градина</option>
|
---|
136 | <option value={"trpezarija"}>Трпезарија</option>
|
---|
137 | <option value={"kujna"}>Кујна</option>
|
---|
138 | <option value={"detska"}>Детска</option>
|
---|
139 | </Form.Select>
|
---|
140 | </Form.Group>
|
---|
141 | <Form.Group>
|
---|
142 | <Form.Label>Подкатегорија</Form.Label>
|
---|
143 | <Form.Select onChange={(e) => setSubCategory(e.target.value)}>
|
---|
144 | <option value="default">Подкатегорија</option>
|
---|
145 | {category === "dnevna" && (
|
---|
146 | <option value="agolni-garnituri">Аголни Гарнитури</option>
|
---|
147 | )}
|
---|
148 | {category === "dnevna" && <option value="sofi">Софи</option>}
|
---|
149 | {category === "dnevna" && (
|
---|
150 | <option value="fotelji">Фотелји</option>
|
---|
151 | )}
|
---|
152 | {category === "dnevna" && (
|
---|
153 | <option value="taburetki">Табуретки</option>
|
---|
154 | )}
|
---|
155 | {category === "dnevna" && (
|
---|
156 | <option value="klub-masi">Клуб маси</option>
|
---|
157 | )}
|
---|
158 | {category === "dnevna" && (
|
---|
159 | <option value="tv-komodi">ТВ комоди</option>
|
---|
160 | )}
|
---|
161 | {category === "dnevna" && (
|
---|
162 | <option value="komodi">Комоди</option>
|
---|
163 | )}
|
---|
164 | {category === "spalna" && (
|
---|
165 | <option value="spalni-kompleti">Спални Комплети</option>
|
---|
166 | )}
|
---|
167 | {category === "spalna" && (
|
---|
168 | <option value="lezai">Лежаи</option>
|
---|
169 | )}
|
---|
170 | {category === "spalna" && (
|
---|
171 | <option value="kreveti">Кревети</option>
|
---|
172 | )}
|
---|
173 | {category === "spalna" && (
|
---|
174 | <option value="plakari">Плакари</option>
|
---|
175 | )}
|
---|
176 | {category === "spalna" && (
|
---|
177 | <option value="nokni-skafcinja">Ноќни шкафчиња</option>
|
---|
178 | )}
|
---|
179 | {category === "spalna" && (
|
---|
180 | <option value="toaletni-masi">Тоалетни маси</option>
|
---|
181 | )}
|
---|
182 | {category === "kancelarija" && (
|
---|
183 | <option value="biroa">Бироа</option>
|
---|
184 | )}
|
---|
185 | {category === "kancelarija" && (
|
---|
186 | <option value="kancelariski-stolovi">
|
---|
187 | Канцелариски столови
|
---|
188 | </option>
|
---|
189 | )}
|
---|
190 | {category === "kancelarija" && (
|
---|
191 | <option value="gejmerski-stolovi">Гејмерски столови</option>
|
---|
192 | )}
|
---|
193 | {category === "kancelarija" && (
|
---|
194 | <option value="kancelariski-skafovi">
|
---|
195 | Канцелариски шкафови
|
---|
196 | </option>
|
---|
197 | )}
|
---|
198 | {category === "hodnik" && (
|
---|
199 | <option value="skafovi-za-cevli">Шкафови за чевли</option>
|
---|
200 | )}
|
---|
201 | {category === "hodnik" && (
|
---|
202 | <option value="zakacalki-i-ogledala">
|
---|
203 | Закачалки и огледала
|
---|
204 | </option>
|
---|
205 | )}
|
---|
206 | {category === "hodnik" && (
|
---|
207 | <option value="kolekcii-za-hodnik">
|
---|
208 | Колекции за ходник
|
---|
209 | </option>
|
---|
210 | )}
|
---|
211 | {category === "gradina" && (
|
---|
212 | <option value="gradinarski-kompleti">
|
---|
213 | Градинарски комплети
|
---|
214 | </option>
|
---|
215 | )}
|
---|
216 | {category === "gradina" && (
|
---|
217 | <option value="gradinarski-lulki">Градинарски лулки</option>
|
---|
218 | )}
|
---|
219 | {category === "gradina" && (
|
---|
220 | <option value="gradinarski-cadori">
|
---|
221 | Градинарски чадори
|
---|
222 | </option>
|
---|
223 | )}
|
---|
224 | {category === "gradina" && (
|
---|
225 | <option value="gradinarski-masi">Градинарски маси</option>
|
---|
226 | )}
|
---|
227 | {category === "gradina" && (
|
---|
228 | <option value="gradinarski-stolovi">
|
---|
229 | Градинарски столови
|
---|
230 | </option>
|
---|
231 | )}
|
---|
232 | {category === "gradina" && (
|
---|
233 | <option value="gradinarsko-osvetluvanje">
|
---|
234 | Градинарско осветлување
|
---|
235 | </option>
|
---|
236 | )}
|
---|
237 | {category === "trpezarija" && (
|
---|
238 | <option value="trpezariski-masi">Трпезариски маси</option>
|
---|
239 | )}
|
---|
240 | {category === "trpezarija" && (
|
---|
241 | <option value="trpezariski-stolovi">
|
---|
242 | Трпезариски столови
|
---|
243 | </option>
|
---|
244 | )}
|
---|
245 | {category === "trpezarija" && (
|
---|
246 | <option value="kujnski-garnituri">Кујнски гарнитури</option>
|
---|
247 | )}
|
---|
248 | {category === "trpezarija" && (
|
---|
249 | <option value="bar-stolovi-i-masi">
|
---|
250 | Бар столови и маси
|
---|
251 | </option>
|
---|
252 | )}
|
---|
253 | {category === "kujna" && (
|
---|
254 | <option value="kujnski-agolni-garnituri">
|
---|
255 | Кујнски аголни гарнитури
|
---|
256 | </option>
|
---|
257 | )}
|
---|
258 | {category === "kujna" && (
|
---|
259 | <option value="standardni-kujni">Стандардни кујни</option>
|
---|
260 | )}
|
---|
261 | {category === "detska" && (
|
---|
262 | <option value="kolekcii-za-detska-soba">
|
---|
263 | Колекции за детска соба
|
---|
264 | </option>
|
---|
265 | )}
|
---|
266 | {category === "detska" && (
|
---|
267 | <option value="detski-biroa">Детски бироа</option>
|
---|
268 | )}
|
---|
269 | {category === "detska" && (
|
---|
270 | <option value="detski-lezai">Детски лежаи</option>
|
---|
271 | )}
|
---|
272 | </Form.Select>
|
---|
273 | </Form.Group>
|
---|
274 | </div>
|
---|
275 | <div className="secondRow">
|
---|
276 | <Form.Group style={{ width: "60%", marginTop: "20px" }}>
|
---|
277 | <Form.Label>Опис</Form.Label>
|
---|
278 | <Form.Control
|
---|
279 | id="textArea"
|
---|
280 | value={description}
|
---|
281 | onChange={(e) => setDescription(e.target.value)}
|
---|
282 | as="textarea"
|
---|
283 | required
|
---|
284 | ></Form.Control>
|
---|
285 | </Form.Group>
|
---|
286 | <div
|
---|
287 | style={{
|
---|
288 | display: "flex",
|
---|
289 | flexDirection: "column",
|
---|
290 | alignItems: "center",
|
---|
291 | justifyContent: "center",
|
---|
292 | width: "40%",
|
---|
293 | }}
|
---|
294 | >
|
---|
295 | <Form.Group style={{ marginTop: "20px" }}>
|
---|
296 | <Form.Label>Цена</Form.Label>
|
---|
297 | <Form.Control
|
---|
298 | value={price}
|
---|
299 | onChange={(e) => setPrice(e.target.value)}
|
---|
300 | type="number"
|
---|
301 | required
|
---|
302 | ></Form.Control>
|
---|
303 | </Form.Group>
|
---|
304 | <Form.Group style={{ marginTop: "10px" }}>
|
---|
305 | <Form.Label>Цена Монтажа</Form.Label>
|
---|
306 | <Form.Control
|
---|
307 | value={priceMontaza}
|
---|
308 | onChange={(e) => setPriceMontaza(e.target.value)}
|
---|
309 | type="number"
|
---|
310 | required
|
---|
311 | ></Form.Control>
|
---|
312 | </Form.Group>
|
---|
313 | <Form.Group style={{ marginTop: "10px" }}>
|
---|
314 | <Form.Label>Залиха</Form.Label>
|
---|
315 | <Form.Control
|
---|
316 | value={countInStock}
|
---|
317 | onChange={(e) => setCountInStock(e.target.value)}
|
---|
318 | type="number"
|
---|
319 | required
|
---|
320 | ></Form.Control>
|
---|
321 | </Form.Group>
|
---|
322 | </div>
|
---|
323 | </div>
|
---|
324 | <div className="thirdRow">
|
---|
325 | <div
|
---|
326 | style={{
|
---|
327 | display: "flex",
|
---|
328 | flexDirection: "column",
|
---|
329 | alignItems: "center",
|
---|
330 | justifyContent: "center",
|
---|
331 | }}
|
---|
332 | >
|
---|
333 | <Form.Group>
|
---|
334 | <Form.Label>Главна слика</Form.Label>
|
---|
335 | <Form.Control
|
---|
336 | type="file"
|
---|
337 | name="image"
|
---|
338 | onChange={onChangeImage}
|
---|
339 | required
|
---|
340 | ></Form.Control>
|
---|
341 | </Form.Group>
|
---|
342 |
|
---|
343 | <Form.Group style={{ marginTop: "10px" }}>
|
---|
344 | <Form.Label>Споредна слика бр.1</Form.Label>
|
---|
345 | <Form.Control
|
---|
346 | type="file"
|
---|
347 | name="sideImage"
|
---|
348 | onChange={onChangeSideImage}
|
---|
349 | required
|
---|
350 | ></Form.Control>
|
---|
351 | </Form.Group>
|
---|
352 |
|
---|
353 | <Form.Group style={{ marginTop: "10px" }}>
|
---|
354 | <Form.Label>Споредна слика бр.2</Form.Label>
|
---|
355 | <Form.Control
|
---|
356 | type="file"
|
---|
357 | name="sideImage2"
|
---|
358 | onChange={onChangeSideImage2}
|
---|
359 | required
|
---|
360 | ></Form.Control>
|
---|
361 | </Form.Group>
|
---|
362 | </div>
|
---|
363 | <div>
|
---|
364 | <Form.Group
|
---|
365 | style={{ display: "flex", justifyContent: "space-around" }}
|
---|
366 | >
|
---|
367 | <div
|
---|
368 | style={{
|
---|
369 | display: "flex",
|
---|
370 | flexDirection: "row",
|
---|
371 | alignItems: "center",
|
---|
372 | }}
|
---|
373 | >
|
---|
374 | <Form.Label>H:</Form.Label>
|
---|
375 | <Form.Control
|
---|
376 | type="text"
|
---|
377 | name="dimension"
|
---|
378 | style={{ width: "60px" }}
|
---|
379 | value={H}
|
---|
380 | onChange={(e) => setH(e.target.value)}
|
---|
381 | required
|
---|
382 | ></Form.Control>
|
---|
383 | </div>
|
---|
384 | <div
|
---|
385 | style={{
|
---|
386 | display: "flex",
|
---|
387 | flexDirection: "row",
|
---|
388 | alignItems: "center",
|
---|
389 | }}
|
---|
390 | >
|
---|
391 | <Form.Label>W:</Form.Label>
|
---|
392 | <Form.Control
|
---|
393 | type="text"
|
---|
394 | name="dimension"
|
---|
395 | value={W}
|
---|
396 | onChange={(e) => setW(e.target.value)}
|
---|
397 | style={{ width: "60px" }}
|
---|
398 | required
|
---|
399 | ></Form.Control>
|
---|
400 | </div>
|
---|
401 | <div
|
---|
402 | style={{
|
---|
403 | display: "flex",
|
---|
404 | flexDirection: "row",
|
---|
405 | alignItems: "center",
|
---|
406 | }}
|
---|
407 | >
|
---|
408 | <Form.Label>L:</Form.Label>
|
---|
409 | <Form.Control
|
---|
410 | type="text"
|
---|
411 | name="dimension"
|
---|
412 | style={{ width: "60px" }}
|
---|
413 | value={L}
|
---|
414 | onChange={(e) => setL(e.target.value)}
|
---|
415 | required
|
---|
416 | ></Form.Control>
|
---|
417 | </div>
|
---|
418 | </Form.Group>
|
---|
419 | <Form.Group>
|
---|
420 | <Form.Label>Слика со димензии</Form.Label>
|
---|
421 | <Form.Control
|
---|
422 | type="file"
|
---|
423 | name="dimension"
|
---|
424 | onChange={onChangeDimension}
|
---|
425 | required
|
---|
426 | ></Form.Control>
|
---|
427 | </Form.Group>
|
---|
428 |
|
---|
429 | <Form.Group style={{ marginTop: "10px" }}>
|
---|
430 | <Form.Label>Слика од шема</Form.Label>
|
---|
431 | <Form.Control
|
---|
432 | type="file"
|
---|
433 | name="scheme"
|
---|
434 | onChange={onChangeScheme}
|
---|
435 | required
|
---|
436 | ></Form.Control>
|
---|
437 | </Form.Group>
|
---|
438 | </div>
|
---|
439 | </div>
|
---|
440 | <div className="submitBtnContainer">
|
---|
441 | <Button variant="danger" size="lg" type="submit">
|
---|
442 | Додади
|
---|
443 | </Button>
|
---|
444 | </div>
|
---|
445 | </Form>
|
---|
446 | </div>
|
---|
447 | </div>
|
---|
448 | </div>
|
---|
449 | );
|
---|
450 | }
|
---|
451 |
|
---|
452 | export default AdminAddProductScreen;
|
---|