feat: Sequences edit dialog with song reordering and management
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
be57110de8
commit
d7acbebc9c
1 changed files with 136 additions and 17 deletions
|
|
@ -40,6 +40,127 @@ interface Song {
|
|||
slug: string
|
||||
}
|
||||
|
||||
// Edit Sequence Form Component
|
||||
function EditSequenceForm({
|
||||
sequence,
|
||||
allSongs,
|
||||
token,
|
||||
onSave,
|
||||
onCancel
|
||||
}: {
|
||||
sequence: Sequence
|
||||
allSongs: Song[]
|
||||
token: string
|
||||
onSave: () => void
|
||||
onCancel: () => void
|
||||
}) {
|
||||
const [name, setName] = useState(sequence.name)
|
||||
const [description, setDescription] = useState(sequence.description || "")
|
||||
const [notes, setNotes] = useState(sequence.notes || "")
|
||||
const [songIds, setSongIds] = useState<number[]>(sequence.songs.map(s => s.song_id))
|
||||
const [songSearch, setSongSearch] = useState("")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const filteredSongs = allSongs.filter(s =>
|
||||
s.title.toLowerCase().includes(songSearch.toLowerCase()) &&
|
||||
!songIds.includes(s.id)
|
||||
).slice(0, 15)
|
||||
|
||||
const addSong = (id: number) => setSongIds([...songIds, id])
|
||||
const removeSong = (id: number) => setSongIds(songIds.filter(sid => sid !== id))
|
||||
const moveSong = (index: number, direction: -1 | 1) => {
|
||||
const newIds = [...songIds]
|
||||
const newIndex = index + direction
|
||||
if (newIndex < 0 || newIndex >= newIds.length) return
|
||||
[newIds[index], newIds[newIndex]] = [newIds[newIndex], newIds[index]]
|
||||
setSongIds(newIds)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/sequences/${sequence.id}`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ name, description, notes, song_ids: songIds })
|
||||
})
|
||||
if (res.ok) onSave()
|
||||
} catch (e) {
|
||||
console.error("Failed to save", e)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name *</Label>
|
||||
<Input value={name} onChange={e => setName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Description</Label>
|
||||
<Textarea value={description} onChange={e => setDescription(e.target.value)} rows={2} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Notes</Label>
|
||||
<Textarea value={notes} onChange={e => setNotes(e.target.value)} rows={2} placeholder="Internal notes..." />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Songs (in order)</Label>
|
||||
<div className="border rounded-md p-3 min-h-[60px] bg-muted/20 space-y-1">
|
||||
{songIds.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No songs. Add below.</p>
|
||||
) : (
|
||||
songIds.map((id, i) => {
|
||||
const song = allSongs.find(s => s.id === id)
|
||||
return (
|
||||
<div key={id} className="flex items-center justify-between bg-background p-2 rounded border">
|
||||
<span className="text-sm">{i + 1}. {song?.title || `Song ${id}`}</span>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="sm" onClick={() => moveSong(i, -1)} disabled={i === 0}>
|
||||
↑
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => moveSong(i, 1)} disabled={i === songIds.length - 1}>
|
||||
↓
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => removeSong(id)} className="text-red-600">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Add Songs</Label>
|
||||
<Input placeholder="Search songs..." value={songSearch} onChange={e => setSongSearch(e.target.value)} />
|
||||
{songSearch && (
|
||||
<div className="border rounded-md max-h-40 overflow-y-auto">
|
||||
{filteredSongs.map(song => (
|
||||
<button key={song.id} className="w-full text-left px-3 py-2 hover:bg-muted/50 border-b last:border-b-0 text-sm" onClick={() => addSong(song.id)}>
|
||||
{song.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onCancel}>Cancel</Button>
|
||||
<Button onClick={handleSave} disabled={saving || !name}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AdminSequencesPage() {
|
||||
const { user, token, loading: authLoading } = useAuth()
|
||||
const router = useRouter()
|
||||
|
|
@ -340,26 +461,24 @@ export default function AdminSequencesPage() {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Dialog (simplified for now) */}
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={!!editingSequence} onOpenChange={() => setEditingSequence(null)}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit: {editingSequence?.name}</DialogTitle>
|
||||
<DialogTitle>Edit Sequence</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Songs: {editingSequence?.songs.map(s => s.song_title).join(" > ") || "None"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Full edit functionality coming soon. For now, delete and recreate to modify.
|
||||
</p>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditingSequence(null)}>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
{editingSequence && (
|
||||
<EditSequenceForm
|
||||
sequence={editingSequence}
|
||||
allSongs={allSongs}
|
||||
token={token!}
|
||||
onSave={() => {
|
||||
fetchSequences()
|
||||
setEditingSequence(null)
|
||||
}}
|
||||
onCancel={() => setEditingSequence(null)}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue