Experiments DB Dev
9535f86970
New ExperimentCalendar component added as a third view mode (List / Group / Calendar)
on the Experiment Detail page.
Backend:
- GET /api/experiments/:id/calendar?field=<fieldIdOrBuiltinKey>
Returns { field, days: { "YYYY-MM-DD": count } } where count = number of
subjects with a non-null/non-empty value for the chosen field on that date.
Supports both builtin fields (vitals, treatment, notes, experiment_description)
and custom fields addressed by fieldId UUID.
Frontend:
- ExperimentCalendar component: navigable monthly grid, field selector
(defaults to first field with "weight" in label, else first active field),
blue badges showing subject count per day, click to open modal with all
subjects' data for that day.
- Integrated into ExperimentDetail as displayMode "calendar", persisted
in localStorage alongside the existing list/group modes.
- experimentsApi.getCalendar() added to API client.
Tests:
- backend/tests/calendar.test.js: 8 unit tests (404, empty days, builtin
count, custom field count, whitespace ignored, multi-month, field echo,
missing param).
- frontend/tests/ExperimentCalendar.test.jsx: 13 RTL tests covering
rendering, default field selection, count badges, month navigation,
field-change re-fetch, day click modal, and multi-subject display.
All 47 backend + 13 calendar frontend tests passing.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
1.4 KiB
React
41 lines
1.4 KiB
React
import React, { useState, useEffect } from 'react';
|
|
import Modal from './Modal';
|
|
import Button from './Button';
|
|
|
|
export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, loading, confirmWord }) {
|
|
const [typed, setTyped] = useState('');
|
|
|
|
useEffect(() => { if (!isOpen) setTyped(''); }, [isOpen]);
|
|
|
|
const ready = confirmWord ? typed === confirmWord : true;
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
|
|
<p className="text-sm text-gray-600 mb-4">{message}</p>
|
|
{confirmWord && (
|
|
<div className="mb-5">
|
|
<label className="block text-xs text-gray-500 mb-1">
|
|
Type <span className="font-mono font-semibold text-gray-700">{confirmWord}</span> to confirm
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={typed}
|
|
onChange={(e) => setTyped(e.target.value)}
|
|
autoFocus
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400"
|
|
placeholder={confirmWord}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end gap-3">
|
|
<Button variant="secondary" onClick={onClose} disabled={loading}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant="danger" onClick={onConfirm} loading={loading} disabled={!ready}>
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|