ok

package-lock.json

@@ -26,6 +26,7 @@
         "react-router-dom": "^6.24.0",
         "react-scripts": "5.0.1",
         "react-switch": "^7.0.0",
+        "smooth-scroll-into-view-if-needed": "^2.0.2",
         "socket.io-client": "^4.7.5",
         "styled-components": "^6.1.11",
         "web-vitals": "^2.1.4"
@@ -6988,6 +6989,11 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -16820,6 +16826,14 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17083,6 +17097,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/smooth-scroll-into-view-if-needed": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz",
+      "integrity": "sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==",
+      "dependencies": {
+        "scroll-into-view-if-needed": "^3.1.0"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.7.5",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",

package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "react-switch": "^7.0.0",
+    "smooth-scroll-into-view-if-needed": "^2.0.2",
     "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"

src/App.js

@@ -387,7 +387,7 @@ function App() {
 
   return (
     <div className="App">
-      <header className="App-header">
+      <header className="App-header" id="header">
         <Routes>
           <Route
             path="/"

src/components/ItemType.js

@@ -9,6 +9,7 @@ export default function ItemType({
   name: initialName = "",
   imageUrl,
   selected,
+  rectangular,
 }) {
   const inputRef = useRef(null);
   const [name, setName] = useState(initialName);
@@ -30,6 +31,7 @@ export default function ItemType({
       reader.readAsDataURL(selectedImage);
     } else {
       setPreviewUrl(getImageUrl(imageUrl));
+      onClick(getImageUrl(imageUrl));
     }
   }, [selectedImage, imageUrl]);
 
@@ -51,9 +53,20 @@ export default function ItemType({
   };
 
   return (
-    <div className={styles["item-type"]}>
     <div
-        onClick={onClick}
+      className={
+        styles[
+          name
+            ? "item-type"
+            : rectangular
+            ? "item-type-rectangular"
+            : "item-type-nomargin"
+        ]
+      }
+      style={{ zIndex: blank ? 301 : "inherit" }}
+    >
+      <div
+        onClick={rectangular ?( blank? null:() => onClick(imageUrl)) : onClick}
         className={styles["item-type-rect"]}
         style={{
           top: selected ? "-10px" : "initial",
@@ -96,19 +109,11 @@ export default function ItemType({
           borderBottom: selected ? "1px solid #000" : "none",
         }}
       />
-      {blank && (
+      {/* {blank && (
         <button className={styles["item-type-create"]} onClick={handleCreate}>
           create
         </button>
-      )}
+      )} */}
-      <div
-        style={{
-          backgroundColor: "black",
-          width: "200%",
-          height: "200%",
-          position: "absolute",
-        }}
-      ></div>
     </div>
   );
 }

src/components/ItemType.module.css

@@ -2,7 +2,29 @@
   width: calc(25vw - 20px);
   height: calc(39vw - 20px);
   margin: 1px 10px -5px;
-  overflow: hidden;
+  overflow: visible;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative; /* Ensure absolute positioning inside works */
+}
+.item-type-rectangular {
+  width: calc(25vw - 20px);
+  height: calc(25vw - 20px);
+  overflow: visible;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative; /* Ensure absolute positioning inside works */
+}
+.item-type-nomargin {
+  width: calc(25vw - 20px);
+  height: calc(39vw - 20px);
+  overflow: visible;
   text-align: center;
   align-items: center;
   display: flex;
@@ -10,7 +32,6 @@
   justify-content: center;
   position: relative; /* Ensure absolute positioning inside works */
 }
-
 .item-type-rect {
   position: relative;
   height: 20vw;

src/components/ItemTypeLister.css

@@ -17,3 +17,30 @@
   margin-right: 20px;
   /* Space between items */
 }
+.rect-creator {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: white;
+  z-index: 300;
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
+  gap: 10px; /* Spacing between grid items */
+  padding: 10px; /* Padding inside grid */
+  overflow-y: auto; /* Allow scrolling if items overflow */
+}
+
+.add-button {
+  margin: 10px; /* Margin around the button */
+  padding: 10px 20px; /* Padding for the button */
+  position: absolute; /* Optional, for styling */
+  bottom: 0;
+  align-self: center; /* Center the button horizontally */
+}

src/components/ItemTypeLister.js

@@ -1,7 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import smoothScroll from "smooth-scroll-into-view-if-needed";
 import "./ItemTypeLister.css";
 import ItemType from "./ItemType";
 import { createItemType } from "../helpers/itemHelper.js";
+import { getImageUrl } from "../helpers/itemHelper";
 
 const ItemTypeLister = ({
   shopId,
@@ -13,20 +15,196 @@ const ItemTypeLister = ({
   isEditMode,
 }) => {
   const [isAddingNewItem, setIsAddingNewItem] = useState(false);
+  const newItemDivRef = useRef(null);
+
+  // Effect to handle changes to isAddingNewItem
+  useEffect(() => {
+    if (isAddingNewItem && newItemDivRef.current) {
+      // Use smooth-scroll-into-view-if-needed to scroll to the target div
+      smoothScroll(newItemDivRef.current, {
+        behavior: "smooth",
+        block: "start", // Adjust this based on your needs
+        inline: "nearest",
+      });
+    } else {
+      const node = document.getElementById("header");
+
+      smoothScroll(node, {
+        behavior: "smooth",
+        block: "start", // Adjust this based on your needs
+        inline: "nearest",
+      });
+    }
+  }, [isAddingNewItem]); // Dependency array includes isAddingNewItem
 
   const toggleAddNewItem = () => {
-    console.log("aaa");
     setIsAddingNewItem((prev) => !prev);
+
+    // Set body overflow style based on state
+    document.body.style.overflow = !isAddingNewItem ? "hidden" : "auto";
   };
 
   async function handleCreate(name, selectedImage) {
     createItemType(shopId, name, selectedImage);
   }
 
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [imageUrl, setImaguUrl] = useState("");
+
+  useEffect(() => {
+    // if (selectedImage) {
+    //   const reader = new FileReader();
+    //   reader.onloadend = () => {
+    //     setPreviewUrl(reader.result);
+    //   };
+    //   reader.readAsDataURL(selectedImage);
+    // } else {
+    // setPreviewUrl(getImageUrl(imageUrl));
+    setPreviewUrl(selectedImage);
+    // }
+  }, [selectedImage, imageUrl]);
+  const handleImageChange = (e) => {
+    setSelectedImage(e);
+  };
   return (
-    <div className="item-type-lister">
+    <div
-      <div className="item-type-list">
+      className="item-type-lister"
-        {itemTypes && itemTypes.length > 1 && (
+      style={{ overflowX: isAddingNewItem ? "hidden" : "" }}
+    >
+      <div ref={newItemDivRef} className="item-type-list" style={{display: isAddingNewItem?'block':'inline-flex'}}>
+        {isEditMode &&
+          !isAddingNewItem &&
+          user &&
+          user.roleId === 1 &&
+          user.userId === shopOwnerId && (
+            <ItemType
+              onClick={toggleAddNewItem}
+              name={"create"}
+              imageUrl={"uploads/addnew.png"}
+            />
+          )}
+        {user &&
+          user.roleId === 1 &&
+          user.userId === shopOwnerId &&
+          isAddingNewItem && (
+            <>
+              <ItemType
+                blank={true}
+                imageUrl={previewUrl}
+                name={"blank"}
+                onCreate={handleCreate}
+              />
+              <div className="rect-creator">
+                <div
+                  className="grid-container"
+                  style={{ visibility: "hidden" }}
+                >
+                  <ItemType
+                    onClick={() => onFilterChange(0)}
+                    imageUrl={"uploads/1718732420960.png"}
+                  />
+                  <ItemType
+                    onClick={() => onFilterChange(0)}
+                    imageUrl={"uploads/1718732420960.png"}
+                  />
+                  <ItemType
+                    onClick={() => onFilterChange(0)}
+                    imageUrl={"uploads/1718732420960.png"}
+                  />
+                  <ItemType
+                    onClick={() => onFilterChange(0)}
+                    imageUrl={"uploads/1718732420960.png"}
+                  />
+                </div>
+                <div className="grid-container" style={{ paddingTop: "15px" }}>
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/beverage1.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/beverage2.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/beverage3.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/dessert1.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/dessert2.jpg"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/food1.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/food2.jpg"}
+                  />
+
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/food3.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/packet1.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/packet2.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/snack1.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/snack2.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/snack3.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/snack4.png"}
+                  />
+                  <ItemType
+                    rectangular={true}
+                    blank={true}
+                    onClick={(e) => handleImageChange(e)}
+                    imageUrl={"uploads/addnew.png"}
+                  />
+                </div>
+                <button onClick={toggleAddNewItem} className="add-button">
+                  back
+                </button>
+              </div>
+
+              <h1>please select the icon</h1>
+            </>
+          )}
+        {itemTypes && itemTypes.length > 0 && (
           <ItemType
             name={"All"}
             onClick={() => onFilterChange(0)}
@@ -36,34 +214,17 @@ const ItemTypeLister = ({
         {itemTypes &&
           itemTypes.map(
             (itemType) =>
-              ((user && user.roleId == 1 && user.userId == shopOwnerId) ||
+              ((user && user.roleId === 1 && user.userId === shopOwnerId) ||
                 itemType.itemList.length > 0) && (
                 <ItemType
                   key={itemType.itemTypeId}
                   name={itemType.name}
                   imageUrl={itemType.image}
                   onClick={() => onFilterChange(itemType.itemTypeId)}
-                  selected={filterId == itemType.itemTypeId}
+                  selected={filterId === itemType.itemTypeId}
                 />
               )
           )}
-        {user &&
-          user.roleId == 1 &&
-          user.userId == shopOwnerId &&
-          isAddingNewItem && (
-            <ItemType blank={true} name={"blank"} onCreate={handleCreate} />
-          )}
-        {isEditMode &&
-          !isAddingNewItem &&
-          user &&
-          user.roleId == 1 &&
-          user.userId == shopOwnerId && (
-            <ItemType
-              onClick={toggleAddNewItem}
-              name={"create"}
-              imageUrl={"uploads/addnew.png"}
-            />
-          )}
       </div>
     </div>
   );