feat(02-03): build task list screen with task row, completion, and overdue highlighting
- TaskListScreen with room name in AppBar, edit/delete room actions - AsyncValue.when for loading/error/data states with empty state - TaskRow with leading checkbox, name, German relative due date, frequency label - Overdue dates highlighted in warm coral (0xFFE07A5F) - Checkbox marks done immediately (optimistic UI, no undo) - Row tap navigates to edit form, long-press shows delete confirmation - FAB for creating new tasks - ListView.builder for task list sorted by due date Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
106
lib/features/tasks/presentation/task_row.dart
Normal file
106
lib/features/tasks/presentation/task_row.dart
Normal file
@@ -0,0 +1,106 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import 'package:household_keeper/core/database/database.dart';
|
||||
import 'package:household_keeper/features/tasks/domain/frequency.dart';
|
||||
import 'package:household_keeper/features/tasks/domain/relative_date.dart';
|
||||
import 'package:household_keeper/features/tasks/presentation/task_providers.dart';
|
||||
|
||||
/// Warm coral/terracotta color for overdue due date text.
|
||||
const _overdueColor = Color(0xFFE07A5F);
|
||||
|
||||
/// A single task row with leading checkbox, name, relative due date,
|
||||
/// and frequency label.
|
||||
///
|
||||
/// Per user decisions:
|
||||
/// - Checkbox marks task done immediately (optimistic UI, no undo)
|
||||
/// - Row tap opens edit form
|
||||
/// - No swipe gesture
|
||||
/// - No effort indicator or description preview on list view
|
||||
/// - Overdue: due date text turns warm coral, rest stays normal
|
||||
class TaskRow extends ConsumerWidget {
|
||||
const TaskRow({
|
||||
super.key,
|
||||
required this.task,
|
||||
this.onDelete,
|
||||
});
|
||||
|
||||
final Task task;
|
||||
final VoidCallback? onDelete;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final theme = Theme.of(context);
|
||||
final now = DateTime.now();
|
||||
final today = DateTime(now.year, now.month, now.day);
|
||||
|
||||
// Check if task is overdue (due date is before today)
|
||||
final dueDate = DateTime(
|
||||
task.nextDueDate.year,
|
||||
task.nextDueDate.month,
|
||||
task.nextDueDate.day,
|
||||
);
|
||||
final isOverdue = dueDate.isBefore(today);
|
||||
|
||||
// Format relative due date in German
|
||||
final relativeDateText = formatRelativeDate(task.nextDueDate, now);
|
||||
|
||||
// Build frequency label
|
||||
final freq = FrequencyInterval(
|
||||
intervalType: task.intervalType,
|
||||
days: task.intervalDays,
|
||||
);
|
||||
final frequencyText = freq.label();
|
||||
|
||||
return ListTile(
|
||||
leading: Checkbox(
|
||||
value: false, // Always unchecked -- completion is immediate + reschedule
|
||||
onChanged: (_) {
|
||||
// Mark done immediately (optimistic UI, no undo per user decision)
|
||||
ref.read(taskActionsProvider.notifier).completeTask(task.id);
|
||||
},
|
||||
),
|
||||
title: Text(
|
||||
task.name,
|
||||
style: theme.textTheme.titleMedium,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Row(
|
||||
children: [
|
||||
Text(
|
||||
relativeDateText,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: isOverdue ? _overdueColor : theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: Text(
|
||||
'\u00b7', // middle dot separator
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: Text(
|
||||
frequencyText,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
// Tap row opens edit form
|
||||
context.go('/rooms/${task.roomId}/tasks/${task.id}');
|
||||
},
|
||||
onLongPress: onDelete,
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user