lasse/groceries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement comprehensive edit functionality and standardize UI components

Browse Source 
• Add full edit functionality for groceries with modal support
• Standardize delete confirmations across all components using ConfirmDeleteModal
• Implement complete shopping event edit functionality:
  - Create EditShoppingEvent component with full form capabilities
  - Add missing backend PUT endpoint for shopping events
  - Support editing all event data (shop, date, groceries, amounts, prices, notes)
• Add inline grocery edit functionality in shopping event forms:
  - Allow editing grocery items within add/edit forms
  - Load selected items back into input fields for modification
• Fix date timezone issues in edit forms to prevent date shifting
• Remove non-functional "View Details" button in favor of working Edit button
• Enhance user experience with consistent edit/delete patterns across the app

Breaking changes: None
Backend: Added PUT /shopping-events/{id} and DELETE /shopping-events/{id} endpoints
Frontend: Complete edit workflow for all entities with improved UX
This commit is contained in:
lasse
2025-05-25 18:51:47 +02:00
parent 500cb8983c
commit 2fadb2d991
13 changed files with 863 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@@ -4,6 +4,7 @@ import GroceryList from './components/GroceryList';
import ShopList from './components/ShopList';
import ShoppingEventForm from './components/ShoppingEventForm';
import ShoppingEventList from './components/ShoppingEventList';
import EditShoppingEvent from './components/EditShoppingEvent';
import Dashboard from './components/Dashboard';
function App() {
@@ -49,7 +50,7 @@ function App() {
to="/add-purchase"
className="bg-blue-500 hover:bg-blue-700 text-white inline-flex items-center px-3 py-2 text-sm font-medium rounded-md"
>
Add Purchase
Add New Event
</Link>
</div>
</div>
@@ -64,6 +65,7 @@ function App() {
<Route path="/groceries" element={<GroceryList />} />
<Route path="/shops" element={<ShopList />} />
<Route path="/shopping-events" element={<ShoppingEventList />} />
<Route path="/shopping-events/:id/edit" element={<EditShoppingEvent />} />
<Route path="/add-purchase" element={<ShoppingEventForm />} />
</Routes>
</main>

73
frontend/src/components/AddGroceryModal.tsx
View File

@@ -1,25 +1,25 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { groceryApi } from '../services/api';
import { Grocery } from '../types';
interface AddGroceryModalProps {
isOpen: boolean;
onClose: () => void;
onGroceryAdded: () => void;
editGrocery?: Grocery | null;
}
interface GroceryFormData {
name: string;
price: number;
category: string;
organic: boolean;
weight?: number;
weight_unit: string;
}
const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGroceryAdded }) => {
const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGroceryAdded, editGrocery }) => {
const [formData, setFormData] = useState<GroceryFormData>({
name: '',
price: 0,
category: '',
organic: false,
weight: undefined,
@@ -35,9 +35,32 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
const weightUnits = ['piece', 'g', 'kg', 'lb', 'oz', 'ml', 'l'];
// Populate form when editing
useEffect(() => {
if (editGrocery) {
setFormData({
name: editGrocery.name,
category: editGrocery.category,
organic: editGrocery.organic,
weight: editGrocery.weight,
weight_unit: editGrocery.weight_unit
});
} else {
// Reset form for adding new grocery
setFormData({
name: '',
category: '',
organic: false,
weight: undefined,
weight_unit: 'piece'
});
}
setError('');
}, [editGrocery, isOpen]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name.trim() || !formData.category.trim() || formData.price <= 0) {
if (!formData.name.trim() || !formData.category.trim()) {
setError('Please fill in all required fields with valid values');
return;
}
@@ -51,12 +74,17 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
weight: formData.weight || undefined
};
await groceryApi.create(groceryData);
if (editGrocery) {
// Update existing grocery
await groceryApi.update(editGrocery.id, groceryData);
} else {
// Create new grocery
await groceryApi.create(groceryData);
}
// Reset form
setFormData({
name: '',
price: 0,
category: '',
organic: false,
weight: undefined,
@@ -66,8 +94,8 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
onGroceryAdded();
onClose();
} catch (err) {
setError('Failed to add grocery. Please try again.');
console.error('Error adding grocery:', err);
setError(`Failed to ${editGrocery ? 'update' : 'add'} grocery. Please try again.`);
console.error(`Error ${editGrocery ? 'updating' : 'adding'} grocery:`, err);
} finally {
setLoading(false);
}
@@ -90,7 +118,9 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div className="mt-3">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium text-gray-900">Add New Grocery</h3>
<h3 className="text-lg font-medium text-gray-900">
{editGrocery ? 'Edit Grocery' : 'Add New Grocery'}
</h3>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
@@ -124,24 +154,6 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
/>
</div>
<div>
<label htmlFor="price" className="block text-sm font-medium text-gray-700">
Price ($) *
</label>
<input
type="number"
id="price"
name="price"
value={formData.price || ''}
onChange={handleChange}
required
min="0"
step="0.01"
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
/>
</div>
<div>
<label htmlFor="category" className="block text-sm font-medium text-gray-700">
Category *
@@ -223,7 +235,10 @@ const AddGroceryModal: React.FC<AddGroceryModalProps> = ({ isOpen, onClose, onGr
disabled={loading}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Adding...' : 'Add Grocery'}
{loading
? (editGrocery ? 'Updating...' : 'Adding...')
: (editGrocery ? 'Update Grocery' : 'Add Grocery')
}
</button>
</div>
</form>

103
frontend/src/components/Dashboard.tsx
View File

@@ -1,6 +1,33 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ShoppingEvent } from '../types';
import { shoppingEventApi } from '../services/api';
const Dashboard: React.FC = () => {
const navigate = useNavigate();
const [recentEvents, setRecentEvents] = useState<ShoppingEvent[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchRecentEvents();
}, []);
const fetchRecentEvents = async () => {
try {
setLoading(true);
const response = await shoppingEventApi.getAll();
// Get the 3 most recent events
const recent = response.data
.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
.slice(0, 3);
setRecentEvents(recent);
} catch (error) {
console.error('Error fetching recent events:', error);
} finally {
setLoading(false);
}
};
return (
<div className="space-y-6">
<div>
@@ -74,19 +101,25 @@ const Dashboard: React.FC = () => {
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<button className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
<button
onClick={() => navigate('/add-purchase')}
className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
<div className="p-2 bg-blue-100 rounded-md mr-3">
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
<div>
<p className="font-medium text-gray-900">Add Purchase</p>
<p className="font-medium text-gray-900">Add New Event</p>
<p className="text-sm text-gray-600">Record a new shopping event</p>
</div>
</button>
<button className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
<button
onClick={() => navigate('/groceries?add=true')}
className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
<div className="p-2 bg-green-100 rounded-md mr-3">
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
@@ -98,7 +131,10 @@ const Dashboard: React.FC = () => {
</div>
</button>
<button className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
<button
onClick={() => navigate('/shops?add=true')}
className="flex items-center p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
<div className="p-2 bg-purple-100 rounded-md mr-3">
<svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
@@ -119,13 +155,56 @@ const Dashboard: React.FC = () => {
<h2 className="text-lg font-medium text-gray-900">Recent Shopping Events</h2>
</div>
<div className="p-6">
<div className="text-center py-8">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No shopping events yet</h3>
<p className="mt-1 text-sm text-gray-500">Get started by adding your first purchase!</p>
</div>
{loading ? (
<div className="flex justify-center items-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
</div>
) : recentEvents.length === 0 ? (
<div className="text-center py-8">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No shopping events yet</h3>
<p className="mt-1 text-sm text-gray-500">Get started by adding your first event!</p>
</div>
) : (
<div className="space-y-4">
{recentEvents.map((event) => (
<div key={event.id} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center space-x-2">
<h4 className="font-medium text-gray-900">{event.shop.name}</h4>
<span className="text-sm text-gray-500">•</span>
<span className="text-sm text-gray-500">{event.shop.city}</span>
</div>
<p className="text-sm text-gray-600 mt-1">
{new Date(event.date).toLocaleDateString()}
</p>
{event.groceries.length > 0 && (
<p className="text-sm text-gray-500 mt-1">
{event.groceries.length} item{event.groceries.length !== 1 ? 's' : ''}
</p>
)}
</div>
<div className="text-right">
{event.total_amount && (
<p className="font-semibold text-green-600">
${event.total_amount.toFixed(2)}
</p>
)}
<button
onClick={() => navigate('/shopping-events')}
className="text-sm text-blue-600 hover:text-blue-800 mt-1"
>
View all
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
</div>
</div>

367
frontend/src/components/EditShoppingEvent.tsx Normal file
View File

@@ -0,0 +1,367 @@
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Shop, Grocery, ShoppingEvent, ShoppingEventCreate, GroceryInEvent } from '../types';
import { shopApi, groceryApi, shoppingEventApi } from '../services/api';
const EditShoppingEvent: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [shops, setShops] = useState<Shop[]>([]);
const [groceries, setGroceries] = useState<Grocery[]>([]);
const [loading, setLoading] = useState(false);
const [loadingEvent, setLoadingEvent] = useState(true);
const [message, setMessage] = useState('');
const [formData, setFormData] = useState<ShoppingEventCreate>({
shop_id: 0,
date: new Date().toISOString().split('T')[0],
total_amount: undefined,
notes: '',
groceries: []
});
const [selectedGroceries, setSelectedGroceries] = useState<GroceryInEvent[]>([]);
const [newGroceryItem, setNewGroceryItem] = useState<GroceryInEvent>({
grocery_id: 0,
amount: 1,
price: 0
});
useEffect(() => {
fetchShops();
fetchGroceries();
if (id) {
fetchShoppingEvent(parseInt(id));
}
}, [id]);
const fetchShoppingEvent = async (eventId: number) => {
try {
setLoadingEvent(true);
const response = await shoppingEventApi.getById(eventId);
const event = response.data;
// Use the date directly if it's already in YYYY-MM-DD format, otherwise format it
let formattedDate = event.date;
if (event.date.includes('T') || event.date.length > 10) {
// If the date includes time or is longer than YYYY-MM-DD, extract just the date part
formattedDate = event.date.split('T')[0];
}
setFormData({
shop_id: event.shop.id,
date: formattedDate,
total_amount: event.total_amount,
notes: event.notes || '',
groceries: []
});
setSelectedGroceries(event.groceries.map(g => ({
grocery_id: g.id,
amount: g.amount,
price: g.price
})));
} catch (error) {
console.error('Error fetching shopping event:', error);
setMessage('Error loading shopping event. Please try again.');
} finally {
setLoadingEvent(false);
}
};
const fetchShops = async () => {
try {
const response = await shopApi.getAll();
setShops(response.data);
} catch (error) {
console.error('Error fetching shops:', error);
}
};
const fetchGroceries = async () => {
try {
const response = await groceryApi.getAll();
setGroceries(response.data);
} catch (error) {
console.error('Error fetching groceries:', error);
}
};
const addGroceryToEvent = () => {
if (newGroceryItem.grocery_id > 0 && newGroceryItem.amount > 0 && newGroceryItem.price > 0) {
setSelectedGroceries([...selectedGroceries, { ...newGroceryItem }]);
setNewGroceryItem({ grocery_id: 0, amount: 1, price: 0 });
}
};
const removeGroceryFromEvent = (index: number) => {
setSelectedGroceries(selectedGroceries.filter((_, i) => i !== index));
};
const editGroceryFromEvent = (index: number) => {
const groceryToEdit = selectedGroceries[index];
// Load the grocery data into the input fields
setNewGroceryItem({
grocery_id: groceryToEdit.grocery_id,
amount: groceryToEdit.amount,
price: groceryToEdit.price
});
// Remove the item from the selected list
setSelectedGroceries(selectedGroceries.filter((_, i) => i !== index));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setMessage('');
try {
const eventData = {
...formData,
groceries: selectedGroceries
};
console.log('Sending event data:', eventData);
const response = await shoppingEventApi.update(parseInt(id!), eventData);
console.log('Response:', response);
setMessage('Shopping event updated successfully!');
// Navigate back to shopping events list after a short delay
setTimeout(() => {
navigate('/shopping-events');
}, 1500);
} catch (error) {
console.error('Full error object:', error);
setMessage('Error updating shopping event. Please try again.');
console.error('Error:', error);
} finally {
setLoading(false);
}
};
const getGroceryName = (id: number) => {
const grocery = groceries.find(g => g.id === id);
return grocery ? grocery.name : 'Unknown';
};
if (loadingEvent) {
return (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>
);
}
return (
<div className="max-w-4xl mx-auto">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Edit Shopping Event
</h3>
<button
onClick={() => navigate('/shopping-events')}
className="text-gray-500 hover:text-gray-700"
>
← Back to Shopping Events
</button>
</div>
{message && (
<div className={`mb-4 p-4 rounded-md ${
message.includes('Error')
? 'bg-red-50 text-red-700'
: 'bg-green-50 text-green-700'
}`}>
{message}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
{/* Shop Selection */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Shop
</label>
<select
value={formData.shop_id}
onChange={(e) => setFormData({...formData, shop_id: parseInt(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
required
>
<option value={0}>Select a shop</option>
{shops.map(shop => (
<option key={shop.id} value={shop.id}>
{shop.name} - {shop.city}
</option>
))}
</select>
</div>
{/* Date */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Date
</label>
<input
type="date"
value={formData.date}
onChange={(e) => setFormData({...formData, date: e.target.value})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
{/* Add Groceries Section */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Add Groceries
</label>
<div className="flex space-x-2 mb-4">
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">
Grocery
</label>
<select
value={newGroceryItem.grocery_id}
onChange={(e) => setNewGroceryItem({...newGroceryItem, grocery_id: parseInt(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value={0}>Select a grocery</option>
{groceries.map(grocery => (
<option key={grocery.id} value={grocery.id}>
{grocery.name} ({grocery.category})
</option>
))}
</select>
</div>
<div className="w-24">
<label className="block text-xs font-medium text-gray-700 mb-1">
Amount
</label>
<input
type="number"
step="1"
min="1"
placeholder="1"
value={newGroceryItem.amount}
onChange={(e) => setNewGroceryItem({...newGroceryItem, amount: parseFloat(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="w-24">
<label className="block text-xs font-medium text-gray-700 mb-1">
Price ($)
</label>
<input
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={newGroceryItem.price}
onChange={(e) => setNewGroceryItem({...newGroceryItem, price: parseFloat(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex items-end">
<button
type="button"
onClick={addGroceryToEvent}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Add
</button>
</div>
</div>
</div>
{/* Selected Groceries */}
{selectedGroceries.length > 0 && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Selected Groceries
</label>
<div className="space-y-2">
{selectedGroceries.map((item, index) => (
<div key={index} className="flex items-center justify-between bg-gray-50 p-3 rounded">
<span>
{getGroceryName(item.grocery_id)} - {item.amount} × ${item.price.toFixed(2)} = ${(item.amount * item.price).toFixed(2)}
</span>
<div className="flex space-x-2">
<button
type="button"
onClick={() => editGroceryFromEvent(index)}
className="text-blue-600 hover:text-blue-800"
>
Edit
</button>
<button
type="button"
onClick={() => removeGroceryFromEvent(index)}
className="text-red-600 hover:text-red-800"
>
Remove
</button>
</div>
</div>
))}
</div>
</div>
)}
{/* Total Amount */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Total Amount (optional)
</label>
<input
type="number"
step="0.01"
min="0"
placeholder="Leave empty to auto-calculate"
value={formData.total_amount || ''}
onChange={(e) => setFormData({...formData, total_amount: e.target.value ? parseFloat(e.target.value) : undefined})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
{/* Notes */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Notes (optional)
</label>
<textarea
value={formData.notes}
onChange={(e) => setFormData({...formData, notes: e.target.value})}
rows={3}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Any additional notes about this shopping event..."
/>
</div>
{/* Submit Button */}
<div className="flex justify-end space-x-3">
<button
type="button"
onClick={() => navigate('/shopping-events')}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md"
>
Cancel
</button>
<button
type="submit"
disabled={loading || formData.shop_id === 0}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Updating...' : 'Update Shopping Event'}
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default EditShoppingEvent;

85
frontend/src/components/GroceryList.tsx
View File

@@ -1,17 +1,30 @@
import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Grocery } from '../types';
import { groceryApi } from '../services/api';
import AddGroceryModal from './AddGroceryModal';
import ConfirmDeleteModal from './ConfirmDeleteModal';
const GroceryList: React.FC = () => {
const [searchParams, setSearchParams] = useSearchParams();
const [groceries, setGroceries] = useState<Grocery[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [isModalOpen, setIsModalOpen] = useState(false);
const [editingGrocery, setEditingGrocery] = useState<Grocery | null>(null);
const [deletingGrocery, setDeletingGrocery] = useState<Grocery | null>(null);
const [deleteLoading, setDeleteLoading] = useState(false);
useEffect(() => {
fetchGroceries();
}, []);
// Check if we should auto-open the modal
if (searchParams.get('add') === 'true') {
setIsModalOpen(true);
// Remove the parameter from URL
setSearchParams({});
}
}, [searchParams, setSearchParams]);
const fetchGroceries = async () => {
try {
@@ -26,15 +39,28 @@ const GroceryList: React.FC = () => {
}
};
const handleDelete = async (id: number) => {
if (window.confirm('Are you sure you want to delete this grocery item?')) {
try {
await groceryApi.delete(id);
setGroceries(groceries.filter(g => g.id !== id));
} catch (err) {
setError('Failed to delete grocery');
console.error('Error deleting grocery:', err);
}
const handleEdit = (grocery: Grocery) => {
setEditingGrocery(grocery);
setIsModalOpen(true);
};
const handleDelete = (grocery: Grocery) => {
setDeletingGrocery(grocery);
};
const confirmDelete = async () => {
if (!deletingGrocery) return;
try {
setDeleteLoading(true);
await groceryApi.delete(deletingGrocery.id);
setDeletingGrocery(null);
fetchGroceries(); // Refresh the list
} catch (err) {
console.error('Error deleting grocery:', err);
setError('Failed to delete grocery. Please try again.');
} finally {
setDeleteLoading(false);
}
};
@@ -42,6 +68,15 @@ const GroceryList: React.FC = () => {
fetchGroceries(); // Refresh the list
};
const handleCloseModal = () => {
setIsModalOpen(false);
setEditingGrocery(null);
};
const handleCloseDeleteModal = () => {
setDeletingGrocery(null);
};
if (loading) {
return (
<div className="flex justify-center items-center h-64">
@@ -55,7 +90,10 @@ const GroceryList: React.FC = () => {
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-gray-900">Groceries</h1>
<button
onClick={() => setIsModalOpen(true)}
onClick={() => {
setEditingGrocery(null);
setIsModalOpen(true);
}}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Add New Grocery
@@ -84,9 +122,6 @@ const GroceryList: React.FC = () => {
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Price
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Category
</th>
@@ -107,9 +142,6 @@ const GroceryList: React.FC = () => {
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">{grocery.name}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">${grocery.price.toFixed(2)}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
{grocery.category}
@@ -128,11 +160,14 @@ const GroceryList: React.FC = () => {
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button className="text-indigo-600 hover:text-indigo-900 mr-3">
<button
onClick={() => handleEdit(grocery)}
className="text-indigo-600 hover:text-indigo-900 mr-3"
>
Edit
</button>
<button
onClick={() => handleDelete(grocery.id)}
onClick={() => handleDelete(grocery)}
className="text-red-600 hover:text-red-900"
>
Delete
@@ -147,8 +182,18 @@ const GroceryList: React.FC = () => {
<AddGroceryModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onClose={handleCloseModal}
onGroceryAdded={handleGroceryAdded}
editGrocery={editingGrocery}
/>
<ConfirmDeleteModal
isOpen={!!deletingGrocery}
onClose={handleCloseDeleteModal}
onConfirm={confirmDelete}
title="Delete Grocery"
message={`Are you sure you want to delete "${deletingGrocery?.name}"? This action cannot be undone.`}
isLoading={deleteLoading}
/>
</div>
);

11
frontend/src/components/ShopList.tsx
View File

@@ -1,10 +1,12 @@
import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Shop } from '../types';
import { shopApi } from '../services/api';
import AddShopModal from './AddShopModal';
import ConfirmDeleteModal from './ConfirmDeleteModal';
const ShopList: React.FC = () => {
const [searchParams, setSearchParams] = useSearchParams();
const [shops, setShops] = useState<Shop[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
@@ -15,7 +17,14 @@ const ShopList: React.FC = () => {
useEffect(() => {
fetchShops();
}, []);
// Check if we should auto-open the modal
if (searchParams.get('add') === 'true') {
setIsModalOpen(true);
// Remove the parameter from URL
setSearchParams({});
}
}, [searchParams, setSearchParams]);
const fetchShops = async () => {
try {

128
frontend/src/components/ShoppingEventForm.tsx
View File

@@ -19,7 +19,8 @@ const ShoppingEventForm: React.FC = () => {
const [selectedGroceries, setSelectedGroceries] = useState<GroceryInEvent[]>([]);
const [newGroceryItem, setNewGroceryItem] = useState<GroceryInEvent>({
grocery_id: 0,
amount: 1
amount: 1,
price: 0
});
useEffect(() => {
@@ -46,9 +47,9 @@ const ShoppingEventForm: React.FC = () => {
};
const addGroceryToEvent = () => {
if (newGroceryItem.grocery_id > 0 && newGroceryItem.amount > 0) {
if (newGroceryItem.grocery_id > 0 && newGroceryItem.amount > 0 && newGroceryItem.price > 0) {
setSelectedGroceries([...selectedGroceries, { ...newGroceryItem }]);
setNewGroceryItem({ grocery_id: 0, amount: 1 });
setNewGroceryItem({ grocery_id: 0, amount: 1, price: 0 });
}
};
@@ -56,6 +57,18 @@ const ShoppingEventForm: React.FC = () => {
setSelectedGroceries(selectedGroceries.filter((_, i) => i !== index));
};
const editGroceryFromEvent = (index: number) => {
const groceryToEdit = selectedGroceries[index];
// Load the grocery data into the input fields
setNewGroceryItem({
grocery_id: groceryToEdit.grocery_id,
amount: groceryToEdit.amount,
price: groceryToEdit.price
});
// Remove the item from the selected list
setSelectedGroceries(selectedGroceries.filter((_, i) => i !== index));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
@@ -97,7 +110,7 @@ const ShoppingEventForm: React.FC = () => {
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
Add New Purchase
Add New Event
</h3>
{message && (
@@ -151,34 +164,60 @@ const ShoppingEventForm: React.FC = () => {
Add Groceries
</label>
<div className="flex space-x-2 mb-4">
<select
value={newGroceryItem.grocery_id}
onChange={(e) => setNewGroceryItem({...newGroceryItem, grocery_id: parseInt(e.target.value)})}
className="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value={0}>Select a grocery</option>
{groceries.map(grocery => (
<option key={grocery.id} value={grocery.id}>
{grocery.name} - ${grocery.price} ({grocery.category})
</option>
))}
</select>
<input
type="number"
step="0.1"
min="0.1"
placeholder="Amount"
value={newGroceryItem.amount}
onChange={(e) => setNewGroceryItem({...newGroceryItem, amount: parseFloat(e.target.value)})}
className="w-24 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="button"
onClick={addGroceryToEvent}
className="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded-md"
>
Add
</button>
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">
Grocery
</label>
<select
value={newGroceryItem.grocery_id}
onChange={(e) => setNewGroceryItem({...newGroceryItem, grocery_id: parseInt(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value={0}>Select a grocery</option>
{groceries.map(grocery => (
<option key={grocery.id} value={grocery.id}>
{grocery.name} ({grocery.category})
</option>
))}
</select>
</div>
<div className="w-24">
<label className="block text-xs font-medium text-gray-700 mb-1">
Amount
</label>
<input
type="number"
step="1"
min="1"
placeholder="1"
value={newGroceryItem.amount}
onChange={(e) => setNewGroceryItem({...newGroceryItem, amount: parseFloat(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="w-24">
<label className="block text-xs font-medium text-gray-700 mb-1">
Price ($)
</label>
<input
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={newGroceryItem.price}
onChange={(e) => setNewGroceryItem({...newGroceryItem, price: parseFloat(e.target.value)})}
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex items-end">
<button
type="button"
onClick={addGroceryToEvent}
className="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded-md"
>
Add
</button>
</div>
</div>
{/* Selected Groceries List */}
@@ -188,15 +227,24 @@ const ShoppingEventForm: React.FC = () => {
{selectedGroceries.map((item, index) => (
<div key={index} className="flex justify-between items-center py-2 border-b last:border-b-0">
<span>
{getGroceryName(item.grocery_id)} x {item.amount}
{getGroceryName(item.grocery_id)} x {item.amount} @ ${item.price.toFixed(2)}
</span>
<button
type="button"
onClick={() => removeGroceryFromEvent(index)}
className="text-red-500 hover:text-red-700"
>
Remove
</button>
<div className="flex space-x-2">
<button
type="button"
onClick={() => editGroceryFromEvent(index)}
className="text-blue-500 hover:text-blue-700"
>
Edit
</button>
<button
type="button"
onClick={() => removeGroceryFromEvent(index)}
className="text-red-500 hover:text-red-700"
>
Remove
</button>
</div>
</div>
))}
</div>

61
frontend/src/components/ShoppingEventList.tsx
View File

@@ -1,11 +1,16 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ShoppingEvent } from '../types';
import { shoppingEventApi } from '../services/api';
import ConfirmDeleteModal from './ConfirmDeleteModal';
const ShoppingEventList: React.FC = () => {
const navigate = useNavigate();
const [events, setEvents] = useState<ShoppingEvent[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [deletingEvent, setDeletingEvent] = useState<ShoppingEvent | null>(null);
const [deleteLoading, setDeleteLoading] = useState(false);
useEffect(() => {
fetchEvents();
@@ -24,6 +29,30 @@ const ShoppingEventList: React.FC = () => {
}
};
const handleDelete = (event: ShoppingEvent) => {
setDeletingEvent(event);
};
const confirmDelete = async () => {
if (!deletingEvent) return;
try {
setDeleteLoading(true);
await shoppingEventApi.delete(deletingEvent.id);
setDeletingEvent(null);
fetchEvents(); // Refresh the list
} catch (err) {
console.error('Error deleting shopping event:', err);
setError('Failed to delete shopping event. Please try again.');
} finally {
setDeleteLoading(false);
}
};
const handleCloseDeleteModal = () => {
setDeletingEvent(null);
};
if (loading) {
return (
<div className="flex justify-center items-center h-64">
@@ -36,7 +65,10 @@ const ShoppingEventList: React.FC = () => {
<div className="space-y-6">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-gray-900">Shopping Events</h1>
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<button
onClick={() => navigate('/add-purchase')}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Add New Event
</button>
</div>
@@ -83,8 +115,10 @@ const ShoppingEventList: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
{event.groceries.map((grocery) => (
<div key={grocery.id} className="bg-gray-50 rounded px-3 py-2">
<span className="text-sm text-gray-900">{grocery.name}</span>
<span className="text-xs text-gray-600 ml-2">${grocery.price}</span>
<div className="text-sm text-gray-900">{grocery.name}</div>
<div className="text-xs text-gray-600">
{grocery.amount} × ${grocery.price.toFixed(2)} = ${(grocery.amount * grocery.price).toFixed(2)}
</div>
</div>
))}
</div>
@@ -103,10 +137,16 @@ const ShoppingEventList: React.FC = () => {
Event #{event.id} • {new Date(event.created_at).toLocaleDateString()}
</span>
<div className="flex space-x-2">
<button className="text-indigo-600 hover:text-indigo-900">
View Details
<button
onClick={() => navigate(`/shopping-events/${event.id}/edit`)}
className="text-indigo-600 hover:text-indigo-900"
>
Edit
</button>
<button className="text-red-600 hover:text-red-900">
<button
onClick={() => handleDelete(event)}
className="text-red-600 hover:text-red-900"
>
Delete
</button>
</div>
@@ -116,6 +156,15 @@ const ShoppingEventList: React.FC = () => {
</div>
)}
</div>
<ConfirmDeleteModal
isOpen={!!deletingEvent}
onClose={handleCloseDeleteModal}
onConfirm={confirmDelete}
title="Delete Shopping Event"
message={`Are you sure you want to delete this shopping event from ${deletingEvent?.shop.name}? This action cannot be undone.`}
isLoading={deleteLoading}
/>
</div>
);
};

2
frontend/src/services/api.ts
View File

@@ -36,7 +36,7 @@ export const shoppingEventApi = {
getById: (id: number) => api.get<ShoppingEvent>(`/shopping-events/${id}`),
create: (event: ShoppingEventCreate) =>
api.post<ShoppingEvent>('/shopping-events/', event),
update: (id: number, event: Partial<ShoppingEventCreate>) =>
update: (id: number, event: ShoppingEventCreate) =>
api.put<ShoppingEvent>(`/shopping-events/${id}`, event),
delete: (id: number) => api.delete(`/shopping-events/${id}`),
};

16
frontend/src/types/index.ts
View File

@@ -1,7 +1,6 @@
export interface Grocery {
id: number;
name: string;
price: number;
category: string;
organic: boolean;
weight?: number;
@@ -12,7 +11,6 @@ export interface Grocery {
export interface GroceryCreate {
name: string;
price: number;
category: string;
organic: boolean;
weight?: number;
@@ -36,6 +34,18 @@ export interface ShopCreate {
export interface GroceryInEvent {
grocery_id: number;
amount: number;
price: number;
}
export interface GroceryWithEventData {
id: number;
name: string;
category: string;
organic: boolean;
weight?: number;
weight_unit: string;
amount: number;
price: number;
}
export interface ShoppingEvent {
@@ -46,7 +56,7 @@ export interface ShoppingEvent {
notes?: string;
created_at: string;
shop: Shop;
groceries: Grocery[];
groceries: GroceryWithEventData[];
}
export interface ShoppingEventCreate {