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

ok

Browse Source
This commit is contained in:
everythingonblack
2025-05-08 13:44:01 +07:00
parent c136495d10
commit 47f43f05f9
5 changed files with 167 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ItemConfig.js
View File

@@ -12,7 +12,8 @@ const ItemConfig = ({
isBeingEdit, isBeingEdit,
cancelEdit, cancelEdit,
handleCreateItem, handleCreateItem,
handleUpdateItem handleUpdateItem,
handleDelete
}) => { }) => {
const [selectedImage, setSelectedImage] = useState(); const [selectedImage, setSelectedImage] = useState();
const [previewUrl, setPreviewUrl] = useState(imageUrl); const [previewUrl, setPreviewUrl] = useState(imageUrl);
@@ -104,9 +105,12 @@ const ItemConfig = ({
/> />
</div> </div>
<div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <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', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <div onClick={() => handleChangeImage()} style={{ width: '140px', marginRight: '10px', 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'} {isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
</div> </div>
<div onClick={handleDelete} style={{ width: '76px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
Hapus
</div>
</div> </div>
</div> </div>

198
src/components/ItemLister.js
View File

@@ -15,7 +15,7 @@ import {
deleteItemType, deleteItemType,
} from "../helpers/itemHelper.js"; } from "../helpers/itemHelper.js";
import ItemType from "./ItemType.js"; import ItemType from "./ItemType.js";
import { createItemType } from "../helpers/itemHelper.js"; import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js";
import ItemConfig from "./ItemConfig.js" import ItemConfig from "./ItemConfig.js"
const ItemLister = ({ const ItemLister = ({
@@ -232,61 +232,61 @@ const ItemLister = ({
}; };
const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => { const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => {
if (isEdit) if (isEdit)
setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]); setItemsToUpdate((prev) => [...prev, { itemId, name, price, promoPrice, image, description }]);
else { else {
console.log(itemId, name, price, image, description) console.log(itemId, name, price, image, description)
handleUpdateItem(itemId, name, price, image, description, promoPrice); handleUpdateItem(itemId, name, price, image, description, promoPrice);
} }
const itemIndex = items.findIndex((item) => item.itemId === itemId); const itemIndex = items.findIndex((item) => item.itemId === itemId);
if (itemIndex === -1) return; // Item not found if (itemIndex === -1) return; // Item not found
// Create a copy of the current items array // Create a copy of the current items array
const updatedItems = [...items]; const updatedItems = [...items];
const item = updatedItems[itemIndex]; const item = updatedItems[itemIndex];
console.log(item) console.log(item)
console.log(image) console.log(image)
// Toggle the availability locally // Toggle the availability locally
const readImage = (image) => { const readImage = (image) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// Check if image is a valid File or Blob object // Check if image is a valid File or Blob object
if (!(image instanceof Blob)) { if (!(image instanceof Blob)) {
return; return;
}
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(image); // read the image as a data URL
});
};
let newImage = null;
if (image) {
try {
newImage = await readImage(image);
console.log(newImage);
} catch (error) {
console.error("Error reading image:", error);
} }
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(image); // read the image as a data URL
});
};
let newImage = null;
if (image) {
try {
newImage = await readImage(image);
console.log(newImage);
} catch (error) {
console.error("Error reading image:", error);
} }
}
updatedItems[itemIndex] = { updatedItems[itemIndex] = {
itemId: item.itemId, itemId: item.itemId,
name, name,
price, price,
description: description, description: description,
promoPrice: promoPrice, promoPrice: promoPrice,
availability: item.availability, availability: item.availability,
image: image ? newImage : item.image, image: image ? newImage : item.image,
selectedImage: image ? newImage : null selectedImage: image ? newImage : null
}; };
console.log(updatedItems) console.log(updatedItems)
// Update the state with the local change // Update the state with the local change
setItems(updatedItems); setItems(updatedItems);
setRandomKey(randomKey + 1); setRandomKey(randomKey + 1);
console.log(itemsToUpdate); console.log(itemsToUpdate);
@@ -561,6 +561,40 @@ const ItemLister = ({
setIsFirstStep(true); setIsFirstStep(true);
}; };
const handleItemDeletionToggle = async (itemId, willBeDeleted) => {
try {
editItem(0)
// 1. Await the API or helper that updates the deletion status
const updatedItem = await updateItemDeletionStatus(itemId, willBeDeleted);
// 2. Update the local state with the new `willBeDeleted` status
setShopItems((prevShopItems) => {
return prevShopItems.map((itemType) => {
const updatedItemList = itemType.itemList.map((item) => {
if (item.itemId === itemId) {
return {
...item,
willBeDeleted: updatedItem.willBeDeleted, // Update deletion status
name: item.name,
price: item.price,
image: item.image,
};
}
return item;
});
return {
...itemType,
itemList: updatedItemList,
};
});
});
} catch (error) {
console.error("Failed to update item deletion status:", error);
// Optional: show a user notification
}
};
return ( return (
<> <>
{(items.length > 0 || {(items.length > 0 ||
@@ -873,7 +907,7 @@ const ItemLister = ({
imageUrl={item.image} imageUrl={item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice);} handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice); }
} }
/> />
)} )}
@@ -964,43 +998,58 @@ const ItemLister = ({
// batal // batal
// </button> // </button>
<ItemConfig <ItemConfig
isBeingEdit={true} isBeingEdit={true}
name={item.name} name={item.name}
price={item.price} price={item.price}
promoPrice={item.promoPrice} promoPrice={item.promoPrice}
description={item.description} description={item.description}
imageUrl={itemTypeId ? getImageUrl(item.image) : item.image} imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleCreateItem={onCreateItem} handleCreateItem={onCreateItem}
handleUpdateItem={async (name, price, image, description, promoPrice) => { handleUpdateItem={async (name, price, image, description, promoPrice) => {
try { try {
console.log(description); console.log(description);
await onUpdateItem(item.itemId, name, price, image, description, promoPrice); await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
} catch (error) { } catch (error) {
console.error("Error updating item:", error); console.error("Error updating item:", error);
} }
}} }}
/> handleDelete={() => handleItemDeletionToggle(item.itemId, true)}
/>
)} )}
<div className={styles["itemWrapper"]}> <div className={styles["itemWrapper"]}>
{isEditMode && isEditItem != item.itemId && ( {(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && (
<div className={styles["editModeLayout"]}> <div className={styles["editModeLayout"]}>
<div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}> <div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
{isEditMode && ( {!item.willBeDeleted && isEditMode && (
<Switch <Switch
onChange={() => handleChange(item.itemId)} onChange={() => handleChange(item.itemId)}
checked={item.availability} checked={item.availability}
/> />
)} )}
<h3> {item.willBeDeleted ?
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
</h3> <h3 style={{ backgroundColor: 'black', padding: '13px 26px' }}>
Ditandai untuk dihapus
</h3>
:
<h3>
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
</h3>
}
</div> </div>
<div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}> <div onClick={() => {
<div if (!item.willBeDeleted) {
editItem(item.itemId);
} else {
handleItemDeletionToggle(item.itemId, false);
}
}}
style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
{!item.willBeDeleted && <div
style={{ style={{
width: '32px', width: '32px',
height: '32px', // Add a height to the div height: '32px', // Add a height to the div
@@ -1028,14 +1077,15 @@ const ItemLister = ({
</g> </g>
</svg> </svg>
</div> </div>
<h3>Edit item</h3> }
<h3>{item.willBeDeleted ? 'Batalkan' : 'Edit item'}</h3>
</div> </div>
</div> </div>
)} )}
<Item <Item
key={item.itemId} key={item.itemId}
last={index === indexTotal-1 && indexx === items.length - 1} last={index === indexTotal - 1 && indexx === items.length - 1}
forCart={forCart} forCart={forCart}
forInvoice={forInvoice} forInvoice={forInvoice}
name={item.name} name={item.name}

27
src/helpers/itemHelper.js
View File

@@ -176,6 +176,33 @@ export async function updateItemAvalilability(itemId, isAvailable) {
throw error; throw error;
} }
} }
export async function updateItemDeletionStatus(itemId, willBeDeleted) {
try {
const response = await fetch(
`${API_BASE_URL}/item/set-deletion/` + itemId,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${getAuthToken()}`,
},
body: JSON.stringify({ willBeDeleted: willBeDeleted }),
}
);
if (!response.ok) {
// throw new Error(`Error: ${response.statusText}`);
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error("Failed to update item type:", error);
throw error;
}
}
export async function createItemType(shopId, name, selectedImage, previewUrl) { export async function createItemType(shopId, name, selectedImage, previewUrl) {
try { try {
const formData = new FormData(); const formData = new FormData();

6
src/index.js
View File

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
// Disable console methods // Disable console methods
// console.log = () => {}; console.log = () => {};
// console.warn = () => {}; console.warn = () => {};
// console.error = () => {}; console.error = () => {};
root.render( root.render(
<React.StrictMode> <React.StrictMode>

2
src/pages/Transaction.js
View File

@@ -235,7 +235,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
: `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A" : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
}`} }`}
</h2> </h2>
{transaction.notes != "" && ( {transaction.notes != null && (
<> <>
<div className={styles.NoteContainer}> <div className={styles.NoteContainer}>
<span>Note :</span> <span>Note :</span>