Initial commit
This commit is contained in:
michaeltieso
482
components/admin/WishlistCard.tsx
Normal file
482
components/admin/WishlistCard.tsx
Normal file
@@ -0,0 +1,482 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { type Wishlist, type Item, itemsApi } from '@/lib/api';
|
||||
import ImageUpload from '@/components/image-upload';
|
||||
import RichTextEditor from '@/components/RichTextEditor';
|
||||
import ItemCard from './ItemCard';
|
||||
import ItemForm from './ItemForm';
|
||||
|
||||
interface WishlistCardProps {
|
||||
wishlist: Wishlist;
|
||||
itemCount: number;
|
||||
onUpdate: (id: string, data: Partial<Wishlist>) => Promise<void>;
|
||||
onDelete: (id: string) => Promise<void>;
|
||||
onMoveUp: (id: string) => Promise<void>;
|
||||
onMoveDown: (id: string) => Promise<void>;
|
||||
isFirst: boolean;
|
||||
isLast: boolean;
|
||||
onItemsChange: () => void;
|
||||
}
|
||||
|
||||
export default function WishlistCard({
|
||||
wishlist,
|
||||
itemCount,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
isFirst,
|
||||
isLast,
|
||||
onItemsChange,
|
||||
}: WishlistCardProps) {
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editForm, setEditForm] = useState({
|
||||
name: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
preferences: '',
|
||||
imageUrl: '',
|
||||
isPublic: true,
|
||||
});
|
||||
const [editError, setEditError] = useState('');
|
||||
const [isWishlistImageUploading, setIsWishlistImageUploading] = useState(false);
|
||||
const [expandedWishlistId, setExpandedWishlistId] = useState<string | null>(null);
|
||||
const [wishlistItems, setWishlistItems] = useState<Item[]>([]);
|
||||
const [editingItemId, setEditingItemId] = useState<string | null>(null);
|
||||
const [showAddItemForm, setShowAddItemForm] = useState(false);
|
||||
const [newItemError, setNewItemError] = useState<string>('');
|
||||
|
||||
const startEditing = () => {
|
||||
setEditingId(wishlist.id);
|
||||
setEditForm({
|
||||
name: wishlist.name,
|
||||
slug: wishlist.slug,
|
||||
description: wishlist.description || '',
|
||||
preferences: wishlist.preferences || '',
|
||||
imageUrl: wishlist.imageUrl || '',
|
||||
isPublic: wishlist.isPublic,
|
||||
});
|
||||
setEditError('');
|
||||
};
|
||||
|
||||
const cancelEditing = () => {
|
||||
setEditingId(null);
|
||||
setEditError('');
|
||||
};
|
||||
|
||||
const handleEditNameChange = (name: string) => {
|
||||
setEditForm((prev) => ({
|
||||
...prev,
|
||||
name,
|
||||
slug: name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-|-$/g, ''),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleUpdateWishlist = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setEditError('');
|
||||
|
||||
try {
|
||||
await onUpdate(wishlist.id, editForm);
|
||||
setEditingId(null);
|
||||
} catch (error: any) {
|
||||
setEditError(error.message || 'Failed to update wishlist');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleWishlistExpand = async () => {
|
||||
if (expandedWishlistId === wishlist.id) {
|
||||
setExpandedWishlistId(null);
|
||||
} else {
|
||||
setExpandedWishlistId(wishlist.id);
|
||||
const items = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(items);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateItem = async (itemData: Partial<Item>) => {
|
||||
setNewItemError('');
|
||||
try {
|
||||
await itemsApi.create(wishlist.id, itemData);
|
||||
setShowAddItemForm(false);
|
||||
const items = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(items);
|
||||
onItemsChange();
|
||||
} catch (error: any) {
|
||||
setNewItemError(error.message || 'Failed to create item');
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateItem = async (itemData: Partial<Item>) => {
|
||||
if (!editingItemId) return;
|
||||
try {
|
||||
await itemsApi.update(editingItemId, itemData);
|
||||
setEditingItemId(null);
|
||||
const items = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(items);
|
||||
onItemsChange();
|
||||
} catch (error: any) {
|
||||
alert(error.message || 'Failed to update item');
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteItem = async (itemId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this item?')) return;
|
||||
|
||||
try {
|
||||
await itemsApi.delete(itemId);
|
||||
const items = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(items);
|
||||
onItemsChange();
|
||||
} catch (error) {
|
||||
alert('Failed to delete item');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveItemUp = async (itemId: string) => {
|
||||
const currentIndex = wishlistItems.findIndex((item) => item.id === itemId);
|
||||
if (currentIndex <= 0) return;
|
||||
|
||||
try {
|
||||
await itemsApi.reorder(itemId, currentIndex - 1);
|
||||
const updatedItems = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(updatedItems);
|
||||
} catch (error: any) {
|
||||
alert(error?.message || 'Failed to reorder item');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveItemDown = async (itemId: string) => {
|
||||
const currentIndex = wishlistItems.findIndex((item) => item.id === itemId);
|
||||
if (currentIndex === -1 || currentIndex === wishlistItems.length - 1) return;
|
||||
|
||||
try {
|
||||
await itemsApi.reorder(itemId, currentIndex + 1);
|
||||
const updatedItems = await itemsApi.getAll(wishlist.id);
|
||||
setWishlistItems(updatedItems);
|
||||
} catch (error: any) {
|
||||
alert(error?.message || 'Failed to reorder item');
|
||||
}
|
||||
};
|
||||
|
||||
const editingItem = wishlistItems.find((item) => item.id === editingItemId);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="p-5 border-b border-gray-200 dark:border-gray-700">
|
||||
{editError && (
|
||||
<div className="mb-3 p-3 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded-lg text-base">
|
||||
{editError}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-stretch -m-5">
|
||||
{/* Arrow buttons on the left */}
|
||||
<div className="flex flex-col w-12 border-r border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMoveUp(wishlist.id);
|
||||
}}
|
||||
disabled={isFirst}
|
||||
className="flex-1 flex items-center justify-center text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border-b border-gray-200 dark:border-gray-700 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Move up"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMoveDown(wishlist.id);
|
||||
}}
|
||||
disabled={isLast}
|
||||
className="flex-1 flex items-center justify-center text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Move down"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 p-5">
|
||||
{editingId === wishlist.id ? (
|
||||
// Inline Edit Mode
|
||||
<div className="space-y-3">
|
||||
<ImageUpload
|
||||
currentImageUrl={editForm.imageUrl}
|
||||
onImageChange={(url) =>
|
||||
setEditForm((prev) => ({ ...prev, imageUrl: url }))
|
||||
}
|
||||
onUploadStateChange={setIsWishlistImageUploading}
|
||||
type="wishlist"
|
||||
label="Wishlist Image"
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Wishlist Name *
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.name}
|
||||
onChange={(e) => handleEditNameChange(e.target.value)}
|
||||
className="text-lg font-bold px-2 py-1 border-2 border-indigo-500 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white flex-1"
|
||||
placeholder="Wishlist name"
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-base">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editForm.isPublic}
|
||||
onChange={(e) =>
|
||||
setEditForm((prev) => ({
|
||||
...prev,
|
||||
isPublic: e.target.checked,
|
||||
}))
|
||||
}
|
||||
className="h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
<span className="text-gray-700 dark:text-gray-300">Public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
URL Slug *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.slug}
|
||||
onChange={(e) =>
|
||||
setEditForm((prev) => ({ ...prev, slug: e.target.value }))
|
||||
}
|
||||
className="text-base px-2 py-1 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white w-full"
|
||||
placeholder="url-slug"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={editForm.description}
|
||||
onChange={(e) =>
|
||||
setEditForm((prev) => ({
|
||||
...prev,
|
||||
description: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="text-base px-2 py-1 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white w-full"
|
||||
placeholder="Description"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Preferences
|
||||
</label>
|
||||
<RichTextEditor
|
||||
value={editForm.preferences}
|
||||
onChange={(html) => setEditForm((prev) => ({ ...prev, preferences: html }))}
|
||||
placeholder="General interests and preferences..."
|
||||
/>
|
||||
</div>
|
||||
<p className="text-base text-gray-500 dark:text-gray-500">
|
||||
{itemCount} items
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Display Mode
|
||||
<div className="flex items-start gap-3">
|
||||
{wishlist.imageUrl && (
|
||||
<img
|
||||
src={wishlist.imageUrl}
|
||||
alt={wishlist.name}
|
||||
className="w-20 h-20 object-cover rounded border border-gray-200 dark:border-gray-600"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{wishlist.name}
|
||||
</h3>
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-1 rounded-full text-base font-medium ${
|
||||
wishlist.isPublic
|
||||
? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
|
||||
: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{wishlist.isPublic ? 'Public' : 'Private'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-base text-gray-600 dark:text-gray-400 mb-1">
|
||||
/{wishlist.slug}
|
||||
</p>
|
||||
{wishlist.description && (
|
||||
<p className="text-base text-gray-600 dark:text-gray-400 mb-1">
|
||||
{wishlist.description}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-base text-gray-500 dark:text-gray-500">
|
||||
{itemCount} items
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col w-24 border-l border-gray-200 dark:border-gray-700">
|
||||
{editingId === wishlist.id ? (
|
||||
<>
|
||||
<button
|
||||
onClick={cancelEditing}
|
||||
className="flex-1 flex items-center justify-center text-base font-semibold text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border-b border-gray-200 dark:border-gray-700"
|
||||
title="Cancel"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleUpdateWishlist(e as any);
|
||||
}}
|
||||
disabled={isWishlistImageUploading}
|
||||
className="flex-1 flex items-center justify-center text-base font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={isWishlistImageUploading ? "Uploading..." : "Save"}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditing();
|
||||
}}
|
||||
className="flex-1 flex items-center justify-center text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border-b border-gray-200 dark:border-gray-700 cursor-pointer"
|
||||
title="Edit wishlist"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(wishlist.id);
|
||||
}}
|
||||
className="flex-1 flex items-center justify-center text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors cursor-pointer"
|
||||
title="Delete wishlist"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expand/Collapse Row */}
|
||||
<button
|
||||
onClick={toggleWishlistExpand}
|
||||
className="w-full px-5 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center justify-center gap-2 text-base font-medium text-gray-700 dark:text-gray-300 cursor-pointer"
|
||||
>
|
||||
{expandedWishlistId === wishlist.id ? (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
<span>Hide Items</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<span>Show Items ({itemCount})</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Items Section */}
|
||||
{expandedWishlistId === wishlist.id && (
|
||||
<div className="p-5 bg-gray-50 dark:bg-gray-900/50">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Items ({wishlistItems.length})
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddItemForm(true);
|
||||
setNewItemError('');
|
||||
}}
|
||||
className="px-4 py-2 text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
+ Add Item
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Item Form */}
|
||||
{showAddItemForm && (
|
||||
<ItemForm
|
||||
mode="create"
|
||||
onSubmit={handleCreateItem}
|
||||
onCancel={() => {
|
||||
setShowAddItemForm(false);
|
||||
setNewItemError('');
|
||||
}}
|
||||
error={newItemError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Items List */}
|
||||
{wishlistItems.length === 0 ? (
|
||||
<p className="text-base text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No items yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{wishlistItems.map((item, index) => (
|
||||
<div key={item.id}>
|
||||
{editingItemId === item.id ? (
|
||||
<ItemForm
|
||||
mode="edit"
|
||||
item={editingItem}
|
||||
onSubmit={handleUpdateItem}
|
||||
onCancel={() => setEditingItemId(null)}
|
||||
/>
|
||||
) : (
|
||||
<ItemCard
|
||||
item={item}
|
||||
onEdit={() => setEditingItemId(item.id)}
|
||||
onDelete={() => handleDeleteItem(item.id)}
|
||||
onMoveUp={() => handleMoveItemUp(item.id)}
|
||||
onMoveDown={() => handleMoveItemDown(item.id)}
|
||||
isFirst={index === 0}
|
||||
isLast={index === wishlistItems.length - 1}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user