feat(frontend): Export data button + modal on experiment page

This commit is contained in:
Experiments DB Dev
2026-07-06 15:48:02 -04:00
parent 0bf3fc479b
commit ea1a7f39f2
+16 -1
View File
@@ -9,6 +9,7 @@ import TemplateEditor from '../components/TemplateEditor';
import Alert from '../components/ui/Alert';
import AuditLogSection from '../components/AuditLogSection';
import ExperimentCalendar from '../components/ExperimentCalendar';
import ExportDataModal from '../components/ExportDataModal';
function AnimalCardList({ animals, subjectTemplate, onNavigate, onEdit }) {
return (
@@ -62,6 +63,7 @@ export default function ExperimentDetail() {
const [editAnimal, setEditAnimal] = useState(null);
const [showTemplate, setShowTemplate] = useState(false);
const [showSubjectTemplate, setShowSubjectTemplate] = useState(false);
const [showExport, setShowExport] = useState(false);
const [subjectTemplate, setSubjectTemplate] = useState([]);
const [dailyTemplate, setDailyTemplate] = useState([]);
const [experimentStatuses, setExperimentStatuses] = useState([]);
@@ -201,7 +203,10 @@ export default function ExperimentDetail() {
{animals.length} animal{animals.length !== 1 ? 's' : ''} enrolled
</p>
</div>
<Button onClick={() => setShowAddAnimal(true)}>+ Add Animal</Button>
<div className="flex gap-2">
<Button variant="secondary" onClick={() => setShowExport(true)}>Export data</Button>
<Button onClick={() => setShowAddAnimal(true)}>+ Add Animal</Button>
</div>
</div>
{successMsg && <Alert type="success" message={successMsg} />}
@@ -405,6 +410,16 @@ export default function ExperimentDetail() {
<AnimalForm existing={editAnimal} experimentId={id} onSuccess={handleAnimalSaved} onCancel={() => setEditAnimal(null)} />
</Modal>
<Modal isOpen={showExport} onClose={() => setShowExport(false)} title="Export data" size="md">
<ExportDataModal
experimentId={id}
experimentTitle={experiment.title}
dailyTemplate={dailyTemplate}
animals={animals}
onClose={() => setShowExport(false)}
/>
</Modal>
</div>
);
}