ok
This commit is contained in:
@@ -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);
|
||||||
@@ -92,64 +90,46 @@ const Item = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
||||||
{!forInvoice && (
|
{!forInvoice && (
|
||||||
<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 }) => {
|
||||||
}
|
currentTarget.onerror = null; // prevents looping
|
||||||
onError={({ currentTarget }) => {
|
currentTarget.src =
|
||||||
currentTarget.onerror = null; // prevents looping
|
"https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
|
||||||
currentTarget.src =
|
}}
|
||||||
"https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
|
alt={itemName}
|
||||||
}}
|
style={{
|
||||||
alt={itemName}
|
filter: !isAvailable ? "grayscale(100%)" : "none",
|
||||||
style={{
|
}}
|
||||||
filter: !isAvailable ? "grayscale(100%)" : "none",
|
className={styles.itemImage}
|
||||||
}}
|
/>
|
||||||
className={styles.itemImage}
|
</div>
|
||||||
/>
|
)}
|
||||||
|
<div className={styles.itemDetails}>
|
||||||
{(isBeingEdit || blank) && (
|
{forInvoice &&
|
||||||
<div className={styles.overlay} onClick={handleImageClick}>
|
<svg
|
||||||
<span>
|
className={styles.plusNegative2}
|
||||||
{previewUrl ? "Ganti gambar" : "Tambah gambar"}
|
onClick={onRemoveClick}
|
||||||
</span>
|
clipRule="evenodd"
|
||||||
</div>
|
fillRule="evenodd"
|
||||||
)}
|
strokeLinejoin="round"
|
||||||
<input
|
strokeMiterlimit="2"
|
||||||
type="file"
|
viewBox="0 0 24 24"
|
||||||
ref={fileInputRef}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
className={styles.fileInput}
|
>
|
||||||
onChange={handleFileChange}
|
|
||||||
accept="image/*"
|
|
||||||
style={{ display: "none" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className={styles.itemDetails}>
|
|
||||||
{forInvoice &&
|
|
||||||
<svg
|
|
||||||
className={styles.plusNegative2}
|
|
||||||
onClick={onRemoveClick}
|
|
||||||
clipRule="evenodd"
|
|
||||||
fillRule="evenodd"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeMiterlimit="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
|
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
|
||||||
fillRule="nonzero"
|
fillRule="nonzero"
|
||||||
/>
|
/>
|
||||||
</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,117 +139,160 @@ 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 && (
|
||||||
|
<>
|
||||||
|
<p className={styles.multiplySymbol}>x</p>
|
||||||
|
<p className={styles.qtyInvoice}>{itemQty}</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{!forInvoice && (
|
||||||
|
// <input
|
||||||
|
// className={`${styles.itemPrice} ${
|
||||||
|
// isBeingEdit || blank ? styles.blank : styles.notblank
|
||||||
|
// } ${!isAvailable ? styles.disabled : ""}`}
|
||||||
|
// value={itemPrice}
|
||||||
|
// placeholder="Harga"
|
||||||
|
// onChange={handlePriceChange}
|
||||||
|
// disabled={!blank && !isBeingEdit}
|
||||||
|
// />
|
||||||
|
|
||||||
{forInvoice && (
|
<div style={{
|
||||||
<>
|
display: 'flex',
|
||||||
<p className={styles.multiplySymbol}>x</p>
|
flexWrap: 'wrap',
|
||||||
<p className={styles.qtyInvoice}>{itemQty}</p>
|
alignItems: 'center',
|
||||||
</>
|
color: 'rgb(28, 29, 29)',
|
||||||
)}
|
fontSize: '0.875rem',
|
||||||
{!forInvoice && (
|
fontWeight: 600,
|
||||||
<input
|
lineHeight: '1rem',
|
||||||
className={`${styles.itemPrice} ${
|
marginLeft: 10
|
||||||
isBeingEdit || blank ? styles.blank : styles.notblank
|
}}>
|
||||||
} ${!isAvailable ? styles.disabled : ""}`}
|
{promoPrice && promoPrice != 0 && promoPrice != '' &&
|
||||||
value={itemPrice}
|
<div style={{
|
||||||
placeholder="Harga"
|
position: 'relative',
|
||||||
onChange={handlePriceChange}
|
marginTop: '0.125rem',
|
||||||
disabled={!blank && !isBeingEdit}
|
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 &&
|
||||||
(!isBeingEdit && itemQty != 0 ? (
|
(!isBeingEdit && itemQty != 0 ? (
|
||||||
<div className={styles.itemQty}>
|
<div className={styles.itemQty}>
|
||||||
<svg
|
<svg
|
||||||
className={styles.plusNegative}
|
className={styles.plusNegative}
|
||||||
onClick={handleNegativeClick}
|
onClick={handleNegativeClick}
|
||||||
clipRule="evenodd"
|
clipRule="evenodd"
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeMiterlimit="2"
|
strokeMiterlimit="2"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"
|
d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"
|
||||||
fillRule="nonzero"
|
fillRule="nonzero"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
{!blank && !isBeingEdit ? (
|
{!blank && !isBeingEdit ? (
|
||||||
<p className={styles.itemQtyValue}>{itemQty}</p>
|
<p className={styles.itemQtyValue}>{itemQty}</p>
|
||||||
) : (
|
) : (
|
||||||
<input
|
<input
|
||||||
className={styles.itemQtyInput}
|
className={styles.itemQtyInput}
|
||||||
value={itemQty}
|
value={itemQty}
|
||||||
onChange={handleQtyChange}
|
onChange={handleQtyChange}
|
||||||
disabled={!blank && !isBeingEdit}
|
disabled={!blank && !isBeingEdit}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<svg
|
<svg
|
||||||
className={styles.plusNegative}
|
className={styles.plusNegative}
|
||||||
onClick={handlePlusClick}
|
onClick={handlePlusClick}
|
||||||
clipRule="evenodd"
|
clipRule="evenodd"
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeMiterlimit="2"
|
strokeMiterlimit="2"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
|
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
|
||||||
fillRule="nonzero"
|
fillRule="nonzero"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
) : !blank && !isBeingEdit ? (
|
) : !blank && !isBeingEdit ? (
|
||||||
<div className={styles.itemQty}>
|
<div className={styles.itemQty}>
|
||||||
<button
|
<button
|
||||||
className={styles.addButton}
|
className={styles.addButton}
|
||||||
style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable? 'inherit': 'gray'}`, color: `${isAvailable? '#73a585': 'gray'}`}}
|
style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#73a585' : 'gray'}` }}
|
||||||
onClick={handlePlusClick}
|
onClick={handlePlusClick}
|
||||||
disabled={!isAvailable} // Optionally disable the button if not available
|
disabled={!isAvailable} // Optionally disable the button if not available
|
||||||
>
|
>
|
||||||
Pesan
|
Pesan
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.itemQty}>
|
<div className={styles.itemQty}>
|
||||||
<button
|
<button
|
||||||
className={styles.addButton}
|
className={styles.addButton}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
width: "150px",
|
width: "150px",
|
||||||
color: '#73a585'
|
color: '#73a585'
|
||||||
}}
|
}}
|
||||||
onClick={isBeingEdit ? handleUpdate : handleCreate}
|
onClick={isBeingEdit ? handleUpdate : handleCreate}
|
||||||
>
|
>
|
||||||
{isBeingEdit ? "Simpan" : "Buat"}
|
{isBeingEdit ? "Simpan" : "Buat"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{forInvoice && (
|
{forInvoice && (
|
||||||
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
{forCart && (
|
|
||||||
<div className={styles.remove} onClick={handleRemoveClick}>
|
|
||||||
ⓧ
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
{forCart && (
|
||||||
{/* {blank && (
|
<div className={styles.remove} onClick={handleRemoveClick}>
|
||||||
|
ⓧ
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* {blank && (
|
||||||
<button className={styles.createItem} onClick={handleCreate}>
|
<button className={styles.createItem} onClick={handleCreate}>
|
||||||
Create Item
|
Create Item
|
||||||
</button>
|
</button>
|
||||||
)} */}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
{itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
|
{itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
|
||||||
<div>
|
<div>
|
||||||
<p style={{color: '#5f5f5f', fontSize: '3.2vw', padding: '5px'}}>{itemDescription}</p>
|
<p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px' }}>{itemDescription}</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user