modify icon & add notify function
This commit is contained in:
+9
-3
@@ -23,6 +23,7 @@ import './calendar/calendar_manager.dart';
|
||||
import './expense/expense_manager.dart';
|
||||
import './chart/channel_sales_manager.dart';
|
||||
import './bpm/sign_todo_manager.dart';
|
||||
import './message/message_manager.dart';
|
||||
|
||||
class MyHttpOverrides extends HttpOverrides {
|
||||
@override
|
||||
@@ -162,9 +163,9 @@ class MainMenu extends StatelessWidget {
|
||||
targetScreen: IssueManager(),
|
||||
),
|
||||
MenuItem(
|
||||
title: '設定',
|
||||
icon: Icons.settings,
|
||||
targetScreen: SettingsPage(),
|
||||
title: '訊息通知',
|
||||
icon: Icons.notifications,
|
||||
targetScreen: MessageManager(currentUserId: uid),
|
||||
),
|
||||
MenuItem(
|
||||
title: '費用申請',
|
||||
@@ -178,6 +179,11 @@ class MainMenu extends StatelessWidget {
|
||||
targetScreen: NewsManager(),
|
||||
//targetScreen: AnnouncementManager(),
|
||||
),
|
||||
MenuItem(
|
||||
title: '設定',
|
||||
icon: Icons.settings,
|
||||
targetScreen: SettingsPage(),
|
||||
),
|
||||
];
|
||||
|
||||
return Scaffold(
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import './message_model.dart';
|
||||
import '../services/generic_api_service.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
class MessageApiService {
|
||||
final GenericApiService _apiService = GenericApiService();
|
||||
|
||||
// 獲取個人通知訊息紀錄 (僅顯示 30 天內)
|
||||
Future<List<EipMessage>> fetchMessages(String userId) async {
|
||||
// 計算 30 天前的日期,作為查詢參數
|
||||
final thirtyDaysAgo = DateTime.now().subtract(const Duration(days: 30));
|
||||
final dateParam = DateFormat('yyyy-MM-dd').format(thirtyDaysAgo);
|
||||
|
||||
// 格式:當前頁^每頁筆數^排序欄位^關鍵字欄位^關鍵字內容
|
||||
// 排序:按通知日期 (create_date) 降冪排列
|
||||
// 實務上可根據您的 Generic API 支援度,將 dateParam 傳入作為過濾條件
|
||||
// String queryFilter = "1^100^create_date^*^^^receivers^$userId^after^$dateParam";
|
||||
String queryFilter = "1^100^create_date^*^^^receivers^$userId^^";
|
||||
|
||||
return await _apiService.fetchList<EipMessage>(
|
||||
tableName: "eip_message", // 指向訊息資料表
|
||||
pk: "id", //
|
||||
queryFilter: queryFilter,
|
||||
fromJson: (json) => EipMessage.fromJson(json),
|
||||
);
|
||||
}
|
||||
|
||||
// (選用) 更新訊息為已讀狀態
|
||||
Future<bool> markAsRead(int messageId) async {
|
||||
// 實作呼叫更新 msg_status 的 API 邏輯
|
||||
// ...
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import './message_model.dart';
|
||||
|
||||
class MessageDetail extends StatelessWidget {
|
||||
final EipMessage message;
|
||||
|
||||
const MessageDetail({required this.message, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('訊息內容'),
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: Colors.black,
|
||||
elevation: 0.5,
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(20.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 主旨區塊
|
||||
Text(
|
||||
message.subjectLine,
|
||||
style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold, height: 1.4),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// 寄件資訊區塊
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundColor: Colors.blueGrey.shade100,
|
||||
child: const Icon(Icons.person, color: Colors.blueGrey),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
message.sender, //
|
||||
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
|
||||
),
|
||||
Text(
|
||||
message.formattedDate,
|
||||
style: const TextStyle(fontSize: 14, color: Colors.grey),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.0),
|
||||
child: Divider(),
|
||||
),
|
||||
|
||||
// 訊息內文區塊
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.shade50,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
message.msgContent.isNotEmpty ? message.msgContent : '無內容', //
|
||||
style: const TextStyle(fontSize: 16, height: 1.6, color: Colors.black87),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import './message_model.dart';
|
||||
import './message_api.dart';
|
||||
import './message_detail.dart';
|
||||
|
||||
class MessageManager extends StatefulWidget {
|
||||
final String currentUserId;
|
||||
const MessageManager({required this.currentUserId, super.key});
|
||||
|
||||
@override
|
||||
State<MessageManager> createState() => _MessageManagerState();
|
||||
}
|
||||
|
||||
class _MessageManagerState extends State<MessageManager> {
|
||||
late MessageApiService _apiService;
|
||||
late Future<List<EipMessage>> _messageFuture;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_apiService = MessageApiService();
|
||||
_refreshList();
|
||||
}
|
||||
|
||||
void _refreshList() {
|
||||
setState(() {
|
||||
_messageFuture = _apiService.fetchMessages(widget.currentUserId);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('通知訊息'),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: _refreshList,
|
||||
)
|
||||
],
|
||||
),
|
||||
body: FutureBuilder<List<EipMessage>>(
|
||||
future: _messageFuture,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
if (!snapshot.hasData || snapshot.data!.isEmpty) {
|
||||
return const Center(child: Text('近 30 天內無任何通知訊息'));
|
||||
}
|
||||
return ListView.builder(
|
||||
itemCount: snapshot.data!.length,
|
||||
itemBuilder: (ctx, i) => _buildMessageCard(snapshot.data![i]),
|
||||
);
|
||||
},
|
||||
),
|
||||
// 此為唯讀功能,因此移除 FloatingActionButton
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessageCard(EipMessage item) {
|
||||
return Card(
|
||||
elevation: 0.5,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
shape: RoundedRectangleBorder(
|
||||
side: BorderSide(color: Colors.grey.shade200),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: ListTile(
|
||||
onTap: () async {
|
||||
// 點擊進入詳情
|
||||
await Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => MessageDetail(message: item)),
|
||||
);
|
||||
// 若在詳情頁有觸發「已讀」,返回時可重新整理列表
|
||||
_refreshList();
|
||||
},
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: item.statusColor.withOpacity(0.1),
|
||||
child: Icon(
|
||||
item.isRead ? Icons.mark_email_read : Icons.mark_email_unread,
|
||||
color: item.statusColor,
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
item.subjectLine, //
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontWeight: item.isRead ? FontWeight.normal : FontWeight.bold,
|
||||
),
|
||||
),
|
||||
subtitle: Text(item.formattedDate),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
class EipMessage {
|
||||
final int id; // id (Primary Key)
|
||||
final String sender; // sender (發件人)
|
||||
final String receivers; // receivers (收件人)
|
||||
final String subjectLine; // subject_line (主旨)
|
||||
final String msgContent; // msg_content (內容)
|
||||
final String msgStatus; // msg_status (閱讀狀態)
|
||||
final DateTime? createDate; // create_date (通知日期)
|
||||
|
||||
EipMessage({
|
||||
required this.id,
|
||||
this.sender = '',
|
||||
this.receivers = '',
|
||||
this.subjectLine = '',
|
||||
this.msgContent = '',
|
||||
this.msgStatus = '0',
|
||||
this.createDate,
|
||||
});
|
||||
|
||||
factory EipMessage.fromJson(Map<String, dynamic> json) {
|
||||
return EipMessage(
|
||||
id: int.tryParse(json['id']?.toString() ?? '0') ?? 0,
|
||||
sender: json['sender'] as String? ?? '系統通知',
|
||||
receivers: json['receivers'] as String? ?? '',
|
||||
subjectLine: json['subject_line'] as String? ?? '無主旨',
|
||||
msgContent: json['msg_content'] as String? ?? '',
|
||||
msgStatus: json['msg_status'] as String? ?? '0',
|
||||
createDate: json['create_date'] != null ? DateTime.tryParse(json['create_date']) : null,
|
||||
);
|
||||
}
|
||||
|
||||
// 格式化顯示通知日期
|
||||
String get formattedDate {
|
||||
if (createDate == null) return '未知時間';
|
||||
final df = DateFormat('yyyy/MM/dd HH:mm');
|
||||
return df.format(createDate!);
|
||||
}
|
||||
|
||||
// 判斷是否已讀 (假設 '1' 為已讀,'0' 為未讀)
|
||||
bool get isRead => msgStatus == '1';
|
||||
|
||||
// 狀態視覺呈現
|
||||
Color get statusColor => isRead ? Colors.grey : Colors.blueAccent;
|
||||
String get statusText => isRead ? '已讀' : '未讀';
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class TodoForm extends StatefulWidget {
|
||||
const TodoForm({super.key});
|
||||
|
||||
@override
|
||||
State<TodoForm> createState() => _TodoFormState();
|
||||
}
|
||||
|
||||
class _TodoFormState extends State<TodoForm> {
|
||||
final Color primaryPurple = const Color(0xFF6542D0);
|
||||
final Color bgLight = const Color(0xFFF8F9FA);
|
||||
|
||||
// 表單資料狀態 (可視需求綁定至 API)
|
||||
String _selectedGroup = 'Work';
|
||||
DateTime _startDate = DateTime.now();
|
||||
DateTime _endDate = DateTime.now().add(const Duration(days: 30));
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: bgLight,
|
||||
appBar: AppBar(
|
||||
backgroundColor: bgLight,
|
||||
elevation: 0,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black87),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
title: const Text('Add Project', style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold)),
|
||||
centerTitle: true,
|
||||
actions: [
|
||||
IconButton(icon: const Icon(Icons.notifications_outlined, color: Colors.black87), onPressed: () {})
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildDropdownField('Task Group', _selectedGroup, Icons.work_outline),
|
||||
const SizedBox(height: 24),
|
||||
_buildTextField('Project Name', 'Grocery Shopping App', isMultiline: false),
|
||||
const SizedBox(height: 24),
|
||||
_buildTextField('Description', 'This application is designed for super shops...', isMultiline: true),
|
||||
const SizedBox(height: 24),
|
||||
_buildDatePicker('Start Date', _startDate, true),
|
||||
const SizedBox(height: 24),
|
||||
_buildDatePicker('End Date', _endDate, false),
|
||||
const SizedBox(height: 24),
|
||||
_buildLogoSelector(),
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// 底部大型送出按鈕
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryPurple,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
elevation: 5,
|
||||
shadowColor: primaryPurple.withOpacity(0.5)
|
||||
),
|
||||
onPressed: () {
|
||||
// 觸發 API 儲存邏輯
|
||||
Navigator.pop(context);
|
||||
},
|
||||
child: const Text('Add Project', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// --- 輔助表單元件 ---
|
||||
|
||||
Widget _buildDropdownField(String label, String value, IconData icon) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: DropdownButtonHideUnderline(
|
||||
child: DropdownButton<String>(
|
||||
value: value,
|
||||
isExpanded: true,
|
||||
icon: const Icon(Icons.arrow_drop_down, color: Colors.black54),
|
||||
items: ['Work', 'Personal', 'Study'].map((String val) {
|
||||
return DropdownMenuItem<String>(
|
||||
value: val,
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(color: Colors.pink.shade50, borderRadius: BorderRadius.circular(10)),
|
||||
child: Icon(icon, color: Colors.pinkAccent, size: 20),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
Text(val, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
onChanged: (newValue) {
|
||||
if (newValue != null) setState(() => _selectedGroup = newValue);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTextField(String label, String placeholder, {bool isMultiline = false}) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
TextFormField(
|
||||
initialValue: placeholder,
|
||||
maxLines: isMultiline ? 4 : 1,
|
||||
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.black87),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
isDense: true,
|
||||
contentPadding: EdgeInsets.only(top: 8),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDatePicker(String label, DateTime date, bool isStart) {
|
||||
// 實務上這裡會加上 onTap 呼叫 showDatePicker
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(color: const Color(0xFFF0EFFF), borderRadius: BorderRadius.circular(10)),
|
||||
child: Icon(Icons.calendar_month, color: primaryPurple, size: 20),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
const SizedBox(height: 4),
|
||||
Text('01 May, 2022', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)), // Mock 字串
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const Icon(Icons.arrow_drop_down, color: Colors.black54)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLogoSelector() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(backgroundColor: Colors.teal, radius: 24, child: Text('GS', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
Text('Grocery', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.teal)),
|
||||
Text('shop', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.orange)),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
TextButton(
|
||||
style: TextButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFF0EFFF),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
|
||||
),
|
||||
onPressed: () {},
|
||||
child: Text('Change Logo', style: TextStyle(color: primaryPurple, fontWeight: FontWeight.bold)),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
+253
-97
@@ -1,33 +1,46 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import './todo_api.dart';
|
||||
import './todo_model.dart';
|
||||
import './todo_detail.dart'; // 稍後創建
|
||||
// import './main.dart'; // 確保可以訪問 MainMenu
|
||||
import './todo_detail.dart';
|
||||
import './todo_form.dart';
|
||||
|
||||
class TodoManager extends StatefulWidget {
|
||||
// 實際應用中,這裡應該傳入當前用戶 ID
|
||||
final String currentUserId;
|
||||
const TodoManager({this.currentUserId = 'admin', super.key});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _TodoManagerState();
|
||||
}
|
||||
State<StatefulWidget> createState() => _TodoManagerState();
|
||||
}
|
||||
|
||||
class _TodoManagerState extends State<TodoManager> {
|
||||
late TodoApiService _apiService;
|
||||
late Future<List<Todo>> _todosFuture;
|
||||
|
||||
// UI 狀態控制
|
||||
int _selectedDateIndex = 3; // 預設選中 index 3 (即「今天」)
|
||||
String _selectedFilter = 'All'; // All, To do, In Progress, Done
|
||||
late List<DateTime> _dynamicDates; // 儲存動態產生的日期
|
||||
|
||||
final Color primaryPurple = const Color(0xFF6542D0);
|
||||
final Color bgLight = const Color(0xFFF8F9FA);
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_apiService = TodoApiService(currentUserId: widget.currentUserId);
|
||||
// 頁面加載時自動開始獲取資料
|
||||
_todosFuture = _apiService.fetchTodos();
|
||||
_generateDates();
|
||||
}
|
||||
|
||||
// 產生前3天到後1天的日期區間
|
||||
void _generateDates() {
|
||||
DateTime today = DateTime.now();
|
||||
_dynamicDates = List.generate(5, (index) {
|
||||
return today.subtract(Duration(days: 3 - index));
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新資料的函數
|
||||
void _refreshTodos() {
|
||||
setState(() {
|
||||
_todosFuture = _apiService.fetchTodos();
|
||||
@@ -37,113 +50,256 @@ class _TodoManagerState extends State<TodoManager> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('我的待辦事項'),
|
||||
actions: <Widget>[
|
||||
backgroundColor: bgLight,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildCustomHeader(),
|
||||
_buildDateSelector(),
|
||||
_buildFilterChips(),
|
||||
Expanded(
|
||||
child: _buildTodoListBody(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: () {
|
||||
Navigator.push(context, MaterialPageRoute(builder: (_) => const TodoForm()));
|
||||
},
|
||||
backgroundColor: primaryPurple,
|
||||
elevation: 4,
|
||||
shape: const CircleBorder(),
|
||||
child: const Icon(Icons.add, color: Colors.white, size: 28),
|
||||
),
|
||||
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
|
||||
bottomNavigationBar: _buildBottomNav(),
|
||||
);
|
||||
}
|
||||
|
||||
// --- UI 元件區塊 ---
|
||||
|
||||
Widget _buildCustomHeader() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
tooltip: '刷新列表',
|
||||
onPressed: _refreshTodos,
|
||||
),
|
||||
// 假設這裡使用 Navigator.pop(context) 即可返回 MainMenu
|
||||
IconButton(
|
||||
icon: const Icon(Icons.home),
|
||||
tooltip: '返回主頁',
|
||||
icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black87),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
const Text(
|
||||
"Today's Tasks",
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87),
|
||||
),
|
||||
// 移除小鈴鐺圖示後,保留一個佔位符號以確保標題能完美置中
|
||||
const SizedBox(width: 48),
|
||||
],
|
||||
),
|
||||
body: FutureBuilder<List<Todo>>(
|
||||
future: _todosFuture,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
} else if (snapshot.hasError) {
|
||||
return Center(
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDateSelector() {
|
||||
return SizedBox(
|
||||
height: 90,
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: _dynamicDates.length,
|
||||
itemBuilder: (context, index) {
|
||||
final date = _dynamicDates[index];
|
||||
final isSelected = index == _selectedDateIndex;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => setState(() => _selectedDateIndex = index),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8),
|
||||
width: 65,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? primaryPurple : Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [
|
||||
if (!isSelected) BoxShadow(color: Colors.grey.withOpacity(0.1), blurRadius: 10, offset: const Offset(0, 5))
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text('載入失敗: ${snapshot.error}', textAlign: TextAlign.center),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(onPressed: _refreshTodos, child: const Text('重試')),
|
||||
Text(DateFormat('MMM').format(date), style: TextStyle(color: isSelected ? Colors.white70 : Colors.grey, fontSize: 12)),
|
||||
const SizedBox(height: 4),
|
||||
Text(DateFormat('dd').format(date), style: TextStyle(color: isSelected ? Colors.white : Colors.black, fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 4),
|
||||
Text(DateFormat('EEE').format(date), style: TextStyle(color: isSelected ? Colors.white70 : Colors.grey, fontSize: 12)),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
|
||||
return TodoList(todos: snapshot.data!);
|
||||
} else {
|
||||
return const Center(child: Text('目前沒有待辦事項。工作很輕鬆!'));
|
||||
}
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// 列表顯示小部件 (TodoList)
|
||||
// -----------------------------------------------------------
|
||||
|
||||
class TodoList extends StatelessWidget {
|
||||
final List<Todo> todos;
|
||||
|
||||
const TodoList({required this.todos, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView.builder(
|
||||
itemCount: todos.length,
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
final item = todos[index];
|
||||
|
||||
return Card(
|
||||
elevation: 3,
|
||||
margin: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 16.0),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
// 點擊項目:導航到詳細頁面
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => TodoDetail(todo: item),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: ListTile(
|
||||
// 左側狀態指示器
|
||||
leading: Container(
|
||||
width: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: item.statusColor,
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
item.taskName,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
subtitle: Text(
|
||||
'分類: ${item.className} | 優先級: ${item.priority ?? '一般'}',
|
||||
style: const TextStyle(fontSize: 12),
|
||||
),
|
||||
trailing: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'截止日',
|
||||
style: TextStyle(fontSize: 10, color: item.statusColor),
|
||||
),
|
||||
Text(
|
||||
item.formattedEndDate,
|
||||
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
|
||||
),
|
||||
],
|
||||
Widget _buildFilterChips() {
|
||||
final filters = ['All', 'To do', 'In Progress', 'Done'];
|
||||
return SizedBox(
|
||||
height: 60,
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
itemCount: filters.length,
|
||||
itemBuilder: (context, index) {
|
||||
final isSelected = _selectedFilter == filters[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 12),
|
||||
child: ChoiceChip(
|
||||
label: Text(filters[index]),
|
||||
selected: isSelected,
|
||||
onSelected: (bool selected) {
|
||||
if (selected) setState(() => _selectedFilter = filters[index]);
|
||||
},
|
||||
selectedColor: primaryPurple,
|
||||
backgroundColor: const Color(0xFFF0EFFF),
|
||||
labelStyle: TextStyle(
|
||||
color: isSelected ? Colors.white : primaryPurple,
|
||||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||||
),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20), side: BorderSide.none),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTodoListBody() {
|
||||
return FutureBuilder<List<Todo>>(
|
||||
future: _todosFuture,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
} else if (snapshot.hasError) {
|
||||
return Center(child: Text('載入失敗: ${snapshot.error}'));
|
||||
} else if (snapshot.hasData) {
|
||||
|
||||
// 取得目前選取的時間
|
||||
DateTime selectedDate = _dynamicDates[_selectedDateIndex];
|
||||
|
||||
List<Todo> filteredTodos = snapshot.data!.where((todo) {
|
||||
// 1. 狀態過濾邏輯
|
||||
bool statusMatch = true;
|
||||
if (_selectedFilter != 'All') {
|
||||
String status = (todo.status ?? '').toUpperCase();
|
||||
if (_selectedFilter == 'Done') statusMatch = status == 'DONE';
|
||||
else if (_selectedFilter == 'In Progress') statusMatch = status == 'WIP';
|
||||
else if (_selectedFilter == 'To do') statusMatch = status != 'DONE' && status != 'WIP';
|
||||
}
|
||||
|
||||
// 2. 日期過濾邏輯 (比對 年、月、日)
|
||||
bool dateMatch = false;
|
||||
if (todo.endDate != null) {
|
||||
dateMatch = (todo.endDate!.year == selectedDate.year) &&
|
||||
(todo.endDate!.month == selectedDate.month) &&
|
||||
(todo.endDate!.day == selectedDate.day);
|
||||
}
|
||||
|
||||
return statusMatch && dateMatch;
|
||||
}).toList();
|
||||
|
||||
if (filteredTodos.isEmpty) {
|
||||
return Center(
|
||||
child: Text('此日期沒有「$_selectedFilter」狀態的任務。',
|
||||
style: const TextStyle(color: Colors.grey, fontSize: 16)),
|
||||
);
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async => _refreshTodos(),
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.fromLTRB(20, 10, 20, 80),
|
||||
itemCount: filteredTodos.length,
|
||||
itemBuilder: (context, index) => _buildTaskCard(filteredTodos[index]),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return const Center(child: Text('目前沒有待辦事項。工作很輕鬆!'));
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTaskCard(Todo item) {
|
||||
String displayStatus = 'To-do';
|
||||
Color chipColor = Colors.blueGrey;
|
||||
Color chipBg = Colors.blueGrey.withOpacity(0.1);
|
||||
|
||||
if (item.status?.toUpperCase() == 'DONE') {
|
||||
displayStatus = 'Done';
|
||||
chipColor = primaryPurple;
|
||||
chipBg = primaryPurple.withOpacity(0.1);
|
||||
} else if (item.status?.toUpperCase() == 'WIP') {
|
||||
displayStatus = 'In Progress';
|
||||
chipColor = Colors.orange;
|
||||
chipBg = Colors.orange.withOpacity(0.1);
|
||||
}
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.08), blurRadius: 15, offset: const Offset(0, 5))],
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => TodoDetail(todo: item))),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(item.className, style: const TextStyle(color: Colors.grey, fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
Icon(Icons.work_outline, color: primaryPurple.withOpacity(0.5), size: 18),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(item.taskName, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black87)),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.access_time_filled, color: Colors.grey, size: 16),
|
||||
const SizedBox(width: 6),
|
||||
Text(item.formattedEndDate, style: const TextStyle(color: Colors.grey, fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
],
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(color: chipBg, borderRadius: BorderRadius.circular(20)),
|
||||
child: Text(displayStatus, style: TextStyle(color: chipColor, fontSize: 12, fontWeight: FontWeight.w700)),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 移除了內部的圖示,但保留了 BottomAppBar 的挖空設計與高度
|
||||
Widget _buildBottomNav() {
|
||||
return const BottomAppBar(
|
||||
shape: CircularNotchedRectangle(),
|
||||
notchMargin: 8.0,
|
||||
color: Color(0xFFF0EFFF),
|
||||
elevation: 0,
|
||||
child: SizedBox(
|
||||
height: 60, // 維持底部導覽列的高度,留給 FAB 空間
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
1.先上傳 3張圖,在上傳原先開發的版本程式
|
||||
然後,呼叫 Gemini 3.0 下 prompt
|
||||
|
||||
請將原本開發好的 ux 改為新上傳的樣式,api 及欄位不變,只是參考 ux 修改
|
||||
|
||||
>> 就會產生新版程式
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Reference in New Issue
Block a user