poignatov-home
286
play-life-web/src/components/BoardForm.jsx
Normal file
286
play-life-web/src/components/BoardForm.jsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useAuth } from './auth/AuthContext'
|
||||
import BoardMembers from './BoardMembers'
|
||||
import Toast from './Toast'
|
||||
import SubmitButton from './SubmitButton'
|
||||
import DeleteButton from './DeleteButton'
|
||||
import './Buttons.css'
|
||||
import './BoardForm.css'
|
||||
|
||||
function BoardForm({ boardId, onNavigate, onSaved }) {
|
||||
const { authFetch } = useAuth()
|
||||
const [name, setName] = useState('')
|
||||
const [inviteEnabled, setInviteEnabled] = useState(false)
|
||||
const [inviteURL, setInviteURL] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [loadingBoard, setLoadingBoard] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [toastMessage, setToastMessage] = useState(null)
|
||||
|
||||
const isEdit = !!boardId
|
||||
|
||||
useEffect(() => {
|
||||
if (boardId) {
|
||||
fetchBoard()
|
||||
}
|
||||
}, [boardId])
|
||||
|
||||
const fetchBoard = async () => {
|
||||
setLoadingBoard(true)
|
||||
try {
|
||||
const res = await authFetch(`/api/wishlist/boards/${boardId}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setName(data.name)
|
||||
setInviteEnabled(data.invite_enabled)
|
||||
setInviteURL(data.invite_url || '')
|
||||
} else {
|
||||
setToastMessage({ text: 'Ошибка загрузки доски', type: 'error' })
|
||||
}
|
||||
} catch (err) {
|
||||
setToastMessage({ text: 'Ошибка загрузки', type: 'error' })
|
||||
} finally {
|
||||
setLoadingBoard(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
setToastMessage({ text: 'Введите название доски', type: 'error' })
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const url = boardId
|
||||
? `/api/wishlist/boards/${boardId}`
|
||||
: '/api/wishlist/boards'
|
||||
|
||||
const res = await authFetch(url, {
|
||||
method: boardId ? 'PUT' : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
invite_enabled: inviteEnabled
|
||||
})
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
if (data.invite_url) {
|
||||
setInviteURL(data.invite_url)
|
||||
}
|
||||
onSaved?.()
|
||||
if (!boardId) {
|
||||
// При создании возвращаемся назад
|
||||
onNavigate('wishlist', { boardId: data.id })
|
||||
} else {
|
||||
// При редактировании возвращаемся на доску
|
||||
onNavigate('wishlist', { boardId: boardId })
|
||||
}
|
||||
} else {
|
||||
const err = await res.json()
|
||||
setToastMessage({ text: err.error || 'Ошибка сохранения', type: 'error' })
|
||||
}
|
||||
} catch (err) {
|
||||
setToastMessage({ text: 'Ошибка сохранения', type: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Функция для автоматической генерации ссылки при включении доступа
|
||||
const generateInviteLink = async () => {
|
||||
try {
|
||||
const res = await authFetch(`/api/wishlist/boards/${boardId}/regenerate-invite`, {
|
||||
method: 'POST'
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setInviteURL(data.invite_url)
|
||||
setInviteEnabled(true)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error generating invite link:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyLink = () => {
|
||||
navigator.clipboard.writeText(inviteURL)
|
||||
setCopied(true)
|
||||
setToastMessage({ text: 'Ссылка скопирована', type: 'success' })
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
const handleToggleInvite = async (enabled) => {
|
||||
setInviteEnabled(enabled)
|
||||
|
||||
if (boardId && enabled && !inviteURL) {
|
||||
// Автоматически генерируем ссылку при включении
|
||||
await generateInviteLink()
|
||||
} else if (boardId) {
|
||||
// Просто обновляем статус
|
||||
try {
|
||||
await authFetch(`/api/wishlist/boards/${boardId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ invite_enabled: enabled })
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Error updating invite status:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!window.confirm('Удалить доску? Все желания на ней будут удалены.')) return
|
||||
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const res = await authFetch(`/api/wishlist/boards/${boardId}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
if (res.ok) {
|
||||
onSaved?.()
|
||||
// Передаём флаг, что доска удалена, чтобы Wishlist выбрал первую доступную
|
||||
onNavigate('wishlist', { boardDeleted: true })
|
||||
} else {
|
||||
setToastMessage({ text: 'Ошибка удаления', type: 'error' })
|
||||
setIsDeleting(false)
|
||||
}
|
||||
} catch (err) {
|
||||
setToastMessage({ text: 'Ошибка удаления', type: 'error' })
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
window.history.back()
|
||||
}
|
||||
|
||||
if (loadingBoard) {
|
||||
return (
|
||||
<div className="board-form">
|
||||
<div className="fixed inset-0 bottom-20 flex justify-center items-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
|
||||
<div className="text-gray-600 font-medium">Загрузка...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="board-form">
|
||||
<button className="close-x-button" onClick={handleClose}>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<h2>{isEdit ? 'Настройки доски' : 'Новая доска'}</h2>
|
||||
|
||||
<div className="form-card">
|
||||
<div className="form-group">
|
||||
<label htmlFor="board-name">Название</label>
|
||||
<input
|
||||
id="board-name"
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder="Название доски"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isEdit && (
|
||||
<>
|
||||
{/* Настройки доступа */}
|
||||
<div className="form-section">
|
||||
<h3>Доступ по ссылке</h3>
|
||||
|
||||
<label className="toggle-field">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={inviteEnabled}
|
||||
onChange={e => handleToggleInvite(e.target.checked)}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
<span className="toggle-label">Разрешить присоединение по ссылке</span>
|
||||
</label>
|
||||
|
||||
{inviteEnabled && inviteURL && (
|
||||
<div className="invite-link-section">
|
||||
<div className="invite-url-row">
|
||||
<input
|
||||
type="text"
|
||||
className="invite-url-input"
|
||||
value={inviteURL}
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
className="copy-btn"
|
||||
onClick={handleCopyLink}
|
||||
title="Копировать ссылку"
|
||||
>
|
||||
{copied ? (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<p className="invite-hint">
|
||||
Пользователь, открывший ссылку, сможет присоединиться к доске
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Список участников */}
|
||||
<BoardMembers
|
||||
boardId={boardId}
|
||||
onMemberRemoved={() => {
|
||||
setToastMessage({ text: 'Участник удалён', type: 'success' })
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="form-actions">
|
||||
<SubmitButton
|
||||
onClick={handleSave}
|
||||
loading={loading}
|
||||
disabled={!name.trim()}
|
||||
>
|
||||
Сохранить
|
||||
</SubmitButton>
|
||||
{isEdit && (
|
||||
<DeleteButton
|
||||
onClick={handleDelete}
|
||||
loading={isDeleting}
|
||||
disabled={loading}
|
||||
title="Удалить доску"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{toastMessage && (
|
||||
<Toast
|
||||
message={toastMessage.text}
|
||||
type={toastMessage.type}
|
||||
onClose={() => setToastMessage(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BoardForm
|
||||
|
||||
Reference in New Issue
Block a user