add noti
This commit is contained in:
Phuoc Nguyen
@@ -0,0 +1,283 @@
|
||||
/// Notifications Page
|
||||
///
|
||||
/// Displays user notifications with category tabs (General/Orders).
|
||||
/// Features:
|
||||
/// - Tab navigation for filtering notifications
|
||||
/// - Unread notification indicators (blue left border)
|
||||
/// - Pull-to-refresh
|
||||
/// - Empty state when no notifications
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart' hide Notification;
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:worker/core/constants/ui_constants.dart';
|
||||
import 'package:worker/core/theme/colors.dart';
|
||||
import 'package:worker/features/notifications/domain/entities/notification.dart';
|
||||
import 'package:worker/features/notifications/presentation/providers/notifications_provider.dart';
|
||||
import 'package:worker/features/notifications/presentation/widgets/notification_card.dart';
|
||||
|
||||
/// Notifications Page
|
||||
///
|
||||
/// Main notifications screen accessible from bottom navigation.
|
||||
class NotificationsPage extends HookConsumerWidget {
|
||||
const NotificationsPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Use Flutter hooks for local state management
|
||||
final selectedCategory = useState<String>('general');
|
||||
final notificationsAsync = ref.watch(
|
||||
filteredNotificationsProvider(selectedCategory.value),
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF4F6F8),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Header
|
||||
_buildHeader(),
|
||||
|
||||
// Tabs
|
||||
_buildTabs(context, selectedCategory),
|
||||
|
||||
// Notifications List
|
||||
Expanded(
|
||||
child: notificationsAsync.when(
|
||||
data: (notifications) => _buildNotificationsList(
|
||||
context,
|
||||
ref,
|
||||
notifications,
|
||||
selectedCategory,
|
||||
),
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, stack) =>
|
||||
_buildErrorState(ref, selectedCategory),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build header
|
||||
Widget _buildHeader() {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: const Text(
|
||||
'Thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF212121),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build category tabs
|
||||
Widget _buildTabs(
|
||||
BuildContext context,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildTabButton(
|
||||
context,
|
||||
selectedCategory,
|
||||
label: 'Chung',
|
||||
category: 'general',
|
||||
isSelected: selectedCategory.value == 'general',
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Expanded(
|
||||
child: _buildTabButton(
|
||||
context,
|
||||
selectedCategory,
|
||||
label: 'Đơn hàng',
|
||||
category: 'order',
|
||||
isSelected: selectedCategory.value == 'order',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build tab button
|
||||
Widget _buildTabButton(
|
||||
BuildContext context,
|
||||
ValueNotifier<String> selectedCategory, {
|
||||
required String label,
|
||||
required String category,
|
||||
required bool isSelected,
|
||||
}) {
|
||||
return ElevatedButton(
|
||||
onPressed: () {
|
||||
selectedCategory.value = category;
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: isSelected ? AppColors.primaryBlue : Colors.white,
|
||||
foregroundColor: isSelected ? Colors.white : const Color(0xFF64748B),
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.button),
|
||||
side: BorderSide(
|
||||
color: isSelected ? AppColors.primaryBlue : const Color(0xFFE2E8F0),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build notifications list
|
||||
Widget _buildNotificationsList(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
List<Notification> notifications,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
if (notifications.isEmpty) {
|
||||
return _buildEmptyState();
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
ref.invalidate(filteredNotificationsProvider(selectedCategory.value));
|
||||
},
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
|
||||
itemCount: notifications.length,
|
||||
itemBuilder: (context, index) {
|
||||
final notification = notifications[index];
|
||||
return NotificationCard(
|
||||
notification: notification,
|
||||
onTap: () {
|
||||
// TODO: Handle notification tap (mark as read, navigate to related entity)
|
||||
_handleNotificationTap(context, ref, notification);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build empty state
|
||||
Widget _buildEmptyState() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.notifications_none,
|
||||
size: 64,
|
||||
color: AppColors.grey500.withValues(alpha: 0.5),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Không có thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Bạn chưa có thông báo nào',
|
||||
style: TextStyle(fontSize: 14, color: AppColors.grey500),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build error state
|
||||
Widget _buildErrorState(
|
||||
WidgetRef ref,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: AppColors.danger.withValues(alpha: 0.5),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Không thể tải thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton.icon(
|
||||
onPressed: () {
|
||||
ref.invalidate(
|
||||
filteredNotificationsProvider(selectedCategory.value),
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Thử lại'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.primaryBlue,
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Handle notification tap
|
||||
void _handleNotificationTap(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
Notification notification,
|
||||
) {
|
||||
// Mark as read if unread
|
||||
if (notification.isUnread) {
|
||||
// TODO: Implement mark as read
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Đã đánh dấu đã đọc'),
|
||||
duration: Duration(seconds: 1),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Navigate to related entity if exists
|
||||
// TODO: Implement navigation based on notification type
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user