ok
This commit is contained in:
@@ -5,6 +5,7 @@ const Item = ({
|
||||
forCart,
|
||||
forInvoice,
|
||||
name: initialName,
|
||||
description: initialDescription,
|
||||
price: initialPrice,
|
||||
qty: initialQty,
|
||||
imageUrl,
|
||||
@@ -23,6 +24,7 @@ const Item = ({
|
||||
const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
|
||||
const [itemName, setItemName] = useState(initialName);
|
||||
const [itemPrice, setItemPrice] = useState(initialPrice);
|
||||
const [itemDescription, setItemDescription] = useState(initialDescription);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -89,6 +91,7 @@ const Item = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
||||
{!forInvoice && (
|
||||
<div className={styles.imageContainer}>
|
||||
@@ -113,7 +116,7 @@ const Item = ({
|
||||
{(isBeingEdit || blank) && (
|
||||
<div className={styles.overlay} onClick={handleImageClick}>
|
||||
<span>
|
||||
{previewUrl ? "Click To Change Image" : "Click To Add Image"}
|
||||
{previewUrl ? "Ganti gambar" : "Tambah gambar"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -153,7 +156,7 @@ const Item = ({
|
||||
!isAvailable ? styles.disabled : ""
|
||||
}`}
|
||||
value={itemName}
|
||||
placeholder="name"
|
||||
placeholder="Nama item"
|
||||
onChange={handleNameChange}
|
||||
disabled={!blank && !isBeingEdit}
|
||||
/>
|
||||
@@ -170,7 +173,7 @@ const Item = ({
|
||||
isBeingEdit || blank ? styles.blank : styles.notblank
|
||||
} ${!isAvailable ? styles.disabled : ""}`}
|
||||
value={itemPrice}
|
||||
placeholder="price"
|
||||
placeholder="Harga"
|
||||
onChange={handlePriceChange}
|
||||
disabled={!blank && !isBeingEdit}
|
||||
/>
|
||||
@@ -242,7 +245,7 @@ const Item = ({
|
||||
}}
|
||||
onClick={isBeingEdit ? handleUpdate : handleCreate}
|
||||
>
|
||||
{isBeingEdit ? "save" : "+"}
|
||||
{isBeingEdit ? "Simpan" : "Buat"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -262,6 +265,12 @@ const Item = ({
|
||||
</button>
|
||||
)} */}
|
||||
</div>
|
||||
{itemDescription?.length &&
|
||||
<div>
|
||||
<p style={{color: '#5f5f5f', fontSize: '3.2vw', padding: '5px'}}>{itemDescription}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -39,8 +39,8 @@
|
||||
}
|
||||
|
||||
.itemImage {
|
||||
width: 119px;
|
||||
height: 129px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
object-fit: cover;
|
||||
@@ -49,16 +49,16 @@
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 119px;
|
||||
height: 129px;
|
||||
width: 26vw;
|
||||
height: 26vw;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 15px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
display: flex;
|
||||
@@ -67,6 +67,7 @@
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
font-size: 3.3vw;
|
||||
}
|
||||
|
||||
.overlay:hover {
|
||||
@@ -99,7 +100,7 @@
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
font-style: normal;
|
||||
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
|
||||
font-size: 1.4rem;
|
||||
font-size: 5vw;
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
margin: 0 5px;
|
||||
@@ -128,10 +129,10 @@
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
|
||||
font-size: 0.9rem;
|
||||
font-size: 3.3vw;
|
||||
/* margin-bottom: 35px; */
|
||||
margin-left: 5px;
|
||||
color: #d9c61c;
|
||||
color: #3a3a3a;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -184,11 +185,11 @@
|
||||
border: 2px solid #73a585;
|
||||
/* border: none; */
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 95px;
|
||||
height: 35px;
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
border-radius: 20px;
|
||||
|
||||
@@ -496,7 +496,7 @@ const ItemLister = ({
|
||||
key={itemTypeId}
|
||||
className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : ""
|
||||
}`}
|
||||
style={{ paddingBottom: isEdit ? "28vh" : "" }}
|
||||
style={{ paddingBottom: isEdit ? "258px" : "" }}
|
||||
>
|
||||
|
||||
{(isEdit && isFirstStep || !isEdit) &&
|
||||
@@ -769,11 +769,11 @@ const ItemLister = ({
|
||||
onClick={toggleAddNewItem}
|
||||
style={{
|
||||
display: "inline-block",
|
||||
height: "159px",
|
||||
fontSize: "50px",
|
||||
height: "120px",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
>
|
||||
+
|
||||
Tambah item +
|
||||
</button>
|
||||
)}
|
||||
{isAddingNewItem && (
|
||||
@@ -813,7 +813,7 @@ const ItemLister = ({
|
||||
/>
|
||||
)}
|
||||
<h3>
|
||||
{item.availability ? "tersedia" : "tidak tersedia"}
|
||||
{item.availability ? "Tersedia" : "Tidak tersedia"}
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
@@ -885,7 +885,7 @@ const ItemLister = ({
|
||||
<div className={styles["itemWrapper"]}>
|
||||
{isEditMode && isEditItem != item.itemId && (
|
||||
<div className={styles["editModeLayout"]}>
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw'}}>
|
||||
{isEditMode && (
|
||||
<Switch
|
||||
onChange={() => handleChange(item.itemId)}
|
||||
@@ -893,11 +893,11 @@ const ItemLister = ({
|
||||
/>
|
||||
)}
|
||||
<h3>
|
||||
{item.availability ? "tersedia" : "tidak tersedia"}
|
||||
{item.availability ? "Tersedia" : "Tidak tersedia"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
<div onClick={() => editItem(item.itemId)} style={{display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw'}}>
|
||||
<div
|
||||
style={{
|
||||
width: '32px',
|
||||
@@ -907,7 +907,6 @@ const ItemLister = ({
|
||||
alignItems: 'center', // Center vertically
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => editItem(item.itemId)}
|
||||
>
|
||||
<svg
|
||||
fill="white"
|
||||
|
||||
@@ -143,11 +143,11 @@
|
||||
width: 100%;
|
||||
top: 7px;
|
||||
bottom: -4px;
|
||||
display: flex
|
||||
;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.PaymentOption {
|
||||
@@ -197,7 +197,7 @@
|
||||
font-size: 32px;
|
||||
|
||||
width: 80vw;
|
||||
height: 18vw;
|
||||
height: 70px;
|
||||
border-radius: 50px;
|
||||
background-color: rgba(88, 55, 50, 1);
|
||||
color: white;
|
||||
|
||||
Reference in New Issue
Block a user