zl-q
575 lines
17 KiB
Dart
575 lines
17 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../../../core/di/injection.dart';
|
|
import '../../../../core/theme/design_tokens.dart';
|
|
import '../../../../shared/widgets/app_button.dart';
|
|
import '../../../../shared/widgets/app_pressable.dart';
|
|
import '../../../../shared/widgets/app_sheet_input_field.dart';
|
|
import '../../../../shared/widgets/back_title_page_header.dart';
|
|
import '../../../../shared/widgets/error_retry_surface.dart';
|
|
import '../../../../shared/widgets/full_screen_loading.dart';
|
|
import '../../../../shared/widgets/toast/toast.dart';
|
|
import '../../../../shared/widgets/toast/toast_type.dart';
|
|
import '../../../calendar/data/calendar_api.dart';
|
|
import '../../data/todo_api.dart';
|
|
|
|
class TodoEditScreen extends StatefulWidget {
|
|
final String? todoId;
|
|
|
|
const TodoEditScreen({super.key, required this.todoId});
|
|
|
|
const TodoEditScreen.create({super.key}) : todoId = null;
|
|
|
|
bool get isCreateMode => todoId == null;
|
|
|
|
@override
|
|
State<TodoEditScreen> createState() => _TodoEditScreenState();
|
|
}
|
|
|
|
class _TodoEditScreenState extends State<TodoEditScreen> {
|
|
final TodoApi _todoApi = sl<TodoApi>();
|
|
final CalendarApi _calendarApi = sl<CalendarApi>();
|
|
|
|
final TextEditingController _titleController = TextEditingController();
|
|
final TextEditingController _descriptionController = TextEditingController();
|
|
|
|
TodoResponse? _todo;
|
|
bool _loading = true;
|
|
bool _saving = false;
|
|
String? _error;
|
|
|
|
int _priority = 1;
|
|
final Set<String> _selectedScheduleItemIds = <String>{};
|
|
List<_ScheduleItemSimple> _scheduleItems = const <_ScheduleItemSimple>[];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_loadPage();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_titleController.dispose();
|
|
_descriptionController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _loadPage() async {
|
|
setState(() {
|
|
_loading = true;
|
|
_error = null;
|
|
});
|
|
|
|
try {
|
|
final now = DateTime.now();
|
|
final start = now.subtract(const Duration(days: 30));
|
|
final end = now.add(const Duration(days: 90));
|
|
final scheduleItems = await _calendarApi.listByRange(
|
|
startAt: start,
|
|
endAt: end,
|
|
);
|
|
|
|
TodoResponse? todo;
|
|
if (!widget.isCreateMode) {
|
|
todo = await _todoApi.getTodo(widget.todoId!);
|
|
}
|
|
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
|
|
_todo = todo;
|
|
_titleController.text = todo?.title ?? '';
|
|
_descriptionController.text = todo?.description ?? '';
|
|
_priority = todo?.priority ?? 1;
|
|
_selectedScheduleItemIds
|
|
..clear()
|
|
..addAll(todo?.scheduleItems.map((item) => item.id) ?? const []);
|
|
_scheduleItems = scheduleItems
|
|
.map(
|
|
(item) => _ScheduleItemSimple(
|
|
id: item.id,
|
|
title: item.title,
|
|
startAt: item.startAt,
|
|
),
|
|
)
|
|
.toList();
|
|
|
|
setState(() {
|
|
_loading = false;
|
|
});
|
|
} catch (error) {
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
setState(() {
|
|
_loading = false;
|
|
_error = error.toString();
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColors.todoBg,
|
|
body: SafeArea(
|
|
child: Container(
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [AppColors.homeBackgroundTop, AppColors.todoBg],
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
BackTitlePageHeader(title: widget.isCreateMode ? '新建待办' : '编辑待办'),
|
|
Expanded(child: _buildBody()),
|
|
_buildBottomAction(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBody() {
|
|
if (_loading) {
|
|
return const FullScreenLoading();
|
|
}
|
|
|
|
if (_error != null) {
|
|
return ErrorRetrySurface(message: '加载失败: $_error', onRetry: _loadPage);
|
|
}
|
|
|
|
if (!widget.isCreateMode && _todo == null) {
|
|
return const Center(child: Text('待办不存在'));
|
|
}
|
|
|
|
return ListView(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
AppSpacing.lg,
|
|
AppSpacing.sm,
|
|
AppSpacing.lg,
|
|
AppSpacing.lg,
|
|
),
|
|
children: [
|
|
_buildHeaderCard(),
|
|
const SizedBox(height: AppSpacing.md),
|
|
_buildFormCard(),
|
|
const SizedBox(height: AppSpacing.md),
|
|
_buildScheduleCard(),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildHeaderCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.lg),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.white,
|
|
borderRadius: BorderRadius.circular(AppRadius.xl),
|
|
border: Border.all(color: AppColors.borderTertiary),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.slate200.withValues(alpha: 0.34),
|
|
blurRadius: AppRadius.lg,
|
|
offset: const Offset(0, AppSpacing.xs),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'待办信息',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w700,
|
|
color: AppColors.slate900,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.xs),
|
|
Text(
|
|
widget.isCreateMode
|
|
? '创建后可在四象限中查看并继续调整优先级与关联事件。'
|
|
: _todo?.status == 'done'
|
|
? '该待办已完成，你仍可调整内容并重新组织关联事件。'
|
|
: '调整标题、优先级和关联事件，保持任务结构清晰。',
|
|
style: const TextStyle(fontSize: 13, color: AppColors.slate500),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFormCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.lg),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.white,
|
|
borderRadius: BorderRadius.circular(AppRadius.xl),
|
|
border: Border.all(color: AppColors.borderSecondary),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
AppSheetInputField(
|
|
controller: _titleController,
|
|
label: '标题',
|
|
hint: '输入待办标题',
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
AppSheetInputField(
|
|
controller: _descriptionController,
|
|
label: '描述（可选）',
|
|
hint: '补充细节或备注',
|
|
maxLines: 2,
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
const Text(
|
|
'优先级',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.slate700,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Wrap(
|
|
spacing: AppSpacing.sm,
|
|
runSpacing: AppSpacing.sm,
|
|
children: [
|
|
_PriorityPill(
|
|
label: '重要紧急',
|
|
selected: _priority == 1,
|
|
borderColor: AppColors.g1Border,
|
|
activeColor: AppColors.g1Text,
|
|
onTap: () => setState(() => _priority = 1),
|
|
),
|
|
_PriorityPill(
|
|
label: '紧急不重要',
|
|
selected: _priority == 3,
|
|
borderColor: AppColors.g2Border,
|
|
activeColor: AppColors.g2Text,
|
|
onTap: () => setState(() => _priority = 3),
|
|
),
|
|
_PriorityPill(
|
|
label: '重要不紧急',
|
|
selected: _priority == 2,
|
|
borderColor: AppColors.g3Border,
|
|
activeColor: AppColors.g3Text,
|
|
onTap: () => setState(() => _priority = 2),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildScheduleCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.lg),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surfaceSecondary,
|
|
borderRadius: BorderRadius.circular(AppRadius.xl),
|
|
border: Border.all(color: AppColors.borderSecondary),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const Text(
|
|
'关联日历事件',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.slate700,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
'${_selectedScheduleItemIds.length}项',
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.slate500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
if (_scheduleItems.isEmpty)
|
|
const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: AppSpacing.xl),
|
|
child: Center(
|
|
child: Text(
|
|
'暂无可关联的日历事件',
|
|
style: TextStyle(color: AppColors.slate500),
|
|
),
|
|
),
|
|
)
|
|
else
|
|
ConstrainedBox(
|
|
constraints: const BoxConstraints(maxHeight: 280),
|
|
child: ListView.separated(
|
|
shrinkWrap: true,
|
|
itemCount: _scheduleItems.length,
|
|
separatorBuilder: (context, index) =>
|
|
const SizedBox(height: AppSpacing.sm),
|
|
itemBuilder: (context, index) {
|
|
final item = _scheduleItems[index];
|
|
final selected = _selectedScheduleItemIds.contains(item.id);
|
|
return _ScheduleSelectableTile(
|
|
title: item.title,
|
|
subtitle: _formatDate(item.startAt),
|
|
selected: selected,
|
|
onTap: () {
|
|
setState(() {
|
|
if (selected) {
|
|
_selectedScheduleItemIds.remove(item.id);
|
|
} else {
|
|
_selectedScheduleItemIds.add(item.id);
|
|
}
|
|
});
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBottomAction() {
|
|
final canSave = !_loading && !_saving;
|
|
return Container(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
AppSpacing.lg,
|
|
AppSpacing.sm,
|
|
AppSpacing.lg,
|
|
AppSpacing.lg,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.white.withValues(alpha: 0.9),
|
|
border: const Border(top: BorderSide(color: AppColors.borderSecondary)),
|
|
),
|
|
child: AppButton(
|
|
text: _saving ? '保存中...' : (widget.isCreateMode ? '创建待办' : '保存修改'),
|
|
onPressed: canSave ? _save : null,
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> _save() async {
|
|
if (_saving) {
|
|
return;
|
|
}
|
|
final title = _titleController.text.trim();
|
|
if (title.isEmpty) {
|
|
Toast.show(context, '请输入标题', type: ToastType.warning);
|
|
return;
|
|
}
|
|
|
|
setState(() {
|
|
_saving = true;
|
|
});
|
|
|
|
try {
|
|
final description = _descriptionController.text.trim().isEmpty
|
|
? null
|
|
: _descriptionController.text.trim();
|
|
if (widget.isCreateMode) {
|
|
await _todoApi.createTodo(
|
|
title: title,
|
|
description: description,
|
|
priority: _priority,
|
|
scheduleItemIds: _selectedScheduleItemIds.toList(),
|
|
);
|
|
} else {
|
|
await _todoApi.updateTodo(
|
|
widget.todoId!,
|
|
title: title,
|
|
description: description,
|
|
priority: _priority,
|
|
scheduleItemIds: _selectedScheduleItemIds.toList(),
|
|
);
|
|
}
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
Toast.show(
|
|
context,
|
|
widget.isCreateMode ? '待办已创建' : '待办已更新',
|
|
type: ToastType.success,
|
|
);
|
|
context.pop(true);
|
|
} catch (error) {
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
Toast.show(context, '保存失败: $error', type: ToastType.error);
|
|
} finally {
|
|
if (mounted) {
|
|
setState(() {
|
|
_saving = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
String _formatDate(DateTime dt) {
|
|
return '${dt.year}年${dt.month}月${dt.day}日 ${dt.hour.toString().padLeft(2, '0')}:${dt.minute.toString().padLeft(2, '0')}';
|
|
}
|
|
}
|
|
|
|
class _ScheduleItemSimple {
|
|
final String id;
|
|
final String title;
|
|
final DateTime startAt;
|
|
|
|
const _ScheduleItemSimple({
|
|
required this.id,
|
|
required this.title,
|
|
required this.startAt,
|
|
});
|
|
}
|
|
|
|
class _PriorityPill extends StatelessWidget {
|
|
final String label;
|
|
final bool selected;
|
|
final Color borderColor;
|
|
final Color activeColor;
|
|
final VoidCallback onTap;
|
|
|
|
const _PriorityPill({
|
|
required this.label,
|
|
required this.selected,
|
|
required this.borderColor,
|
|
required this.activeColor,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AppPressable(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(AppRadius.full),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 140),
|
|
curve: Curves.easeOut,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.sm,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: selected
|
|
? borderColor.withValues(alpha: 0.28)
|
|
: AppColors.white,
|
|
borderRadius: BorderRadius.circular(AppRadius.full),
|
|
border: Border.all(
|
|
color: selected ? borderColor : AppColors.slate300,
|
|
width: selected ? 1.5 : 1,
|
|
),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
|
|
color: selected ? activeColor : AppColors.slate600,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ScheduleSelectableTile extends StatelessWidget {
|
|
final String title;
|
|
final String subtitle;
|
|
final bool selected;
|
|
final VoidCallback onTap;
|
|
|
|
const _ScheduleSelectableTile({
|
|
required this.title,
|
|
required this.subtitle,
|
|
required this.selected,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AppPressable(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(AppRadius.lg),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 120),
|
|
curve: Curves.easeOut,
|
|
padding: const EdgeInsets.all(AppSpacing.md),
|
|
decoration: BoxDecoration(
|
|
color: selected ? AppColors.surfaceInfoLight : AppColors.white,
|
|
borderRadius: BorderRadius.circular(AppRadius.lg),
|
|
border: Border.all(
|
|
color: selected ? AppColors.borderQuaternary : AppColors.border,
|
|
),
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.slate800,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.xs),
|
|
Text(
|
|
subtitle,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: AppColors.slate500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 120),
|
|
width: AppSpacing.lg,
|
|
height: AppSpacing.lg,
|
|
decoration: BoxDecoration(
|
|
color: selected ? AppColors.blue600 : AppColors.white,
|
|
borderRadius: BorderRadius.circular(AppRadius.full),
|
|
border: Border.all(
|
|
color: selected ? AppColors.blue600 : AppColors.slate300,
|
|
),
|
|
),
|
|
child: selected
|
|
? const Icon(Icons.check, size: 12, color: AppColors.white)
|
|
: null,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|