feat: add playlist editing functionality; implement PlaylistEditPage and integrate with playlists service
feat: enhance PlaylistsPage with search, sorting, and playlist creation features; improve UI components and state management
This commit is contained in:
JSC
485
src/pages/PlaylistEditPage.tsx
Normal file
485
src/pages/PlaylistEditPage.tsx
Normal file
@@ -0,0 +1,485 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router'
|
||||
import { AppLayout } from '@/components/AppLayout'
|
||||
import { playlistsService, type Playlist, type PlaylistSound } from '@/lib/api/services/playlists'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { AlertCircle, Save, ArrowLeft, Music, Clock, ChevronUp, ChevronDown, GripVertical, Trash2, RefreshCw } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { formatDuration } from '@/utils/format-duration'
|
||||
|
||||
export function PlaylistEditPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const playlistId = parseInt(id!, 10)
|
||||
|
||||
const [playlist, setPlaylist] = useState<Playlist | null>(null)
|
||||
const [sounds, setSounds] = useState<PlaylistSound[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [soundsLoading, setSoundsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
genre: ''
|
||||
})
|
||||
|
||||
// Track if form has changes
|
||||
const [hasChanges, setHasChanges] = useState(false)
|
||||
|
||||
const fetchPlaylist = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
const playlistData = await playlistsService.getPlaylist(playlistId)
|
||||
setPlaylist(playlistData)
|
||||
setFormData({
|
||||
name: playlistData.name,
|
||||
description: playlistData.description || '',
|
||||
genre: playlistData.genre || ''
|
||||
})
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch playlist'
|
||||
setError(errorMessage)
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [playlistId])
|
||||
|
||||
const fetchSounds = useCallback(async () => {
|
||||
try {
|
||||
setSoundsLoading(true)
|
||||
const soundsData = await playlistsService.getPlaylistSounds(playlistId)
|
||||
setSounds(soundsData)
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch playlist sounds'
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setSoundsLoading(false)
|
||||
}
|
||||
}, [playlistId])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNaN(playlistId)) {
|
||||
fetchPlaylist()
|
||||
fetchSounds()
|
||||
} else {
|
||||
setError('Invalid playlist ID')
|
||||
setLoading(false)
|
||||
}
|
||||
}, [playlistId, fetchPlaylist, fetchSounds])
|
||||
|
||||
useEffect(() => {
|
||||
if (playlist) {
|
||||
const changed =
|
||||
formData.name !== playlist.name ||
|
||||
formData.description !== (playlist.description || '') ||
|
||||
formData.genre !== (playlist.genre || '')
|
||||
setHasChanges(changed)
|
||||
}
|
||||
}, [formData, playlist])
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!playlist || !hasChanges) return
|
||||
|
||||
try {
|
||||
setSaving(true)
|
||||
await playlistsService.updatePlaylist(playlist.id, {
|
||||
name: formData.name.trim() || undefined,
|
||||
description: formData.description.trim() || undefined,
|
||||
genre: formData.genre.trim() || undefined
|
||||
})
|
||||
|
||||
toast.success('Playlist updated successfully')
|
||||
|
||||
// Refresh playlist data
|
||||
await fetchPlaylist()
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to update playlist'
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetCurrent = async () => {
|
||||
if (!playlist) return
|
||||
|
||||
try {
|
||||
await playlistsService.setCurrentPlaylist(playlist.id)
|
||||
toast.success(`"${playlist.name}" is now the current playlist`)
|
||||
|
||||
// Refresh playlist data
|
||||
await fetchPlaylist()
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to set current playlist'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMoveSoundUp = async (index: number) => {
|
||||
if (index === 0 || sounds.length < 2) return
|
||||
|
||||
const newSounds = [...sounds]
|
||||
const [movedSound] = newSounds.splice(index, 1)
|
||||
newSounds.splice(index - 1, 0, movedSound)
|
||||
|
||||
// Create sound positions array for the API
|
||||
const soundPositions: Array<[number, number]> = newSounds.map((sound, idx) => [sound.id, idx])
|
||||
|
||||
try {
|
||||
await playlistsService.reorderPlaylistSounds(playlistId, soundPositions)
|
||||
setSounds(newSounds)
|
||||
toast.success('Sound moved up')
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to reorder sounds'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMoveSoundDown = async (index: number) => {
|
||||
if (index === sounds.length - 1 || sounds.length < 2) return
|
||||
|
||||
const newSounds = [...sounds]
|
||||
const [movedSound] = newSounds.splice(index, 1)
|
||||
newSounds.splice(index + 1, 0, movedSound)
|
||||
|
||||
// Create sound positions array for the API
|
||||
const soundPositions: Array<[number, number]> = newSounds.map((sound, idx) => [sound.id, idx])
|
||||
|
||||
try {
|
||||
await playlistsService.reorderPlaylistSounds(playlistId, soundPositions)
|
||||
setSounds(newSounds)
|
||||
toast.success('Sound moved down')
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to reorder sounds'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveSound = async (soundId: number) => {
|
||||
try {
|
||||
await playlistsService.removeSoundFromPlaylist(playlistId, soundId)
|
||||
setSounds(prev => prev.filter(sound => sound.id !== soundId))
|
||||
toast.success('Sound removed from playlist')
|
||||
|
||||
// Refresh playlist data to update counts
|
||||
await fetchPlaylist()
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to remove sound'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<AppLayout
|
||||
breadcrumb={{
|
||||
items: [
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Playlists', href: '/playlists' },
|
||||
{ label: 'Edit' }
|
||||
]
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 rounded-xl bg-muted/50 p-4 space-y-6">
|
||||
<Skeleton className="h-8 w-64" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !playlist) {
|
||||
return (
|
||||
<AppLayout
|
||||
breadcrumb={{
|
||||
items: [
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Playlists', href: '/playlists' },
|
||||
{ label: 'Edit' }
|
||||
]
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Failed to load playlist</h3>
|
||||
<p className="text-muted-foreground mb-4">{error}</p>
|
||||
<button
|
||||
onClick={() => navigate('/playlists')}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Back to playlists
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
breadcrumb={{
|
||||
items: [
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Playlists', href: '/playlists' },
|
||||
{ label: playlist.name }
|
||||
]
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Edit Playlist</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Modify playlist details and manage sounds
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{!playlist.is_current && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleSetCurrent}
|
||||
>
|
||||
Set as Current
|
||||
</Button>
|
||||
)}
|
||||
{playlist.is_current && (
|
||||
<Badge variant="default">Current Playlist</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Playlist Details Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Music className="h-5 w-5" />
|
||||
Playlist Details
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
placeholder="Playlist name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
placeholder="Playlist description"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="genre">Genre</Label>
|
||||
<Input
|
||||
id="genre"
|
||||
value={formData.genre}
|
||||
onChange={(e) => handleInputChange('genre', e.target.value)}
|
||||
placeholder="Electronic, Rock, Comedy, etc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || saving}
|
||||
>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Playlist Stats */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5" />
|
||||
Playlist Statistics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="text-center p-3 bg-muted rounded-lg">
|
||||
<div className="text-2xl font-bold">{sounds.length}</div>
|
||||
<div className="text-sm text-muted-foreground">Tracks</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-muted rounded-lg">
|
||||
<div className="text-2xl font-bold">
|
||||
{formatDuration(sounds.reduce((total, sound) => total + (sound.duration || 0), 0))}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Duration</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Created:</span>
|
||||
<span>{new Date(playlist.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{playlist.updated_at && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Updated:</span>
|
||||
<span>{new Date(playlist.updated_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Status:</span>
|
||||
<div className="flex gap-1">
|
||||
{playlist.is_main && <Badge variant="outline" className="text-xs">Main</Badge>}
|
||||
{playlist.is_current && <Badge variant="default" className="text-xs">Current</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Playlist Sounds */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Music className="h-5 w-5" />
|
||||
Playlist Sounds ({sounds.length})
|
||||
</CardTitle>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={fetchSounds}
|
||||
disabled={soundsLoading}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${soundsLoading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{soundsLoading ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : sounds.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Music className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No sounds in this playlist</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12"></TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Plays</TableHead>
|
||||
<TableHead className="w-32">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sounds.map((sound, index) => (
|
||||
<TableRow key={sound.id}>
|
||||
<TableCell className="text-center text-muted-foreground font-mono text-sm">
|
||||
{index + 1}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">
|
||||
{sound.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{formatDuration(sound.duration || 0)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{sound.type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{sound.play_count}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleMoveSoundUp(index)}
|
||||
disabled={index === 0}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Move up"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleMoveSoundDown(index)}
|
||||
disabled={index === sounds.length - 1}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Move down"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleRemoveSound(sound.id)}
|
||||
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||||
title="Remove from playlist"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,279 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { AppLayout } from '@/components/AppLayout'
|
||||
import { playlistsService, type Playlist, type PlaylistSortField, type SortOrder } from '@/lib/api/services/playlists'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { AlertCircle, Search, SortAsc, SortDesc, X, RefreshCw, Music, User, Calendar, Clock, Plus, Play, Edit } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { formatDuration } from '@/utils/format-duration'
|
||||
|
||||
export function PlaylistsPage() {
|
||||
const navigate = useNavigate()
|
||||
const [playlists, setPlaylists] = useState<Playlist[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Search and sorting state
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [sortBy, setSortBy] = useState<PlaylistSortField>('name')
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
|
||||
|
||||
// Create playlist dialog state
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [createLoading, setCreateLoading] = useState(false)
|
||||
const [newPlaylist, setNewPlaylist] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
genre: ''
|
||||
})
|
||||
|
||||
// Debounce search query
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery)
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(handler)
|
||||
}, [searchQuery])
|
||||
|
||||
const fetchPlaylists = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
const playlistData = await playlistsService.getPlaylists({
|
||||
search: debouncedSearchQuery.trim() || undefined,
|
||||
sort_by: sortBy,
|
||||
sort_order: sortOrder,
|
||||
})
|
||||
setPlaylists(playlistData)
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch playlists'
|
||||
setError(errorMessage)
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchPlaylists()
|
||||
}, [debouncedSearchQuery, sortBy, sortOrder])
|
||||
|
||||
const handleCreatePlaylist = async () => {
|
||||
if (!newPlaylist.name.trim()) {
|
||||
toast.error('Playlist name is required')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
setCreateLoading(true)
|
||||
await playlistsService.createPlaylist({
|
||||
name: newPlaylist.name.trim(),
|
||||
description: newPlaylist.description.trim() || undefined,
|
||||
genre: newPlaylist.genre.trim() || undefined,
|
||||
})
|
||||
|
||||
toast.success(`Playlist "${newPlaylist.name}" created successfully`)
|
||||
|
||||
// Reset form and close dialog
|
||||
setNewPlaylist({ name: '', description: '', genre: '' })
|
||||
setShowCreateDialog(false)
|
||||
|
||||
// Refresh the playlists list
|
||||
fetchPlaylists()
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to create playlist'
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setCreateLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancelCreate = () => {
|
||||
setNewPlaylist({ name: '', description: '', genre: '' })
|
||||
setShowCreateDialog(false)
|
||||
}
|
||||
|
||||
const handleSetCurrent = async (playlist: Playlist) => {
|
||||
try {
|
||||
await playlistsService.setCurrentPlaylist(playlist.id)
|
||||
toast.success(`"${playlist.name}" is now the current playlist`)
|
||||
|
||||
// Refresh the playlists list to update the current status
|
||||
fetchPlaylists()
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to set current playlist'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString()
|
||||
}
|
||||
|
||||
const renderContent = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Failed to load playlists</h3>
|
||||
<p className="text-muted-foreground mb-4">{error}</p>
|
||||
<button
|
||||
onClick={fetchPlaylists}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (playlists.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
|
||||
<Music className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">No playlists found</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{searchQuery ? 'No playlists match your search criteria.' : 'No playlists are available.'}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Genre</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead className="text-center">Tracks</TableHead>
|
||||
<TableHead className="text-center">Duration</TableHead>
|
||||
<TableHead className="text-center">Created</TableHead>
|
||||
<TableHead className="text-center">Status</TableHead>
|
||||
<TableHead className="text-center">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{playlists.map((playlist) => (
|
||||
<TableRow key={playlist.id} className="hover:bg-muted/50">
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{playlist.name}</div>
|
||||
{playlist.description && (
|
||||
<div className="text-sm text-muted-foreground truncate">
|
||||
{playlist.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{playlist.genre ? (
|
||||
<Badge variant="secondary">{playlist.genre}</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{playlist.user_name ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{playlist.user_name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">System</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Music className="h-3 w-3 text-muted-foreground" />
|
||||
{playlist.sound_count}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Clock className="h-3 w-3 text-muted-foreground" />
|
||||
{formatDuration(playlist.total_duration || 0)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Calendar className="h-3 w-3 text-muted-foreground" />
|
||||
{formatDate(playlist.created_at)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{playlist.is_current && (
|
||||
<Badge variant="default">Current</Badge>
|
||||
)}
|
||||
{playlist.is_main && (
|
||||
<Badge variant="outline">Main</Badge>
|
||||
)}
|
||||
{!playlist.is_current && !playlist.is_main && (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => navigate(`/playlists/${playlist.id}/edit`)}
|
||||
className="h-8 w-8 p-0"
|
||||
title={`Edit "${playlist.name}"`}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
{!playlist.is_current && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleSetCurrent(playlist)}
|
||||
className="h-8 w-8 p-0"
|
||||
title={`Set "${playlist.name}" as current playlist`}
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
breadcrumb={{
|
||||
@@ -11,10 +284,144 @@ export function PlaylistsPage() {
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<h1 className="text-2xl font-bold mb-4">Playlists</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Playlist management interface coming soon...
|
||||
</p>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Playlists</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage and browse your soundboard playlists
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Playlist
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Playlist</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new playlist to organize your sounds. Give it a name and optionally add a description and genre.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="My awesome playlist"
|
||||
value={newPlaylist.name}
|
||||
onChange={(e) => setNewPlaylist(prev => ({ ...prev, name: e.target.value }))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleCreatePlaylist()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="A collection of my favorite sounds..."
|
||||
value={newPlaylist.description}
|
||||
onChange={(e) => setNewPlaylist(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="genre">Genre</Label>
|
||||
<Input
|
||||
id="genre"
|
||||
placeholder="Electronic, Rock, Comedy, etc."
|
||||
value={newPlaylist.genre}
|
||||
onChange={(e) => setNewPlaylist(prev => ({ ...prev, genre: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancelCreate} disabled={createLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreatePlaylist} disabled={createLoading || !newPlaylist.name.trim()}>
|
||||
{createLoading ? 'Creating...' : 'Create Playlist'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{!loading && !error && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{playlists.length} playlist{playlists.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Sort Controls */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search playlists..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-1 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-muted"
|
||||
title="Clear search"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Select value={sortBy} onValueChange={(value) => setSortBy(value as PlaylistSortField)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Sort by" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="genre">Genre</SelectItem>
|
||||
<SelectItem value="sound_count">Track Count</SelectItem>
|
||||
<SelectItem value="total_duration">Duration</SelectItem>
|
||||
<SelectItem value="created_at">Created Date</SelectItem>
|
||||
<SelectItem value="updated_at">Updated Date</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
|
||||
title={sortOrder === 'asc' ? 'Sort ascending' : 'Sort descending'}
|
||||
>
|
||||
{sortOrder === 'asc' ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={fetchPlaylists}
|
||||
disabled={loading}
|
||||
title="Refresh playlists"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{renderContent()}
|
||||
</div>
|
||||
</AppLayout>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user