bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Applied Extra Changes/Fixes to the UI

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 11:08:58 +02:00
parent cb2c5c6aba
commit 115c3773ef
3 changed files with 331 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/index.css
View File

@@ -1 +1,15 @@
@import "tailwindcss";
/* Ensure all interactive elements show pointer cursor */
button,
[role="button"],
a,
select,
label[for],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="color"],
summary {
cursor: pointer;
}

44
frontend/src/melodies/MelodyForm.jsx
View File

@@ -432,12 +432,6 @@ export default function MelodyForm() {
: "transparent",
}}
/>
<input
type="color"
value={information.color ? normalizeColor(information.color) : "#000000"}
onChange={(e) => updateInfo("color", e.target.value)}
className="w-8 h-8 cursor-pointer border border-gray-300 rounded flex-shrink-0"
/>
<input
type="text"
value={information.color}
@@ -446,14 +440,13 @@ export default function MelodyForm() {
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"
/>
</div>
{quickColors.length > 0 && (
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-2 items-center">
{quickColors.map((color) => (
<button
key={color}
type="button"
onClick={() => updateInfo("color", color)}
className={`w-6 h-6 rounded border-2 transition-all ${
className={`w-7 h-7 rounded-md border-2 transition-all cursor-pointer ${
information.color === color
? "border-blue-500 ring-2 ring-blue-200"
: "border-gray-200 hover:border-gray-400"
@@ -462,8 +455,22 @@ export default function MelodyForm() {
title={color}
/>
))}
<label
className="relative inline-flex items-center gap-1.5 px-3 py-1.5 border-2 border-dashed border-gray-300 rounded-md text-xs text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer"
title="Pick a custom color"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
Custom
<input
type="color"
value={information.color ? normalizeColor(information.color) : "#000000"}
onChange={(e) => updateInfo("color", e.target.value)}
className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
/>
</label>
</div>
)}
</div>
<div className="flex items-center gap-2 pt-2">
@@ -482,19 +489,6 @@ export default function MelodyForm() {
</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={inputClass}
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
Custom Tags
@@ -725,8 +719,8 @@ export default function MelodyForm() {
{ length: information.totalNotes },
(_, i) => (
<div key={i}>
<label className="block text-xs text-gray-400 mb-0.5 text-center">
N{i + 1}
<label className="block text-xs text-gray-400 mb-0.5 text-left">
Note #{i + 1}
</label>
<input
type="number"

355
frontend/src/melodies/MelodyList.jsx
View File

@@ -1,15 +1,53 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } 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";
import { getLocalizedValue, getLanguageName } from "./melodyUtils";
import {
getLocalizedValue,
getLanguageName,
normalizeColor,
formatDuration,
} from "./melodyUtils";
const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];
// All available columns with their defaults
const ALL_COLUMNS = [
{ key: "color", label: "Color", defaultOn: true },
{ key: "name", label: "Name", defaultOn: true, alwaysOn: true },
{ key: "description", label: "Description", defaultOn: false },
{ key: "type", label: "Type", defaultOn: true },
{ key: "tone", label: "Tone", defaultOn: true },
{ key: "totalNotes", label: "Total Notes", defaultOn: true },
{ key: "minSpeed", label: "Min Speed", defaultOn: false },
{ key: "maxSpeed", label: "Max Speed", defaultOn: false },
{ key: "tags", label: "Tags", defaultOn: false },
{ key: "speed", label: "Speed", defaultOn: false },
{ key: "duration", label: "Duration", defaultOn: false },
{ key: "totalRunDuration", label: "Total Run", defaultOn: false },
{ key: "pauseDuration", label: "Pause", defaultOn: false },
{ key: "infiniteLoop", label: "Infinite", defaultOn: false },
{ key: "noteAssignments", label: "Note Assignments", defaultOn: false },
{ key: "isTrueRing", label: "True Ring", defaultOn: true },
{ key: "docId", label: "Document ID", defaultOn: false },
{ key: "pid", label: "PID", defaultOn: false },
];
function getDefaultVisibleColumns() {
const saved = localStorage.getItem("melodyListColumns");
if (saved) {
try {
return JSON.parse(saved);
} catch {
// ignore
}
}
return ALL_COLUMNS.filter((c) => c.defaultOn).map((c) => c.key);
}
export default function MelodyList() {
const [melodies, setMelodies] = useState([]);
const [total, setTotal] = useState(0);
@@ -21,6 +59,9 @@ export default function MelodyList() {
const [displayLang, setDisplayLang] = useState("en");
const [melodySettings, setMelodySettings] = useState(null);
const [deleteTarget, setDeleteTarget] = useState(null);
const [visibleColumns, setVisibleColumns] = useState(getDefaultVisibleColumns);
const [showColumnPicker, setShowColumnPicker] = useState(false);
const columnPickerRef = useRef(null);
const navigate = useNavigate();
const { hasRole } = useAuth();
const canEdit = hasRole("superadmin", "melody_editor");
@@ -32,6 +73,19 @@ export default function MelodyList() {
});
}, []);
// Close column picker on outside click
useEffect(() => {
const handleClick = (e) => {
if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
setShowColumnPicker(false);
}
};
if (showColumnPicker) {
document.addEventListener("mousedown", handleClick);
return () => document.removeEventListener("mousedown", handleClick);
}
}, [showColumnPicker]);
const fetchMelodies = async () => {
setLoading(true);
setError("");
@@ -67,85 +121,126 @@ export default function MelodyList() {
}
};
const getDisplayName = (nameDict) => {
return getLocalizedValue(nameDict, displayLang, "Untitled");
const toggleColumn = (key) => {
const col = ALL_COLUMNS.find((c) => c.key === key);
if (col?.alwaysOn) return;
setVisibleColumns((prev) => {
const next = prev.includes(key)
? prev.filter((k) => k !== key)
: [...prev, key];
localStorage.setItem("melodyListColumns", JSON.stringify(next));
return next;
});
};
const columns = [
{
key: "name",
label: "Name",
render: (row) => (
const isVisible = (key) => visibleColumns.includes(key);
const getDisplayName = (nameVal) =>
getLocalizedValue(nameVal, displayLang, "Untitled");
const renderCellValue = (key, row) => {
const info = row.information || {};
const ds = row.default_settings || {};
switch (key) {
case "color":
return info.color ? (
<span
className="inline-block w-3 h-8 rounded-sm"
style={{ backgroundColor: normalizeColor(info.color) }}
title={info.color}
/>
) : (
<span className="inline-block w-3 h-8 rounded-sm bg-gray-200" />
);
case "name":
return (
<div>
<span className="font-medium text-gray-900">
{getDisplayName(row.information?.name)}
{getDisplayName(info.name)}
</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) => (
{isVisible("description") && (
<p className="text-xs text-gray-500 mt-0.5 truncate max-w-xs">
{getLocalizedValue(info.description, displayLang) || "-"}
</p>
)}
</div>
);
case "type":
return <span className="capitalize">{row.type}</span>;
case "tone":
return <span className="capitalize">{info.melodyTone || "-"}</span>;
case "totalNotes":
return info.totalNotes ?? "-";
case "minSpeed":
return info.minSpeed ?? "-";
case "maxSpeed":
return info.maxSpeed ?? "-";
case "tags":
return info.customTags?.length > 0 ? (
<div className="flex flex-wrap gap-1">
{info.customTags.map((tag) => (
<span
key={tag}
className="px-1.5 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
>
{tag}
</span>
))}
</div>
) : (
"-"
);
case "speed":
return ds.speed != null ? `${ds.speed}%` : "-";
case "duration":
return ds.duration != null ? formatDuration(ds.duration) : "-";
case "totalRunDuration":
return ds.totalRunDuration ?? "-";
case "pauseDuration":
return ds.pauseDuration ?? "-";
case "infiniteLoop":
return (
<span
className={`px-2 py-0.5 text-xs rounded-full ${
row.information?.isTrueRing
ds.infiniteLoop
? "bg-green-100 text-green-700"
: "bg-gray-100 text-gray-500"
}`}
>
{row.information?.isTrueRing ? "Yes" : "No"}
{ds.infiniteLoop ? "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"
);
case "noteAssignments":
return ds.noteAssignments?.length > 0
? ds.noteAssignments.join(", ")
: "-";
case "isTrueRing":
return (
<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"
}`}
>
Edit
</button>
<button
onClick={() => setDeleteTarget(row)}
className="text-red-600 hover:text-red-800 text-xs"
>
Delete
</button>
</div>
),
},
]
: []),
];
{info.isTrueRing ? "Yes" : "No"}
</span>
);
case "docId":
return (
<span className="font-mono text-xs text-gray-500">{row.id}</span>
);
case "pid":
return row.pid || "-";
default:
return "-";
}
};
// Build visible column list (description is rendered inside name, not as its own column)
const activeColumns = ALL_COLUMNS.filter(
(c) => c.key !== "description" && isVisible(c.key)
);
const languages = melodySettings?.available_languages || ["en"];
@@ -156,7 +251,7 @@ export default function MelodyList() {
{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"
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors cursor-pointer"
>
Add Melody
</button>
@@ -168,11 +263,11 @@ export default function MelodyList() {
onSearch={setSearch}
placeholder="Search by name, description, or tags..."
/>
<div className="flex flex-wrap gap-3">
<div className="flex flex-wrap gap-3 items-center">
<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"
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
>
<option value="">All Types</option>
{MELODY_TYPES.filter(Boolean).map((t) => (
@@ -184,7 +279,7 @@ export default function MelodyList() {
<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"
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
>
<option value="">All Tones</option>
{MELODY_TONES.filter(Boolean).map((t) => (
@@ -197,7 +292,7 @@ export default function MelodyList() {
<select
value={displayLang}
onChange={(e) => setDisplayLang(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"
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
>
{languages.map((l) => (
<option key={l} value={l}>
@@ -206,6 +301,42 @@ export default function MelodyList() {
))}
</select>
)}
{/* Column visibility dropdown */}
<div className="relative" ref={columnPickerRef}>
<button
type="button"
onClick={() => setShowColumnPicker((prev) => !prev)}
className="px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-600 hover:bg-gray-50 transition-colors cursor-pointer flex items-center gap-1.5"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
</svg>
Columns
</button>
{showColumnPicker && (
<div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg py-2 w-52">
{ALL_COLUMNS.map((col) => (
<label
key={col.key}
className={`flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-50 cursor-pointer ${
col.alwaysOn ? "text-gray-400" : "text-gray-700"
}`}
>
<input
type="checkbox"
checked={isVisible(col.key)}
onChange={() => toggleColumn(col.key)}
disabled={col.alwaysOn}
className="h-3.5 w-3.5 rounded border-gray-300 text-blue-600 cursor-pointer"
/>
{col.label}
</label>
))}
</div>
)}
</div>
<span className="flex items-center text-sm text-gray-500">
{total} {total === 1 ? "melody" : "melodies"}
</span>
@@ -220,13 +351,75 @@ export default function MelodyList() {
{loading ? (
<div className="text-center py-8 text-gray-500">Loading...</div>
) : melodies.length === 0 ? (
<div className="bg-white rounded-lg border border-gray-200 p-8 text-center text-gray-500 text-sm">
No melodies found.
</div>
) : (
<DataTable
columns={columns}
data={melodies}
onRowClick={(row) => navigate(`/melodies/${row.id}`)}
emptyMessage="No melodies found."
/>
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="bg-gray-50 border-b border-gray-200">
{activeColumns.map((col) => (
<th
key={col.key}
className={`px-4 py-3 text-left font-medium text-gray-600 ${
col.key === "color" ? "w-8 px-2" : ""
}`}
>
{col.key === "color" ? "" : col.label}
</th>
))}
{canEdit && (
<th className="px-4 py-3 text-left font-medium text-gray-600 w-24" />
)}
</tr>
</thead>
<tbody>
{melodies.map((row) => (
<tr
key={row.id}
onClick={() => navigate(`/melodies/${row.id}`)}
className="border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50"
>
{activeColumns.map((col) => (
<td
key={col.key}
className={`px-4 py-3 text-gray-700 ${
col.key === "color" ? "w-8 px-2" : ""
}`}
>
{renderCellValue(col.key, row)}
</td>
))}
{canEdit && (
<td className="px-4 py-3">
<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 cursor-pointer"
>
Edit
</button>
<button
onClick={() => setDeleteTarget(row)}
className="text-red-600 hover:text-red-800 text-xs cursor-pointer"
>
Delete
</button>
</div>
</td>
)}
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
<ConfirmDialog