From 32e8ebd69b8f8f63e87d7e67e3b77ff5df2757e8 Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Fri, 1 Nov 2024 11:33:26 +0700 Subject: [PATCH] ok --- src/App.js | 2 + src/components/Footer.js | 4 +- src/components/Header.js | 30 +- src/components/Item.js | 2 +- src/components/Item.module.css | 18 +- src/components/ItemLister.js | 1074 +++++++++++++++----------- src/components/ItemLister.module.css | 18 +- src/components/ItemType.js | 26 +- src/components/ItemType.module.css | 11 +- src/components/ItemTypeLister.css | 1 + src/components/ItemTypeLister.js | 8 +- src/components/PaymentOptions.js | 8 +- src/components/SearchInput.js | 2 +- src/helpers/itemHelper.js | 18 + src/pages/CafePage.js | 45 +- src/pages/Cart.js | 14 +- src/pages/Dashboard.js | 29 +- src/pages/Reports.js | 7 +- src/pages/SearchResult.js | 2 +- src/pages/Transaction_confirmed.js | 2 +- 20 files changed, 812 insertions(+), 509 deletions(-) diff --git a/src/App.js b/src/App.js index 57a460f..5fdd428 100644 --- a/src/App.js +++ b/src/App.js @@ -96,6 +96,7 @@ function App() { if (response.status === 200) { setShop(cafe); setShopItems(data); + console.log(data) // Filter out unavailable items const filteredData = data .map((itemType) => ({ @@ -424,6 +425,7 @@ function App() { shopName={shop.name} shopOwnerId={shop.ownerId} shopItems={shopItems} + setShopItems={setShopItems} shopClerks={shopClerks} socket={socket} user={user} diff --git a/src/components/Footer.js b/src/components/Footer.js index 17601a0..1eb0251 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -63,14 +63,14 @@ export default function Footer({ {/* Search Icon */} -
+ {/*
-
+
*/} {/* Cart Icon */}
diff --git a/src/components/Header.js b/src/components/Header.js index ee8c13f..5245dd5 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -330,11 +330,11 @@ const Header = ({ )} {user.username !== undefined && ( setModal("edit_account")}> - Edit profile + Ubah profil )} {shopId && user.roleId == 1 && ( - see your {user.userId == shopOwnerId ? 'other' : ''} cafes)} + Dashboard)} {shopId && user.userId == shopOwnerId && user.username !== undefined && @@ -349,7 +349,7 @@ const Header = ({
setModal("welcome_config")}> - welcoming page + Halaman sambutan setModal("add_material")}> - stock + Stok setModal("edit_tables")}> - table maps + Denah meja - clerks + Kasir setModal("create_clerk")}> - + Add clerk + + Tambah {shopClerks && shopClerks.map((key, index) => ( @@ -388,10 +388,10 @@ const Header = ({ ))} setModal("payment_option")}> - payment options + Opsi pembayaran - setModal("reports")}>reports + setModal("reports")}>Laporan )} @@ -403,7 +403,7 @@ const Header = ({
setModal("add_material")}> - stock + stok {user.username !== undefined && user.roleId == 2 && user.cafeId == shopId && ( - connected guest sides + Tablet tamu - + Add guest side + + Tambah {guestSides && guestSides.map((key, index) => ( @@ -439,7 +439,7 @@ const Header = ({ )} - setModal("reports")}>reports + setModal("reports")}>Laporan )} {user.username !== undefined && ( diff --git a/src/components/Item.js b/src/components/Item.js index 5769a80..930d4aa 100644 --- a/src/components/Item.js +++ b/src/components/Item.js @@ -87,7 +87,7 @@ const Item = ({ const handleNameChange = (event) => { setItemName(event.target.value); }; - + return (
{!forInvoice && ( diff --git a/src/components/Item.module.css b/src/components/Item.module.css index e005257..44d2826 100644 --- a/src/components/Item.module.css +++ b/src/components/Item.module.css @@ -35,8 +35,8 @@ } .itemImage { - width: 139px; - height: 149px; + width: 119px; + height: 129px; border-radius: 10px; margin-right: 10px; object-fit: cover; @@ -45,8 +45,8 @@ .imageContainer { position: relative; - width: 139px; - height: 149px; + width: 119px; + height: 129px; } .overlay { @@ -124,7 +124,7 @@ font-weight: 600; width: calc(100% - 15px); /* Adjust the width to prevent overflow */ font-size: 0.9rem; - margin-bottom: 35px; + /* margin-bottom: 35px; */ margin-left: 5px; color: #d9c61c; background-color: transparent; @@ -143,19 +143,19 @@ .itemQty { display: flex; - align-items: end; + align-items: center; font-size: 0.9rem; margin-left: 5px; color: rgb(115, 165, 133); fill: rgb(115, 165, 133); + height: 40px; } .itemQtyValue { - margin-bottom: 8px; font-family: "Poppins", sans-serif; font-style: normal; font-weight: 600; - margin-top: 5px; + margin-top: 19px; margin-left: 5px; margin-right: 5px; width: 25px; @@ -197,7 +197,7 @@ .plusNegative { width: 35px; height: 35px; - margin-top: -10px; + margin: 2.5px 0 -0.5px 0px; } .remove { diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js index 005a575..c85a78d 100644 --- a/src/components/ItemLister.js +++ b/src/components/ItemLister.js @@ -18,17 +18,22 @@ import ItemType from "./ItemType.js"; import { createItemType } from "../helpers/itemHelper.js"; const ItemLister = ({ + index, + indexTotal, itemTypeId, - typeVisibility=true, + typeVisibility = true, refreshTotal, shopId, shopOwnerId, user, typeName, typeImage, + setShopItems, itemList, forCart, forInvoice, + moveItemTypeUp, + moveItemTypeDown, isEditMode, handleCreateItem, handleUpdateItem, @@ -155,7 +160,7 @@ const ItemLister = ({ setPreviewUrl(previewUrl); }; - const onCreateItem = (itemName, itemPrice, selectedImage, previewUrl) => { + const onCreateItem = async (itemName, itemPrice, selectedImage, previewUrl) => { if (isEdit) setItemsToCreate((prevItems) => [ ...prevItems, @@ -165,9 +170,28 @@ const ItemLister = ({ price: itemPrice, selectedImage, image: previewUrl, + availability: true }, ]); - else handleCreateItem(itemTypeId, itemName, itemPrice, selectedImage); + else { + const newItem = await handleCreateItem(itemTypeId, itemName, itemPrice, selectedImage); + + console.log(newItem) + if (newItem) { + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + // Check if the itemTypeId matches + if (itemType.itemTypeId === itemTypeId) { + return { + ...itemType, + itemList: [...itemType.itemList, newItem], // Add the new item to the itemList + }; + } + return itemType; // Return the unchanged item type + }); + }); + } + } console.log(items); console.log(itemsToCreate); @@ -197,7 +221,7 @@ const ItemLister = ({ console.log(itemsToUpdate); }; - const handleChange = (itemId) => { + const handleChange = async (itemId) => { console.log(itemId); const itemIndex = items.findIndex((item) => item.itemId === itemId); if (itemIndex === -1) return; // Item not found @@ -220,13 +244,29 @@ const ItemLister = ({ // If isEdit, add item to the list of items to update setItemsToUpdate((prev) => [...prev, { itemId, newAvailability }]); } else { - // If not isEdit, immediately execute the update - executeUpdateAvailability( - itemId, - newAvailability, - updatedItems, - itemIndex - ); + + await executeUpdateAvailability(itemId, newAvailability); + + // Update shopItems state + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + // Map through the itemList to find the item by itemId and update its availability + const updatedItemList = itemType.itemList.map((item) => { + if (item.itemId === itemId) { + return { + ...item, + availability: newAvailability, // Update the availability + }; + } + return item; // Return unchanged item + }); + + return { + ...itemType, + itemList: updatedItemList, // Update the itemList with modified item + }; + }); + }); } console.log(itemsToUpdate); }; @@ -260,7 +300,8 @@ const ItemLister = ({ try { console.log(isVisible); if (itemTypeId) { - await updateItemType( + // Call the updateItemType function + const updatedItemType = await updateItemType( shopId, itemTypeId, typeNameInputRef.current.value, @@ -269,6 +310,21 @@ const ItemLister = ({ isVisible ); + // Update shopItems state + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + if (itemType.itemTypeId === itemTypeId) { + return { + ...itemType, + name: updatedItemType.name || typeNameInputRef.current.value, // Update name if provided + image: updatedItemType.image || itemType.image, // Update image if provided + visibility: updatedItemType.visibility !== undefined ? updatedItemType.visibility : isVisible, // Update visibility if provided + }; + } + return itemType; // Return unchanged item type + }); + }); + // Iterate through itemsToUpdate and call the API for (const { itemId, @@ -277,33 +333,129 @@ const ItemLister = ({ price, image, } of itemsToUpdate) { - if (newAvailability != undefined) + if (newAvailability != undefined) { await executeUpdateAvailability( itemId, newAvailability, items, items.findIndex((item) => item.itemId === itemId) ); - else await handleUpdateItem(itemId, name, price, image); + + // Update shopItems state + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + // Map through the itemList to find the item by itemId and update its availability + const updatedItemList = itemType.itemList.map((item) => { + if (item.itemId === itemId) { + return { + ...item, + availability: newAvailability, // Update the availability + }; + } + return item; // Return unchanged item + }); + + return { + ...itemType, + itemList: updatedItemList, // Update the itemList with modified item + }; + }); + }); + } + else { + + // Call the handleUpdateItem function + const updatedItem = await handleUpdateItem(itemId, name, price, image); + + // Update shopItems state + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + // Map through the itemList to find the item by itemId and update it + const updatedItemList = itemType.itemList.map((item) => { + if (item.itemId === itemId) { + return { + ...item, + name: updatedItem.name || name, // Update fields as needed + price: updatedItem.price || price, + image: updatedItem.image || image, + }; + } + return item; // Return unchanged item + }); + + return { + ...itemType, + itemList: updatedItemList, // Update the itemList with modified item + }; + }); + }); + } } + console.log(itemsToCreate) for (const { name, price, selectedImage } of itemsToCreate) { - handleCreateItem(itemTypeId, name, price, selectedImage); + const newItem = await handleCreateItem(itemTypeId, name, price, selectedImage); + console.log(newItem) + if (newItem) { + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + // Check if the itemTypeId matches + if (itemType.itemTypeId === itemTypeId) { + return { + ...itemType, + itemList: [...itemType.itemList, newItem], // Add the new item to the itemList + }; + } + return itemType; // Return the unchanged item type + }); + }); + } } } else { - console.log(selectedImage) - console.log(previewUrl) - const itemType = await createItemType( - shopId, - editedTypeName, - selectedImage, - previewUrl - ); - console.log(itemType); - for (const { name, price, selectedImage } of itemsToCreate) { - handleCreateItem(itemType.itemTypeId, name, price, selectedImage); + console.log(selectedImage); + console.log(previewUrl); + + try { + // Call the createItemType function + const newItemType = await createItemType(shopId, editedTypeName, selectedImage, previewUrl); + + // Update shopItems state with the new item type + setShopItems((prevShopItems) => [ + ...prevShopItems, + { + itemTypeId: newItemType.itemTypeId, // API should return this + name: newItemType.name, + image: newItemType.image, + cafeId: shopId, // Adjust as necessary + itemList: [], // Start with an empty itemList + }, + ]); + + // Loop through itemsToCreate and create each item + for (const { name, price, selectedImage } of itemsToCreate) { + // Call handleCreateItem to create a new item + const newItem = await handleCreateItem(newItemType.itemTypeId, name, price, selectedImage); + + // If the item was created successfully, update the shopItems state + if (newItem) { + setShopItems((prevShopItems) => + prevShopItems.map((itemType) => { + if (itemType.itemTypeId === newItemType.itemTypeId) { + return { + ...itemType, + itemList: [...itemType.itemList, newItem], // Add the new item to the itemList + }; + } + return itemType; // Return unchanged item type + }) + ); + } + } + } catch (error) { + console.error("Error creating item type or items:", error); } } // Clear the itemsToUpdate after saving + setItemsToCreate([]); setItemsToUpdate([]); setIsEditing(false); if (handleUnEdit) handleUnEdit(); @@ -337,69 +489,118 @@ const ItemLister = ({ <> {(items.length > 0 || (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && ( -
-
- {isEdit && } - setEditedTypeName(e.target.value)} - disabled={!isEdit} - /> - {isEditMode && !isEdit && ( - <>
- - - - - - - - -
- - - )} -
- {isEdit && ( -
- - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/addnew.png")} + style={{ paddingBottom: isEdit ? "28vh" : "" }} + > +
+ {isEdit && } + setEditedTypeName(e.target.value)} + disabled={!isEdit} /> - {/* {typeImage != null && !previewUrl.includes(typeImage) && ( + {isEditMode && !isEdit && ( + <> +
moveItemTypeUp(itemTypeId)} // Move onClick here for the whole div + > + + + + + + + +
+
moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div + > + + + + + + + +
+ +
+ + + + + + + + +
+ + + )} +
+ {isEdit && ( +
+ + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/addnew.png")} + /> + {/* {typeImage != null && !previewUrl.includes(typeImage) && ( @@ -409,364 +610,377 @@ const ItemLister = ({ /> )} */} - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/beverage4.jpg")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/beverage1.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/beverage2.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/beverage3.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/snack5.jpg")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/dessert1.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/dessert2.jpg")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/food4.jpg")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/food1.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/food2.jpg")} - /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/beverage4.jpg")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/beverage1.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/beverage2.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/beverage3.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/snack5.jpg")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/dessert1.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/dessert2.jpg")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/food4.jpg")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/food1.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/food2.jpg")} + /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/food3.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/packet1.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/packet2.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/snack1.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/snack2.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/snack3.png")} - /> - - handleImageChange(previewUrl, selectedImage) - } - imageUrl={getImageUrl("uploads/snack4.png")} - /> -
- )} + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/food3.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/packet1.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/packet2.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/snack1.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/snack2.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/snack3.png")} + /> + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl("uploads/snack4.png")} + /> + {Array.from({ length: 16 }, (_, index) => { + const sampleNumber = index + 1; // To get numbers from 1 to 16 + return ( + + handleImageChange(previewUrl, selectedImage) + } + imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)} + /> + ); + })} +
+ )} -
- {user &&( - user.userId == shopOwnerId || user.cafeId == shopId) && - isEditMode && ( - <> - {!isAddingNewItem && ( - - )} - {isAddingNewItem && ( - <> +
+ {user && ( + user.userId == shopOwnerId || user.cafeId == shopId) && + isEditMode && ( + <> + {!isAddingNewItem && ( + )} + {isAddingNewItem && ( + <> + + + + )} + + )} + + {itemsToCreate.map((item) => { + return !forCart || (forCart && item.qty > 0) ? ( + <> + {isEditItem == item.itemId && ( + - - - )} - - )} + )} +
+ {isEditMode && isEditItem != item.itemId && ( +
+ {isEditMode && ( + handleChange(item.itemId)} + checked={item.availability} + /> + )} +

+  {item.availability ? "tersedia" : "tidak tersedia"}   +

+
editItem(item.itemId)} + > + + + + + + + + +
+
+ )} - {itemsToCreate.map((item) => { - return !forCart || (forCart && item.qty > 0) ? ( - <> - {isEditItem == item.itemId && ( + handlePlusClick(item.itemId)} + onNegativeClick={() => handleNegativeClick(item.itemId)} + onRemoveClick={() => handleRemoveClick(item.itemId)} + isBeingEdit={isEditItem == item.itemId} + isAvailable={item.availability} + handleUpdateItem={(name, price, image) => + updateItemInCreate(item.itemId, name, price, image) + } + /> +
+ + ) : null; + })} + + {items.map((item) => { + return !forCart || (forCart && item.qty > 0) ? ( + <> + {isEditItem == item.itemId && ( + + )} +
+ {isEditMode && isEditItem != item.itemId && ( +
+ {isEditMode && ( + handleChange(item.itemId)} + checked={item.availability} + /> + )} +

+  {item.availability ? "tersedia" : "tidak tersedia"}  +

+
editItem(item.itemId)} + > + + + + + + + + +
+
+ )} + + handlePlusClick(item.itemId)} + onNegativeClick={() => handleNegativeClick(item.itemId)} + onRemoveClick={() => handleRemoveClick(item.itemId)} + isBeingEdit={isEditItem == item.itemId} + isAvailable={item.availability} + handleUpdateItem={(name, price, image) => + onUpdateItem(item.itemId, name, price, image) + } + /> +
+ + ) : null; + })} + + {user && + user.roleId == 1 && + user.userId == shopOwnerId && + isEdit && ( + <> - )} -
- {isEditMode && isEditItem != item.itemId && ( -
- {isEditMode && ( - handleChange(item.itemId)} - checked={item.availability} - /> - )} -

-  {item.availability ? "available" : "unavailable"}   -

-
editItem(item.itemId)} - > - - - - - - - - -
-
- )} - - handlePlusClick(item.itemId)} - onNegativeClick={() => handleNegativeClick(item.itemId)} - onRemoveClick={() => handleRemoveClick(item.itemId)} - isBeingEdit={isEditItem == item.itemId} - isAvailable={item.availability} - handleUpdateItem={(name, price, image) => - updateItemInCreate(item.itemId, name, price, image) - } - /> -
- - ) : null; - })} - - {items.map((item) => { - return !forCart || (forCart && item.qty > 0) ? ( - <> - {isEditItem == item.itemId && ( - - )} -
- {isEditMode && isEditItem != item.itemId && ( -
- {isEditMode && ( - handleChange(item.itemId)} - checked={item.availability} - /> - )} -

-  {item.availability ? "available" : "unavailable"}  -

-
editItem(item.itemId)} - > - - - - - - - - -
-
- )} - - handlePlusClick(item.itemId)} - onNegativeClick={() => handleNegativeClick(item.itemId)} - onRemoveClick={() => handleRemoveClick(item.itemId)} - isBeingEdit={isEditItem == item.itemId} - isAvailable={item.availability} - handleUpdateItem={(name, price, image) => - onUpdateItem(item.itemId, name, price, image) - } - /> -
- - ) : null; - })} - - {user && - user.roleId == 1 && - user.userId == shopOwnerId && - isEdit && ( - <> - - - )} -
- {isEdit && ( -
-
- Pengaturan - -
-
- sembunyikan semua - - setIsVisible(!isVisible)} - checked={!isVisible} - /> - -
- -
- Kembali -
- )} -
- )} + {isEdit && ( +
+
+ Pengaturan + +
+
+ sembunyikan semua + + setIsVisible(!isVisible)} + checked={!isVisible} + /> + +
+ +
+ Kembali +
+
+ )} +
+ )} ); }; diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css index 3803883..21685fb 100644 --- a/src/components/ItemLister.module.css +++ b/src/components/ItemLister.module.css @@ -35,15 +35,15 @@ .title { background-color: transparent; - font-family: "Poppins", sans-serif; - font-weight: 500; - font-style: normal; - font-size: 28px; - color: rgba(88, 55, 50, 1); - text-align: left; - width: calc(70% - 10px); - padding-left: 10px; - text-transform: capitalize; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 22px; + color: rgba(88, 55, 50, 1); + text-align: left; + width: calc(70% - 10px); + padding-left: 10px; + text-transform: capitalize; } .edit-typeItem-button { diff --git a/src/components/ItemType.js b/src/components/ItemType.js index 8197b8c..6ffd366 100644 --- a/src/components/ItemType.js +++ b/src/components/ItemType.js @@ -5,16 +5,21 @@ export default function ItemType({ onClick, onCreate, blank, - name: initialName = "", + name, imageUrl, selected, rectangular, }) { const inputRef = useRef(null); - const [name, setName] = useState(initialName); + const [namee, setName] = useState(name); const [selectedImage, setSelectedImage] = useState(null); const [previewUrl, setPreviewUrl] = useState(imageUrl); + // Effect to update local state when name prop changes + useEffect(() => { + setName(name); + }, [name]); + useEffect(() => { if (blank && inputRef.current) { inputRef.current.focus(); @@ -26,12 +31,10 @@ export default function ItemType({ const reader = new FileReader(); reader.onloadend = () => { onClick(reader.result, selectedImage); - // setPreviewUrl(reader.result); }; reader.readAsDataURL(selectedImage); } else { setPreviewUrl(imageUrl); - // onClick(getImageUrl(imageUrl)); } }, [selectedImage, imageUrl]); @@ -51,14 +54,14 @@ export default function ItemType({ return; } - onCreate(name, selectedImage); + onCreate(namee, selectedImage); }; return (
{name} - {blank && ( + {blank && rectangular && (
)} - {/* {blank && ( - - )} */}
); } diff --git a/src/components/ItemType.module.css b/src/components/ItemType.module.css index 17ce2a8..ef5a5e7 100644 --- a/src/components/ItemType.module.css +++ b/src/components/ItemType.module.css @@ -1,14 +1,14 @@ .item-type { width: calc(25vw - 20px); - height: calc(39vw - 20px); - margin: 1px 10px -5px; + height: calc(30vw - 20px); + margin: 1px 10px 0px; overflow: visible; text-align: center; align-items: center; display: flex; flex-direction: column; justify-content: center; - position: relative; /* Ensure absolute positioning inside works */ + position: relative; } .item-type-rectangular { width: calc(25vw - 20px); @@ -34,8 +34,8 @@ } .item-type-rect { position: relative; - height: 20vw; - width: 20vw; + height: 13vw; + width: 13vw; object-fit: cover; border-radius: 15px; background-color: #fff; @@ -46,7 +46,6 @@ font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; - margin-bottom: 10px; /* Adjust margin for spacing */ font-size: 14px; color: #333; width: calc(25vw - 30px); diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css index 11259a9..b311d46 100644 --- a/src/components/ItemTypeLister.css +++ b/src/components/ItemTypeLister.css @@ -3,6 +3,7 @@ overflow-x: auto; white-space: nowrap; padding: 3px 0px; + margin-bottom: -5px; } .item-type-list { diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js index e48b727..17423c6 100644 --- a/src/components/ItemTypeLister.js +++ b/src/components/ItemTypeLister.js @@ -9,6 +9,7 @@ const ItemTypeLister = ({ shopId, shopOwnerId, user, + setShopItems, itemTypes, onFilterChange, filterId, @@ -102,7 +103,7 @@ const ItemTypeLister = ({ user.userId == shopOwnerId || user.cafeId == shopId) && ( )} @@ -115,6 +116,7 @@ const ItemTypeLister = ({ shopOwnerId={shopOwnerId} user={user} typeName={""} + setShopItems={setShopItems} itemList={items} isEditMode={true} handleCreateItem={(itemTypeId, name, price, selectedImage) => createItem(shopId, name, price, selectedImage,itemTypeId)} @@ -127,9 +129,9 @@ const ItemTypeLister = ({ )} {itemTypes && itemTypes.length > 0 && ( onFilterChange(0)} - imageUrl={getImageUrl("uploads/1718732420960.png")} + imageUrl={getImageUrl("uploads/assets/All.png")} /> )} {itemTypes && diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js index 0254135..768e58e 100644 --- a/src/components/PaymentOptions.js +++ b/src/components/PaymentOptions.js @@ -106,7 +106,7 @@ const SetPaymentQr = ({ shopId }) => { return (
-

Payment QRIS

+

QR pembayaran

{ />
- {qrCodeDetected ?

QR Code Detected

:

No QR Code Detected

} + {qrCodeDetected ?

QR Code Detected

:

Tidak ada qr yang terdeteksi

}
-

Double Check tem Availability

+

Pengecekan ketersediaan ganda

- Turn on the switch for the clerk to double check before customer pay. + Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.

diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js index d4bee5a..27fa90e 100644 --- a/src/components/SearchInput.js +++ b/src/components/SearchInput.js @@ -120,7 +120,7 @@ export default function SearchInput({ { + try { + const response = await fetch(`${API_BASE_URL}/item/moveType/${itemTypeId}/${targetItemTypeId}/${fromOrder}/${toOrder}`, { + method: 'PUT', + headers: { + Authorization: `Bearer ${getAuthToken()}`, + }, + }); + if (!response.ok) { + throw new Error('Failed to move item type'); + } + return await response.json(); + } catch (error) { + console.error(error); + throw error; + } +}; + export async function deleteItemType(shopId, itemTypeId) { try { const response = await fetch( diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index 44f0bb5..2087a54 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -10,7 +10,7 @@ import { import "../App.css"; -import { getImageUrl, createItem, updateItem } from "../helpers/itemHelper.js"; +import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js"; import SearchInput from "../components/SearchInput"; import ItemTypeLister from "../components/ItemTypeLister"; import { MusicPlayer } from "../components/MusicPlayer"; @@ -30,6 +30,7 @@ function CafePage({ welcomePageConfig, shopName, shopOwnerId, + setShopItems, shopItems, shopClerks, socket, @@ -149,6 +150,40 @@ function CafePage({ document.body.style.overflow = "auto"; }; + + const moveItemTypeHandler = async (itemTypeId, direction, index) => { + const previousItems = [...shopItems]; + + // Update local state immediately + const newItems = [...shopItems]; + + let targetIndex; + if (direction === 'up' && index > 0) { + targetIndex = index - 1; + } else if (direction === 'down' && index < newItems.length - 1) { + targetIndex = index + 1; + } + console.log(index); + console.log(targetIndex); + if (targetIndex !== undefined) { + // Swap items + [newItems[index], newItems[targetIndex]] = [newItems[targetIndex], newItems[index]]; + newItems[index].order = targetIndex; + newItems[targetIndex].order = index; + + setShopItems(newItems); + + // Call the API to move the item type + try { + await moveItemType(itemTypeId, previousItems[targetIndex].itemTypeId, index, targetIndex); + } catch (error) { + console.error('Error moving item type:', error); + // Revert the changes if the backend fails + setShopItems(previousItems); + } + } + }; + if (loading) return (
@@ -204,6 +239,7 @@ function CafePage({ shopOwnerId={shopOwnerId} shopId={shopId} itemTypes={shopItems} + setShopItems={setShopItems} isEditMode={isEditMode} onFilterChange={(e) => setFilterId(e)} filterId={filterId} @@ -217,8 +253,10 @@ function CafePage({ (itemType) => filterId == 0 || itemType.itemTypeId === filterId ) - .map((itemType) => ( + .map((itemType, index) => ( moveItemTypeHandler(e,'up', index)} + moveItemTypeDown={(e)=>moveItemTypeHandler(e, 'down', index)} isEditMode={isEditMode} beingEditedType={beingEditedType} setBeingEditedType={setBeingEditedType} diff --git a/src/pages/Cart.js b/src/pages/Cart.js index d2e93bd..be05bdf 100644 --- a/src/pages/Cart.js +++ b/src/pages/Cart.js @@ -150,7 +150,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) { return (
-

Cart

+

Keranjang

{cartItems.map((itemType) => ( @@ -165,7 +165,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) { {table.tableNo != null && (
- Serve to table {table.tableNo} + Diantar ke meja {table.tableNo} {/*