Changeset a2e5735 for frontend/src/screens

Timestamp:

12/13/22 22:38:11 (19 months ago)

Author:

Nace Gjorgjievski <nace.gorgievski123@…>

Branches:

master

Parents:

113029b

Message:

Final Version

Location:

frontend/src/screens

Files:

• AdminAddCategoryScreen.js (added)
• AdminAddProductScreen.js (modified) (4 diffs)
• AdminDashboardScreen.js (modified) (3 diffs)
• AdminEditProductScreen.js (modified) (1 diff)
• AdminOrdersScreen.js (modified) (1 diff)
• AdminProductsScreen.js (modified) (1 diff)
• CategoryScreen.js (modified) (8 diffs)
• SearchScreen.js (added)

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>