kediritechnopark/kedaimaster
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

172
src/components/ItemConfig.js
View File

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

102
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,17 +830,24 @@ 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"]}>
<div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
{isEditMode && (
<Switch
onChange={() => handleChange(item.itemId)}
@@ -814,8 +855,11 @@ const ItemLister = ({
/>
)}
<h3>
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"} &nbsp;
&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',
@@ -825,7 +869,6 @@ const ItemLister = ({
alignItems: 'center', // Center vertically
cursor: 'pointer'
}}
onClick={() => editItem(item.itemId)}
>
<svg
fill="white"
@@ -845,6 +888,8 @@ const ItemLister = ({
</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;
})}