141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import {
|
|
Container,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
TextField,
|
|
Button,
|
|
IconButton,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
|
|
import axios from 'axios';
|
|
import { useParams, useLocation } from 'react-router-dom';
|
|
import ItemDetails from './ItemDetails'; // Import the new ItemDetails component
|
|
|
|
export default function Items({ token }) {
|
|
const { id: boxId } = useParams();
|
|
const [items, setItems] = useState([]);
|
|
const [newItemName, setNewItemName] = useState('');
|
|
const [newItemDescription, setNewItemDescription] = useState('');
|
|
const [newItemImagePath, setNewItemImagePath] = useState('/images/default.jpg');
|
|
const [editingItem, setEditingItem] = useState(null); // Track which item is being edited
|
|
const location = useLocation();
|
|
const boxName = location.state?.boxName || 'Unknown Box';
|
|
|
|
|
|
const fetchItems = useCallback(() => {
|
|
axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
}).then(response => {
|
|
setItems(response.data);
|
|
});
|
|
}, [boxId, token]);
|
|
|
|
useEffect(() => {
|
|
fetchItems();
|
|
}, [boxId, token, fetchItems]);
|
|
|
|
const handleAddItem = () => {
|
|
axios.post(`${process.env.REACT_APP_API_URL}/items`,
|
|
{
|
|
name: newItemName,
|
|
description: newItemDescription,
|
|
box_id: parseInt(boxId, 10),
|
|
},
|
|
{
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
}
|
|
).then(() => {
|
|
setNewItemName('');
|
|
setNewItemDescription('');
|
|
setNewItemImagePath('');
|
|
fetchItems();
|
|
});
|
|
};
|
|
|
|
const handleDeleteItem = (itemId) => {
|
|
axios.delete(`${process.env.REACT_APP_API_URL}/items/${itemId}`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
}).then(() => {
|
|
fetchItems();
|
|
});
|
|
};
|
|
|
|
const handleEditItem = (item) => {
|
|
setEditingItem(item); // Set the item to be edited
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
setEditingItem(null); // Clear the editing state after saving
|
|
fetchItems(); // Refresh the list after edit
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<h2>Items in Box: {boxName}</h2>
|
|
|
|
{/* Add Item Form */}
|
|
<TextField
|
|
label="Item Name"
|
|
variant="outlined"
|
|
fullWidth
|
|
margin="normal"
|
|
value={newItemName}
|
|
onChange={(e) => setNewItemName(e.target.value)}
|
|
/>
|
|
<TextField
|
|
label="Item Description"
|
|
variant="outlined"
|
|
fullWidth
|
|
margin="normal"
|
|
value={newItemDescription}
|
|
onChange={(e) => setNewItemDescription(e.target.value)}
|
|
/>
|
|
<TextField
|
|
label="Item Image Path"
|
|
variant="outlined"
|
|
fullWidth
|
|
margin="normal"
|
|
value={newItemImagePath}
|
|
onChange={(e) => setNewItemImagePath(e.target.value)}
|
|
/>
|
|
<Button variant="contained" color="primary" onClick={handleAddItem}>
|
|
Add Item
|
|
</Button>
|
|
|
|
{/* Conditionally render the ItemDetails component if editingItem is not null */}
|
|
{editingItem ? (
|
|
<ItemDetails item={editingItem} token={token} onSave={handleSaveEdit} />
|
|
) : (
|
|
<List>
|
|
{items.map((item) => (
|
|
<ListItem key={item.ID} secondaryAction={
|
|
<>
|
|
<IconButton edge="end" onClick={() => handleEditItem(item)}>
|
|
<EditIcon />
|
|
</IconButton>
|
|
<IconButton edge="end" onClick={() => handleDeleteItem(item.ID)}>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</>
|
|
}>
|
|
<ListItemText
|
|
primary={item.name}
|
|
secondary={
|
|
<>
|
|
<Typography variant="body2">{item.description}</Typography>
|
|
{item.image_path && (
|
|
<Typography variant="caption">Image: {item.image_path}</Typography>
|
|
)}
|
|
</>
|
|
}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
</Container>
|
|
);
|
|
} |