نسخ من RaghadAlkhous/RestaurantDash
Initial commit - restaurant dashboard
هذا الالتزام موجود في:
RaghadMAlkous
223
src/components/Home/Cart/contect/CartDetails.js
Normal file
223
src/components/Home/Cart/contect/CartDetails.js
Normal file
@@ -0,0 +1,223 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
Button,
|
||||
TextField,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
CircularProgress
|
||||
} from '@mui/material';
|
||||
import authService from '../../../../services/authService';
|
||||
import { useSnackbar } from "../../../../contexts/SnackbarContext";
|
||||
|
||||
const CartDetails = ({ cart, onClose, onUpdated, onDeleted }) => {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [totalPrice, setTotalPrice] = useState(cart?.attributes?.total_price || "");
|
||||
const [cartItems, setCartItems] = useState(cart.relationships?.cartItems || cart.relationships?.cart_items || []);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
const { showSnackbar } = useSnackbar();
|
||||
if (!cart) return null;
|
||||
|
||||
const handleSaveAll = async () => {
|
||||
setLoading(true);
|
||||
const payload = {
|
||||
data: {
|
||||
type: "cart",
|
||||
attributes: {
|
||||
totalPrice: Number(totalPrice),
|
||||
},
|
||||
relationships: {
|
||||
cartItems: cartItems.map(item => ({
|
||||
attributes: {
|
||||
quantity: Number(item.attributes.quantity),
|
||||
},
|
||||
relationships: {
|
||||
product: {
|
||||
data: {
|
||||
id: item.relationships?.supplier_product?.id ||
|
||||
item.relationships?.product?.data?.id
|
||||
}
|
||||
}
|
||||
}
|
||||
})),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await authService.updateCart(cart.id, payload);
|
||||
if (result.success) {
|
||||
onUpdated(result.data);
|
||||
setEditMode(false);
|
||||
} else {
|
||||
// alert(result.message || 'Failed to update cart');
|
||||
showSnackbar(result.message || "Failed to update cart", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
// alert('An error occurred while updating the cart');
|
||||
showSnackbar("An error occurred while updating the cart", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCart = async () => {
|
||||
setDeleteLoading(true);
|
||||
try {
|
||||
const result = await authService.deleteCart(cart.id);
|
||||
if (result.success) {
|
||||
onDeleted(cart.id);
|
||||
onClose();
|
||||
} else {
|
||||
// alert(result.message || 'Failed to delete cart');
|
||||
showSnackbar(result.message || "Failed to update cart", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
// alert('An error occurred while deleting the cart');
|
||||
showSnackbar("An error occurred while deleting the cart", "error");
|
||||
} finally {
|
||||
setDeleteLoading(false);
|
||||
setOpenDeleteDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangeQuantity = (itemId, newQuantity) => {
|
||||
setCartItems(prev =>
|
||||
prev.map(item =>
|
||||
item.id === itemId
|
||||
? { ...item, attributes: { ...item.attributes, quantity: newQuantity } }
|
||||
: item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper sx={{ p: 3, mt: 2, borderRadius: 2, border: '1px solid #e0e0e0' }}>
|
||||
<Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Cart #{cart.id} Details
|
||||
</Typography>
|
||||
|
||||
{editMode ? (
|
||||
<>
|
||||
<TextField
|
||||
label="Total Price"
|
||||
type="number"
|
||||
value={totalPrice}
|
||||
onChange={(e) => setTotalPrice(e.target.value)}
|
||||
fullWidth
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<Typography sx={{ mt: 2, fontWeight: 500 }}>Items:</Typography>
|
||||
<List>
|
||||
{cartItems.map(item => (
|
||||
<ListItem key={item.id} sx={{ pl: 0 }}>
|
||||
<ListItemText
|
||||
primary={`Item ID: ${item.id} | Product: ${item.relationships?.supplier_product?.id ||
|
||||
item.relationships?.product?.data?.id
|
||||
}`}
|
||||
secondary={
|
||||
<TextField
|
||||
type="number"
|
||||
size="small"
|
||||
label="Quantity"
|
||||
value={item.attributes.quantity}
|
||||
onChange={(e) => handleChangeQuantity(item.id, Number(e.target.value))}
|
||||
sx={{ width: '120px' }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
|
||||
<Box sx={{ mt: 2, display: "flex", gap: 2 }}>
|
||||
<Button variant="contained" onClick={handleSaveAll} disabled={loading}>
|
||||
{loading ? "Saving..." : "Save All"}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => setEditMode(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography>Total Price: {cart.attributes.total_price || cart.attributes.totalPrice}</Typography>
|
||||
<Typography>
|
||||
Created At: {new Date(cart.attributes.createdAt).toLocaleString()}
|
||||
</Typography>
|
||||
<Typography sx={{ mt: 2, fontWeight: 500 }}>Items:</Typography>
|
||||
<List>
|
||||
{cartItems.map(item => (
|
||||
<ListItem key={item.id} sx={{ pl: 0 }}>
|
||||
<ListItemText
|
||||
primary={`Item ID: ${item.id}`}
|
||||
secondary={`Quantity: ${item.attributes.quantity} | Product: ${item.relationships?.supplier_product?.id ||
|
||||
item.relationships?.product?.data?.id
|
||||
}`}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
|
||||
<Box sx={{ mt: 2, display: "flex", gap: 2 }}>
|
||||
<Button variant="contained" onClick={() => setEditMode(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={() => setOpenDeleteDialog(true)}
|
||||
sx={{ ml: 'auto' }}
|
||||
>
|
||||
Delete Cart
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={onClose}>
|
||||
Back to Orders
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={openDeleteDialog}
|
||||
onClose={() => setOpenDeleteDialog(false)}
|
||||
>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Are you sure you want to delete this cart? This action cannot be undone.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenDeleteDialog(false)} disabled={deleteLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDeleteCart}
|
||||
color="error"
|
||||
variant="contained"
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{deleteLoading ? <CircularProgress size={24} /> : 'Delete'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartDetails;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم