Changeset a2e5735

Timestamp:

12/13/22 22:38:11 (2 years ago)

Author:

Nace Gjorgjievski <nace.gorgievski123@…>

Branches:

master

Parents:

113029b

Message:

Final Version

Files:

• backend/models/categoryModel.js (added)
• backend/models/productModel.js (modified) (1 diff)
• backend/models/subCategoryModel.js (added)
• backend/routes/categoryRoutes.js (added)
• backend/routes/productRoutes.js (modified) (4 diffs)
• backend/server.js (modified) (2 diffs)
• frontend/public/uploads/Fenix_160_AP_1636712868.jpg (added)
• frontend/public/uploads/Fenix_160_DP_1636712863.jpg (added)
• frontend/public/uploads/feniks_main.jpg (added)
• frontend/public/uploads/feniks_side1.jpg (added)
• frontend/public/uploads/feniks_side2.jpg (added)
• frontend/public/uploads/imola_ap_1638361061.jpg (added)
• frontend/public/uploads/imola_dp_1638361045.jpg (added)
• frontend/public/uploads/ivel_2_dp_0.jpg (added)
• frontend/public/uploads/ivel_2_kolorado_ap.jpg (added)
• frontend/public/uploads/main.jpg (added)
• frontend/public/uploads/side1.jpg (added)
• frontend/public/uploads/side2.jpg (added)
• frontend/src/App.js (modified) (2 diffs)
• frontend/src/components/CategoryMenu.js (added)
• frontend/src/components/Header.js (modified) (9 diffs)
• frontend/src/components/Product.js (modified) (1 diff)
• frontend/src/components/SubCategoryMenu.js (added)
• frontend/src/screens/AdminAddCategoryScreen.js (added)
• frontend/src/screens/AdminAddProductScreen.js (modified) (4 diffs)
• frontend/src/screens/AdminDashboardScreen.js (modified) (3 diffs)
• frontend/src/screens/AdminEditProductScreen.js (modified) (1 diff)
• frontend/src/screens/AdminOrdersScreen.js (modified) (1 diff)
• frontend/src/screens/AdminProductsScreen.js (modified) (1 diff)
• frontend/src/screens/CategoryScreen.js (modified) (8 diffs)
• frontend/src/screens/SearchScreen.js (added)

backend/models/productModel.js

@@ -5 +5 @@
     name: { type: String, required: true, unique: true },
     slug: { type: String, required: true, unique: true },
+    height: { type: Number, required: true },
+    width: { type: Number, required: true },
+    length: { type: Number, required: true },
     image: { type: String, required: true },
     sideImage: { type: String, required: true },

backend/routes/productRoutes.js

@@ -42 +42 @@
       priceMontaza: req.body.priceMontaza,
       countInStock: req.body.countInStock,
+      height: req.body.H,
+      width: req.body.W,
+      length: req.body.L,
     });
 
@@ -52 +55 @@
 
 const PAGE_SIZE = 7;
+
+productRouter.get(
+  "/search",
+  expressAsyncHandler(async (req, res) => {
+    const { query } = req;
+    const pageSize = query.pageSize || PAGE_SIZE;
+    const page = query.page || 1;
+    const searchQuery = query.text;
+    console.log("HEEEY: " + searchQuery);
+    const queryFilter =
+      searchQuery && searchQuery !== "all"
+        ? { name: { $regex: searchQuery, $options: "i" } }
+        : {};
+    const descriptionFilter =
+      searchQuery && searchQuery !== "all"
+        ? { description: { $regex: searchQuery, $options: "i" } }
+        : {};
+    const slug =
+      searchQuery && searchQuery !== "all"
+        ? { slug: { $regex: searchQuery, $options: "i" } }
+        : {};
+    const products = await Product.find({
+      $or: [
+        { name: { $regex: searchQuery, $options: "i" } },
+        { slug: { $regex: searchQuery, $options: "i" } },
+        { description: { $regex: searchQuery, $options: "i" } },
+      ],
+    })
+      .skip(pageSize * (page - 1))
+      .limit(pageSize);
+    const countProducts = await Product.countDocuments({
+      $or: [
+        { name: { $regex: searchQuery, $options: "i" } },
+        { slug: { $regex: searchQuery, $options: "i" } },
+        { description: { $regex: searchQuery, $options: "i" } },
+      ],
+    });
+    res.send({
+      products,
+      countProducts,
+      page,
+      pages: Math.ceil(countProducts / pageSize),
+    });
+  })
+);
+
 productRouter.get(
   "/",
@@ -62 +111 @@
     const order = query.order || "";
     const searchQuery = query.query || "";
+    const HF = query.HF || 0;
+    const HT = query.HT || 1000;
+    const WF = query.WF || 0;
+    const WT = query.WT || 1000;
+    const LF = query.LF || 0;
+    const LT = query.LT || 1000;
 
     const queryFilter =
@@ -80 +135 @@
       ...categoryFilter,
       ...subCategoryFilter,
+      $and: [
+        { height: { $gte: HF } },
+        { height: { $lte: HT } },
+        { width: { $gte: WF } },
+        { width: { $lte: WT } },
+        { length: { $gte: LF } },
+        { length: { $lte: LT } },
+      ],
     })
       .sort(sortOrder)

backend/server.js

@@ -7 +7 @@
 import userRouter from "./routes/userRoutes.js";
 import orderRouter from "./routes/orderRoutes.js";
+import categoryRouter from "./routes/categoryRoutes.js";
 
 dotenv.config();
@@ -28 +29 @@
 app.use("/api/users", userRouter);
 app.use("/api/orders", orderRouter);
+app.use("/api/category", categoryRouter);
 
 app.use((err, req, res, next) => {

frontend/src/App.js

@@ -28 +28 @@
 import AdminOrdersScreen from "./screens/AdminOrdersScreen";
 import AdminOrderScreen from "./screens/AdminOrderScreen";
+import AdminAddCategoryScreen from "./screens/AdminAddCategoryScreen";
+import SearchScreen from "./screens/SearchScreen";
 function App() {
   const { state } = useContext(Store);
@@ -54 +56 @@
           element={<CategoryScreen />}
         />
+        <Route path="/products/search" element={<SearchScreen />} />
         <Route path="/admin/dashboard" element={<AdminDashboardScreen />} />
         <Route path="/admin/addProduct" element={<AdminAddProductScreen />} />
+        <Route
+          path="/admin/addCategory"
+          element={<AdminAddCategoryScreen />}
+        ></Route>
         <Route path="/admin/products" element={<AdminProductsScreen />} />
         <Route path="/admin/orders" element={<AdminOrdersScreen />} />

frontend/src/components/Header.js

@@ -1 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from "../Images/logo.png";
 import "../styles/Header.css";
@@ -24 +24 @@
 import NavDropdown from "react-bootstrap/NavDropdown";
 import { height } from "@mui/system";
+import Axios from "axios";
+import CategoryMenu from "./CategoryMenu";
 
 const toggleMenu = (event) => {
@@ -76 +78 @@
   const navigate = useNavigate();
 
+  const [categories, setCategories] = useState([]);
+  //const []
+
   const signoutHandler = () => {
     ctxDispatch({ type: "USER_SIGNOUT" });
@@ -83 +88 @@
     window.location.href = "/signin";
   };
+
+  const searchHandler = () => {
+    let text = document.querySelector(".header__searchInput").value;
+    console.log(text);
+    navigate(`/products/search?text=${text}`);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cat = await Axios.get(`/api/category/getCategories`);
+      categories.splice(0, categories.length);
+      for (let i = 0; i < cat.data.length; i++) {
+        categories.push(cat.data[i]);
+      }
+      console.log(categories[0]);
+    };
+    fetchData();
+  }, [categories]);
+  const results = [];
+  const results1 = [];
+  const results2 = [];
+  const results3 = [];
+  if (categories) createMenu(categories);
+  function createMenu(categories) {
+    /*
+    let ul = document.getElementById("category-ul-1");
+    for(let i=0;i<categories.length;i++){
+      ul.appendChild()
+    }*/
+    results.splice(0, results.length);
+    categories.forEach((category) => {
+      results.push(<CategoryMenu category={category} />);
+    });
+    for (let i = 0; i < categories.length; i++) {
+      if (i < 3) {
+        results1.push(<CategoryMenu category={categories[i]} />);
+      } else if (i < 5) {
+        results2.push(<CategoryMenu category={categories[i]} />);
+      } else {
+        results3.push(<CategoryMenu category={categories[i]} />);
+      }
+    }
+    console.log("Results:");
+    console.log(categories);
+  }
 
   return (
@@ -839 +889 @@
           <div className="header__dropdown">
             <div className="header__dropdownColumn">
-              <ul>
+              <ul id="category-ul-1">
+                <li>{categories[0] && results1}</li>
+                {/*
                 <li>
                   <Link to="/products/dnevna/all">
@@ -916 +968 @@
                     </li>
                   </ul>
-                </li>
+                        </li>*/}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results2}</li>
+                {/*
                 <li>
                   <Link to="/products/spalna/all">
@@ -998 +1052 @@
                   </ul>
                 </li>
+                      */}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results3}</li>
+                {/*
                 <li>
                   <Link to="/products/kancelarija/all">
@@ -1083 +1140 @@
                   </ul>
                 </li>
+                */}
               </ul>
             </div>
@@ -1201 +1259 @@
         </div>
         <div className="header__search">
-          <input className="header__searchInput" type="text" />
-          <SearchIcon className="header__searchIcon" fontSize="large" />
+          <input className="header__searchInput" type="text" name="text" />
+          <button onClick={searchHandler}>
+            <SearchIcon className="header__searchIcon" fontSize="large" />
+          </button>
         </div>
       </div>

frontend/src/components/Product.js

@@ -54 +54 @@
       <div
         style={{
-          width: "100%",
           display: "flex",
-          justifyContent: "center",
+          justifyContent: "space-around",
           alignItems: "center",
         }}
       >
-        {product.countInStock > 0 ? (
-          <span style={{ color: "green" }}>
-            <CheckIcon></CheckIcon>Залиха
-          </span>
-        ) : (
-          <span style={{ color: "red" }}>
-            <ClearIcon></ClearIcon>Залиха
-          </span>
-        )}
+        <h5>H: {product.height}</h5>
+        <h5>W: {product.width}</h5>
+        <h5>L: {product.length}</h5>
       </div>
-      <div className="product__addToCart" style={{ marginTop: "15px" }}>
+      <div
+        className="product__addToCart"
+        style={{ marginTop: "15px", display: "flex", justifyContent: "center" }}
+      >
         <button onClick={addToCartHandler}>
           <ShoppingBasketIcon />
         </button>
+        <div
+          style={{
+            //width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginLeft: "10px",
+          }}
+        >
+          {product.countInStock > 0 ? (
+            <span style={{ color: "green" }}>
+              <CheckIcon></CheckIcon>Залиха
+            </span>
+          ) : (
+            <span style={{ color: "red" }}>
+              <ClearIcon></ClearIcon>Залиха
+            </span>
+          )}
+        </div>
       </div>
     </div>

frontend/src/screens/AdminAddProductScreen.js

@@ -20 +20 @@
   const [dimension, setDimension] = useState("");
   const [scheme, setScheme] = useState("");
+  const [H, setH] = useState("");
+  const [W, setW] = useState("");
+  const [L, setL] = useState("");
   const [message, setMessage] = useState("");
 
@@ -56 +59 @@
     formData.append("dimension", dimension);
     formData.append("scheme", scheme);
-
+    formData.append("H", H);
+    formData.append("W", W);
+    formData.append("L", L);
     try {
       const result = await axios.post("/api/products/add", formData);
@@ -76 +81 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link
@@ -351 +362 @@
               </div>
               <div>
+                <Form.Group
+                  style={{ display: "flex", justifyContent: "space-around" }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>H:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      style={{ width: "60px" }}
+                      value={H}
+                      onChange={(e) => setH(e.target.value)}
+                      required
+                    ></Form.Control>
+                  </div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>W:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      value={W}
+                      onChange={(e) => setW(e.target.value)}
+                      style={{ width: "60px" }}
+                      required
+                    ></Form.Control>
+                  </div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>L:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      style={{ width: "60px" }}
+                      value={L}
+                      onChange={(e) => setL(e.target.value)}
+                      required
+                    ></Form.Control>
+                  </div>
+                </Form.Group>
                 <Form.Group>
                   <Form.Label>Слика со димензии</Form.Label>

frontend/src/screens/AdminDashboardScreen.js

@@ -6 +6 @@
 import { useNavigate, Link } from "react-router-dom";
 import ListProducts from "../components/ListProducts";
+import { Helmet } from "react-helmet-async";
 
 function AdminDashboardScreen() {
@@ -19 +20 @@
   return (
     <div id="pgContainer">
+      <Helmet>
+        <title>Dashboard</title>
+      </Helmet>
       <div id="sidebarMenu">
         <Link
@@ -27 +31 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link

frontend/src/screens/AdminEditProductScreen.js

@@ -83 +83 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link

frontend/src/screens/AdminOrdersScreen.js

@@ -82 +82 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link

frontend/src/screens/AdminProductsScreen.js

@@ -96 +96 @@
                 Додади нов производ
               </div>
+            </Link>
+            <Link
+              to={"/admin/addCategory"}
+              style={{ textDecoration: "none", width: "100%" }}
+            >
+              <div className="dashboard-btn">Додади категорија</div>
             </Link>
             <Link

frontend/src/screens/CategoryScreen.js

@@ -1 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import "../styles/Home.css";
 // import data from "./data";
@@ -34 +34 @@
   const params = useParams();
   const { category, subCategory } = params;
+  var HF = 0;
+  var HT = 1000;
+  var WF = 0;
+  var WT = 1000;
+  var LF = 0;
+  var LT = 1000;
+  //const [HT, setHT] = useState(1000);
+  //const [WF, setWF] = useState(0);
+  //const [WT, setWT] = useState(1000);
+  //const [LF, setLF] = useState(0);
+  //const [LT, setLT] = useState(1000);
   const navigate = useNavigate();
   const { search } = useLocation();
@@ -43 +54 @@
   const order = sp.get("order") || "newest";
   const page = sp.get("page") || 1;
-
   const [{ loading, error, products, pages, countProducts }, dispatch] =
     useReducer(reducer, { loading: true, error: "" });
@@ -56 +66 @@
         );*/
         const { data } = await axios.get(
-          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}&LT=${LT}`
         );
         dispatch({ type: "FETCH_SUCCESS", payload: data });
@@ -64 +74 @@
     };
     fetchData();
-  }, [category, page, query, order, subCategory, error]);
+  }, [
+    category,
+    page,
+    query,
+    order,
+    subCategory,
+    error,
+    HF,
+    HT,
+    WF,
+    WT,
+    LF,
+    LT,
+  ]);
 
   const getFilterUrl = (filter) => {
@@ -72 +95 @@
     const filterSubCategory = filter.subCategory || subCategory;
     const sortOrder = filter.order || order;
-    return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}`;
+    const filterHF = filter.HF || HF;
+    const filterHT = filter.HT || HT;
+    const filterWF = filter.WF || WF;
+    const filterWT = filter.WT || WT;
+    const filterLF = filter.LF || LF;
+    const filterLT = filter.LT || LT;
+    return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}&HF=${filterHF}&HT=${filterHT}&WF=${filterWF}&WT=${filterWT}&LF=${filterLF}&LT=${filterLT}`;
+  };
+
+  const filterHandler = (e) => {
+    e.preventDefault();
+    HF = document.getElementById("HF").value;
+    HT = document.getElementById("HT").value;
+    WF = document.getElementById("WF").value;
+    WT = document.getElementById("WT").value;
+    LF = document.getElementById("LF").value;
+    LT = document.getElementById("LT").value;
+    console.log(HT);
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        /*
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+        );*/
+        const { data } = await axios.get(
+          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}&LT=${LT}`
+        );
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
   };
 
@@ -124 +180 @@
             >
               <Form
+                onSubmit={filterHandler}
                 style={{
                   width: "100%",
                   display: "flex",
-                  justifyContent: "end",
+                  justifyContent: "space-around",
                   marginRight: "40px",
                   alignItems: "center",
                 }}
               >
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>H:</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="HF"
+                    //onChange={(e) => setHF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="HT"
+                    //onChange={(e) => setHT(e.target.value)}
+                  />
+                </Form.Group>
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>W:</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="WF"
+                    //onChange={(e) => setWF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="WT"
+                    //onChange={(e) => setWT(e.target.value)}
+                  />
+                </Form.Group>
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>L:</Form.Label>
+                  <Form.Control
+                    id="LF"
+                    style={{ width: "60px" }}
+                    //onChange={(e) => setLF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    id="LT"
+                    style={{ width: "60px" }}
+                    //onChange={(e) => setLT(e.target.value)}
+                  />
+                </Form.Group>
                 {/*}
                 <Form.Group>
@@ -292 +391 @@
                     <option value={"highFirst"}>Од висока кон ниска</option>
                   </Form.Select>
+                </Form.Group>
+                <Form.Group>
+                  <Button variant="danger" size="lg" type="submit">
+                    Филтрирај
+                  </Button>
                 </Form.Group>
               </Form>