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-10 16:00:27 +07:00
parent 49f6b37905
commit 2a762a9610
4 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Item.js
View File

@@ -5,6 +5,7 @@ const Item = ({
forCart, forCart,
forInvoice, forInvoice,
name: initialName, name: initialName,
description: initialDescription,
price: initialPrice, price: initialPrice,
qty: initialQty, qty: initialQty,
imageUrl, imageUrl,
@@ -23,6 +24,7 @@ const Item = ({
const [itemQty, setItemQty] = useState(blank ? 0 : initialQty); const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
const [itemName, setItemName] = useState(initialName); const [itemName, setItemName] = useState(initialName);
const [itemPrice, setItemPrice] = useState(initialPrice); const [itemPrice, setItemPrice] = useState(initialPrice);
const [itemDescription, setItemDescription] = useState(initialDescription);
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
useEffect(() => { useEffect(() => {
@@ -89,6 +91,7 @@ const Item = ({
}; };
return ( return (
<div>
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}> <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
{!forInvoice && ( {!forInvoice && (
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
@@ -113,7 +116,7 @@ const Item = ({
{(isBeingEdit || blank) && ( {(isBeingEdit || blank) && (
<div className={styles.overlay} onClick={handleImageClick}> <div className={styles.overlay} onClick={handleImageClick}>
<span> <span>
{previewUrl ? "Click To Change Image" : "Click To Add Image"} {previewUrl ? "Ganti gambar" : "Tambah gambar"}
</span> </span>
</div> </div>
)} )}
@@ -153,7 +156,7 @@ const Item = ({
!isAvailable ? styles.disabled : "" !isAvailable ? styles.disabled : ""
}`} }`}
value={itemName} value={itemName}
placeholder="name" placeholder="Nama item"
onChange={handleNameChange} onChange={handleNameChange}
disabled={!blank && !isBeingEdit} disabled={!blank && !isBeingEdit}
/> />
@@ -170,7 +173,7 @@ const Item = ({
isBeingEdit || blank ? styles.blank : styles.notblank isBeingEdit || blank ? styles.blank : styles.notblank
} ${!isAvailable ? styles.disabled : ""}`} } ${!isAvailable ? styles.disabled : ""}`}
value={itemPrice} value={itemPrice}
placeholder="price" placeholder="Harga"
onChange={handlePriceChange} onChange={handlePriceChange}
disabled={!blank && !isBeingEdit} disabled={!blank && !isBeingEdit}
/> />
@@ -242,7 +245,7 @@ const Item = ({
}} }}
onClick={isBeingEdit ? handleUpdate : handleCreate} onClick={isBeingEdit ? handleUpdate : handleCreate}
> >
{isBeingEdit ? "save" : "+"} {isBeingEdit ? "Simpan" : "Buat"}
</button> </button>
</div> </div>
))} ))}
@@ -262,6 +265,12 @@ const Item = ({
</button> </button>
)} */} )} */}
</div> </div>
{itemDescription?.length &&
<div>
<p style={{color: '#5f5f5f', fontSize: '3.2vw', padding: '5px'}}>{itemDescription}</p>
</div>
}
</div>
); );
}; };

29
src/components/Item.module.css
View File

@@ -39,8 +39,8 @@
} }
.itemImage { .itemImage {
width: 119px; width: 100%;
height: 129px; height: 100%;
border-radius: 10px; border-radius: 10px;
margin-right: 10px; margin-right: 10px;
object-fit: cover; object-fit: cover;
@@ -49,16 +49,16 @@
.imageContainer { .imageContainer {
position: relative; position: relative;
width: 119px; width: 26vw;
height: 129px; height: 26vw;
} }
.overlay { .overlay {
position: absolute; position: absolute;
top: 0; top: 15px;
left: 0; left: 8px;
right: 0; right: 8px;
bottom: 0; bottom: 15px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: white; color: white;
display: flex; display: flex;
@@ -67,6 +67,7 @@
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
font-size: 3.3vw;
} }
.overlay:hover { .overlay:hover {
@@ -99,7 +100,7 @@
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal; font-style: normal;
width: calc(100% - 15px); /* Adjust the width to prevent overflow */ width: calc(100% - 15px); /* Adjust the width to prevent overflow */
font-size: 1.4rem; font-size: 5vw;
font-weight: 500; font-weight: 500;
margin-top: 0; margin-top: 0;
margin: 0 5px; margin: 0 5px;
@@ -128,10 +129,10 @@
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
width: calc(100% - 15px); /* Adjust the width to prevent overflow */ width: calc(100% - 15px); /* Adjust the width to prevent overflow */
font-size: 0.9rem; font-size: 3.3vw;
/* margin-bottom: 35px; */ /* margin-bottom: 35px; */
margin-left: 5px; margin-left: 5px;
color: #d9c61c; color: #3a3a3a;
background-color: transparent; background-color: transparent;
} }
@@ -184,11 +185,11 @@
border: 2px solid #73a585; border: 2px solid #73a585;
/* border: none; */ /* border: none; */
display: inline-block; display: inline-block;
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
width: 95px; width: 87px;
height: 35px; height: 32px;
margin-left: 5px; margin-left: 5px;
margin-top: 5px; margin-top: 5px;
border-radius: 20px; border-radius: 20px;

17
src/components/ItemLister.js
View File

@@ -496,7 +496,7 @@ const ItemLister = ({
key={itemTypeId} key={itemTypeId}
className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : "" className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : ""
}`} }`}
style={{ paddingBottom: isEdit ? "28vh" : "" }} style={{ paddingBottom: isEdit ? "258px" : "" }}
> >
{(isEdit && isFirstStep || !isEdit) && {(isEdit && isFirstStep || !isEdit) &&
@@ -769,11 +769,11 @@ const ItemLister = ({
onClick={toggleAddNewItem} onClick={toggleAddNewItem}
style={{ style={{
display: "inline-block", display: "inline-block",
height: "159px", height: "120px",
fontSize: "50px", fontSize: "20px",
}} }}
> >
+ Tambah item +
</button> </button>
)} )}
{isAddingNewItem && ( {isAddingNewItem && (
@@ -813,7 +813,7 @@ const ItemLister = ({
/> />
)} )}
<h3> <h3>
&nbsp;{item.availability ? "tersedia" : "tidak tersedia"} &nbsp; &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"} &nbsp;
</h3> </h3>
<div <div
style={{ style={{
@@ -885,7 +885,7 @@ const ItemLister = ({
<div className={styles["itemWrapper"]}> <div className={styles["itemWrapper"]}>
{isEditMode && isEditItem != item.itemId && ( {isEditMode && isEditItem != item.itemId && (
<div className={styles["editModeLayout"]}> <div className={styles["editModeLayout"]}>
<div style={{display: 'flex', alignItems: 'center'}}> <div style={{display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw'}}>
{isEditMode && ( {isEditMode && (
<Switch <Switch
onChange={() => handleChange(item.itemId)} onChange={() => handleChange(item.itemId)}
@@ -893,11 +893,11 @@ const ItemLister = ({
/> />
)} )}
<h3> <h3>
&nbsp;{item.availability ? "tersedia" : "tidak tersedia"} &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
</h3> </h3>
</div> </div>
<div style={{display: 'flex', alignItems: 'center'}}> <div onClick={() => editItem(item.itemId)} style={{display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw'}}>
<div <div
style={{ style={{
width: '32px', width: '32px',
@@ -907,7 +907,6 @@ const ItemLister = ({
alignItems: 'center', // Center vertically alignItems: 'center', // Center vertically
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => editItem(item.itemId)}
> >
<svg <svg
fill="white" fill="white"

10
src/components/ItemLister.module.css
View File

@@ -143,11 +143,11 @@
width: 100%; width: 100%;
top: 7px; top: 7px;
bottom: -4px; bottom: -4px;
display: flex display: flex;
; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
flex-direction: column; font-size: 14px;
} }
.PaymentOption { .PaymentOption {
@@ -197,7 +197,7 @@
font-size: 32px; font-size: 32px;
width: 80vw; width: 80vw;
height: 18vw; height: 70px;
border-radius: 50px; border-radius: 50px;
background-color: rgba(88, 55, 50, 1); background-color: rgba(88, 55, 50, 1);
color: white; color: white;