kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
insvrgent
2025-02-12 15:00:08 +07:00
parent 98ed1fe365
commit e21e0f513f
3 changed files with 358 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/ItemLister.js
View File

@@ -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>
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"} &nbsp;
</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>
&nbsp;{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;
})}