Phase 2 Complete by Claude Code
This commit is contained in:
@@ -1 +1,278 @@
|
||||
// TODO: Melody detail view
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
|
||||
function Field({ label, children }) {
|
||||
return (
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
{label}
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">{children || "-"}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MelodyDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { hasRole } = useAuth();
|
||||
const canEdit = hasRole("superadmin", "melody_editor");
|
||||
|
||||
const [melody, setMelody] = useState(null);
|
||||
const [files, setFiles] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [m, f] = await Promise.all([
|
||||
api.get(`/melodies/${id}`),
|
||||
api.get(`/melodies/${id}/files`),
|
||||
]);
|
||||
setMelody(m);
|
||||
setFiles(f);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await api.delete(`/melodies/${id}`);
|
||||
navigate("/melodies");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setShowDelete(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!melody) return null;
|
||||
|
||||
const info = melody.information || {};
|
||||
const settings = melody.default_settings || {};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/melodies")}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 mb-2 inline-block"
|
||||
>
|
||||
← Back to Melodies
|
||||
</button>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{info.name || "Untitled Melody"}
|
||||
</h1>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/melodies/${id}/edit`)}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDelete(true)}
|
||||
className="px-4 py-2 bg-red-600 text-white text-sm rounded-md hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Melody Information */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Melody Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Type">
|
||||
<span className="capitalize">{melody.type}</span>
|
||||
</Field>
|
||||
<Field label="Tone">
|
||||
<span className="capitalize">{info.melodyTone}</span>
|
||||
</Field>
|
||||
<Field label="Total Notes">{info.totalNotes}</Field>
|
||||
<Field label="Steps">{info.steps}</Field>
|
||||
<Field label="Min Speed">{info.minSpeed}</Field>
|
||||
<Field label="Max Speed">{info.maxSpeed}</Field>
|
||||
<Field label="Color">
|
||||
{info.color ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span
|
||||
className="w-4 h-4 rounded border border-gray-300 inline-block"
|
||||
style={{ backgroundColor: info.color.startsWith("0x") ? `#${info.color.slice(4)}` : info.color }}
|
||||
/>
|
||||
{info.color}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
<Field label="True Ring">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
info.isTrueRing
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{info.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Description">{info.description}</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Notes">
|
||||
{info.notes?.length > 0 ? info.notes.join(", ") : "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Custom Tags">
|
||||
{info.customTags?.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{info.customTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Default Settings */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Default Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Speed">{settings.speed}</Field>
|
||||
<Field label="Duration">{settings.duration}</Field>
|
||||
<Field label="Total Run Duration">{settings.totalRunDuration}</Field>
|
||||
<Field label="Pause Duration">{settings.pauseDuration}</Field>
|
||||
<Field label="Infinite Loop">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
settings.infiniteLoop
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{settings.infiniteLoop ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Echo Ring">
|
||||
{settings.echoRing?.length > 0
|
||||
? settings.echoRing.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Note Assignments">
|
||||
{settings.noteAssignments?.length > 0
|
||||
? settings.noteAssignments.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Identifiers */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Identifiers
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Document ID">{melody.id}</Field>
|
||||
<Field label="UID">{melody.uid}</Field>
|
||||
<Field label="PID">{melody.pid}</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="URL">{melody.url}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Files */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
|
||||
<dl className="space-y-4">
|
||||
<Field label="Binary File">
|
||||
{files.binary_url ? (
|
||||
<a
|
||||
href={files.binary_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline"
|
||||
>
|
||||
Download binary
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Audio Preview">
|
||||
{files.preview_url ? (
|
||||
<div className="space-y-1">
|
||||
<audio controls src={files.preview_url} className="h-8" />
|
||||
<a
|
||||
href={files.preview_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline text-xs"
|
||||
>
|
||||
Download preview
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<ConfirmDialog
|
||||
open={showDelete}
|
||||
title="Delete Melody"
|
||||
message={`Are you sure you want to delete "${info.name}"? This will also delete any uploaded files. This action cannot be undone.`}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setShowDelete(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +1,631 @@
|
||||
// TODO: Add / Edit melody form
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
|
||||
const MELODY_TYPES = ["orthodox", "catholic", "all"];
|
||||
const MELODY_TONES = ["normal", "festive", "cheerful", "lamentation"];
|
||||
|
||||
const defaultInfo = {
|
||||
name: "",
|
||||
description: "",
|
||||
melodyTone: "normal",
|
||||
customTags: [],
|
||||
minSpeed: 0,
|
||||
maxSpeed: 0,
|
||||
totalNotes: 1,
|
||||
steps: 0,
|
||||
color: "",
|
||||
isTrueRing: false,
|
||||
previewURL: "",
|
||||
notes: [],
|
||||
};
|
||||
|
||||
const defaultSettings = {
|
||||
speed: 0,
|
||||
duration: 0,
|
||||
totalRunDuration: 0,
|
||||
pauseDuration: 0,
|
||||
infiniteLoop: false,
|
||||
echoRing: [],
|
||||
noteAssignments: [],
|
||||
};
|
||||
|
||||
export default function MelodyForm() {
|
||||
const { id } = useParams();
|
||||
const isEdit = Boolean(id);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [information, setInformation] = useState({ ...defaultInfo });
|
||||
const [settings, setSettings] = useState({ ...defaultSettings });
|
||||
const [type, setType] = useState("all");
|
||||
const [url, setUrl] = useState("");
|
||||
const [uid, setUid] = useState("");
|
||||
const [pid, setPid] = useState("");
|
||||
|
||||
const [binaryFile, setBinaryFile] = useState(null);
|
||||
const [previewFile, setPreviewFile] = useState(null);
|
||||
const [existingFiles, setExistingFiles] = useState({});
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Tag input state
|
||||
const [tagInput, setTagInput] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
loadMelody();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const loadMelody = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [melody, files] = await Promise.all([
|
||||
api.get(`/melodies/${id}`),
|
||||
api.get(`/melodies/${id}/files`),
|
||||
]);
|
||||
setInformation({ ...defaultInfo, ...melody.information });
|
||||
setSettings({ ...defaultSettings, ...melody.default_settings });
|
||||
setType(melody.type || "all");
|
||||
setUrl(melody.url || "");
|
||||
setUid(melody.uid || "");
|
||||
setPid(melody.pid || "");
|
||||
setExistingFiles(files);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateInfo = (field, value) => {
|
||||
setInformation((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const updateSettings = (field, value) => {
|
||||
setSettings((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const addTag = () => {
|
||||
const tag = tagInput.trim();
|
||||
if (tag && !information.customTags.includes(tag)) {
|
||||
updateInfo("customTags", [...information.customTags, tag]);
|
||||
}
|
||||
setTagInput("");
|
||||
};
|
||||
|
||||
const removeTag = (tag) => {
|
||||
updateInfo(
|
||||
"customTags",
|
||||
information.customTags.filter((t) => t !== tag)
|
||||
);
|
||||
};
|
||||
|
||||
// Parse comma-separated integers for list fields
|
||||
const parseIntList = (str) => {
|
||||
if (!str.trim()) return [];
|
||||
return str
|
||||
.split(",")
|
||||
.map((s) => parseInt(s.trim(), 10))
|
||||
.filter((n) => !isNaN(n));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const body = {
|
||||
information,
|
||||
default_settings: settings,
|
||||
type,
|
||||
url,
|
||||
uid,
|
||||
pid,
|
||||
};
|
||||
|
||||
let melodyId = id;
|
||||
|
||||
if (isEdit) {
|
||||
await api.put(`/melodies/${id}`, body);
|
||||
} else {
|
||||
const created = await api.post("/melodies", body);
|
||||
melodyId = created.id;
|
||||
}
|
||||
|
||||
// Upload files if selected
|
||||
if (binaryFile || previewFile) {
|
||||
setUploading(true);
|
||||
if (binaryFile) {
|
||||
await api.upload(`/melodies/${melodyId}/upload/binary`, binaryFile);
|
||||
}
|
||||
if (previewFile) {
|
||||
await api.upload(`/melodies/${melodyId}/upload/preview`, previewFile);
|
||||
}
|
||||
setUploading(false);
|
||||
}
|
||||
|
||||
navigate(`/melodies/${melodyId}`);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setUploading(false);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{isEdit ? "Edit Melody" : "Add Melody"}
|
||||
</h1>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* --- Melody Info Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Melody Information
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={information.name}
|
||||
onChange={(e) => updateInfo("name", e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={information.description}
|
||||
onChange={(e) => updateInfo("description", e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Melody Tone
|
||||
</label>
|
||||
<select
|
||||
value={information.melodyTone}
|
||||
onChange={(e) => updateInfo("melodyTone", e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
>
|
||||
{MELODY_TONES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
>
|
||||
{MELODY_TYPES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Total Notes
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={information.totalNotes}
|
||||
onChange={(e) =>
|
||||
updateInfo("totalNotes", parseInt(e.target.value, 10) || 1)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Steps
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={information.steps}
|
||||
onChange={(e) =>
|
||||
updateInfo("steps", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Min Speed
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={information.minSpeed}
|
||||
onChange={(e) =>
|
||||
updateInfo("minSpeed", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Max Speed
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={information.maxSpeed}
|
||||
onChange={(e) =>
|
||||
updateInfo("maxSpeed", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Color
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={information.color}
|
||||
onChange={(e) => updateInfo("color", e.target.value)}
|
||||
placeholder="e.g. #FF5733 or 0xFF5733"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isTrueRing"
|
||||
checked={information.isTrueRing}
|
||||
onChange={(e) => updateInfo("isTrueRing", e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 rounded border-gray-300"
|
||||
/>
|
||||
<label
|
||||
htmlFor="isTrueRing"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
True Ring
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notes (comma-separated integers)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={information.notes.join(", ")}
|
||||
onChange={(e) => updateInfo("notes", parseIntList(e.target.value))}
|
||||
placeholder="e.g. 1, 2, 3, 4"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Custom Tags
|
||||
</label>
|
||||
<div className="flex gap-2 mb-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addTag();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a tag and press Enter"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTag}
|
||||
className="px-3 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{information.customTags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{information.customTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeTag(tag)}
|
||||
className="text-blue-400 hover:text-blue-600"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- Default Settings Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Default Settings
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Speed
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={settings.speed}
|
||||
onChange={(e) =>
|
||||
updateSettings("speed", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Duration
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={settings.duration}
|
||||
onChange={(e) =>
|
||||
updateSettings("duration", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Total Run Duration
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={settings.totalRunDuration}
|
||||
onChange={(e) =>
|
||||
updateSettings(
|
||||
"totalRunDuration",
|
||||
parseInt(e.target.value, 10) || 0
|
||||
)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Pause Duration
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={settings.pauseDuration}
|
||||
onChange={(e) =>
|
||||
updateSettings(
|
||||
"pauseDuration",
|
||||
parseInt(e.target.value, 10) || 0
|
||||
)
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="infiniteLoop"
|
||||
checked={settings.infiniteLoop}
|
||||
onChange={(e) =>
|
||||
updateSettings("infiniteLoop", e.target.checked)
|
||||
}
|
||||
className="h-4 w-4 text-blue-600 rounded border-gray-300"
|
||||
/>
|
||||
<label
|
||||
htmlFor="infiniteLoop"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Infinite Loop
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Echo Ring (comma-separated integers)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.echoRing.join(", ")}
|
||||
onChange={(e) =>
|
||||
updateSettings("echoRing", parseIntList(e.target.value))
|
||||
}
|
||||
placeholder="e.g. 0, 1, 0, 1"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Note Assignments (comma-separated integers)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.noteAssignments.join(", ")}
|
||||
onChange={(e) =>
|
||||
updateSettings(
|
||||
"noteAssignments",
|
||||
parseIntList(e.target.value)
|
||||
)
|
||||
}
|
||||
placeholder="e.g. 1, 2, 3"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- Identifiers Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Identifiers
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
UID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={uid}
|
||||
onChange={(e) => setUid(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
PID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={pid}
|
||||
onChange={(e) => setPid(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- File Upload Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Files
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Binary File (.bin)
|
||||
</label>
|
||||
{existingFiles.binary_url && (
|
||||
<p className="text-xs text-green-600 mb-1">
|
||||
Current file uploaded. Selecting a new file will replace it.
|
||||
</p>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
accept=".bin"
|
||||
onChange={(e) => setBinaryFile(e.target.files[0] || null)}
|
||||
className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Audio Preview (.mp3)
|
||||
</label>
|
||||
{existingFiles.preview_url && (
|
||||
<div className="mb-1">
|
||||
<p className="text-xs text-green-600 mb-1">
|
||||
Current preview uploaded. Selecting a new file will replace it.
|
||||
</p>
|
||||
<audio controls src={existingFiles.preview_url} className="h-8" />
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
accept=".mp3,.wav,.ogg"
|
||||
onChange={(e) => setPreviewFile(e.target.files[0] || null)}
|
||||
className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- Actions --- */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || uploading}
|
||||
className="px-6 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{uploading
|
||||
? "Uploading files..."
|
||||
: saving
|
||||
? "Saving..."
|
||||
: isEdit
|
||||
? "Update Melody"
|
||||
: "Create Melody"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(isEdit ? `/melodies/${id}` : "/melodies")}
|
||||
className="px-6 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +1,212 @@
|
||||
// TODO: Melody list component
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import SearchBar from "../components/SearchBar";
|
||||
import DataTable from "../components/DataTable";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
|
||||
const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
|
||||
const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];
|
||||
|
||||
export default function MelodyList() {
|
||||
const [melodies, setMelodies] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("");
|
||||
const [toneFilter, setToneFilter] = useState("");
|
||||
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { hasRole } = useAuth();
|
||||
const canEdit = hasRole("superadmin", "melody_editor");
|
||||
|
||||
const fetchMelodies = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set("search", search);
|
||||
if (typeFilter) params.set("type", typeFilter);
|
||||
if (toneFilter) params.set("tone", toneFilter);
|
||||
const qs = params.toString();
|
||||
const data = await api.get(`/melodies${qs ? `?${qs}` : ""}`);
|
||||
setMelodies(data.melodies);
|
||||
setTotal(data.total);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMelodies();
|
||||
}, [search, typeFilter, toneFilter]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await api.delete(`/melodies/${deleteTarget.id}`);
|
||||
setDeleteTarget(null);
|
||||
fetchMelodies();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setDeleteTarget(null);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
render: (row) => (
|
||||
<span className="font-medium text-gray-900">
|
||||
{row.information?.name || "Untitled"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Type",
|
||||
render: (row) => (
|
||||
<span className="capitalize">{row.type}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "tone",
|
||||
label: "Tone",
|
||||
render: (row) => (
|
||||
<span className="capitalize">{row.information?.melodyTone || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "totalNotes",
|
||||
label: "Notes",
|
||||
render: (row) => row.information?.totalNotes ?? "-",
|
||||
},
|
||||
{
|
||||
key: "steps",
|
||||
label: "Steps",
|
||||
render: (row) => row.information?.steps ?? "-",
|
||||
},
|
||||
{
|
||||
key: "isTrueRing",
|
||||
label: "True Ring",
|
||||
render: (row) => (
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
row.information?.isTrueRing
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{row.information?.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
...(canEdit
|
||||
? [
|
||||
{
|
||||
key: "actions",
|
||||
label: "",
|
||||
width: "100px",
|
||||
render: (row) => (
|
||||
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => navigate(`/melodies/${row.id}/edit`)}
|
||||
className="text-blue-600 hover:text-blue-800 text-xs"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteTarget(row)}
|
||||
className="text-red-600 hover:text-red-800 text-xs"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Melodies</h1>
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => navigate("/melodies/new")}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Add Melody
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4 space-y-3">
|
||||
<SearchBar
|
||||
onSearch={setSearch}
|
||||
placeholder="Search by name, description, or tags..."
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
{MELODY_TYPES.filter(Boolean).map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={toneFilter}
|
||||
onChange={(e) => setToneFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Tones</option>
|
||||
{MELODY_TONES.filter(Boolean).map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="flex items-center text-sm text-gray-500">
|
||||
{total} {total === 1 ? "melody" : "melodies"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8 text-gray-500">Loading...</div>
|
||||
) : (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={melodies}
|
||||
onRowClick={(row) => navigate(`/melodies/${row.id}`)}
|
||||
emptyMessage="No melodies found."
|
||||
/>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!deleteTarget}
|
||||
title="Delete Melody"
|
||||
message={`Are you sure you want to delete "${deleteTarget?.information?.name}"? This will also delete any uploaded files.`}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user