feat: Add ChildSelector component and update Child types
TypeScript Types: - Updated Child interface with displayColor, sortOrder, nickname - Added FamilyStatistics interface for UI view mode decisions - Updated CreateChildData to support custom colors and nicknames API Client: - Added getFamilyStatistics() method - Returns totalChildren, viewMode (tabs/cards), ageRange, genderDistribution ChildSelector Component: - Supports 3 modes: single, multiple, all - Shows child avatars with color-coded borders - Displays child name and optional nickname - "All Children" option for bulk operations - Chip-based multi-select display - Compact mode for inline usage - Sorted by sortOrder (birth order) - Disabled state when no children available - Simplified UI for single-child families Features: - Color-coded child indicators using displayColor - Avatar fallback with child's first initial - Checkbox selection for multiple mode - Indeterminate checkbox for partial selection - Required field validation support - Accessible with labels and ARIA Props: - children: Child[] - List of children to display - selectedChildIds: string[] - Currently selected child IDs - onChange: (childIds: string[]) => void - Selection change handler - mode: 'single' | 'multiple' | 'all' - Selection behavior - showAllOption: boolean - Show "All Children" option - label: string - Form label - compact: boolean - Compact display mode Use Cases: - Activity tracking forms - Analytics filtering - Bulk operations - Dashboard child switching - Comparison views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
267
maternal-web/components/common/ChildSelector.tsx
Normal file
267
maternal-web/components/common/ChildSelector.tsx
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
Checkbox,
|
||||||
|
ListItemText,
|
||||||
|
Avatar,
|
||||||
|
Box,
|
||||||
|
Chip,
|
||||||
|
SelectChangeEvent,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { Child } from '@/lib/api/children';
|
||||||
|
import { GroupAdd, Person } from '@mui/icons-material';
|
||||||
|
|
||||||
|
export type ChildSelectorMode = 'single' | 'multiple' | 'all';
|
||||||
|
|
||||||
|
interface ChildSelectorProps {
|
||||||
|
children: Child[];
|
||||||
|
selectedChildIds: string[];
|
||||||
|
onChange: (childIds: string[]) => void;
|
||||||
|
mode?: ChildSelectorMode;
|
||||||
|
showAllOption?: boolean;
|
||||||
|
label?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
compact?: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ChildSelector({
|
||||||
|
children,
|
||||||
|
selectedChildIds,
|
||||||
|
onChange,
|
||||||
|
mode = 'single',
|
||||||
|
showAllOption = false,
|
||||||
|
label = 'Select Child',
|
||||||
|
disabled = false,
|
||||||
|
compact = false,
|
||||||
|
required = false,
|
||||||
|
}: ChildSelectorProps) {
|
||||||
|
const handleChange = (event: SelectChangeEvent<string | string[]>) => {
|
||||||
|
const value = event.target.value;
|
||||||
|
|
||||||
|
if (mode === 'single') {
|
||||||
|
// Single selection
|
||||||
|
onChange(typeof value === 'string' ? [value] : value);
|
||||||
|
} else {
|
||||||
|
// Multiple selection
|
||||||
|
const selectedIds = typeof value === 'string' ? value.split(',') : value;
|
||||||
|
|
||||||
|
// Handle "All" option
|
||||||
|
if (selectedIds.includes('all')) {
|
||||||
|
if (selectedChildIds.length === children.length) {
|
||||||
|
// Deselect all
|
||||||
|
onChange([]);
|
||||||
|
} else {
|
||||||
|
// Select all
|
||||||
|
onChange(children.map((c) => c.id));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onChange(selectedIds);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDisplayValue = () => {
|
||||||
|
if (selectedChildIds.length === 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === 'single') {
|
||||||
|
return selectedChildIds[0] || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multiple mode
|
||||||
|
if (showAllOption && selectedChildIds.length === children.length) {
|
||||||
|
return 'all';
|
||||||
|
}
|
||||||
|
|
||||||
|
return selectedChildIds;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderValue = (selected: string | string[]) => {
|
||||||
|
if (!selected || (Array.isArray(selected) && selected.length === 0)) {
|
||||||
|
return <em>None selected</em>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === 'single') {
|
||||||
|
const child = children.find((c) => c.id === selected);
|
||||||
|
if (!child) return <em>None selected</em>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Avatar
|
||||||
|
src={child.photoUrl}
|
||||||
|
sx={{
|
||||||
|
width: compact ? 24 : 32,
|
||||||
|
height: compact ? 24 : 32,
|
||||||
|
bgcolor: child.displayColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{child.name[0]}
|
||||||
|
</Avatar>
|
||||||
|
{child.name}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multiple mode
|
||||||
|
if (showAllOption && Array.isArray(selected) && selected.includes('all')) {
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||||
|
<Chip
|
||||||
|
icon={<GroupAdd />}
|
||||||
|
label="All Children"
|
||||||
|
size="small"
|
||||||
|
sx={{ bgcolor: 'primary.light' }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedIds = Array.isArray(selected) ? selected : [selected];
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
|
||||||
|
{selectedIds.map((id) => {
|
||||||
|
const child = children.find((c) => c.id === id);
|
||||||
|
if (!child) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={id}
|
||||||
|
avatar={
|
||||||
|
<Avatar
|
||||||
|
src={child.photoUrl}
|
||||||
|
sx={{ bgcolor: child.displayColor }}
|
||||||
|
>
|
||||||
|
{child.name[0]}
|
||||||
|
</Avatar>
|
||||||
|
}
|
||||||
|
label={child.nickname || child.name}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
bgcolor: `${child.displayColor}20`,
|
||||||
|
borderColor: child.displayColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderStyle: 'solid',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (children.length === 0) {
|
||||||
|
return (
|
||||||
|
<FormControl fullWidth disabled>
|
||||||
|
<InputLabel>No children available</InputLabel>
|
||||||
|
<Select value="" label="No children available">
|
||||||
|
<MenuItem value="">No children available</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Single child - show simplified selector
|
||||||
|
if (children.length === 1 && mode === 'single') {
|
||||||
|
const child = children[0];
|
||||||
|
return (
|
||||||
|
<FormControl fullWidth disabled={disabled}>
|
||||||
|
<InputLabel>{label}</InputLabel>
|
||||||
|
<Select value={child.id} label={label}>
|
||||||
|
<MenuItem value={child.id}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Avatar
|
||||||
|
src={child.photoUrl}
|
||||||
|
sx={{
|
||||||
|
width: compact ? 24 : 32,
|
||||||
|
height: compact ? 24 : 32,
|
||||||
|
bgcolor: child.displayColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{child.name[0]}
|
||||||
|
</Avatar>
|
||||||
|
{child.name}
|
||||||
|
</Box>
|
||||||
|
</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl fullWidth required={required} disabled={disabled}>
|
||||||
|
<InputLabel>{label}</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={getDisplayValue()}
|
||||||
|
onChange={handleChange}
|
||||||
|
label={label}
|
||||||
|
multiple={mode === 'multiple'}
|
||||||
|
renderValue={renderValue}
|
||||||
|
>
|
||||||
|
{showAllOption && mode === 'multiple' && (
|
||||||
|
<MenuItem value="all">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedChildIds.length === children.length}
|
||||||
|
indeterminate={
|
||||||
|
selectedChildIds.length > 0 &&
|
||||||
|
selectedChildIds.length < children.length
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ListItemText primary="All Children" />
|
||||||
|
</MenuItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{children
|
||||||
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||||
|
.map((child) => (
|
||||||
|
<MenuItem key={child.id} value={child.id}>
|
||||||
|
{mode === 'multiple' && (
|
||||||
|
<Checkbox checked={selectedChildIds.includes(child.id)} />
|
||||||
|
)}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 1,
|
||||||
|
flex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
src={child.photoUrl}
|
||||||
|
sx={{
|
||||||
|
width: compact ? 24 : 32,
|
||||||
|
height: compact ? 24 : 32,
|
||||||
|
bgcolor: child.displayColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{child.name[0]}
|
||||||
|
</Avatar>
|
||||||
|
<Box sx={{ flex: 1 }}>
|
||||||
|
<ListItemText
|
||||||
|
primary={child.name}
|
||||||
|
secondary={child.nickname}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
{!compact && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
borderRadius: '50%',
|
||||||
|
bgcolor: child.displayColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,6 +8,9 @@ export interface Child {
|
|||||||
gender: 'male' | 'female' | 'other';
|
gender: 'male' | 'female' | 'other';
|
||||||
photoUrl?: string;
|
photoUrl?: string;
|
||||||
photoAlt?: string;
|
photoAlt?: string;
|
||||||
|
displayColor: string;
|
||||||
|
sortOrder: number;
|
||||||
|
nickname?: string;
|
||||||
medicalInfo?: any;
|
medicalInfo?: any;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
}
|
}
|
||||||
@@ -18,9 +21,18 @@ export interface CreateChildData {
|
|||||||
gender: 'male' | 'female' | 'other';
|
gender: 'male' | 'female' | 'other';
|
||||||
photoUrl?: string;
|
photoUrl?: string;
|
||||||
photoAlt?: string;
|
photoAlt?: string;
|
||||||
|
displayColor?: string;
|
||||||
|
nickname?: string;
|
||||||
medicalInfo?: any;
|
medicalInfo?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface FamilyStatistics {
|
||||||
|
totalChildren: number;
|
||||||
|
viewMode: 'tabs' | 'cards';
|
||||||
|
ageRange: { youngest: number; oldest: number } | null;
|
||||||
|
genderDistribution: { male: number; female: number; other: number };
|
||||||
|
}
|
||||||
|
|
||||||
export interface UpdateChildData extends Partial<CreateChildData> {}
|
export interface UpdateChildData extends Partial<CreateChildData> {}
|
||||||
|
|
||||||
export const childrenApi = {
|
export const childrenApi = {
|
||||||
@@ -59,4 +71,10 @@ export const childrenApi = {
|
|||||||
const response = await apiClient.get(`/api/v1/children/${id}/age`);
|
const response = await apiClient.get(`/api/v1/children/${id}/age`);
|
||||||
return response.data.data;
|
return response.data.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Get family statistics for multi-child UI
|
||||||
|
getFamilyStatistics: async (familyId: string): Promise<FamilyStatistics> => {
|
||||||
|
const response = await apiClient.get(`/api/v1/children/family/${familyId}/statistics`);
|
||||||
|
return response.data.data;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user