Created comprehensive admin card editor
- Built complete admin interface for editing all card properties - Added card search functionality with live results - Created comprehensive form with sections for: * Basic information (name, game, set, rarity, etc.) * Game mechanics (type, mana cost, power/toughness, colors) * Card text and oracle text * Image URLs (primary and stock images) * Pricing information (current and market prices) - Added real-time card preview that updates as you edit - Implemented PUT API endpoint for updating cards - Added proper validation and error handling - Added database schema updates (updated_at column) - Integrated admin navigation between card editor and import tools - Full responsive design with modern UI components - Live search with card thumbnails and metadata - Proper form state management and data persistence
This commit is contained in:
Randall Stillwell
parent
bb60b4f6b0
commit
f27a7333db
4 changed files with 923 additions and 34 deletions
753
pages/admin/card-editor.js
Normal file
753
pages/admin/card-editor.js
Normal file
|
|
@ -0,0 +1,753 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Layout from '../../components/Layout';
|
||||
|
||||
export default function CardEditor() {
|
||||
const router = useRouter();
|
||||
const { id } = router.query;
|
||||
|
||||
const user = {
|
||||
email: 'admin@tcgvault.com',
|
||||
role: 'admin'
|
||||
};
|
||||
|
||||
const [card, setCard] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
set_name: '',
|
||||
set_code: '',
|
||||
card_number: '',
|
||||
rarity: '',
|
||||
game: '',
|
||||
mana_cost: '',
|
||||
cmc: '',
|
||||
card_type: '',
|
||||
colors: [],
|
||||
oracle_text: '',
|
||||
power: '',
|
||||
toughness: '',
|
||||
image_url: '',
|
||||
stock_image_url: '',
|
||||
current_price: '',
|
||||
market_price: ''
|
||||
});
|
||||
|
||||
// Load card data if ID is provided
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchCard(id);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const fetchCard = async (cardId) => {
|
||||
try {
|
||||
const response = await fetch(`/api/cards/${cardId}`);
|
||||
if (response.ok) {
|
||||
const cardData = await response.json();
|
||||
setCard(cardData);
|
||||
setFormData({
|
||||
name: cardData.name || '',
|
||||
set_name: cardData.set_name || '',
|
||||
set_code: cardData.set_code || '',
|
||||
card_number: cardData.card_number || '',
|
||||
rarity: cardData.rarity || '',
|
||||
game: cardData.game || '',
|
||||
mana_cost: cardData.mana_cost || '',
|
||||
cmc: cardData.cmc || '',
|
||||
card_type: cardData.card_type || '',
|
||||
colors: Array.isArray(cardData.colors) ? cardData.colors : [],
|
||||
oracle_text: cardData.oracle_text || '',
|
||||
power: cardData.power || '',
|
||||
toughness: cardData.toughness || '',
|
||||
image_url: cardData.image_url || '',
|
||||
stock_image_url: cardData.stock_image_url || '',
|
||||
current_price: cardData.current_price || '',
|
||||
market_price: cardData.market_price || ''
|
||||
});
|
||||
} else {
|
||||
setMessage('Card not found');
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('Error loading card: ' + error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const searchCards = async (query) => {
|
||||
if (!query.trim()) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setSearchLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/cards/search?query=${encodeURIComponent(query)}&limit=20`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSearchResults(data.cards || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
setSearchLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleColorChange = (color, checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
colors: checked
|
||||
? [...prev.colors, color]
|
||||
: prev.colors.filter(c => c !== color)
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!card?.id) {
|
||||
setMessage('No card selected to edit');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setMessage('');
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/cards/${card.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...formData,
|
||||
cmc: formData.cmc ? parseInt(formData.cmc) : null,
|
||||
current_price: formData.current_price ? parseFloat(formData.current_price) : null,
|
||||
market_price: formData.market_price ? parseFloat(formData.market_price) : null
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const updatedCard = await response.json();
|
||||
setCard(updatedCard);
|
||||
setMessage('Card updated successfully!');
|
||||
|
||||
// Clear message after 3 seconds
|
||||
setTimeout(() => setMessage(''), 3000);
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
setMessage('Error updating card: ' + (errorData.error || 'Unknown error'));
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('Error updating card: ' + error.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectCard = (selectedCard) => {
|
||||
router.push(`/admin/card-editor?id=${selectedCard.id}`);
|
||||
};
|
||||
|
||||
const rarityOptions = [
|
||||
'common', 'uncommon', 'rare', 'mythic', 'legendary',
|
||||
'holographic', 'enchanted', 'super rare', 'ultra rare'
|
||||
];
|
||||
|
||||
const gameOptions = ['MTG', 'Pokemon', 'Lorcana'];
|
||||
|
||||
const colorOptions = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<div className="container mx-auto px-6 py-8">
|
||||
{/* Admin Navigation */}
|
||||
<div className="mb-8 p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
Admin Tools
|
||||
</h1>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/admin/card-editor')}
|
||||
className="px-4 py-2 rounded-lg font-medium gradient-bg-purple text-white"
|
||||
>
|
||||
🖊️ Card Editor
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/admin/card-import')}
|
||||
className="px-4 py-2 rounded-lg font-medium transition-all duration-200 border"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
>
|
||||
📥 Card Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Admin Card Editor
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>
|
||||
Search for a card to edit its details, or continue editing the selected card.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Search */}
|
||||
<div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Find Card to Edit
|
||||
</h2>
|
||||
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for cards by name..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
searchCards(e.target.value);
|
||||
}}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Results */}
|
||||
{searchLoading && (
|
||||
<div className="text-center py-4">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResults.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{searchResults.map((searchCard) => (
|
||||
<div
|
||||
key={searchCard.id}
|
||||
onClick={() => selectCard(searchCard)}
|
||||
className="p-4 rounded-lg border cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
{searchCard.image_url ? (
|
||||
<img
|
||||
src={searchCard.image_url}
|
||||
alt={searchCard.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{searchCard.game}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||
{searchCard.name}
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{searchCard.set_name} • {searchCard.game}
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{searchCard.rarity}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Editor Form */}
|
||||
{card && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Card Preview */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-8">
|
||||
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Preview
|
||||
</h2>
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<div className="w-full max-w-xs mx-auto">
|
||||
<div
|
||||
className="w-full rounded-lg overflow-hidden shadow-lg"
|
||||
style={{ aspectRatio: '5/7' }}
|
||||
>
|
||||
{formData.image_url ? (
|
||||
<img
|
||||
src={formData.image_url}
|
||||
alt={formData.name}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
e.target.style.display = 'none';
|
||||
e.target.nextSibling.style.display = 'flex';
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div
|
||||
className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
|
||||
style={{ backgroundColor: 'var(--bg-primary)' }}
|
||||
>
|
||||
<div className="text-center p-4">
|
||||
<div className="text-4xl mb-2">🃏</div>
|
||||
<div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||
{formData.name || 'Card Name'}
|
||||
</div>
|
||||
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formData.set_name || 'Set Name'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{formData.name || 'Card Name'}
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formData.set_name} • {formData.game}
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formData.rarity} • {formData.card_type}
|
||||
</p>
|
||||
{formData.current_price && (
|
||||
<p className="text-lg font-bold mt-2 gradient-text-gold">
|
||||
${parseFloat(formData.current_price).toFixed(2)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||
Edit Card Details
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||
saving
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'gradient-bg-purple text-white hover:shadow-lg'
|
||||
}`}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`p-4 rounded-lg mb-6 ${
|
||||
message.includes('Error')
|
||||
? 'bg-red-100 text-red-700 border border-red-200'
|
||||
: 'bg-green-100 text-green-700 border border-green-200'
|
||||
}`}>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Basic Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Game *
|
||||
</label>
|
||||
<select
|
||||
value={formData.game}
|
||||
onChange={(e) => handleInputChange('game', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
>
|
||||
<option value="">Select Game</option>
|
||||
{gameOptions.map(game => (
|
||||
<option key={game} value={game}>{game}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Set Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.set_name}
|
||||
onChange={(e) => handleInputChange('set_name', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Set Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.set_code}
|
||||
onChange={(e) => handleInputChange('set_code', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.card_number}
|
||||
onChange={(e) => handleInputChange('card_number', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Rarity
|
||||
</label>
|
||||
<select
|
||||
value={formData.rarity}
|
||||
onChange={(e) => handleInputChange('rarity', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
>
|
||||
<option value="">Select Rarity</option>
|
||||
{rarityOptions.map(rarity => (
|
||||
<option key={rarity} value={rarity}>{rarity}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Game Mechanics */}
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Game Mechanics
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Type
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.card_type}
|
||||
onChange={(e) => handleInputChange('card_type', e.target.value)}
|
||||
placeholder="e.g., Creature, Instant, Pokemon, Character"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Mana Cost
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.mana_cost}
|
||||
onChange={(e) => handleInputChange('mana_cost', e.target.value)}
|
||||
placeholder="e.g., {2}{U}{U}, 3, etc."
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
CMC (Converted Mana Cost)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.cmc}
|
||||
onChange={(e) => handleInputChange('cmc', e.target.value)}
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Power
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.power}
|
||||
onChange={(e) => handleInputChange('power', e.target.value)}
|
||||
placeholder="e.g., 2, *, X"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Toughness
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.toughness}
|
||||
onChange={(e) => handleInputChange('toughness', e.target.value)}
|
||||
placeholder="e.g., 2, *, X"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Colors */}
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Colors
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{colorOptions.map(color => (
|
||||
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.colors.includes(color)}
|
||||
onChange={(e) => handleColorChange(color, e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span style={{ color: 'var(--text-primary)' }}>{color}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Text */}
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Text
|
||||
</h3>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Oracle Text / Abilities
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.oracle_text}
|
||||
onChange={(e) => handleInputChange('oracle_text', e.target.value)}
|
||||
rows={4}
|
||||
placeholder="Enter the card's rules text, abilities, or flavor text..."
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Images */}
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Images
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Primary Image URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.image_url}
|
||||
onChange={(e) => handleInputChange('image_url', e.target.value)}
|
||||
placeholder="https://example.com/card-image.jpg"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Stock Image URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.stock_image_url}
|
||||
onChange={(e) => handleInputChange('stock_image_url', e.target.value)}
|
||||
placeholder="https://example.com/stock-image.jpg"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing */}
|
||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||
Pricing Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Current Price ($)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.current_price}
|
||||
onChange={(e) => handleInputChange('current_price', e.target.value)}
|
||||
placeholder="0.00"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Market Price ($)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.market_price}
|
||||
onChange={(e) => handleInputChange('market_price', e.target.value)}
|
||||
placeholder="0.00"
|
||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!card && !loading && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">🔍</div>
|
||||
<h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Search for a Card to Edit
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>
|
||||
Use the search box above to find a card you want to edit.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Layout from '../../components/Layout';
|
||||
|
||||
export default function CardImport() {
|
||||
const router = useRouter();
|
||||
const [importType, setImportType] = useState('mtg');
|
||||
const [setCode, setSetCode] = useState('');
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
|
|
@ -82,13 +84,47 @@ export default function CardImport() {
|
|||
]
|
||||
};
|
||||
|
||||
const user = {
|
||||
email: 'admin@tcgvault.com',
|
||||
role: 'admin'
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout user={{ email: 'admin@tcgvault.com', role: 'admin' }}>
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Import Manager
|
||||
<Layout user={user}>
|
||||
<div className="container mx-auto px-6 py-8">
|
||||
{/* Admin Navigation */}
|
||||
<div className="mb-8 p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
Admin Tools
|
||||
</h1>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/admin/card-editor')}
|
||||
className="px-4 py-2 rounded-lg font-medium transition-all duration-200 border"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-primary)'
|
||||
}}
|
||||
>
|
||||
🖊️ Card Editor
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/admin/card-import')}
|
||||
className="px-4 py-2 rounded-lg font-medium gradient-bg-purple text-white"
|
||||
>
|
||||
📥 Card Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Import Section */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Card Import Manager
|
||||
</h2>
|
||||
<p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
|
||||
Import cards from external APIs into your database
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
import { sql } from '@vercel/postgres';
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method !== 'GET') {
|
||||
return res.status(405).json({ error: 'Method not allowed' });
|
||||
}
|
||||
|
||||
const { id } = req.query;
|
||||
|
||||
if (req.method === 'GET') {
|
||||
try {
|
||||
const result = await sql`
|
||||
SELECT
|
||||
|
|
@ -39,4 +36,71 @@ export default async function handler(req, res) {
|
|||
console.error('Error fetching card:', error);
|
||||
res.status(500).json({ error: 'Failed to fetch card' });
|
||||
}
|
||||
} else if (req.method === 'PUT') {
|
||||
try {
|
||||
const {
|
||||
name, set_name, set_code, card_number, rarity, game,
|
||||
mana_cost, cmc, card_type, colors, oracle_text,
|
||||
power, toughness, image_url, stock_image_url,
|
||||
current_price, market_price
|
||||
} = req.body;
|
||||
|
||||
// Validate required fields
|
||||
if (!name || !game) {
|
||||
return res.status(400).json({ error: 'Name and game are required fields' });
|
||||
}
|
||||
|
||||
// Update the card
|
||||
const result = await sql`
|
||||
UPDATE cards SET
|
||||
name = ${name},
|
||||
set_name = ${set_name || null},
|
||||
set_code = ${set_code || null},
|
||||
card_number = ${card_number || null},
|
||||
rarity = ${rarity || null},
|
||||
game = ${game},
|
||||
mana_cost = ${mana_cost || null},
|
||||
cmc = ${cmc || null},
|
||||
card_type = ${card_type || null},
|
||||
colors = ${JSON.stringify(colors || [])},
|
||||
oracle_text = ${oracle_text || null},
|
||||
power = ${power || null},
|
||||
toughness = ${toughness || null},
|
||||
image_url = ${image_url || null},
|
||||
stock_image_url = ${stock_image_url || null},
|
||||
current_price = ${current_price || null},
|
||||
market_price = ${market_price || null},
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = ${id}
|
||||
RETURNING
|
||||
id, name, set_name, set_code, card_number, rarity, game,
|
||||
mana_cost, cmc, card_type, colors, oracle_text,
|
||||
power, toughness, image_url, stock_image_url,
|
||||
current_price, market_price, scryfall_id, verified,
|
||||
quantity, created_at, updated_at
|
||||
`;
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({ error: 'Card not found' });
|
||||
}
|
||||
|
||||
const updatedCard = result.rows[0];
|
||||
|
||||
// Parse colors if it's a JSON string
|
||||
if (updatedCard.colors && typeof updatedCard.colors === 'string') {
|
||||
try {
|
||||
updatedCard.colors = JSON.parse(updatedCard.colors);
|
||||
} catch (e) {
|
||||
updatedCard.colors = [];
|
||||
}
|
||||
}
|
||||
|
||||
res.status(200).json(updatedCard);
|
||||
} catch (error) {
|
||||
console.error('Error updating card:', error);
|
||||
res.status(500).json({ error: 'Failed to update card' });
|
||||
}
|
||||
} else {
|
||||
res.status(405).json({ error: 'Method not allowed' });
|
||||
}
|
||||
}
|
||||
36
scripts/add-updated-at-column.js
Normal file
36
scripts/add-updated-at-column.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Add updated_at column to cards table
|
||||
*
|
||||
* This script adds the updated_at column to the cards table if it doesn't exist.
|
||||
*/
|
||||
|
||||
import dotenv from 'dotenv';
|
||||
import { neon } from '@neondatabase/serverless';
|
||||
|
||||
// Load environment variables from .env.local
|
||||
dotenv.config({ path: '.env.local' });
|
||||
|
||||
async function addUpdatedAtColumn() {
|
||||
const sql = neon(process.env.POSTGRES_URL);
|
||||
|
||||
try {
|
||||
console.log('✅ Connecting to Neon database...');
|
||||
|
||||
// Add updated_at column
|
||||
await sql`
|
||||
ALTER TABLE cards
|
||||
ADD COLUMN IF NOT EXISTS updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
`;
|
||||
console.log('✅ Added updated_at column to cards table');
|
||||
|
||||
console.log('🎉 Updated_at column added successfully!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to add column:', error.message);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
addUpdatedAtColumn();
|
||||
Loading…
Reference in a new issue