latest update 27 jul 24
This commit is contained in:
zadit
197
src/components/Item.js
Normal file
197
src/components/Item.js
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import styles from "./Item.module.css";
|
||||
|
||||
const Item = ({
|
||||
blank,
|
||||
forCart,
|
||||
forInvoice,
|
||||
name: initialName,
|
||||
price: initialPrice,
|
||||
qty: initialQty,
|
||||
imageUrl,
|
||||
id,
|
||||
onPlusClick,
|
||||
onNegativeClick,
|
||||
handleCreateItem,
|
||||
onRemoveClick,
|
||||
}) => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
||||
const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
|
||||
const [itemName, setItemName] = useState(initialName);
|
||||
const [itemPrice, setItemPrice] = useState(initialPrice);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedImage) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setPreviewUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(selectedImage);
|
||||
} else {
|
||||
setPreviewUrl(imageUrl);
|
||||
}
|
||||
}, [selectedImage, imageUrl]);
|
||||
|
||||
const handlePlusClick = () => {
|
||||
if (!blank) onPlusClick(id);
|
||||
setItemQty(itemQty + 1);
|
||||
};
|
||||
|
||||
const handleNegativeClick = () => {
|
||||
if (itemQty > 0) {
|
||||
if (!blank) onNegativeClick(id);
|
||||
setItemQty(itemQty - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
handleCreateItem(itemName, itemPrice, itemQty, selectedImage);
|
||||
};
|
||||
|
||||
const handleRemoveClick = () => {
|
||||
onRemoveClick(id);
|
||||
};
|
||||
|
||||
const handleImageClick = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
setSelectedImage(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePriceChange = (event) => {
|
||||
setItemPrice(event.target.value);
|
||||
};
|
||||
|
||||
const handleQtyChange = (event) => {
|
||||
const newQty = parseInt(event.target.value, 10);
|
||||
if (!isNaN(newQty)) {
|
||||
setItemQty(newQty);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = (event) => {
|
||||
setItemName(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<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}
|
||||
className={styles.itemImage}
|
||||
/>
|
||||
{blank && (
|
||||
<div className={styles.overlay} onClick={handleImageClick}>
|
||||
<span>Click To Add Image</span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className={styles.fileInput}
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.itemDetails}>
|
||||
<input
|
||||
className={`${forInvoice ? styles.itemInvoiceName : styles.itemName} ${blank ? styles.blank : styles.notblank}`}
|
||||
value={itemName}
|
||||
onChange={handleNameChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
|
||||
{forInvoice && (
|
||||
<>
|
||||
<p className={styles.multiplySymbol}>x</p>
|
||||
<p className={styles.qtyInvoice}>{itemQty}</p>
|
||||
</>
|
||||
)}
|
||||
{!forInvoice && (
|
||||
<input
|
||||
className={`${styles.itemPrice} ${blank ? styles.blank : styles.notblank}`}
|
||||
value={itemPrice}
|
||||
onChange={handlePriceChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!forInvoice && (
|
||||
<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 && <p className={styles.itemQtyValue}>{itemQty}</p>}
|
||||
{blank && (
|
||||
<input
|
||||
className={styles.itemQtyInput}
|
||||
value={itemQty}
|
||||
onChange={handleQtyChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
|
||||
{forInvoice && (
|
||||
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
||||
)}
|
||||
</div>
|
||||
{forCart && (
|
||||
<div className={styles.remove} onClick={handleRemoveClick}>
|
||||
ⓧ
|
||||
</div>
|
||||
)}
|
||||
{blank && (
|
||||
<button className={styles.createItem} onClick={handleCreate}>
|
||||
Create Item
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
Reference in New Issue
Block a user