jmartin/petitspas
1
0
Fork 0
Code Issues 50 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(front): selecteur couple enfant-nounou (#167)

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jmartin
2026-09-24 00:12:10 +02:00
co-authored by Cursor
parent 6f9136aae5
commit df4f48e864
12 changed files with 691 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/widgets/quotidien/couple_selector_bandeau.dart
+364
View File
@@ -0,0 +1,364 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:p_tits_pas/models/couple_garde.dart';
import 'package:p_tits_pas/services/api/api_config.dart';
import 'package:p_tits_pas/widgets/common/auth_network_image.dart';
import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
/// Rôle qui consulte le bandeau : côté parent (enfant | nounou) ou côté AM
/// (enfant | parent(s)). Le composant est le même, seule la lecture change.
/// Ticket #167 (parent) ; #170 réutilise en mode AM.
enum CoupleBandeauMode { parent, assistanteMaternelle }
/// Bandeau « couple de garde » en haut de la colonne gauche du TdB.
///
/// - Plusieurs couples → contrôle unique avec chevron (dropdown de bascule).
/// - Un seul couple → affichage informatif (pas de chevron, pas de menu).
/// - Aucun couple → état vide discret.
class CoupleSelectorBandeau extends StatelessWidget {
final CoupleBandeauMode mode;
final List<CoupleGarde> couples;
final String? selectedCoupleId;
final ValueChanged<CoupleGarde>? onCoupleSelected;
final bool loading;
final String? errorMessage;
final VoidCallback? onRetry;
const CoupleSelectorBandeau({
super.key,
this.mode = CoupleBandeauMode.parent,
required this.couples,
this.selectedCoupleId,
this.onCoupleSelected,
this.loading = false,
this.errorMessage,
this.onRetry,
});
CoupleGarde? get _selected {
if (couples.isEmpty) return null;
if (selectedCoupleId != null) {
for (final c in couples) {
if (c.id == selectedCoupleId) return c;
}
}
for (final c in couples) {
if (c.courant) return c;
}
return couples.first;
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
if (loading) return const _CoupleBandeauSkeleton();
if (errorMessage != null) {
return _CoupleBandeauError(message: errorMessage!, onRetry: onRetry);
}
if (couples.isEmpty) return const _CoupleBandeauEmpty();
final selected = _selected!;
final multi = couples.length > 1;
final card = _CoupleCard(
mode: mode,
couple: selected,
showChevron: multi,
);
if (!multi) return card;
return PopupMenuButton<String>(
tooltip: 'Changer de garde',
offset: const Offset(0, 4), // Rapproché du bandeau principal
color: Colors.transparent, // Le fond devient invisible
elevation: 0, // Pas d'ombre carrée
constraints: BoxConstraints.tightFor(width: constraints.maxWidth),
padding: EdgeInsets.zero,
onSelected: (id) {
final chosen = couples.firstWhere((c) => c.id == id);
onCoupleSelected?.call(chosen);
},
itemBuilder: (context) => [
for (final c in couples)
// On ne réaffiche pas le couple actuellement sélectionné dans le menu déroulant
// puisqu'il est déjà visible en tant que "bouton" principal.
if (c.id != selected.id)
PopupMenuItem<String>(
value: c.id,
padding: EdgeInsets.zero,
// Marge verticale pour que les pastilles ne soient pas collées
child: Padding(
padding: const EdgeInsets.only(bottom: 8),
child: _CoupleCard(
mode: mode,
couple: c,
showChevron: false,
selected: false,
isMenuItem: true,
),
),
),
],
child: card,
);
});
}
}
/// Carte principale : enfant à gauche, séparateur, AM/parents à droite.
class _CoupleCard extends StatelessWidget {
final CoupleBandeauMode mode;
final CoupleGarde couple;
final bool showChevron;
final bool selected;
final bool isMenuItem;
const _CoupleCard({
required this.mode,
required this.couple,
required this.showChevron,
this.selected = true,
this.isMenuItem = false,
});
@override
Widget build(BuildContext context) {
// Dans le menu, les non-sélectionnés sont un peu translucides
final opacity = (!selected && isMenuItem) ? 0.65 : 1.0;
return Container(
height: 90,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(QuotidienTheme.bandeauAssetForCouple(couple.id)),
fit: BoxFit.fill,
opacity: opacity,
),
),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
Expanded(
child: Opacity(
opacity: opacity,
child: _MembreTile(
photoUrl: couple.enfant.photoUrl,
name: couple.enfant.displayName(fallback: 'Enfant'),
fallbackIcon: Icons.child_care,
),
),
),
Container(
width: 1,
height: 44,
margin: const EdgeInsets.symmetric(horizontal: 12),
color: QuotidienTheme.ink.withValues(alpha: 0.15 * opacity),
),
Expanded(
child: Opacity(
opacity: opacity,
child: _MembreTile(
photoUrl: couple.am.photoUrl,
name: couple.am.displayName(
fallback: mode == CoupleBandeauMode.parent
? 'Nounou'
: 'Parent',
),
fallbackIcon: mode == CoupleBandeauMode.parent
? Icons.volunteer_activism
: Icons.person_outline,
),
),
),
if (showChevron)
Padding(
padding: const EdgeInsets.only(left: 4),
child: Icon(
Icons.keyboard_arrow_down,
color: QuotidienTheme.ink.withValues(alpha: opacity),
),
),
],
),
);
}
}
/// Photo ronde + nom (une moitié du couple).
class _MembreTile extends StatelessWidget {
final String? photoUrl;
final String name;
final IconData fallbackIcon;
const _MembreTile({
required this.photoUrl,
required this.name,
required this.fallbackIcon,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
_Avatar(photoUrl: photoUrl, fallbackIcon: fallbackIcon, size: 48),
const SizedBox(width: 10),
Expanded(
child: Text(
name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.merienda(
fontSize: 15,
fontWeight: FontWeight.bold,
color: QuotidienTheme.ink,
),
),
),
],
);
}
}
class _Avatar extends StatelessWidget {
final String? photoUrl;
final IconData fallbackIcon;
final double size;
const _Avatar({
required this.photoUrl,
required this.fallbackIcon,
required this.size,
});
@override
Widget build(BuildContext context) {
final url = ApiConfig.absoluteMediaUrl(photoUrl);
final placeholder = Container(
width: size,
height: size,
color: QuotidienTheme.lavender.withValues(alpha: 0.35),
child: Icon(fallbackIcon, size: size * 0.5, color: QuotidienTheme.ink),
);
return ClipOval(
child: SizedBox(
width: size,
height: size,
child: url.isEmpty
? placeholder
: AuthNetworkImage(
url: url,
width: size,
height: size,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => placeholder,
),
),
);
}
}
class _CoupleBandeauSkeleton extends StatelessWidget {
const _CoupleBandeauSkeleton();
@override
Widget build(BuildContext context) {
return Container(
height: 90,
decoration: BoxDecoration(
image: DecorationImage(
image: const AssetImage(QuotidienTheme.bandeauLime), // Un asset existant
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.white.withValues(alpha: 0.5),
BlendMode.lighten,
),
),
),
alignment: Alignment.center,
child: const SizedBox(
width: 26,
height: 26,
child: CircularProgressIndicator(strokeWidth: 2),
),
);
}
}
class _CoupleBandeauEmpty extends StatelessWidget {
const _CoupleBandeauEmpty();
@override
Widget build(BuildContext context) {
return Container(
height: 90,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(QuotidienTheme.bandeauLime), // Un asset existant par défaut
fit: BoxFit.fill,
),
),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
const Icon(Icons.info_outline, color: QuotidienTheme.muted),
const SizedBox(width: 12),
Expanded(
child: Text(
'Aucune garde active pour le moment.',
style: GoogleFonts.merriweather(
fontSize: 14,
color: QuotidienTheme.muted,
),
),
),
],
),
);
}
}
class _CoupleBandeauError extends StatelessWidget {
final String message;
final VoidCallback? onRetry;
const _CoupleBandeauError({required this.message, this.onRetry});
@override
Widget build(BuildContext context) {
return Container(
height: 90,
decoration: BoxDecoration(
image: DecorationImage(
image: const AssetImage(QuotidienTheme.bandeauLime), // Un asset existant
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
QuotidienTheme.coral.withValues(alpha: 0.3),
BlendMode.srcATop,
),
),
),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
const Icon(Icons.error_outline, color: QuotidienTheme.ink),
const SizedBox(width: 12),
Expanded(
child: Text(
message,
style: GoogleFonts.merriweather(
fontSize: 13,
color: QuotidienTheme.ink,
),
),
),
if (onRetry != null)
TextButton(
onPressed: onRetry,
child: const Text('Réessayer'),
),
],
),
);
}
}
frontend/lib/widgets/quotidien/quotidien_theme.dart
+23
View File
@@ -19,6 +19,29 @@ abstract final class QuotidienTheme {
/// couleur charte par section ; l'inactive est la même, plus transparente.
static const double pillInactiveOpacity = 0.45;
static const String pillIvoryAsset = 'assets/images/bg_ivoire_pill.png';
static const String pillBlueAsset = 'assets/images/bg_blue_pill.png';
// Bandeaux pour les couples (ratio 10:1, dessinés au crayon, couleur dynamique)
static const String bandeauLime = 'assets/images/bandeau_lime.png';
static const String bandeauBlue = 'assets/images/bandeau_blue.png';
static const String bandeauPeach = 'assets/images/bandeau_peach.png';
static const String bandeauYellow = 'assets/images/bandeau_yellow.png';
static const String bandeauLavender = 'assets/images/bandeau_lavender.png';
static const List<String> bandeauColors = [
bandeauLime,
bandeauBlue,
bandeauPeach,
bandeauYellow,
bandeauLavender,
];
/// Retourne un asset bandeau fixe pour un couple donné (basé sur son ID)
static String bandeauAssetForCouple(String coupleId) {
if (coupleId.isEmpty) return bandeauLime;
final hash = coupleId.hashCode.abs();
return bandeauColors[hash % bandeauColors.length];
}
static const String pillYellowAsset = 'assets/images/bg_yellow_pill.png';
static const String pillPeachAsset = 'assets/images/bg_peach_pill.png';
static const String pillTurquoiseAsset =