From 47f43f05f92ed1fcc2aef55add15af90ef99cc83 Mon Sep 17 00:00:00 2001 From: everythingonblack Date: Thu, 8 May 2025 13:44:01 +0700 Subject: [PATCH] ok --- src/components/ItemConfig.js | 8 +- src/components/ItemLister.js | 210 ++++++++++++++++++++++------------- src/helpers/itemHelper.js | 27 +++++ src/index.js | 6 +- src/pages/Transaction.js | 2 +- 5 files changed, 167 insertions(+), 86 deletions(-) diff --git a/src/components/ItemConfig.js b/src/components/ItemConfig.js index d3c4c17..7b407c8 100644 --- a/src/components/ItemConfig.js +++ b/src/components/ItemConfig.js @@ -12,7 +12,8 @@ const ItemConfig = ({ isBeingEdit, cancelEdit, handleCreateItem, - handleUpdateItem + handleUpdateItem, + handleDelete }) => { const [selectedImage, setSelectedImage] = useState(); const [previewUrl, setPreviewUrl] = useState(imageUrl); @@ -104,9 +105,12 @@ const ItemConfig = ({ />
-
handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> +
handleChangeImage()} style={{ width: '140px', marginRight: '10px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
+
+ Hapus +
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js index d9294a6..22176c3 100644 --- a/src/components/ItemLister.js +++ b/src/components/ItemLister.js @@ -15,7 +15,7 @@ import { deleteItemType, } from "../helpers/itemHelper.js"; import ItemType from "./ItemType.js"; -import { createItemType } from "../helpers/itemHelper.js"; +import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js"; import ItemConfig from "./ItemConfig.js" const ItemLister = ({ @@ -169,8 +169,8 @@ const ItemLister = ({ }; const onEditItem = async (itemId, name, price, image, description, promoPrice) => { await updateItemInCreate(itemId, name, price, image, description, promoPrice); - setRandomKey(randomKey + 1); - console.log(image) + setRandomKey(randomKey + 1); + console.log(image) editItem(0); } const onCreateItem = async (itemName, itemPrice, selectedImage, previewUrl, description, promoPrice) => { @@ -232,63 +232,63 @@ const ItemLister = ({ }; const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => { if (isEdit) - setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]); + setItemsToUpdate((prev) => [...prev, { itemId, name, price, promoPrice, image, description }]); else { console.log(itemId, name, price, image, description) handleUpdateItem(itemId, name, price, image, description, promoPrice); } - const itemIndex = items.findIndex((item) => item.itemId === itemId); - if (itemIndex === -1) return; // Item not found + const itemIndex = items.findIndex((item) => item.itemId === itemId); + if (itemIndex === -1) return; // Item not found - // Create a copy of the current items array - const updatedItems = [...items]; - const item = updatedItems[itemIndex]; - console.log(item) - console.log(image) - // Toggle the availability locally - const readImage = (image) => { - return new Promise((resolve, reject) => { - // Check if image is a valid File or Blob object - if (!(image instanceof Blob)) { - return; - } - - const reader = new FileReader(); - reader.onloadend = () => resolve(reader.result); - reader.onerror = (error) => reject(error); - reader.readAsDataURL(image); // read the image as a data URL - }); - }; - - - let newImage = null; - if (image) { - try { - newImage = await readImage(image); - console.log(newImage); - } catch (error) { - console.error("Error reading image:", error); + // Create a copy of the current items array + const updatedItems = [...items]; + const item = updatedItems[itemIndex]; + console.log(item) + console.log(image) + // Toggle the availability locally + const readImage = (image) => { + return new Promise((resolve, reject) => { + // Check if image is a valid File or Blob object + if (!(image instanceof Blob)) { + return; } + + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.onerror = (error) => reject(error); + reader.readAsDataURL(image); // read the image as a data URL + }); + }; + + + let newImage = null; + if (image) { + try { + newImage = await readImage(image); + console.log(newImage); + } catch (error) { + console.error("Error reading image:", error); } - - updatedItems[itemIndex] = { - itemId: item.itemId, - name, - price, - description: description, - promoPrice: promoPrice, - availability: item.availability, - image: image ? newImage : item.image, - selectedImage: image ? newImage : null - }; - - console.log(updatedItems) + } + + updatedItems[itemIndex] = { + itemId: item.itemId, + name, + price, + description: description, + promoPrice: promoPrice, + availability: item.availability, + image: image ? newImage : item.image, + selectedImage: image ? newImage : null + }; + + console.log(updatedItems) + + // Update the state with the local change + setItems(updatedItems); + setRandomKey(randomKey + 1); - // Update the state with the local change - setItems(updatedItems); - setRandomKey(randomKey + 1); - console.log(itemsToUpdate); }; @@ -509,7 +509,7 @@ const ItemLister = ({ for (const { name, price, selectedImage, description } of itemsToCreate) { // Call handleCreateItem to create a new item const newItem = await handleCreateItem(newItemType.itemTypeId, name, price, selectedImage, description); - + // If the item was created successfully, update the shopItems state if (newItem) { setShopItems((prevShopItems) => @@ -561,6 +561,40 @@ const ItemLister = ({ setIsFirstStep(true); }; + const handleItemDeletionToggle = async (itemId, willBeDeleted) => { + try { + editItem(0) + // 1. Await the API or helper that updates the deletion status + const updatedItem = await updateItemDeletionStatus(itemId, willBeDeleted); + + // 2. Update the local state with the new `willBeDeleted` status + setShopItems((prevShopItems) => { + return prevShopItems.map((itemType) => { + const updatedItemList = itemType.itemList.map((item) => { + if (item.itemId === itemId) { + return { + ...item, + willBeDeleted: updatedItem.willBeDeleted, // Update deletion status + name: item.name, + price: item.price, + image: item.image, + }; + } + return item; + }); + + return { + ...itemType, + itemList: updatedItemList, + }; + }); + }); + } catch (error) { + console.error("Failed to update item deletion status:", error); + // Optional: show a user notification + } + }; + return ( <> {(items.length > 0 || @@ -873,7 +907,7 @@ const ItemLister = ({ imageUrl={item.image} imageFile={item.selectedImage} cancelEdit={() => editItem(0)} - handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice);} + handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice); } } /> )} @@ -964,43 +998,58 @@ const ItemLister = ({ // batal // editItem(0)} - handleCreateItem={onCreateItem} - handleUpdateItem={async (name, price, image, description, promoPrice) => { - try { - console.log(description); - await onUpdateItem(item.itemId, name, price, image, description, promoPrice); - } catch (error) { - console.error("Error updating item:", error); - } - }} - /> + isBeingEdit={true} + name={item.name} + price={item.price} + promoPrice={item.promoPrice} + description={item.description} + imageUrl={itemTypeId ? getImageUrl(item.image) : item.image} + imageFile={item.selectedImage} + cancelEdit={() => editItem(0)} + handleCreateItem={onCreateItem} + handleUpdateItem={async (name, price, image, description, promoPrice) => { + try { + console.log(description); + await onUpdateItem(item.itemId, name, price, image, description, promoPrice); + } catch (error) { + console.error("Error updating item:", error); + } + }} + handleDelete={() => handleItemDeletionToggle(item.itemId, true)} + /> )}
- {isEditMode && isEditItem != item.itemId && ( + {(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && (
- {isEditMode && ( + {!item.willBeDeleted && isEditMode && ( handleChange(item.itemId)} checked={item.availability} /> )} -

-  {item.availability ? "Tersedia" : "Tidak tersedia"} -

+ {item.willBeDeleted ? + +

+ Ditandai untuk dihapus +

+ : +

+  {item.availability ? "Tersedia" : "Tidak tersedia"} +

+ }
-
editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}> -
{ + if (!item.willBeDeleted) { + editItem(item.itemId); + } else { + handleItemDeletionToggle(item.itemId, false); + } + }} + style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}> + {!item.willBeDeleted &&
-

Edit item

+ } +

{item.willBeDeleted ? 'Batalkan' : 'Edit item'}

)} {}; -// console.warn = () => {}; -// console.error = () => {}; +console.log = () => {}; +console.warn = () => {}; +console.error = () => {}; root.render( diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js index 17a7d0f..d1c0a46 100644 --- a/src/pages/Transaction.js +++ b/src/pages/Transaction.js @@ -235,7 +235,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A" }`} - {transaction.notes != "" && ( + {transaction.notes != null && ( <>
Note :