Story Collections Feature
This commit is contained in:
Stefan Hardegger
415
frontend/src/components/collections/CollectionForm.tsx
Normal file
415
frontend/src/components/collections/CollectionForm.tsx
Normal file
@@ -0,0 +1,415 @@
|
||||
'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,image/webp"
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user