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

353
src/components/Item.js
View File

@@ -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>
);
};

12
src/components/ItemConfig.js
View File

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

45
src/components/ItemLister.js
View File

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