{items.map((item) => (
+ {item.image_url && (
+ 
+ )}
('new');
+ const [form, setForm] = useState(emptyForm);
+ const [status, setStatus] = useState(null);
+ const [error, setError] = useState(null);
+ const [saving, setSaving] = useState(false);
+
+ const itemById = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+
+ const resetForm = () => {
+ setForm({ ...emptyForm });
+ setSelectedId('new');
+ };
+
+ const handleSelect = (id: number | 'new') => {
+ setStatus(null);
+ setError(null);
+ setSelectedId(id);
+ if (id === 'new') {
+ setForm({ ...emptyForm });
+ } else {
+ const item = itemById.get(id);
+ if (item) {
+ // Подставляем актуальные значения товара в форму.
+ setForm({
+ name: item.name,
+ description: item.description,
+ cost_mana: item.cost_mana,
+ stock: item.stock,
+ image_url: item.image_url ?? '',
+ });
+ }
+ }
+ };
+
+ const handleSubmit = async (event: FormEvent) => {
+ event.preventDefault();
+ setSaving(true);
+ setStatus(null);
+ setError(null);
+
+ try {
+ const payload = {
+ name: form.name.trim(),
+ description: form.description.trim(),
+ cost_mana: form.cost_mana,
+ stock: form.stock,
+ image_url: form.image_url.trim() === '' ? null : form.image_url.trim(),
+ };
+
+ if (!payload.name || !payload.description) {
+ throw new Error('Название и описание не должны быть пустыми.');
+ }
+
+ if (selectedId === 'new') {
+ await apiFetch('/api/admin/store/items', {
+ method: 'POST',
+ body: JSON.stringify(payload),
+ authToken: token,
+ });
+ setStatus('Товар добавлен. Мы обновили список, можно проверить карточку ниже.');
+ resetForm();
+ } else {
+ await apiFetch(`/api/admin/store/items/${selectedId}`, {
+ method: 'PATCH',
+ body: JSON.stringify(payload),
+ authToken: token,
+ });
+ setStatus('Изменения сохранены. Страница магазина обновится автоматически.');
+ }
+
+ router.refresh();
+ } catch (submitError) {
+ const message = submitError instanceof Error ? submitError.message : 'Не удалось сохранить товар.';
+ setError(message);
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+
{item.name}
{item.description}
{item.cost_mana} ⚡ · остаток {item.stock}
diff --git a/frontend/src/components/admin/AdminStoreManager.tsx b/frontend/src/components/admin/AdminStoreManager.tsx new file mode 100644 index 0000000..ae40271 --- /dev/null +++ b/frontend/src/components/admin/AdminStoreManager.tsx @@ -0,0 +1,237 @@ +'use client'; + +import { FormEvent, useMemo, useState } from 'react'; +import { useRouter } from 'next/navigation'; + +import { apiFetch } from '../../lib/api'; + +export type StoreItem = { + id: number; + name: string; + description: string; + cost_mana: number; + stock: number; + image_url: string | null; +}; + +interface Props { + token: string; + items: StoreItem[]; +} + +interface FormState { + name: string; + description: string; + cost_mana: number; + stock: number; + image_url: string; +} + +const emptyForm: FormState = { + name: '', + description: '', + cost_mana: 0, + stock: 0, + image_url: '', +}; + +export function AdminStoreManager({ token, items }: Props) { + const router = useRouter(); + const [selectedId, setSelectedId] = useState
+
Магазин
++ Управляйте призами: загружайте изображения, задавайте стоимость в мане и поддерживайте актуальный остаток. +
+ +
+
+
+
+
+
+
+
+