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>
|
||||
|
||||
Reference in New Issue
Block a user