ok
This commit is contained in:
zadit
@@ -7,6 +7,7 @@ const Item = ({
|
||||
name: initialName,
|
||||
description: initialDescription,
|
||||
price: initialPrice,
|
||||
promoPrice,
|
||||
qty: initialQty,
|
||||
imageUrl,
|
||||
imageFile,
|
||||
@@ -30,16 +31,13 @@ const Item = ({
|
||||
useEffect(() => {
|
||||
console.log(imageUrl);
|
||||
console.log(selectedImage);
|
||||
if (selectedImage) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setPreviewUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(selectedImage);
|
||||
console.log(imageFile)
|
||||
if (imageFile) {
|
||||
setPreviewUrl(imageFile);
|
||||
} else {
|
||||
setPreviewUrl(imageUrl);
|
||||
}
|
||||
}, [selectedImage, imageUrl]);
|
||||
}, [imageFile, imageUrl]);
|
||||
|
||||
const handlePlusClick = () => {
|
||||
if (!blank) onPlusClick(id);
|
||||
@@ -89,67 +87,49 @@ const Item = ({
|
||||
const handleNameChange = (event) => {
|
||||
setItemName(event.target.value);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
||||
{!forInvoice && (
|
||||
<div className={styles.imageContainer}>
|
||||
<img
|
||||
src={
|
||||
blank || previewUrl || isBeingEdit
|
||||
? 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
|
||||
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={{
|
||||
filter: !isAvailable ? "grayscale(100%)" : "none",
|
||||
}}
|
||||
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 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"
|
||||
>
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
||||
{!forInvoice && (
|
||||
<div className={styles.imageContainer}>
|
||||
<img
|
||||
src={
|
||||
previewUrl
|
||||
}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.onerror = null; // prevents looping
|
||||
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={{
|
||||
filter: !isAvailable ? "grayscale(100%)" : "none",
|
||||
}}
|
||||
className={styles.itemImage}
|
||||
/>
|
||||
</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
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
}
|
||||
<input
|
||||
</svg>
|
||||
|
||||
}
|
||||
{/* <input
|
||||
className={`${
|
||||
forInvoice ? styles.itemInvoiceName : styles.itemName
|
||||
} ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
|
||||
@@ -159,117 +139,160 @@ const Item = ({
|
||||
placeholder="Nama item"
|
||||
onChange={handleNameChange}
|
||||
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 && (
|
||||
<>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
<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 &&
|
||||
(!isBeingEdit && itemQty != 0 ? (
|
||||
<div className={styles.itemQty}>
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handleNegativeClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
{!blank && !isBeingEdit ? (
|
||||
<p className={styles.itemQtyValue}>{itemQty}</p>
|
||||
) : (
|
||||
<input
|
||||
className={styles.itemQtyInput}
|
||||
value={itemQty}
|
||||
onChange={handleQtyChange}
|
||||
disabled={!blank && !isBeingEdit}
|
||||
/>
|
||||
)}
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handlePlusClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : !blank && !isBeingEdit ? (
|
||||
<div className={styles.itemQty}>
|
||||
<button
|
||||
className={styles.addButton}
|
||||
style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable? 'inherit': 'gray'}`, color: `${isAvailable? '#73a585': 'gray'}`}}
|
||||
onClick={handlePlusClick}
|
||||
disabled={!isAvailable} // Optionally disable the button if not available
|
||||
>
|
||||
Pesan
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.itemQty}>
|
||||
<button
|
||||
className={styles.addButton}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: "150px",
|
||||
color: '#73a585'
|
||||
}}
|
||||
onClick={isBeingEdit ? handleUpdate : handleCreate}
|
||||
>
|
||||
{isBeingEdit ? "Simpan" : "Buat"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{!forInvoice &&
|
||||
(!isBeingEdit && itemQty != 0 ? (
|
||||
<div className={styles.itemQty}>
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handleNegativeClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
{!blank && !isBeingEdit ? (
|
||||
<p className={styles.itemQtyValue}>{itemQty}</p>
|
||||
) : (
|
||||
<input
|
||||
className={styles.itemQtyInput}
|
||||
value={itemQty}
|
||||
onChange={handleQtyChange}
|
||||
disabled={!blank && !isBeingEdit}
|
||||
/>
|
||||
)}
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handlePlusClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : !blank && !isBeingEdit ? (
|
||||
<div className={styles.itemQty}>
|
||||
<button
|
||||
className={styles.addButton}
|
||||
style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#73a585' : 'gray'}` }}
|
||||
onClick={handlePlusClick}
|
||||
disabled={!isAvailable} // Optionally disable the button if not available
|
||||
>
|
||||
Pesan
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.itemQty}>
|
||||
<button
|
||||
className={styles.addButton}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: "150px",
|
||||
color: '#73a585'
|
||||
}}
|
||||
onClick={isBeingEdit ? handleUpdate : handleCreate}
|
||||
>
|
||||
{isBeingEdit ? "Simpan" : "Buat"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{forInvoice && (
|
||||
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
||||
)}
|
||||
</div>
|
||||
{forCart && (
|
||||
<div className={styles.remove} onClick={handleRemoveClick}>
|
||||
ⓧ
|
||||
{forInvoice && (
|
||||
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* {blank && (
|
||||
{forCart && (
|
||||
<div className={styles.remove} onClick={handleRemoveClick}>
|
||||
ⓧ
|
||||
</div>
|
||||
)}
|
||||
{/* {blank && (
|
||||
<button className={styles.createItem} onClick={handleCreate}>
|
||||
Create Item
|
||||
</button>
|
||||
)} */}
|
||||
</div>
|
||||
{itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
|
||||
<div>
|
||||
<p style={{color: '#5f5f5f', fontSize: '3.2vw', padding: '5px'}}>{itemDescription}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
|
||||
<div>
|
||||
<p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px' }}>{itemDescription}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user