Add todos admin and 30s refresh
This commit is contained in:
kihong.kim
@@ -1,3 +1,4 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/todo_item.dart';
|
||||
@@ -5,9 +6,70 @@ import '../models/family_member.dart';
|
||||
import '../services/todo_service.dart';
|
||||
import '../services/family_service.dart';
|
||||
|
||||
class TodoListWidget extends StatelessWidget {
|
||||
class TodoListWidget extends StatefulWidget {
|
||||
const TodoListWidget({super.key});
|
||||
|
||||
@override
|
||||
State<TodoListWidget> createState() => _TodoListWidgetState();
|
||||
}
|
||||
|
||||
class _TodoListWidgetState extends State<TodoListWidget> {
|
||||
Timer? _timer;
|
||||
List<TodoItem> _todos = [];
|
||||
List<FamilyMember> _members = [];
|
||||
bool _isLoading = true;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_fetchData();
|
||||
_startAutoRefresh();
|
||||
}
|
||||
|
||||
void _startAutoRefresh() {
|
||||
_timer = Timer.periodic(const Duration(seconds: 30), (timer) {
|
||||
_fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _fetchData() async {
|
||||
try {
|
||||
final results = await Future.wait([
|
||||
Provider.of<TodoService>(
|
||||
context,
|
||||
listen: false,
|
||||
).fetchTodayTodos(),
|
||||
Provider.of<FamilyService>(
|
||||
context,
|
||||
listen: false,
|
||||
).fetchFamilyMembers(),
|
||||
]);
|
||||
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_todos = results[0] as List<TodoItem>;
|
||||
_members = results[1] as List<FamilyMember>;
|
||||
_isLoading = false;
|
||||
_error = null;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_error = 'Failed to load todos';
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_timer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
@@ -37,176 +99,158 @@ class TodoListWidget extends StatelessWidget {
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Expanded(
|
||||
child: FutureBuilder<List<dynamic>>(
|
||||
future: Future.wait([
|
||||
Provider.of<TodoService>(
|
||||
context,
|
||||
listen: false,
|
||||
).fetchTodayTodos(),
|
||||
Provider.of<FamilyService>(
|
||||
context,
|
||||
listen: false,
|
||||
).fetchFamilyMembers(),
|
||||
]),
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
|
||||
if (snapshot.hasError) {
|
||||
return const Center(
|
||||
child: Text(
|
||||
'Failed to load todos',
|
||||
style: TextStyle(color: Colors.white54),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (!snapshot.hasData) {
|
||||
return const Center(
|
||||
child: Text(
|
||||
'No todos today',
|
||||
style: TextStyle(color: Colors.white54),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final todos = snapshot.data![0] as List<TodoItem>;
|
||||
final members = snapshot.data![1] as List<FamilyMember>;
|
||||
|
||||
if (todos.isEmpty) {
|
||||
return const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.thumb_up, color: Colors.white24, size: 32),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'All done for today!',
|
||||
style: TextStyle(color: Colors.white54),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
itemCount: todos.length,
|
||||
separatorBuilder: (context, index) =>
|
||||
const Divider(color: Colors.white10),
|
||||
itemBuilder: (context, index) {
|
||||
final todo = todos[index];
|
||||
final member = members.firstWhere(
|
||||
(m) => m.id == todo.familyMemberId,
|
||||
orElse: () => const FamilyMember(
|
||||
id: '',
|
||||
name: 'Unknown',
|
||||
iconUrl: '',
|
||||
emoji: '👤',
|
||||
color: '#888888',
|
||||
order: 0,
|
||||
),
|
||||
);
|
||||
|
||||
// Parse color
|
||||
Color memberColor;
|
||||
try {
|
||||
String cleanHex =
|
||||
member.color.replaceAll('#', '').replaceAll('0x', '');
|
||||
if (cleanHex.length == 6) {
|
||||
cleanHex = 'FF$cleanHex';
|
||||
}
|
||||
if (cleanHex.length == 8) {
|
||||
memberColor = Color(int.parse('0x$cleanHex'));
|
||||
} else {
|
||||
memberColor = Colors.grey;
|
||||
}
|
||||
} catch (_) {
|
||||
memberColor = Colors.grey;
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: memberColor.withOpacity(0.2),
|
||||
child: member.iconUrl.isNotEmpty
|
||||
? ClipOval(
|
||||
child: Image.network(
|
||||
member.iconUrl,
|
||||
width: 40,
|
||||
height: 40,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Text(
|
||||
member.name.isNotEmpty
|
||||
? member.name[0].toUpperCase()
|
||||
: '?',
|
||||
style: TextStyle(
|
||||
color: memberColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
: (member.name.isNotEmpty
|
||||
? Text(
|
||||
member.name[0].toUpperCase(),
|
||||
style: TextStyle(
|
||||
color: memberColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person,
|
||||
color: memberColor,
|
||||
)),
|
||||
),
|
||||
title: Text(
|
||||
todo.title,
|
||||
style: TextStyle(
|
||||
color: todo.completed ? Colors.white54 : Colors.white,
|
||||
decoration: todo.completed
|
||||
? TextDecoration.lineThrough
|
||||
: null,
|
||||
decorationColor: Colors.white54,
|
||||
),
|
||||
),
|
||||
trailing: Checkbox(
|
||||
value: todo.completed,
|
||||
onChanged: (val) async {
|
||||
// Toggle completion
|
||||
final updated = TodoItem(
|
||||
id: todo.id,
|
||||
familyMemberId: todo.familyMemberId,
|
||||
title: todo.title,
|
||||
completed: val ?? false,
|
||||
dueDate: todo.dueDate,
|
||||
);
|
||||
await Provider.of<TodoService>(
|
||||
context,
|
||||
listen: false,
|
||||
).updateTodo(updated);
|
||||
// Force rebuild? In a real app we'd use a reactive state.
|
||||
// Here we rely on the parent or timer to refresh, or we could convert this to StatefulWidget.
|
||||
// For now, let's just let the next refresh cycle pick it up, or if the user interacts, maybe we should optimistic update?
|
||||
// Given it's a TV dashboard, interaction might be rare, but if it is interactive:
|
||||
(context as Element)
|
||||
.markNeedsBuild(); // HACK to refresh
|
||||
},
|
||||
activeColor: Theme.of(context).colorScheme.secondary,
|
||||
checkColor: Colors.black,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
child: _buildContent(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContent() {
|
||||
if (_isLoading && _todos.isEmpty) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
|
||||
if (_error != null && _todos.isEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
_error!,
|
||||
style: const TextStyle(color: Colors.white54),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_todos.isEmpty) {
|
||||
return const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.thumb_up, color: Colors.white24, size: 32),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'All done for today!',
|
||||
style: TextStyle(color: Colors.white54),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
itemCount: _todos.length,
|
||||
separatorBuilder: (context, index) =>
|
||||
const Divider(color: Colors.white10),
|
||||
itemBuilder: (context, index) {
|
||||
final todo = _todos[index];
|
||||
final member = _members.firstWhere(
|
||||
(m) => m.id == todo.familyMemberId,
|
||||
orElse: () => const FamilyMember(
|
||||
id: '',
|
||||
name: 'Unknown',
|
||||
iconUrl: '',
|
||||
emoji: '👤',
|
||||
color: '#888888',
|
||||
order: 0,
|
||||
),
|
||||
);
|
||||
|
||||
// Parse color
|
||||
Color memberColor;
|
||||
try {
|
||||
String cleanHex =
|
||||
member.color.replaceAll('#', '').replaceAll('0x', '');
|
||||
if (cleanHex.length == 6) {
|
||||
cleanHex = 'FF$cleanHex';
|
||||
}
|
||||
if (cleanHex.length == 8) {
|
||||
memberColor = Color(int.parse('0x$cleanHex'));
|
||||
} else {
|
||||
memberColor = Colors.grey;
|
||||
}
|
||||
} catch (_) {
|
||||
memberColor = Colors.grey;
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: memberColor.withOpacity(0.2),
|
||||
child: member.iconUrl.isNotEmpty
|
||||
? ClipOval(
|
||||
child: Image.network(
|
||||
member.iconUrl,
|
||||
width: 40,
|
||||
height: 40,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Text(
|
||||
member.name.isNotEmpty
|
||||
? member.name[0].toUpperCase()
|
||||
: '?',
|
||||
style: TextStyle(
|
||||
color: memberColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
: (member.name.isNotEmpty
|
||||
? Text(
|
||||
member.name[0].toUpperCase(),
|
||||
style: TextStyle(
|
||||
color: memberColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person,
|
||||
color: memberColor,
|
||||
)),
|
||||
),
|
||||
title: Text(
|
||||
todo.title,
|
||||
style: TextStyle(
|
||||
color: todo.completed ? Colors.white54 : Colors.white,
|
||||
decoration: todo.completed ? TextDecoration.lineThrough : null,
|
||||
decorationColor: Colors.white54,
|
||||
),
|
||||
),
|
||||
trailing: Checkbox(
|
||||
value: todo.completed,
|
||||
onChanged: (val) async {
|
||||
// Toggle completion
|
||||
final updated = TodoItem(
|
||||
id: todo.id,
|
||||
familyMemberId: todo.familyMemberId,
|
||||
title: todo.title,
|
||||
completed: val ?? false,
|
||||
dueDate: todo.dueDate,
|
||||
);
|
||||
|
||||
// Optimistic update
|
||||
setState(() {
|
||||
final idx = _todos.indexWhere((t) => t.id == todo.id);
|
||||
if (idx != -1) {
|
||||
_todos[idx] = updated;
|
||||
}
|
||||
});
|
||||
|
||||
await Provider.of<TodoService>(
|
||||
context,
|
||||
listen: false,
|
||||
).updateTodo(updated);
|
||||
|
||||
// Refresh to ensure sync
|
||||
_fetchData();
|
||||
},
|
||||
activeColor: Theme.of(context).colorScheme.secondary,
|
||||
checkColor: Colors.black,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user