[55ed171] | 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("");
|
---|
[a2e5735] | 22 | const [H, setH] = useState("");
|
---|
| 23 | const [W, setW] = useState("");
|
---|
| 24 | const [L, setL] = useState("");
|
---|
[55ed171] | 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);
|
---|
[a2e5735] | 61 | formData.append("H", H);
|
---|
| 62 | formData.append("W", W);
|
---|
| 63 | formData.append("L", L);
|
---|
[55ed171] | 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>
|
---|
[a2e5735] | 84 | <Link
|
---|
| 85 | to={"/admin/addCategory"}
|
---|
| 86 | style={{ textDecoration: "none", width: "100%" }}
|
---|
| 87 | >
|
---|
| 88 | <div className="dashboard-btn">Додади категорија</div>
|
---|
| 89 | </Link>
|
---|
[55ed171] | 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>
|
---|
[a2e5735] | 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>
|
---|
[55ed171] | 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;
|
---|