ok

2024-10-10 04:30:38 +00:00
parent 624a9e8ec8
commit 30f53e8d97
7 changed files with 250 additions and 43 deletions
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import styles from "./ItemLister.module.css";
 import Item from "./Item";
 import Switch from "react-switch";
+import { ThreeDots, ColorRing } from "react-loader-spinner";
 import {
  getItemQtyFromCart,
  updateItemQtyInCart,
@@ -13,6 +14,7 @@ import {
  updateItemType,
  deleteItemType,
 } from "../helpers/itemHelper.js";
+import ItemType from "./ItemType.js";

 const ItemLister = ({
  itemTypeId,
@@ -21,6 +23,7 @@ const ItemLister = ({
  shopOwnerId,
  user,
  typeName,
+  typeImage,
  itemList,
  forCart,
  forInvoice,
@@ -53,7 +56,6 @@ const ItemLister = ({
  const [editedTypeName, setEditedTypeName] = useState(typeName);
  const typeNameInputRef = useRef(null);

-
  const handlePlusClick = (itemId) => {
    const updatedItems = items.map((item) => {
      if (item.itemId === itemId) {
@@ -99,11 +101,6 @@ const ItemLister = ({

  const toggleEditTypeItem = () => {
    setIsEditing((prev) => !prev);
-    if (!isEdit) {
-      setTimeout(() => {
-        typeNameInputRef.current.focus();
-      }, 0);
-    }
  };

  const handleSaveType = async () => {
@@ -126,22 +123,21 @@ const ItemLister = ({
  };

  useEffect(() => {
-    if(beingEditedType == itemTypeId)return;
+    if (beingEditedType == itemTypeId) return;

    setOnEditItem(0);
    setIsAddingNewItem(false);
-    console.log(itemTypeId)
  }, [beingEditedType]);

  const toggleAddNewItem = () => {
+    setBeingEditedType(itemTypeId);
    setIsAddingNewItem((prev) => !prev);
    setOnEditItem(0);
-    setBeingEditedType(itemTypeId);
  };
  const editItem = (itemId) => {
+    setBeingEditedType(itemTypeId);
    setIsAddingNewItem(false);
    setOnEditItem(itemId);
-    setBeingEditedType(itemTypeId);
  };
  const handleChange = async (itemId) => {
    // Find the item in the current items array
@@ -189,45 +185,143 @@ const ItemLister = ({
    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
    setIsAddingNewItem(false);
  };
-
+  console.log(getImageUrl(typeImage));
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState("");
+  useEffect(() => {
+    if (selectedImage) {
+      setPreviewUrl(selectedImage);
+    } else {
+      setPreviewUrl(getImageUrl(typeImage));
+    }
+  }, [selectedImage]);
+  const handleImageChange = (e) => {
+    setSelectedImage(e);
+  };
  return (
    <>
      {(items.length > 0 ||
        (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
-        <div className={styles["item-lister"]}>
+        <div
+          className={`${styles["item-lister"]} ${
+            isEdit ? styles["fullscreen"] : ""
+          }`}
+          style={{ paddingBottom: isEdit ? "25vh" : "" }}
+        >
          {!raw && (
            <div className={styles["title-container"]}>
+              {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
              <input
                ref={typeNameInputRef}
                className={`${styles.title} ${
-                  isEdit
-                    ? styles.border
-                    : styles.noborder
+                  isEdit ? styles.border : styles.noborder
                }`}
                value={editedTypeName}
                onChange={(e) => setEditedTypeName(e.target.value)}
                disabled={!isEdit}
              />
-              {isEditMode && (
+              {isEditMode && !isEdit && (
                <>
                  <button
                    className={styles["edit-typeItem-button"]}
                    onClick={toggleEditTypeItem}
                  >
-                      {isEdit ? "Cancel" : "Edit"}
+                    Edit
                  </button>
-                    {isEdit && (
-                      <button
-                        className={styles["edit-typeItem-button"]}
-                        onClick={handleSaveType}
-                      >
-                        &nbsp;&nbsp;Save&nbsp;&nbsp;
-                      </button>
-                    )}
                </>
              )}
            </div>
          )}
+          {isEdit && (
+            <div className={styles["grid-container"]}>
+              <ItemType
+                rectangular={true}
+                blank={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/addnew.png")}
+              />
+              {typeImage != null && !previewUrl.includes(typeImage) && (
+                <ItemType
+                  rectangular={true}
+                  onClick={(e) => handleImageChange(e)}
+                  imageUrl={getImageUrl(typeImage)}
+                />
+              )}
+
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/beverage3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/dessert1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/dessert2.jpg")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food2.jpg")}
+              />
+
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/food3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/packet1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/packet2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack1.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack2.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack3.png")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(e) => handleImageChange(e)}
+                imageUrl={getImageUrl("uploads/snack4.png")}
+              />
+            </div>
+          )}
+
          <div className={styles["item-list"]}>
            {user &&
              user.roleId == 1 &&
@@ -274,8 +368,7 @@ const ItemLister = ({
                    </button>
                  )}
                  <div className={styles["itemWrapper"]}>
-                    {isEditMode && onEditItem != item.itemId&&
-                        (
+                    {isEditMode && onEditItem != item.itemId && (
                      <div className={styles["editModeLayout"]}>
                        {isEditMode && (
                          <Switch
@@ -305,9 +398,7 @@ const ItemLister = ({
                      onPlusClick={() => handlePlusClick(item.itemId)}
                      onNegativeClick={() => handleNegativeClick(item.itemId)}
                      onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={
-                        onEditItem == item.itemId 
-                      }
+                      isBeingEdit={onEditItem == item.itemId}
                      isAvailable={item.availability}
                      handleUpdateItem={(name, price, image) =>
                        handleUpdateItem(item.itemId, name, price, image)
@@ -332,6 +423,42 @@ const ItemLister = ({
                </>
              )}
          </div>
+          {isEdit && (
+            <div className={styles.PaymentOption}>
+              <div className={styles.TotalContainer}>
+                <span>Pengaturan</span>
+                <span className="svg-container">
+  <svg 
+    enable-background="new 0 0 91 91" 
+    height="91px" 
+    id="Layer_1" 
+    version="1.1" 
+    viewBox="0 0 91 91" 
+    width="40px" 
+  >
+    <g>
+      <path d="M45.574,38.253c-5.443,0-9.871,4.428-9.871,9.871s4.428,9.871,9.871,9.871s9.871-4.428,9.871-9.871 S51.018,38.253,45.574,38.253z M45.574,54.595c-3.568,0-6.471-2.904-6.471-6.471c0-3.568,2.902-6.471,6.471-6.471 c3.566,0,6.471,2.902,6.471,6.471C52.045,51.69,49.141,54.595,45.574,54.595z"/>
+      <path d="M64.057,27.726l-6.975,4.029c-0.971-0.686-2.004-1.281-3.086-1.781v-8.061H37.152v8.061 c-1.008,0.467-1.979,1.021-2.898,1.654l-6.936-4.111l-8.586,14.488l6.936,4.109c-0.078,0.709-0.115,1.373-0.115,2.01 c0,0.574,0.029,1.158,0.092,1.785l-6.98,4.031l8.422,14.584l6.979-4.031c0.973,0.686,2.004,1.281,3.088,1.781v8.061h16.844v-8.061 c1.008-0.467,1.977-1.021,2.896-1.654l6.936,4.111l8.586-14.488l-6.934-4.109c0.078-0.705,0.115-1.371,0.115-2.01 c0-0.576-0.029-1.158-0.092-1.785l6.98-4.031L64.057,27.726z M61.824,44.538l0.17,1.143c0.137,0.928,0.203,1.703,0.203,2.443 c0,0.797-0.076,1.656-0.232,2.631l-0.182,1.141l5.973,3.539l-5.119,8.639l-5.973-3.541l-0.914,0.713 c-1.244,0.969-2.617,1.754-4.078,2.33l-1.076,0.424v6.936H40.551v-6.934l-1.074-0.426c-1.533-0.605-2.955-1.428-4.23-2.443 l-0.906-0.723l-6.01,3.471l-5.021-8.695l6.016-3.475l-0.17-1.143c-0.137-0.928-0.203-1.703-0.203-2.443 c0-0.801,0.074-1.639,0.232-2.635l0.178-1.139l-5.971-3.537l5.119-8.639l5.973,3.543l0.914-0.713 c1.248-0.971,2.621-1.756,4.08-2.332l1.074-0.424v-6.936h10.045v6.934l1.076,0.426c1.529,0.605,2.953,1.428,4.229,2.443 l0.908,0.723l6.008-3.469l5.023,8.693L61.824,44.538z"/>
+    </g>
+  </svg>
+</span>
+
+              </div>
+              <button className={styles.PayButton}>
+                {false ? (
+                  <ColorRing height="50" width="50" color="white" />
+                ) : (
+                  "Simpan"
+                )}
+              </button>
+              <div
+                className={styles.Pay2Button}
+                onClick={() => setIsEditing(false)}
+              >
+                Kembali
+              </div>
+            </div>
+          )}
        </div>
      )}
    </>
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -10,9 +10,30 @@
 .item-lister:last-child {
  margin-bottom: 50px;
 }
+.fullscreen {
+  position: fixed; /* Keep the container fixed */
+  top: 0; /* Adjust the top position as needed */
+  bottom: 0; /* Occupy the full height of the viewport */
+  left: 0; /* Align to the left */
+  right: 0; /* Align to the right */
+  background-color: white; /* Background color */
+  z-index: 1000; /* Layering */
+  overflow-y: auto; /* Allow vertical scrolling */
+}
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  /* padding: 10px; */
+  max-height: calc(3 * (25vw - 20px) + 20px);
+  overflow-y: auto;
+  height: calc(49vw - 20px);
+}
+
 .title-container {
  display: flex;
  align-items: center;
+  justify-content: space-between;
 }

 .title {
@@ -78,3 +99,59 @@
  align-items: center;
  justify-content: center;
 }
+
+.PaymentOption {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  border-radius: 15px 15px 0 0;
+
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  z-index: 300;
+}
+
+.TotalContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.PayButton {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+
+  width: 80vw;
+  height: 18vw;
+  border-radius: 50px;
+  background-color: rgba(88, 55, 50, 1);
+  color: white;
+  border: none;
+  margin: 0px auto;
+  cursor: pointer;
+  margin-bottom: 23px;
+}
+
+.Pay2Button {
+  text-align: center;
+  color: rgba(88, 55, 50, 1);
+  font-size: 1em;
+  margin-bottom: 25px;
+  cursor: pointer;
+}
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -91,7 +91,7 @@ export default function ItemType({
          </div>
        )}
      </div>
-      {(rectangular || !blank) && (
+      {(!rectangular && !blank) && (
        <input
          ref={inputRef}
          className={`${styles["item-type-name"]} ${styles.noborder}`}
--- a/src/components/ItemType.module.css
+++ b/src/components/ItemType.module.css
@@ -18,7 +18,7 @@
  align-items: center;
  display: flex;
  flex-direction: column;
-  justify-content: center;
+  justify-content: start;
  position: relative; /* Ensure absolute positioning inside works */
 }
 .item-type-nomargin {
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -43,6 +43,8 @@
  padding: 10px; /* Padding inside grid */
  max-height: calc(3 * (25vw - 20px) + 20px); /* 3 items + gaps */
  overflow-y: auto; /* Allow scrolling if items overflow */
+  padding-top: 15px;
+  height: calc(43vw - 20px);
 }

 .add-button {
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js

-const API_BASE_URL = "https://yjgyr4-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://3nvnzs-5000.csb.app"; // Replace with your actual backend URL

 export default API_BASE_URL;
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -215,6 +215,7 @@ function CafePage({
                      key={itemType.itemTypeId}
                      itemTypeId={itemType.itemTypeId}
                      typeName={itemType.name}
+                      typeImage={itemType.image}
                      itemList={itemType.itemList}
                      isEditMode={isEditMode}
                      beingEditedType={beingEditedType}