Arrelin/family_budget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
arrelin
2026-01-23 12:23:25 +03:00
parent a3e941b19f
commit 71f772f2b9
14 changed files with 569 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/ShoppingListModal.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { shoppingItemApi } from '../api/client';
import type { ShoppingItem } from '../types';
import {
@@ -23,6 +24,7 @@ type ConfirmAction =
| { 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('');
@@ -41,7 +43,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
setItems(response.data);
} catch (err) {
console.error('Error loading shopping items:', err);
alert('Ошибка загрузки списка покупок');
alert(t('shopping.loadError'));
} finally {
setLoading(false);
}
@@ -56,7 +58,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error adding item:', err);
alert('Ошибка добавления покупки');
alert(t('shopping.addError'));
}
};
@@ -66,7 +68,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error toggling purchased status:', err);
alert('Ошибка изменения статуса');
alert(t('shopping.toggleError'));
}
};
@@ -80,7 +82,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error deleting item:', err);
alert('Ошибка удаления покупки');
alert(t('shopping.deleteError'));
}
};
@@ -99,7 +101,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error updating item:', err);
alert('Ошибка обновления покупки');
alert(t('shopping.updateError'));
}
};
@@ -118,7 +120,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error marking all as purchased:', err);
alert('Ошибка обновления списка');
alert(t('shopping.markAllError'));
}
};
@@ -132,7 +134,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
loadItems();
} catch (err) {
console.error('Error clearing all items:', err);
alert('Ошибка очистки списка');
alert(t('shopping.clearError'));
}
};
@@ -160,22 +162,22 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
switch (confirmAction.type) {
case 'delete-item':
return {
title: 'Удалить покупку?',
message: 'Покупка будет удалена из списка безвозвратно.',
confirmText: 'Удалить',
title: t('confirm.deleteItem'),
message: t('confirm.deleteItemMessage'),
confirmText: t('common.delete'),
};
case 'mark-all':
return {
title: 'Пометить все как купленные?',
message: 'Все покупки в списке будут отмечены как купленные.',
confirmText: 'Пометить',
title: t('confirm.markAll'),
message: t('confirm.markAllMessage'),
confirmText: t('confirm.markButton'),
variant: 'info' as const,
};
case 'clear-all':
return {
title: 'Очистить список?',
message: 'Все покупки будут удалены из списка безвозвратно.',
confirmText: 'Очистить',
title: t('confirm.clearAll'),
message: t('confirm.clearAllMessage'),
confirmText: t('shopping.clear'),
};
}
};
@@ -193,7 +195,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
<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">Список покупок</h2>
<h2 className="text-3xl font-bold text-white">{t('shopping.title')}</h2>
</div>
<button
onClick={onClose}
@@ -208,7 +210,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
<div className="flex gap-2">
<input
type="text"
placeholder="Добавить покупку..."
placeholder={t('shopping.addPlaceholder')}
value={newItemName}
onChange={(e) => setNewItemName(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleAddItem()}
@@ -219,7 +221,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
className="px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 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">Добавить</span>
<span className="hidden sm:inline">{t('common.add')}</span>
</button>
</div>
</div>
@@ -232,7 +234,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
<div className="space-y-6">
{unpurchasedItems.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-gray-700 mb-3">К покупке</h3>
<h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.toBuy')}</h3>
<div className="space-y-2">
{unpurchasedItems.map((item) => (
<div
@@ -295,7 +297,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
{purchasedItems.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-gray-700 mb-3">Куплено</h3>
<h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.purchased')}</h3>
<div className="space-y-2">
{purchasedItems.map((item) => (
<div
@@ -328,7 +330,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
{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">Список покупок пуст</p>
<p className="text-lg">{t('shopping.empty')}</p>
</div>
)}
</div>
@@ -343,14 +345,14 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-green-500 to-green-600 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 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
>
<Trash2 className="w-5 h-5" />
Очистить
{t('shopping.clear')}
</button>
</div>
</div>