try to do better
This commit is contained in:
arrelin
375
frontend/src/components/ShoppingListModal.old.tsx
Normal file
375
frontend/src/components/ShoppingListModal.old.tsx
Normal file
@@ -0,0 +1,375 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { shoppingItemApi } from '../api/client';
|
||||
import type { ShoppingItem } from '../types';
|
||||
import {
|
||||
X,
|
||||
Plus,
|
||||
Trash2,
|
||||
ShoppingCart,
|
||||
Check,
|
||||
Loader2,
|
||||
Pencil,
|
||||
} from 'lucide-react';
|
||||
import ConfirmModal from './ConfirmModal';
|
||||
|
||||
interface ShoppingListModalProps {
|
||||
familyId: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type ConfirmAction =
|
||||
| { type: 'delete-item'; itemId: number }
|
||||
| { type: 'mark-all' }
|
||||
| { type: 'clear-all' };
|
||||
|
||||
export default function ShoppingListModal({ familyId, onClose }: ShoppingListModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [items, setItems] = useState<ShoppingItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [newItemName, setNewItemName] = useState('');
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editingName, setEditingName] = useState('');
|
||||
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadItems();
|
||||
}, [familyId]);
|
||||
|
||||
const loadItems = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await shoppingItemApi.getAllByFamily(familyId);
|
||||
setItems(response.data);
|
||||
} catch (err) {
|
||||
console.error('Error loading shopping items:', err);
|
||||
alert(t('shopping.loadError'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddItem = async () => {
|
||||
if (!newItemName.trim()) return;
|
||||
|
||||
try {
|
||||
await shoppingItemApi.create(familyId, { name: newItemName });
|
||||
setNewItemName('');
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error adding item:', err);
|
||||
alert(t('shopping.addError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePurchased = async (itemId: number, currentStatus: boolean) => {
|
||||
try {
|
||||
await shoppingItemApi.markAsPurchased(familyId, itemId, { is_purchased: !currentStatus });
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error toggling purchased status:', err);
|
||||
alert(t('shopping.toggleError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteItem = (itemId: number) => {
|
||||
setConfirmAction({ type: 'delete-item', itemId });
|
||||
};
|
||||
|
||||
const executeDeleteItem = async (itemId: number) => {
|
||||
try {
|
||||
await shoppingItemApi.delete(familyId, itemId);
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error deleting item:', err);
|
||||
alert(t('shopping.deleteError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartEdit = (item: ShoppingItem) => {
|
||||
setEditingId(item.id);
|
||||
setEditingName(item.name);
|
||||
};
|
||||
|
||||
const handleSaveEdit = async (itemId: number) => {
|
||||
if (!editingName.trim()) return;
|
||||
|
||||
try {
|
||||
await shoppingItemApi.update(familyId, itemId, { name: editingName });
|
||||
setEditingId(null);
|
||||
setEditingName('');
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error updating item:', err);
|
||||
alert(t('shopping.updateError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingId(null);
|
||||
setEditingName('');
|
||||
};
|
||||
|
||||
const handleMarkAllPurchased = () => {
|
||||
setConfirmAction({ type: 'mark-all' });
|
||||
};
|
||||
|
||||
const executeMarkAllPurchased = async () => {
|
||||
try {
|
||||
await shoppingItemApi.markAllAsPurchased(familyId);
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error marking all as purchased:', err);
|
||||
alert(t('shopping.markAllError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
setConfirmAction({ type: 'clear-all' });
|
||||
};
|
||||
|
||||
const executeClearAll = async () => {
|
||||
try {
|
||||
await shoppingItemApi.clearAll(familyId);
|
||||
loadItems();
|
||||
} catch (err) {
|
||||
console.error('Error clearing all items:', err);
|
||||
alert(t('shopping.clearError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!confirmAction) return;
|
||||
|
||||
switch (confirmAction.type) {
|
||||
case 'delete-item':
|
||||
executeDeleteItem(confirmAction.itemId);
|
||||
break;
|
||||
case 'mark-all':
|
||||
executeMarkAllPurchased();
|
||||
break;
|
||||
case 'clear-all':
|
||||
executeClearAll();
|
||||
break;
|
||||
}
|
||||
|
||||
setConfirmAction(null);
|
||||
};
|
||||
|
||||
const getConfirmModalContent = () => {
|
||||
if (!confirmAction) return null;
|
||||
|
||||
switch (confirmAction.type) {
|
||||
case 'delete-item':
|
||||
return {
|
||||
title: t('confirm.deleteItem'),
|
||||
message: t('confirm.deleteItemMessage'),
|
||||
confirmText: t('common.delete'),
|
||||
};
|
||||
case 'mark-all':
|
||||
return {
|
||||
title: t('confirm.markAll'),
|
||||
message: t('confirm.markAllMessage'),
|
||||
confirmText: t('confirm.markButton'),
|
||||
variant: 'info' as const,
|
||||
};
|
||||
case 'clear-all':
|
||||
return {
|
||||
title: t('confirm.clearAll'),
|
||||
message: t('confirm.clearAllMessage'),
|
||||
confirmText: t('shopping.clear'),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const unpurchasedItems = items.filter(item => !item.is_purchased);
|
||||
const purchasedItems = items.filter(item => item.is_purchased);
|
||||
const confirmContent = getConfirmModalContent();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="glass-effect rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<div className="btn-success p-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
|
||||
<ShoppingCart className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-white">{t('shopping.title')}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-white/20 rounded-xl transition-all"
|
||||
>
|
||||
<X className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 flex-1 overflow-y-auto">
|
||||
<div className="mb-6">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('shopping.addPlaceholder')}
|
||||
value={newItemName}
|
||||
onChange={(e) => setNewItemName(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleAddItem()}
|
||||
className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddItem}
|
||||
className="px-6 py-3 btn-success text-white rounded-2xl hover:shadow-lg transition-all font-semibold flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
<span className="hidden sm:inline">{t('common.add')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-green-500" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{unpurchasedItems.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.toBuy')}</h3>
|
||||
<div className="space-y-2">
|
||||
{unpurchasedItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-gray-50 p-4 rounded-2xl border-2 border-gray-200 hover:border-green-300 transition-all"
|
||||
>
|
||||
{editingId === item.id ? (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={editingName}
|
||||
onChange={(e) => setEditingName(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleSaveEdit(item.id)}
|
||||
className="flex-1 px-3 py-2 border-2 border-green-300 rounded-xl focus:border-green-500 focus:ring-2 focus:ring-green-200"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSaveEdit(item.id)}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-all"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelEdit}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-xl hover:bg-gray-400 transition-all"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => handleTogglePurchased(item.id, item.is_purchased)}
|
||||
className="w-6 h-6 border-2 border-gray-400 rounded-lg hover:border-green-500 transition-all"
|
||||
/>
|
||||
<span className="text-gray-800 font-medium">{item.name}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleStartEdit(item)}
|
||||
className="p-2 hover:bg-gray-200 rounded-xl transition-all"
|
||||
>
|
||||
<Pencil className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteItem(item.id)}
|
||||
className="p-2 hover:bg-red-100 rounded-xl transition-all"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{purchasedItems.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.purchased')}</h3>
|
||||
<div className="space-y-2">
|
||||
{purchasedItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="shopping-purchased p-4 rounded-2xl border-2"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => handleTogglePurchased(item.id, item.is_purchased)}
|
||||
className="w-6 h-6 bg-green-500 border-2 border-green-500 rounded-lg flex items-center justify-center hover:bg-green-600 transition-all"
|
||||
>
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<span className="text-gray-500 line-through">{item.name}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteItem(item.id)}
|
||||
className="p-2 hover:bg-red-100 rounded-xl transition-all"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<ShoppingCart className="w-16 h-16 mx-auto mb-4 opacity-30" />
|
||||
<p className="text-lg">{t('shopping.empty')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{items.length > 0 && (
|
||||
<div className="p-6 border-t-2 border-gray-200 bg-gray-50">
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleMarkAllPurchased}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 btn-success text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
{t('shopping.allPurchased')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 btn-danger text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
{t('shopping.clear')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{confirmContent && (
|
||||
<ConfirmModal
|
||||
title={confirmContent.title}
|
||||
message={confirmContent.message}
|
||||
confirmText={confirmContent.confirmText}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={() => setConfirmAction(null)}
|
||||
variant={confirmContent.variant || 'danger'}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user