415 lines
14 KiB
TypeScript
415 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { searchApi, tagApi } from '../../lib/api';
|
||
import { Story, Tag } from '../../types/api';
|
||
import { Input } from '../ui/Input';
|
||
import Button from '../ui/Button';
|
||
import LoadingSpinner from '../ui/LoadingSpinner';
|
||
|
||
interface CollectionFormProps {
|
||
initialData?: {
|
||
name: string;
|
||
description?: string;
|
||
tags?: string[];
|
||
storyIds?: string[];
|
||
coverImagePath?: string;
|
||
};
|
||
onSubmit: (data: {
|
||
name: string;
|
||
description?: string;
|
||
tags?: string[];
|
||
storyIds?: string[];
|
||
coverImage?: File;
|
||
}) => Promise<void>;
|
||
onCancel: () => void;
|
||
loading?: boolean;
|
||
submitLabel?: string;
|
||
}
|
||
|
||
export default function CollectionForm({
|
||
initialData,
|
||
onSubmit,
|
||
onCancel,
|
||
loading = false,
|
||
submitLabel = 'Save Collection'
|
||
}: CollectionFormProps) {
|
||
const [name, setName] = useState(initialData?.name || '');
|
||
const [description, setDescription] = useState(initialData?.description || '');
|
||
const [tagInput, setTagInput] = useState('');
|
||
const [selectedTags, setSelectedTags] = useState<string[]>(initialData?.tags || []);
|
||
const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
|
||
const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>(initialData?.storyIds || []);
|
||
const [coverImage, setCoverImage] = useState<File | null>(null);
|
||
const [coverImagePreview, setCoverImagePreview] = useState<string | null>(null);
|
||
|
||
// Story selection state
|
||
const [storySearchQuery, setStorySearchQuery] = useState('');
|
||
const [availableStories, setAvailableStories] = useState<Story[]>([]);
|
||
const [selectedStories, setSelectedStories] = useState<Story[]>([]);
|
||
const [loadingStories, setLoadingStories] = useState(false);
|
||
const [showStorySelection, setShowStorySelection] = useState(false);
|
||
|
||
// Load tag suggestions when typing
|
||
useEffect(() => {
|
||
if (tagInput.length > 1) {
|
||
const loadSuggestions = async () => {
|
||
try {
|
||
const suggestions = await tagApi.getTagAutocomplete(tagInput);
|
||
setTagSuggestions(suggestions.filter(tag => !selectedTags.includes(tag)));
|
||
} catch (error) {
|
||
console.error('Failed to load tag suggestions:', error);
|
||
}
|
||
};
|
||
|
||
const debounceTimer = setTimeout(loadSuggestions, 300);
|
||
return () => clearTimeout(debounceTimer);
|
||
} else {
|
||
setTagSuggestions([]);
|
||
}
|
||
}, [tagInput, selectedTags]);
|
||
|
||
// Load stories for selection
|
||
useEffect(() => {
|
||
if (showStorySelection) {
|
||
const loadStories = async () => {
|
||
try {
|
||
setLoadingStories(true);
|
||
const result = await searchApi.search({
|
||
query: storySearchQuery || '*',
|
||
page: 0,
|
||
size: 50,
|
||
});
|
||
setAvailableStories(result.results || []);
|
||
} catch (error) {
|
||
console.error('Failed to load stories:', error);
|
||
} finally {
|
||
setLoadingStories(false);
|
||
}
|
||
};
|
||
|
||
const debounceTimer = setTimeout(loadStories, 300);
|
||
return () => clearTimeout(debounceTimer);
|
||
}
|
||
}, [storySearchQuery, showStorySelection]);
|
||
|
||
// Load selected stories data on mount
|
||
useEffect(() => {
|
||
if (selectedStoryIds.length > 0) {
|
||
const loadSelectedStories = async () => {
|
||
try {
|
||
const result = await searchApi.search({
|
||
query: '*',
|
||
page: 0,
|
||
size: 100,
|
||
});
|
||
const stories = result.results.filter(story => selectedStoryIds.includes(story.id));
|
||
setSelectedStories(stories);
|
||
} catch (error) {
|
||
console.error('Failed to load selected stories:', error);
|
||
}
|
||
};
|
||
loadSelectedStories();
|
||
}
|
||
}, [selectedStoryIds]);
|
||
|
||
const handleTagInputKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter' && tagInput.trim()) {
|
||
e.preventDefault();
|
||
const newTag = tagInput.trim();
|
||
if (!selectedTags.includes(newTag)) {
|
||
setSelectedTags(prev => [...prev, newTag]);
|
||
}
|
||
setTagInput('');
|
||
setTagSuggestions([]);
|
||
}
|
||
};
|
||
|
||
const addTag = (tag: string) => {
|
||
if (!selectedTags.includes(tag)) {
|
||
setSelectedTags(prev => [...prev, tag]);
|
||
}
|
||
setTagInput('');
|
||
setTagSuggestions([]);
|
||
};
|
||
|
||
const removeTag = (tagToRemove: string) => {
|
||
setSelectedTags(prev => prev.filter(tag => tag !== tagToRemove));
|
||
};
|
||
|
||
const handleCoverImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) {
|
||
setCoverImage(file);
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
setCoverImagePreview(e.target?.result as string);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const toggleStorySelection = (story: Story) => {
|
||
const isSelected = selectedStoryIds.includes(story.id);
|
||
if (isSelected) {
|
||
setSelectedStoryIds(prev => prev.filter(id => id !== story.id));
|
||
setSelectedStories(prev => prev.filter(s => s.id !== story.id));
|
||
} else {
|
||
setSelectedStoryIds(prev => [...prev, story.id]);
|
||
setSelectedStories(prev => [...prev, story]);
|
||
}
|
||
};
|
||
|
||
const removeSelectedStory = (storyId: string) => {
|
||
setSelectedStoryIds(prev => prev.filter(id => id !== storyId));
|
||
setSelectedStories(prev => prev.filter(s => s.id !== storyId));
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!name.trim()) {
|
||
return;
|
||
}
|
||
|
||
await onSubmit({
|
||
name: name.trim(),
|
||
description: description.trim() || undefined,
|
||
tags: selectedTags,
|
||
storyIds: selectedStoryIds,
|
||
coverImage: coverImage || undefined,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{/* Basic Information */}
|
||
<div className="theme-card p-6">
|
||
<h2 className="text-lg font-semibold theme-header mb-4">Basic Information</h2>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label htmlFor="name" className="block text-sm font-medium theme-text mb-1">
|
||
Collection Name *
|
||
</label>
|
||
<Input
|
||
id="name"
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="Enter collection name"
|
||
required
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="description" className="block text-sm font-medium theme-text mb-1">
|
||
Description
|
||
</label>
|
||
<textarea
|
||
id="description"
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder="Describe this collection (optional)"
|
||
rows={3}
|
||
className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
|
||
/>
|
||
</div>
|
||
|
||
{/* Cover Image Upload */}
|
||
<div>
|
||
<label htmlFor="coverImage" className="block text-sm font-medium theme-text mb-1">
|
||
Cover Image
|
||
</label>
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex-1">
|
||
<input
|
||
id="coverImage"
|
||
type="file"
|
||
accept="image/jpeg,image/png"
|
||
onChange={handleCoverImageChange}
|
||
className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
|
||
/>
|
||
<p className="text-xs theme-text opacity-60 mt-1">
|
||
JPG, PNG, or WebP. Max 800x1200px.
|
||
</p>
|
||
</div>
|
||
|
||
{(coverImagePreview || initialData?.coverImagePath) && (
|
||
<div className="w-20 h-24 rounded overflow-hidden bg-gray-100">
|
||
<img
|
||
src={coverImagePreview || (initialData?.coverImagePath ? `/images/${initialData.coverImagePath}` : '')}
|
||
alt="Cover preview"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tags */}
|
||
<div className="theme-card p-6">
|
||
<h2 className="text-lg font-semibold theme-header mb-4">Tags</h2>
|
||
|
||
<div className="space-y-3">
|
||
<div className="relative">
|
||
<Input
|
||
type="text"
|
||
value={tagInput}
|
||
onChange={(e) => setTagInput(e.target.value)}
|
||
onKeyDown={handleTagInputKeyDown}
|
||
placeholder="Type tags and press Enter"
|
||
className="w-full"
|
||
/>
|
||
|
||
{tagSuggestions.length > 0 && (
|
||
<div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border theme-border rounded-lg shadow-lg max-h-32 overflow-y-auto">
|
||
{tagSuggestions.map((suggestion) => (
|
||
<button
|
||
key={suggestion}
|
||
type="button"
|
||
onClick={() => addTag(suggestion)}
|
||
className="w-full px-3 py-2 text-left hover:bg-gray-100 theme-text"
|
||
>
|
||
{suggestion}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{selectedTags.length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{selectedTags.map((tag) => (
|
||
<span
|
||
key={tag}
|
||
className="inline-flex items-center px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
|
||
>
|
||
{tag}
|
||
<button
|
||
type="button"
|
||
onClick={() => removeTag(tag)}
|
||
className="ml-2 hover:text-red-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Story Selection */}
|
||
<div className="theme-card p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold theme-header">Stories</h2>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setShowStorySelection(!showStorySelection)}
|
||
>
|
||
{showStorySelection ? 'Hide' : 'Add'} Stories
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Selected Stories */}
|
||
{selectedStories.length > 0 && (
|
||
<div className="mb-4">
|
||
<h3 className="text-sm font-medium theme-text mb-2">
|
||
Selected Stories ({selectedStories.length})
|
||
</h3>
|
||
<div className="space-y-2 max-h-32 overflow-y-auto">
|
||
{selectedStories.map((story) => (
|
||
<div key={story.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium theme-text truncate">{story.title}</p>
|
||
<p className="text-xs theme-text opacity-60">{story.authorName}</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeSelectedStory(story.id)}
|
||
className="ml-2 text-red-600 hover:text-red-800"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Story Selection Interface */}
|
||
{showStorySelection && (
|
||
<div className="space-y-3">
|
||
<Input
|
||
type="search"
|
||
value={storySearchQuery}
|
||
onChange={(e) => setStorySearchQuery(e.target.value)}
|
||
placeholder="Search stories to add..."
|
||
className="w-full"
|
||
/>
|
||
|
||
{loadingStories ? (
|
||
<div className="flex justify-center py-4">
|
||
<LoadingSpinner size="sm" />
|
||
</div>
|
||
) : (
|
||
<div className="max-h-64 overflow-y-auto space-y-2">
|
||
{availableStories.map((story) => {
|
||
const isSelected = selectedStoryIds.includes(story.id);
|
||
return (
|
||
<div
|
||
key={story.id}
|
||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${
|
||
isSelected
|
||
? 'border-blue-500 bg-blue-50'
|
||
: 'theme-border hover:border-gray-400'
|
||
}`}
|
||
onClick={() => toggleStorySelection(story)}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={() => toggleStorySelection(story)}
|
||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="font-medium theme-text truncate">{story.title}</p>
|
||
<p className="text-sm theme-text opacity-60">{story.authorName}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Form Actions */}
|
||
<div className="flex justify-end gap-3">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
onClick={onCancel}
|
||
disabled={loading}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
disabled={loading || !name.trim()}
|
||
>
|
||
{loading ? <LoadingSpinner size="sm" /> : submitLabel}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
);
|
||
} |