kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-02-13 08:07:57 +07:00
parent 1c8490b9ab
commit 2ceac51de2
5 changed files with 225 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/Item.js
View File

@@ -7,6 +7,7 @@ const Item = ({
name: initialName, name: initialName,
description: initialDescription, description: initialDescription,
price: initialPrice, price: initialPrice,
promoPrice,
qty: initialQty, qty: initialQty,
imageUrl, imageUrl,
imageFile, imageFile,
@@ -30,16 +31,13 @@ const Item = ({
useEffect(() => { useEffect(() => {
console.log(imageUrl); console.log(imageUrl);
console.log(selectedImage); console.log(selectedImage);
if (selectedImage) { console.log(imageFile)
const reader = new FileReader(); if (imageFile) {
reader.onloadend = () => { setPreviewUrl(imageFile);
setPreviewUrl(reader.result);
};
reader.readAsDataURL(selectedImage);
} else { } else {
setPreviewUrl(imageUrl); setPreviewUrl(imageUrl);
} }
}, [selectedImage, imageUrl]); }, [imageFile, imageUrl]);
const handlePlusClick = () => { const handlePlusClick = () => {
if (!blank) onPlusClick(id); if (!blank) onPlusClick(id);
@@ -97,9 +95,7 @@ const Item = ({
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<img <img
src={ src={
blank || previewUrl || isBeingEdit previewUrl
? previewUrl
: "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg"
} }
onError={({ currentTarget }) => { onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping currentTarget.onerror = null; // prevents looping
@@ -112,22 +108,6 @@ const Item = ({
}} }}
className={styles.itemImage} className={styles.itemImage}
/> />
{(isBeingEdit || blank) && (
<div className={styles.overlay} onClick={handleImageClick}>
<span>
{previewUrl ? "Ganti gambar" : "Tambah gambar"}
</span>
</div>
)}
<input
type="file"
ref={fileInputRef}
className={styles.fileInput}
onChange={handleFileChange}
accept="image/*"
style={{ display: "none" }}
/>
</div> </div>
)} )}
<div className={styles.itemDetails}> <div className={styles.itemDetails}>
@@ -149,7 +129,7 @@ const Item = ({
</svg> </svg>
} }
<input {/* <input
className={`${ className={`${
forInvoice ? styles.itemInvoiceName : styles.itemName forInvoice ? styles.itemInvoiceName : styles.itemName
} ${isBeingEdit || blank ? styles.blank : styles.notblank} ${ } ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
@@ -159,8 +139,8 @@ const Item = ({
placeholder="Nama item" placeholder="Nama item"
onChange={handleNameChange} onChange={handleNameChange}
disabled={!blank && !isBeingEdit} disabled={!blank && !isBeingEdit}
/> /> */}
<h3 style={{ textTransform: 'capitalize', margin: '5px 0px 10px 10px', fontSize: '17px' }}>{itemName}</h3>
{forInvoice && ( {forInvoice && (
<> <>
<p className={styles.multiplySymbol}>x</p> <p className={styles.multiplySymbol}>x</p>
@@ -168,15 +148,58 @@ const Item = ({
</> </>
)} )}
{!forInvoice && ( {!forInvoice && (
<input // <input
className={`${styles.itemPrice} ${ // className={`${styles.itemPrice} ${
isBeingEdit || blank ? styles.blank : styles.notblank // isBeingEdit || blank ? styles.blank : styles.notblank
} ${!isAvailable ? styles.disabled : ""}`} // } ${!isAvailable ? styles.disabled : ""}`}
value={itemPrice} // value={itemPrice}
placeholder="Harga" // placeholder="Harga"
onChange={handlePriceChange} // onChange={handlePriceChange}
disabled={!blank && !isBeingEdit} // disabled={!blank && !isBeingEdit}
/> // />
<div style={{
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
color: 'rgb(28, 29, 29)',
fontSize: '0.875rem',
fontWeight: 600,
lineHeight: '1rem',
marginLeft: 10
}}>
{promoPrice && promoPrice != 0 && promoPrice != '' &&
<div style={{
position: 'relative',
marginTop: '0.125rem',
display: 'flex',
width: 'max-content',
alignItems: 'center',
whiteSpace: 'nowrap',
borderRadius: '9999px',
backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
padding: '0.25rem 0.75rem',
color: 'rgb(255, 255, 255)',
fontSize: '0.75rem',
fontWeight: 600,
lineHeight: '1rem'
}}>
Promo
</div>
}
<div style={{ display: 'flex' }}>
<span style={{
marginLeft: '1rem',
marginRight: '0.5rem',
marginTop: '0.125rem'
}}>{promoPrice}</span>
<span style={{
marginTop: '0.125rem',
color: 'rgb(114, 114, 114)',
textDecoration: 'line-through'
}}>{initialPrice}</span>
</div>
</div>
)} )}
{!forInvoice && {!forInvoice &&

10
src/components/ItemConfig.js
View File

@@ -27,17 +27,19 @@ const ItemConfig = ({
// Prevent scrolling when modal is open // Prevent scrolling when modal is open
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
if(selectedImage){ if(selectedImage){
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
setPreviewUrl(reader.result); setPreviewUrl(reader.result);
}; };
reader.readAsDataURL(selectedImage); reader.readAsDataURL(selectedImage);
}
else if (imageFile) {
setPreviewUrl(imageFile);
} else { } else {
setPreviewUrl(imageUrl); setPreviewUrl(imageUrl);
} }
}, [selectedImage, imageUrl]); }, [selectedImage, imageFile, imageUrl]);
const handleOverlayClick = (event) => { const handleOverlayClick = (event) => {
// Prevent scrolling when modal is open // Prevent scrolling when modal is open
@@ -78,11 +80,11 @@ const ItemConfig = ({
}, [textareaRef.current]); }, [textareaRef.current]);
const handleCreate = () => { const handleCreate = () => {
handleCreateItem(itemName, itemPrice, selectedImage, itemDescription); handleCreateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
}; };
const handleUpdate = () => { const handleUpdate = () => {
console.log(itemDescription) console.log(itemDescription)
handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription); handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
}; };
return ( return (

45
src/components/ItemLister.js
View File

@@ -210,44 +210,45 @@ const ItemLister = ({
name, name,
price, price,
selectedImage, selectedImage,
previewUrl description,
promoPrice
) => { ) => {
setItemsToCreate((prevItems) => setItemsToCreate((prevItems) =>
prevItems.map((item) => prevItems.map((item) =>
item.itemId === itemId item.itemId === itemId
? { ...item, name, price, selectedImage, image: previewUrl } ? { ...item, name, price, selectedImage, description, promoPrice } //image: previewUrl
: item : item
) )
); );
setisEditItem(0); setisEditItem(0);
}; };
const onUpdateItem = (itemId, name, price, image, description) => { const onUpdateItem = (itemId, name, price, image, description, promoPrice) => {
if (isEdit) if (isEdit)
setItemsToUpdate((prev) => [...prev, { itemId, name, price, image, description }]); setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
else { else {
console.log(itemId, name, price, image, description) console.log(itemId, name, price, image, description)
handleUpdateItem(itemId, name, price, image, description); handleUpdateItem(itemId, name, price, image, description, promoPrice);
}
const itemIndex = items.findIndex((item) => item.itemId === itemId); const itemIndex = items.findIndex((item) => item.itemId === itemId);
if (itemIndex === -1) return; // Item not found if (itemIndex === -1) return; // Item not found
// Create a copy of the current items array // Create a copy of the current items array
const updatedItems = [...items]; const updatedItems = [...items];
const item = updatedItems[itemIndex]; const item = updatedItems[itemIndex];
console.log(updatedItems) console.log(items)
// Toggle the availability locally // Toggle the availability locally
if(image){ if(image){
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
updatedItems[itemIndex].image = reader.result; updatedItems[itemIndex].selectedImage = reader.result;
console.log(reader.result) console.log(reader.result)
}; };
reader.readAsDataURL(image); reader.readAsDataURL(image);
} }
const newAvailability = !item.availability;
updatedItems[itemIndex] = { updatedItems[itemIndex] = {
itemId: item.itemId,
name, name,
price, price,
availability: item.availability availability: item.availability
@@ -258,7 +259,7 @@ const ItemLister = ({
setItems(updatedItems); setItems(updatedItems);
setRandomKey(randomKey + 1); setRandomKey(randomKey + 1);
}
console.log(itemsToUpdate); console.log(itemsToUpdate);
}; };
@@ -375,7 +376,8 @@ const ItemLister = ({
name, name,
price, price,
image, image,
description description,
promoPrice
} of itemsToUpdate) { } of itemsToUpdate) {
if (newAvailability != undefined) { if (newAvailability != undefined) {
await executeUpdateAvailability( await executeUpdateAvailability(
@@ -409,7 +411,7 @@ const ItemLister = ({
else { else {
// Call the handleUpdateItem function // Call the handleUpdateItem function
const updatedItem = await handleUpdateItem(itemId, name, price, image, description); const updatedItem = await handleUpdateItem(itemId, name, price, image, description, promoPrice);
// Update shopItems state // Update shopItems state
setShopItems((prevShopItems) => { setShopItems((prevShopItems) => {
@@ -842,7 +844,7 @@ const ItemLister = ({
imageUrl={item.image} imageUrl={item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleUpdateItem={(name, price, image, description) => { updateItemInCreate(item.itemId, name, price, image, description); setRandomKey(randomKey + 1); console.log(image) } handleUpdateItem={(name, price, image, description, promoPrice) => { updateItemInCreate(item.itemId, name, price, image, description, promoPrice); setRandomKey(randomKey + 1); console.log(image) }
} }
/> />
)} )}
@@ -902,6 +904,7 @@ const ItemLister = ({
forInvoice={forInvoice} forInvoice={forInvoice}
name={item.name} name={item.name}
price={item.price} price={item.price}
promoPrice={item.promoPrice}
qty={item.qty} qty={item.qty}
imageUrl={item.image} imageUrl={item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
@@ -910,8 +913,8 @@ const ItemLister = ({
onRemoveClick={() => handleRemoveClick(item.itemId)} onRemoveClick={() => handleRemoveClick(item.itemId)}
isBeingEdit={isEditItem == item.itemId} isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability} isAvailable={item.availability}
handleUpdateItem={(name, price, image, description) => handleUpdateItem={(name, price, image, description, promoPrice) =>
updateItemInCreate(item.itemId, name, price, image, description) updateItemInCreate(item.itemId, name, price, image, description, promoPrice)
} }
/> />
</div> </div>
@@ -940,12 +943,12 @@ const ItemLister = ({
imageUrl={ imageUrl={
itemTypeId ? getImageUrl(item.image) : item.image itemTypeId ? getImageUrl(item.image) : item.image
} }
imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleCreateItem={onCreateItem} handleCreateItem={onCreateItem}
handleUpdateItem={(name, price, image, description) => { handleUpdateItem={(name, price, image, description, promoPrice) => {
console.log(description) console.log(description)
onUpdateItem(item.itemId, name, price, image, description); onUpdateItem(item.itemId, name, price, image, description, promoPrice);
setRandomKey(randomKey + 1); console.log(image);
} }
} }
/> />
@@ -1005,18 +1008,20 @@ const ItemLister = ({
forInvoice={forInvoice} forInvoice={forInvoice}
name={item.name} name={item.name}
price={item.price} price={item.price}
promoPrice={item.promoPrice}
qty={item.qty} qty={item.qty}
description={item.description} description={item.description}
imageUrl={ imageUrl={
itemTypeId ? getImageUrl(item.image) : item.image itemTypeId ? getImageUrl(item.image) : item.image
} }
imageFile={item.selectedImage}
onPlusClick={() => handlePlusClick(item.itemId)} onPlusClick={() => handlePlusClick(item.itemId)}
onNegativeClick={() => handleNegativeClick(item.itemId)} onNegativeClick={() => handleNegativeClick(item.itemId)}
onRemoveClick={() => handleRemoveClick(item.itemId)} onRemoveClick={() => handleRemoveClick(item.itemId)}
isBeingEdit={isEditItem == item.itemId} isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability} isAvailable={item.availability}
handleUpdateItem={(name, price, image, description) => handleUpdateItem={(name, price, image, description, promoPrice) =>
onUpdateItem(item.itemId, name, price, image, description) onUpdateItem(item.itemId, name, price, image, description, promoPrice)
} }
/> />
</div> </div>

4
src/helpers/itemHelper.js
View File

@@ -110,7 +110,8 @@ export async function updateItem(
name, name,
price, price,
selectedImage, selectedImage,
description description,
promoPrice
) { ) {
try { try {
console.log( console.log(
@@ -124,6 +125,7 @@ export async function updateItem(
formData.append("price", price); formData.append("price", price);
formData.append("image", selectedImage); formData.append("image", selectedImage);
formData.append("description", description); formData.append("description", description);
formData.append("promoPrice", promoPrice);
const response = await fetch(`${API_BASE_URL}/item/set-item/${itemId}`, { const response = await fetch(`${API_BASE_URL}/item/set-item/${itemId}`, {
method: "PUT", method: "PUT",

4
src/pages/CafePage.js
View File

@@ -278,8 +278,8 @@ function CafePage({
description description
) )
} }
handleUpdateItem={(itemId, name, price, selectedImage, description) => handleUpdateItem={(itemId, name, price, selectedImage, description, promoPrice) =>
updateItem(itemId, name, price, selectedImage, description) updateItem(itemId, name, price, selectedImage, description, promoPrice)
} }
/> />
))} ))}