ok
This commit is contained in:
insvrgent
@@ -2,14 +2,28 @@ import React, { useState, useEffect, useRef } from "react";
|
||||
import styles from "./Modal.module.css";
|
||||
import { getImageUrl } from "../helpers/itemHelper.js";
|
||||
|
||||
const ItemConfig = ({ Item, cancelEdit }) => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [previewUrl, setPreviewUrl] = useState(Item.image);
|
||||
const ItemConfig = ({
|
||||
name: initialName,
|
||||
description: initialDescription,
|
||||
price: initialPrice,
|
||||
promoPrice: initialPromoPrice,
|
||||
imageUrl,
|
||||
imageFile,
|
||||
isBeingEdit,
|
||||
cancelEdit,
|
||||
handleCreateItem,
|
||||
handleUpdateItem
|
||||
}) => {
|
||||
const [selectedImage, setSelectedImage] = useState(imageFile);
|
||||
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
||||
const [itemName, setItemName] = useState(initialName);
|
||||
const [itemPrice, setItemPrice] = useState(initialPrice);
|
||||
const [itemPromoPrice, setItemPromoPrice] = useState(initialPromoPrice);
|
||||
const [itemDescription, setItemDescription] = useState(initialDescription);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const textareaRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(Item.image)
|
||||
|
||||
// Prevent scrolling when modal is open
|
||||
document.body.style.overflow = "hidden";
|
||||
@@ -21,10 +35,9 @@ const ItemConfig = ({ Item, cancelEdit }) => {
|
||||
};
|
||||
reader.readAsDataURL(selectedImage);
|
||||
} else {
|
||||
setPreviewUrl(Item.image);
|
||||
setPreviewUrl(imageUrl);
|
||||
}
|
||||
}, [selectedImage, Item]);
|
||||
|
||||
}, [selectedImage, imageUrl]);
|
||||
|
||||
const handleOverlayClick = (event) => {
|
||||
// Prevent scrolling when modal is open
|
||||
@@ -32,19 +45,15 @@ const ItemConfig = ({ Item, cancelEdit }) => {
|
||||
cancelEdit();
|
||||
};
|
||||
|
||||
|
||||
// Function to handle clicks on the modal content
|
||||
const handleContentClick = (event) => {
|
||||
// Prevent click event from propagating to the overlay
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
|
||||
const handleChangeImage = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
@@ -52,13 +61,35 @@ const ItemConfig = ({ Item, cancelEdit }) => {
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 200, backgroundColor: '#00000061' }}>
|
||||
<div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', height: '40%', backgroundColor: 'white', borderRadius: '20px 20px 0 0' }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ width: '26vw', height: '26vw' }}>
|
||||
<img style={{ width: '100%', height: '100%', borderRadius: '10px', objectFit: 'cover' }} src={selectedImage ? previewUrl : getImageUrl(previewUrl)}></img>
|
||||
useEffect(() => {
|
||||
const textarea = textareaRef.current;
|
||||
|
||||
if (textarea) {
|
||||
const handleResize = () => {
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = `${textarea.scrollHeight}px`;
|
||||
};
|
||||
|
||||
handleResize(); // Initial resize
|
||||
|
||||
textarea.addEventListener("input", handleResize);
|
||||
return () => textarea.removeEventListener("input", handleResize);
|
||||
}
|
||||
}, [textareaRef.current]);
|
||||
|
||||
const handleCreate = () => {
|
||||
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
|
||||
};
|
||||
const handleUpdate = () => {
|
||||
handleUpdateItem(itemName, itemPrice, selectedImage, previewUrl);
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 301, backgroundColor: '#00000061' }}>
|
||||
<div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', backgroundColor: 'white', borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ width: '26vw', height: '26vw', marginRight: '10px' }}>
|
||||
<img style={{ width: '100%', height: '100%', borderRadius: '10px', objectFit: 'cover' }} src={previewUrl} />
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
@@ -69,27 +100,106 @@ const ItemConfig = ({ Item, cancelEdit }) => {
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div onClick={() => handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white' }}>
|
||||
Ganti gambar
|
||||
<div onClick={() => handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
|
||||
<p>Nama item</p>
|
||||
<input value={Item.name}></input>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', color: 'black', marginTop: '10px' }}>
|
||||
<p style={{ marginBottom: '5px', fontWeight: '500' }}>Nama item</p>
|
||||
<input
|
||||
value={itemName}
|
||||
style={{
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '14px',
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
outline: 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
boxSizing: 'border-box', // Make sure the padding doesn't cause overflow
|
||||
}}
|
||||
onChange={(e)=>setItemName(e.target.value)}
|
||||
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#ccc'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', color: 'black', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<p>Harga</p>
|
||||
<input value={Item.price}></input>
|
||||
</div><div>
|
||||
<p>Harga promo</p>
|
||||
<input placeholder="Opsional"></input>
|
||||
<div style={{ width: '48%' }}>
|
||||
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga</p>
|
||||
<input
|
||||
value={itemPrice}
|
||||
style={{
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '14px',
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
outline: 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
onChange={(e)=>setItemPrice(e.target.value)}
|
||||
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#ccc'}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: '48%' }}>
|
||||
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga promo</p>
|
||||
<input
|
||||
value={itemPromoPrice}
|
||||
placeholder="Opsional"
|
||||
style={{
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '14px',
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
outline: 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
onChange={(e)=>setItemPromoPrice(e.target.value)}
|
||||
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#ccc'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
|
||||
<p>Deskripsi</p>
|
||||
<input value={Item.description}></input>
|
||||
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Deskripsi</p>
|
||||
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
style={{
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '14px',
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
outline: 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
boxSizing: 'border-box',
|
||||
resize: 'none', // Prevent manual resize that could cause overflow
|
||||
}}
|
||||
placeholder="Tambah deskripsi..."
|
||||
value={initialDescription}
|
||||
onChange={(e)=>setItemDescription(e.target.value)}
|
||||
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#ccc'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ width: '100%', height: '35px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{isBeingEdit? 'Simpan' : 'Buat Item'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
101
src/components/ItemConfig.module.css
Normal file
101
src/components/ItemConfig.module.css
Normal file
@@ -0,0 +1,101 @@
|
||||
/* Modal.module.css */
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
z-index: 200;
|
||||
background-color: rgba(0, 0, 0, 0.38); /* #00000061 */
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
height: 40%;
|
||||
background-color: white;
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 26vw;
|
||||
height: 26vw;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.imagePreview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.changeImageButton {
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #60d37e;
|
||||
color: #60d37e;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inputField {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inputField:focus {
|
||||
border-color: #60d37e;
|
||||
}
|
||||
|
||||
.inputField:blur {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
resize: none; /* Prevent manual resize that could cause overflow */
|
||||
}
|
||||
|
||||
.saveButton {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #60d37e;
|
||||
color: #60d37e;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -70,6 +70,9 @@ const ItemLister = ({
|
||||
|
||||
const [isFirstStep, setIsFirstStep] = useState(true);
|
||||
|
||||
|
||||
const [randomKey, setRandomKey] = useState(0);
|
||||
|
||||
const handlePlusClick = (itemId) => {
|
||||
const updatedItems = items.map((item) => {
|
||||
if (item.itemId === itemId) {
|
||||
@@ -220,7 +223,41 @@ const ItemLister = ({
|
||||
const onUpdateItem = (itemId, name, price, image) => {
|
||||
if (isEdit)
|
||||
setItemsToUpdate((prev) => [...prev, { itemId, name, price, image }]);
|
||||
else handleUpdateItem(itemId, name, price, image);
|
||||
else {
|
||||
console.log(itemId, name, price, image)
|
||||
handleUpdateItem(itemId, name, price, image);
|
||||
|
||||
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)
|
||||
// Toggle the availability locally
|
||||
if(image){
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
updatedItems[itemIndex].image = reader.result;
|
||||
console.log(reader.result)
|
||||
};
|
||||
reader.readAsDataURL(image);
|
||||
|
||||
|
||||
}
|
||||
const newAvailability = !item.availability;
|
||||
updatedItems[itemIndex] = {
|
||||
name,
|
||||
price,
|
||||
availability: item.availability
|
||||
};
|
||||
console.log(updatedItems)
|
||||
|
||||
// Update the state with the local change
|
||||
setItems(updatedItems);
|
||||
setRandomKey(randomKey + 1);
|
||||
|
||||
}
|
||||
console.log(itemsToUpdate);
|
||||
};
|
||||
|
||||
@@ -779,13 +816,10 @@ const ItemLister = ({
|
||||
)}
|
||||
{isAddingNewItem && (
|
||||
<>
|
||||
<button
|
||||
className={styles["add-item-button"]}
|
||||
onClick={toggleAddNewItem}
|
||||
style={{ display: "inline-block" }}
|
||||
>
|
||||
batal
|
||||
</button>
|
||||
<ItemConfig
|
||||
cancelEdit={() => toggleAddNewItem()}
|
||||
handleCreateItem={onCreateItem}
|
||||
/>
|
||||
<Item blank={true} handleCreateItem={onCreateItem} />
|
||||
</>
|
||||
)}
|
||||
@@ -796,54 +830,65 @@ const ItemLister = ({
|
||||
return !forCart || (forCart && item.qty > 0) ? (
|
||||
<>
|
||||
{isEditItem == item.itemId && (
|
||||
<button
|
||||
className={styles["add-item-button"]}
|
||||
onClick={() => editItem(0)}
|
||||
style={{ display: "inline-block" }}
|
||||
>
|
||||
batal
|
||||
</button>
|
||||
<ItemConfig
|
||||
isBeingEdit={true}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
promoPrice={item.promoPrice}
|
||||
description={item.description}
|
||||
imageUrl={item.image}
|
||||
imageFile={item.selectedImage}
|
||||
cancelEdit={() => editItem(0)}
|
||||
handleUpdateItem={(name, price, image) => { updateItemInCreate(item.itemId, name, price, image); setRandomKey(randomKey + 1); console.log(image) }
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className={styles["itemWrapper"]}>
|
||||
{isEditMode && isEditItem != item.itemId && (
|
||||
|
||||
<div className={styles["editModeLayout"]}>
|
||||
{isEditMode && (
|
||||
<Switch
|
||||
onChange={() => handleChange(item.itemId)}
|
||||
checked={item.availability}
|
||||
/>
|
||||
)}
|
||||
<h3>
|
||||
{item.availability ? "Tersedia" : "Tidak tersedia"}
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px', // Add a height to the div
|
||||
display: 'flex', // Use flexbox
|
||||
justifyContent: 'center', // Center horizontally
|
||||
alignItems: 'center', // Center vertically
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => editItem(item.itemId)}
|
||||
>
|
||||
<svg
|
||||
fill="white"
|
||||
viewBox="0 0 32 32"
|
||||
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
|
||||
version="1.1"
|
||||
xmlSpace="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsSerif="http://www.serif.com/"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
<div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
|
||||
{isEditMode && (
|
||||
<Switch
|
||||
onChange={() => handleChange(item.itemId)}
|
||||
checked={item.availability}
|
||||
/>
|
||||
)}
|
||||
<h3>
|
||||
{item.availability ? "Tersedia" : "Tidak tersedia"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px', // Add a height to the div
|
||||
display: 'flex', // Use flexbox
|
||||
justifyContent: 'center', // Center horizontally
|
||||
alignItems: 'center', // Center vertically
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
|
||||
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
fill="white"
|
||||
viewBox="0 0 32 32"
|
||||
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
|
||||
version="1.1"
|
||||
xmlSpace="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsSerif="http://www.serif.com/"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
|
||||
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Edit item</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -873,7 +918,8 @@ const ItemLister = ({
|
||||
|
||||
{items.map((item) => {
|
||||
return !forCart || (forCart && item.qty > 0) ? (
|
||||
<>
|
||||
<div
|
||||
key={item.itemId}>
|
||||
{isEditItem == item.itemId && (
|
||||
// <button
|
||||
// className={styles["add-item-button"]}
|
||||
@@ -882,7 +928,23 @@ const ItemLister = ({
|
||||
// >
|
||||
// batal
|
||||
// </button>
|
||||
<ItemConfig Item={item} cancelEdit={()=>editItem(0)}/>
|
||||
<ItemConfig
|
||||
isBeingEdit={true}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
promoPrice={item.promoPrice}
|
||||
description={item.description}
|
||||
imageUrl={
|
||||
itemTypeId ? getImageUrl(item.image) : item.image
|
||||
}
|
||||
cancelEdit={() => editItem(0)}
|
||||
handleCreateItem={onCreateItem}
|
||||
handleUpdateItem={(name, price, image) => {
|
||||
onUpdateItem(item.itemId, name, price, image);
|
||||
setRandomKey(randomKey + 1); console.log(image);
|
||||
}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className={styles["itemWrapper"]}>
|
||||
{isEditMode && isEditItem != item.itemId && (
|
||||
@@ -953,7 +1015,7 @@ const ItemLister = ({
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user