ok

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
+      className={
+        styles[
+          name
+            ? "item-type"
+            : rectangular
+            ? "item-type-rectangular"
+            : "item-type-nomargin"
+        ]
+      }
+      style={{ zIndex: blank ? 301 : "inherit" }}
+    >
       <div
-        onClick={onClick}
+        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 className="item-type-list">
-        {itemTypes && itemTypes.length > 1 && (
+    <div
+      className="item-type-lister"
+      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>
   );